CSS quan trọng là gì?

CSS quan trọng là tập hợp các khai báo CSS được sử dụng để hiển thị chế độ xem hiển thị. Chế độ xem hiển thị thường được gọi là 'nội dung trong màn hình đầu tiên'. Đó là một phần của trang web mà bạn có thể xem trong trình duyệt của mình mà không cần phải cuộn. Vì chế độ xem hiển thị là điều đầu tiên khách truy cập nhìn thấy nên bạn nên ưu tiên hiển thị chế độ xem hiển thị. CSS quan trọng có thể giúp bạn làm điều đó

Tại sao tôi nên sử dụng CSS quan trọng

Tóm lại. bởi vì nó nhanh hơn nhiều. Đường dẫn quan trọng [trong màn hình đầu tiên] css là một trong những kỹ thuật quan trọng và có tác động nhất hiện có để tối ưu hóa phân phối CSS. Do cách thức hoạt động của tất cả các trình duyệt hiện đại, tất cả các kiểu từ các tệp bên ngoài được coi là chặn hiển thị. Điều này có nghĩa là một trình duyệt sẽ không bắt đầu kết xuất [tạo cây kết xuất cụ thể] cho đến khi nó tải xuống tất cả các tệp css bên ngoài trong phần đầu của trang. Khi trình duyệt phải tải xuống 1 hoặc nhiều tệp CSS, một trang có thể dễ dàng chặn 100ms hoặc lâu hơn. Google PageSpeed ​​Insights đề xuất loại bỏ các tài nguyên chặn hiển thị để giúp trang của bạn tải nhanh hơn.
Một cách để tránh điều đó là sử dụng CSS quan trọng. CSS quan trọng là tập hợp CSS được yêu cầu để chỉ hiển thị phần hiển thị của trang. CSS quan trọng này thường được hiển thị nội tuyến, ở đầu trang. Do đó, trình duyệt không phải tải xuống 1 hoặc nhiều tệp CSS trước khi có thể bắt đầu hiển thị. Trong khi đó, khi trang được hiển thị, trình duyệt của bạn sẽ tải xuống các tệp CSS cuối cùng ở chế độ nền.

Làm cách nào để sử dụng trình tạo CSS quan trọng?

Trước hết, bạn cần tạo CSS Đường dẫn quan trọng cho trang web của mình. Chỉ cần nhập url trang của bạn và sau đó nhấn 'Tạo CSS quan trọng'. Sau vài giây, bạn sẽ thấy CSS được trích xuất
Sao chép CSS đó và đặt nó vào
The next step is to defer your original CSS. There are 3 methods of defering your CSS.

1. Tải trước CSS và trao đổi rel khi tải
2. Tải CSS với media=print và khi tải trao đổi phần tử phương tiện
3. Đặt các liên kết CSS ban đầu ở cuối trang của bạn

Bộ nhớ đệm CSS không quan trọng

CSS quan trọng cực kỳ nhanh đối với những khách truy cập lần đầu chưa lưu các tệp CSS của bạn trong bộ đệm của trình duyệt. Đối với khách truy cập quay lại thường không cần CSS quan trọng vì các tệp CSS có thể được tải từ bộ đệm của trình duyệt

Tôi có nên kết hợp các biểu định kiểu của mình không?

Sau khi triển khai CSS quan trọng, việc kết hợp các biểu định kiểu của bạn có nhanh hơn không? . Đôi khi việc kết hợp các biểu định kiểu của bạn sẽ nhanh hơn và đôi khi không. Điều này có liên quan đến đường dẫn hiển thị quan trọng. Nếu có nhiều hơn 5 tài nguyên có mức độ ưu tiên cao, bạn nên kết hợp một vài biểu định kiểu

Trình tạo CSS quan trọng hoạt động như thế nào?

Trình tạo CSS quan trọng hoạt động trên nền tảng NodeJs tùy chỉnh. Về cơ bản, chúng tôi truy cập trang web của bạn bằng trình duyệt web dựa trên chrome thực. Chúng tôi đánh giá trang web của bạn trên các chế độ xem khác nhau và xác định phần nào trong biểu định kiểu của bạn được sử dụng để hiển thị chế độ xem hiển thị [phần hiển thị trên trang của bạn]. Sau đó, chúng tôi dọn dẹp và thu nhỏ CSS cần thiết để hiển thị

Có một plugin wordpress cho bạn Trình tạo CSS quan trọng không?

có, có. Nó được gọi là plugin Core Web Vitals, được thiết kế đặc biệt để hoạt động cùng với trình trích xuất Đường dẫn quan trọng của chúng tôi

Phản hồi / trạng thái beta

Hiện tại trình tạo CSS quan trọng đang ở trạng thái beta. Điều đó có nghĩa là tôi vẫn đang thử nghiệm mọi lúc. Trình tạo CSS quan trọng không hoạt động với bạn? . thử lại sau 5 phút

Có hai khía cạnh chính ảnh hưởng đến tốc độ tải trang web. thời gian máy chủ phản hồi và gửi mã cũng như thời gian trình duyệt hiển thị mã đó thành những gì người dùng nhìn thấy. Cùng với nhau, các yếu tố này kết hợp để xác định thời gian tải trang "được cảm nhận". Điều này phản ánh tốc độ xuất hiện và tương tác của nội dung được tạo kiểu. Một kỹ thuật để giảm thiểu thời gian tải được cảm nhận là bao gồm CSS cần thiết để hiển thị đầu trang trong chính tài liệu HTML

Hiểu về HTML và CSS

Kỹ thuật này hoạt động bằng cách tận dụng cách HTML và CSS phối hợp với nhau để tạo một trang web, vì vậy hãy thảo luận về điều đó trước khi đi sâu vào triển khai kỹ thuật này

• HTML = ngữ nghĩa và nội dung có ý nghĩa, kiểu mặc định của trình duyệt rất cơ bản
• CSS = không có nội dung hữu ích, chỉ có phong cách

Tóm lại, CSS chỉ đơn giản là trang trí nội dung HTML để làm cho nó hấp dẫn về mặt hình ảnh. Khi người dùng yêu cầu một trang web, máy chủ sẽ phản hồi bằng tệp HTML, tệp này bao gồm URL để tải xuống tệp CSS riêng biệt. Sau đó, trình duyệt của họ sẽ tải CSS và áp dụng các quy tắc tạo kiểu cho nội dung HTML. Việc hiển thị trang web bị chặn cho đến khi các quy tắc CSS được tải và áp dụng, điều này làm tăng thời gian tải theo cảm nhận. Điều đó có nghĩa là, cả HTML và CSS phải tải hoàn toàn trước khi nội dung xuất hiện chính xác và trang có tính tương tác

Có thể đưa CSS "nội tuyến" vào tài liệu HTML, nhưng điều đó có thể làm tăng đáng kể kích thước tệp HTML và không tận dụng được bộ nhớ đệm trình duyệt của CSS. Tuy nhiên, bao gồm một số nội tuyến CSS trong tài liệu HTML có thể hữu ích và là thành phần chính của kỹ thuật này

CSS quan trọng

Đối với phạm vi của kỹ thuật này, chúng tôi sẽ đề cập đến CSS cần thiết để hiển thị phần trên cùng hiển thị ban đầu của trang là "CSS quan trọng". Điều này thường bao gồm tiêu đề trang web [logo, liên kết tiện ích, điều hướng, v.v. ], là toàn cầu cho trang web. Các quy tắc CSS được sử dụng cho tiêu đề thường bao gồm các kiểu cho một số phần quan trọng như bảng màu tổng thể, kiểu chữ, v.v.

Các công cụ và kỹ thuật

Bằng cách bao gồm nội tuyến CSS quan trọng, chúng tôi có thể giảm đáng kể thời gian tải được cảm nhận. Loại bỏ bước tải các tệp CSS riêng biệt cho phép trình duyệt phân tích cú pháp CSS đồng thời với HTML, hiển thị trang và làm cho nó tương tác không lâu sau khi tệp HTML được trả về

Chỉ với CSS quan trọng được áp dụng, phần đầu của trang được tạo kiểu chính xác, nhưng các quy tắc còn lại là cần thiết để tạo kiểu chính xác cho phần còn lại của nội dung. Để tải và áp dụng phần còn lại của CSS mà không chặn hiển thị trang, nó cần được tải không đồng bộ

Việc biến cả ba phần của kỹ thuật này thành một phần của quy trình xây dựng tự động cho phép nó được triển khai trên thực tế. Quy trình Gulp hiện tại của chúng tôi đã biên dịch và rút gọn CSS, vì vậy chúng tôi đã sử dụng gulp-penthouse để tự động tạo CSS quan trọng. Bố cục gốc của chúng tôi bao gồm CSS nội tuyến quan trọng đó và LoadCSS polyfill của Filament Group cho phép tải không đồng bộ CSS còn lại trên các trình duyệt.

47% người tiêu dùng mong đợi một trang web tải trong 2 giây hoặc ít hơn. Việc giảm thời gian tải được cảm nhận giữa máy chủ và trình duyệt có thể đơn giản bằng cách bao gồm CSS cần thiết để hiển thị ở đầu tài liệu HTML. Một số cách mà bạn đã giảm thời gian tải trên trang web của mình là gì? .

Nick Melville

Nhà phát triển giao diện người dùng

Các bài viết khác của Nick Melville

• Thu thập các yêu cầu trong một thế giới linh hoạt
• 4 quy tắc chính để thiết kế web đáp ứng tuyệt vời
• Màn hình bộ xương. Cung cấp nội dung cho nội dung của bạn

Có câu hỏi hoặc nhận xét về bài đăng này?