Loại bỏ JavaScript và CSS chặn hiển thị trong nội dung trong màn hình đầu tiên (Phần 2)

Phần 2: Optimize CSS Delivery

Tổng quan:

Trước khi trình duyệt render một page nó sẽ xây dựng môt DOM tree bằng cách phân tích HTML. Trong quá trình này khi gặp bất cứ một file stylesheets gọi vào nào nó phải dừng lại và tải xong file stylesheets đó và xử lý trước khi tiếp tục phân tích

Các cách Optimize CSS Delivery:

Nhiều người loại bỏ cảnh báo này bằng cách đưa toàn bộ file css gọi từ bên ngoài xuống cuối tài liệu HMTL, tuy nhiên nếu làm cách này bạn sẽ thấy khi vào trang sẽ mất khoảng 0,5 đến 2 giây (tùy tốc độ server, mạng) website chỉ hiện thị HMTL không có stylesheets.
Thế nên cách làm tối ưu là nếu các file css gọi từ bên ngoài có dữ liệu nhỏ bạn có thể trèn trực tiếp vào tài liệu HTML, tuy nhiên nếu file css gọi từ bên ngoài lớn mà bạn làm theo cách này rất có thể PageSpeed Insights sẽ xuất hiện một cảnh báo mới là Ưu tiên các nội dung hiển thị ( Prioritize Visible Content [https://developers.google.com/speed/docs/insights/PrioritizeVisibleContent]). Trong trường hợp file css lớn bạn phải xác định đoạn css nào có thể chèn trực tiếp vào trang để cho màn hình đầu tiên người dùng tải trang web có luôn stylesheets, các đoạn stylesheets cho màn hình cuộn xuống có thể đưa xuống cuối của HMTL
– Ví dụ
Ví dụ tài liệu HTML thế này:

Giả sử nội dung của small.css như sau:

Ta có thể viết lại

 

Một chú ý nữa là nên sử dụng CSS “media types” và “media queries” ví dụ:

như ví dụ trên ta thấy file style.css sẽ đươc load ở mọi trường hợp, file print.css chỉ được load ở màn hình in trang, file orther.css chỉ load khi màn hình lớn hơn 40em

Xem thêm >> Loại bỏ JavaScript và CSS chặn hiển thị trong nội dung trong màn hình đầu tiên (Phần 1)

3 thoughts on “Loại bỏ JavaScript và CSS chặn hiển thị trong nội dung trong màn hình đầu tiên (Phần 2)

Trả lời

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *