CSS được tải như thế nào?

Dưới đây, bạn sẽ thấy cách chúng tôi sử dụng tính năng “media=’print” với sự kiện onload cho các tệp CSS của chúng tôi có nghĩa là trong báo cáo Lighthouse

Chúng tôi đã kiểm tra tất cả các tệp CSS để tải không đồng bộ. Ngoài ra, chỉ tải không đồng bộ các tệp CSS quan trọng nhất mới có thể cải thiện tốc độ trang nhiều hơn vì nó sẽ không tạo ra nút cổ chai CPU cho Chủ đề chính của trình duyệt và nó cũng sẽ ưu tiên tài nguyên CSS quan trọng nhất. Ở đây, chúng tôi đã chọn tải tất cả các tệp CSS không đồng bộ vì tất cả chúng đều chạm vào phần trên màn hình đầu tiên với các hiệu ứng kiểu. Bạn sẽ thấy kết quả bên dưới

Tệp CSS cuối cùng vẫn đang được tải đồng bộ vì nó không thể hoàn tất trong quá trình tải 6 tệp CSS khác nhau ở giai đoạn tải không đồng bộ. Do đó, việc ưu tiên các tệp CSS nào sẽ được tải không đồng bộ là rất quan trọng

Cách kiểm tra và xác định tệp CSS nào sẽ được tải dưới dạng không đồng bộ?

Để kiểm tra và kiểm tra xem tệp CSS nào có thể được tải không đồng bộ hoặc tệp CSS nào đang được tải đồng bộ vào lúc này, bạn có thể sử dụng các phương pháp bên dưới

• Kiểm tra tập tin CSS nào đang ảnh hưởng đến phân đoạn nào của trang web
• Kiểm tra Mã nguồn HTML để xem các Tệp CSS đang được tải như thế nào
• Thực hiện Kiểm tra Ngọn hải đăng hoặc sử dụng GTMetrix, Pingdom, Speedcurve
• Thực hiện các thử nghiệm để xem các thay đổi của trang web về mặt hiệu suất trong khi tải các tệp CSS không đồng bộ

Tôi khuyên bạn nên thực hiện kiểm tra thủ công, sau đó sử dụng Lighthouse hoặc các công cụ kiểm tra tốc độ trang khác để xem các Tệp CSS đang được tải như thế nào

Thuộc tính “Print” trong “Media” nghĩa là gì?

Giá trị in cho thuộc tính phương tiện có nghĩa là nguồn liên quan chỉ dành cho phương tiện dựa trên bản in. Do đó, tệp nguồn cho phương tiện dựa trên bản in chỉ có thể được sử dụng cho phần tử trang web có thể in được. Nếu bạn khai báo rằng tệp CSS chỉ liên quan đến phương tiện có thể in được, thì trình duyệt không thể sử dụng tệp đó cho phần còn lại của trang web, do đó, việc sử dụng giá trị “print” trong thuộc tính phương tiện sẽ không cần thiết trừ khi bạn sử dụng sự kiện onload để chuyển đổi tệp CSS. . Giá trị "Tất cả" trong thuộc tính "phương tiện" có nghĩa là tệp CSS có liên quan là tệp hợp lệ cho tất cả các loại phương tiện trong trang web, do đó nó có thể được sử dụng cho tất cả các trang web sau khi được tải không đồng bộ

Tại sao bạn không nên sử dụng các loại phương tiện giả để Tải CSS dưới dạng Async?

Để tải các tệp CSS không đồng bộ, một số nhà phát triển cố gắng sử dụng các loại phương tiện "giả". Điều đó có nghĩa là họ cố gắng sử dụng các loại phương tiện "không tồn tại" hoặc "không hợp lệ" để làm cho quá trình tải tệp nhanh hơn

Một số trình duyệt từ chối tải lên các tệp có chứa loại phương tiện giả mạo hoặc để chúng kết thúc. Lý do sử dụng các thuộc tính phương tiện để tải lên các Tệp CSS quan trọng một cách không đồng bộ là để cho phép người dùng xem trang web về các hiệu ứng kiểu được yêu cầu trước đó. Các tệp CSS được sử dụng với loại phương tiện giả mạo có nguy cơ hoàn toàn không tải và có thể làm chậm tốc độ tải vì trình duyệt có thể coi chúng là lỗi mã. Ngoài ra, các tài nguyên có loại phương tiện giả mạo có thể không được sử dụng bởi Trình thu thập thông tin của Công cụ Tìm kiếm, chẳng hạn như Googlebot

Có thể "tải trước" Trợ giúp gợi ý trình duyệt để tải CSS không đồng bộ không?

Tính năng gợi ý trình duyệt được gọi là Tải trước cho trình duyệt biết tài nguyên nào sẽ tải trước để tạo trang web. Do đó, các tài nguyên quan trọng hơn được tải sớm hơn, cho phép người dùng hưởng lợi từ trang web sớm hơn. Tuy nhiên, kể từ Firefox 59, tính năng tải trước không được hỗ trợ cho Firefox. Do đó, hiện tại không thể sử dụng tính năng tải trước cho Firefox để tải CSS không đồng bộ. Tính năng tải trước được Chrome, Opera và Safari hỗ trợ có thể được sử dụng để tải lên các tệp CSS không đồng bộ như sau

Chúng tôi đã sử dụng gợi ý trình duyệt tải trước để tìm nạp “kiểu. css” với mức ưu tiên cao nhất có thể, sau khi tải không đồng bộ. Chúng tôi đã chuyển giá trị thuộc tính “rel” của nó thành “bản định kiểu” một lần nữa thông qua sự kiện “onload” để trình duyệt có thể sử dụng nó làm nguồn cho các kiểu của trang web

Làm cách nào để tải CSS không đồng bộ trong Chrome và Firefox theo cách tốt nhất có thể?

Để tải tệp CSS không đồng bộ trong cả Chrome và Firefox, chúng tôi có thể sử dụng gợi ý trình duyệt “tải trước” và thuộc tính “media=’print'” cùng với tính năng sự kiện tải theo cách có thứ tự. bạn có thể sử dụng các mã bên dưới để tải Tệp CSS mà không có các tính năng tài nguyên chặn hiển thị trong Firefox và Chrome

Trong ví dụ trên, trước tiên chúng tôi đã sử dụng tính năng tải trước cho các trình duyệt hỗ trợ nó, sau đó chúng tôi đã sử dụng thuộc tính “phương tiện” để tải tệp CSS không đồng bộ. Do đó, nếu trình duyệt hỗ trợ tính năng tải trước, nó sẽ chỉ sử dụng dòng mã đầu tiên, nếu nó không hỗ trợ gợi ý trình duyệt “tải trước”, thì nó sẽ tìm nạp tệp CSS có thuộc tính phương tiện “in” và tải nó

Làm cách nào để tải tệp CSS mà không hiển thị hiệu ứng chặn tài nguyên bằng Javascript?

Có thể tải lên Tệp CSS không đồng bộ với Javascript. Đối với điều này, tệp CSS có liên quan được thêm vào một biến và được chèn vào cuối phần đầu với sự trợ giúp của Javascript. Vì Javascript có thể được chạy dưới dạng “không đồng bộ”, nên có thể tải Tệp CSS bằng Javascript không đồng bộ. Để tải các tệp CSS không đồng bộ mà không có bất kỳ loại hiệu ứng tài nguyên chặn kết xuất nào, bạn có thể sử dụng ví dụ mã bên dưới

var styleCSS= document.createElement("link");
styleCSS.rel = "stylesheet";
styleCSS.href = "style.css";
document.head.insertBefore(styleCSS, document.head.childNodes[document.head.childNodes.length - 1].nextSibling);

Bạn có thể xem giải thích về khối mã trên từng dòng

• Trong khối mã ở trên, chúng tôi đã tạo một biến lưu trữ phần tử liên kết mà chúng tôi đã tạo thông qua “tài liệu. phương thức createElement()”
• Chúng tôi đã sử dụng phương thức “rel” để chỉ định biểu định kiểu làm giá trị “rel” của chúng tôi
• Chúng tôi đã sử dụng phương pháp “href” để chỉ định URL và phần mở rộng tệp CSS của bạn
• Chúng tôi đã chèn Tệp CSS đang được lưu trữ trong biến “styleCSS” với “biểu định kiểu” và “kiểu. css” cho các thuộc tính “rel” và “href” thông qua “document. cái đầu. phương thức chènB Before()”
• Chúng tôi đã chèn phần tử liên kết CSS vào cuối phần đầu của Tài liệu HTML

Để tải các tệp CSS không đồng bộ bằng Javascript, có thể sử dụng khối mã ở trên

Tại sao Tải tệp CSS không đồng bộ qua Javascript có thể có tác dụng phụ đối với Hiệu suất web?

Nhờ có Javascript, chúng ta có thể tải các tệp CSS không đồng bộ nhưng vì khối mã Javascript này sẽ hoạt động theo nguyên tắc “kết xuất phía máy khách” nên sẽ giảm hiệu quả. Các trình duyệt sẽ ngừng hiển thị trang web khi gặp các thẻ script nội bộ này, sau đó chúng sẽ hiển thị mã javascript để tải CSS không đồng bộ. Do đó, tổng thời gian hiển thị của trang web có thể dài hơn mức cần thiết

Ngoài ra, việc thay đổi kiểu trang web và tình huống cuối cùng thông qua Javascript không được khuyến nghị cho SEO. Kết xuất phía máy khách của các trang web có thể khiến Googlebot và các trình thu thập dữ liệu của Công cụ tìm kiếm khác gặp khó khăn khi xem phiên bản cuối cùng của trang web trong khi sử dụng tài nguyên thu thập dữ liệu và hiển thị. Googlebot và Bingbot có thể kết xuất javascript nhưng chúng không sử dụng kết xuất cho mọi quá trình thu thập dữ liệu, do đó, đôi khi chúng có thể bỏ lỡ các hiệu ứng của tệp CSS đang được tải qua kết xuất phía Máy khách cho các trang web và điều này có thể ảnh hưởng đến chất lượng

Tải các tệp CSS quan trọng qua Javascript cũng có thể tạo thứ tự tải tài nguyên không được tối ưu hóa do tệp CSS liên quan có thể được đọc ở cuối phần đầu, có thể một số tài nguyên khác đã được tải xuống. Đó là lý do tại sao sử dụng các phương pháp "tải trước" hoặc "media='print'" có thể tốt hơn cho hiệu suất web cũng như hiệu quả thu thập dữ liệu và ngân sách

LoadCSS là gì. js và cách sử dụng nó cho CSS không đồng bộ?

TảiCSS. Thư viện JS là thư viện Javascript được tạo cho Tệp CSS được tải không đồng bộ. Để các Tệp CSS có liên quan được tải không đồng bộ, “LoadCSS. js” trước tiên phải được tải lên trang web. Nó có thể được tải bên ngoài hoặc bên trong phần đầu. Có thể tự chèn CSS vào HTML Node một cách không đồng bộ với hàm “loadCSS()”. Dưới đây là một ví dụ

loadCSS("stylesheet.css");

Trong ví dụ mã ở trên, nếu loadCSS. js đang được tải xuống máy tính của bạn, nó sẽ giúp trình duyệt tải xuống tệp CSS một cách không đồng bộ nhưng vì nó đang sử dụng Javascript phía máy khách để chèn tệp biểu định kiểu vào HTML DOM nên nó vẫn không phải là lựa chọn tốt nhất. Trong phiên bản mới nhất của “loadCSS. js”, bạn có thể tải xuống tệp CSS không đồng bộ như bên dưới

Trong ví dụ mã ở trên, bạn có thể sử dụng “loadCSS. js” trong phần đầu dưới dạng tập lệnh nội bộ, điều này sẽ đảm bảo rằng nếu trình duyệt không hỗ trợ “tải trước”, thì nó vẫn được tải xuống không đồng bộ. Tuy nhiên, sử dụng thuộc tính “media=’print'” với sự kiện onload là tùy chọn tốt nhất để tải CSS không đồng bộ nhằm ngăn chặn các sự cố CSS chặn hiển thị nhằm cải thiện hiệu suất trang web

Tại sao bạn nên sử dụng thẻ NoScript khi tải CSS không đồng bộ?

Thẻ Noscript đảm bảo rằng nếu trình duyệt không hỗ trợ “javascript” thì nó vẫn có thể hiển thị cho người dùng nội dung cần thiết. Để ngăn người dùng có trình duyệt cũ xem trang web không có nội dung thực tế, việc sử dụng thẻ NoScript làm phương án dự phòng cho Async CSS là rất quan trọng. Bạn có thể xem một ví dụ dưới đây

• Trong ví dụ trên, chúng tôi đã sử dụng thuộc tính tải trước cho trình duyệt Chrome, Safari và Opera để tải tệp CSS không đồng bộ
• Trong dòng thứ hai, chúng tôi đã sử dụng tùy chọn “media=print” cho Firefox vì nó không sử dụng gợi ý trình duyệt “preload”
• Trong dòng thứ ba, chúng tôi đã sử dụng “thẻ noscript” với cùng một biểu định kiểu cho các trình duyệt không hỗ trợ javascript. Sự kiện tải lên là một sự kiện dựa trên javascript, vì vậy nếu trình duyệt không sử dụng hoặc hỗ trợ javascript, nó có thể sử dụng tệp biểu định kiểu trong “thẻ NoScript”

Suy nghĩ cuối cùng về Tải CSS không đồng bộ và SEO toàn diện

Tải lên tệp CSS không đồng bộ cho phép người dùng xem và sử dụng nội dung trang web nhanh hơn trong khi trang web đang tải. Tải tệp Javascript bằng Thuộc tính trì hoãn sau Sự kiện DOMContentLoaded và đảm bảo tải tệp Javascript không đồng bộ bằng “thuộc tính Async” cũng là để cải thiện trải nghiệm người dùng trong quá trình tải trang web. Điều quan trọng là các phần tử của trang web trong Largest Contentful Paint, chứa phần quan trọng nhất của trang web nói riêng, có thể được tải và sử dụng nhanh hơn cho người dùng. Do đó, điều quan trọng là cung cấp tư vấn cần thiết để tải lên tệp CSS không đồng bộ trong phạm vi SEO toàn diện, Dự án SEO

Ưu tiên của SEO toàn diện là cải thiện trải nghiệm người dùng về cả nội dung và chức năng khi tải trang web và sử dụng trang web. Hướng dẫn tải tệp CSS không đồng bộ sẽ tiếp tục được cập nhật theo thời gian

Koray Tuğberk GÜBÜR

Chủ sở hữu và Người sáng lập tại SEO toàn diện & Kỹ thuật số

Koray Tuğberk GÜBÜR là Giám đốc điều hành và Người sáng lập của Holistic SEO & Digital, nơi ông cung cấp các dịch vụ Tư vấn SEO, Phát triển Web, Khoa học Dữ liệu, Thiết kế Web và Tối ưu hóa Công cụ Tìm kiếm với vai trò lãnh đạo chiến lược cho các Dự án Khách hàng SEO của cơ quan. Koray Tuğberk GÜBÜR thường xuyên thực hiện Kiểm tra SEO A/B để hiểu Google, Microsoft Bing và Yandex cũng như thuật toán của các công cụ tìm kiếm và chương trình nghị sự nội bộ. Koray sử dụng Khoa học dữ liệu để hiểu các đường cong nhấp chuột tùy chỉnh và cây quyết định của thuật toán công cụ tìm kiếm nhỏ. Tuğberk đã sử dụng nhiều trang web để viết các Case Study SEO khác nhau. Ông đã xuất bản hơn 10 Nghiên cứu điển hình về SEO với hơn 20 trang web để giải thích về các công cụ tìm kiếm. Koray Tuğberk bắt đầu Sự nghiệp SEO của mình vào năm 2015 trong ngành sòng bạc và chuyển sang ngành SEO mũ trắng. Koray đã làm việc với hơn 300 công ty cho các Dự án SEO của họ kể từ năm 2015. Koray đã sử dụng SEO để cải thiện trải nghiệm người dùng và tỷ lệ chuyển đổi cùng với nhận thức về thương hiệu của các doanh nghiệp trực tuyến từ các ngành dọc khác nhau như bán lẻ, thương mại điện tử, liên kết và trang web b2b hoặc b2c. Anh ấy thích kiểm tra các trang web, thuật toán và công cụ tìm kiếm

CSS được tải như thế nào?

Tệp CSS sẽ được tải xuống khi tệp HTML đang phân tích cú pháp . DOM (mô hình đối tượng tài liệu) sẽ được tạo bởi trình duyệt. DOM có nghĩa là tham chiếu của tất cả các phần tử trong tệp HTML.

Làm thế nào để một tập tin CSS bắt đầu?

Mỗi quy tắc CSS bắt đầu bằng một bộ chọn — hoặc một danh sách các bộ chọn — để cho trình duyệt biết phần tử hoặc các phần tử mà quy tắc sẽ áp dụng cho.

CSS thực sự hoạt động như thế nào?

Nó chuyển đổi HTML thành DOM (Mô hình đối tượng tài liệu) . DOM đại diện cho tài liệu trong bộ nhớ của máy tính. DOM được giải thích chi tiết hơn trong phần tiếp theo. Sau đó, trình duyệt sẽ tìm nạp hầu hết các tài nguyên được liên kết bởi tài liệu HTML, chẳng hạn như hình ảnh, video được nhúng và thậm chí cả CSS được liên kết.

Làm cách nào để tải CSS trước khi tải trang?

Vì trình duyệt phải đợi tất cả CSS được tải nên điều quan trọng là phải cung cấp CSS càng nhanh càng tốt. Một cách rất đơn giản để đảm bảo trình duyệt nhận CSS sớm nhất có thể là đưa CSS vào phần HEAD của tài liệu HTML của bạn . Bằng cách này, trình duyệt sẽ bắt đầu tải CSS ngay khi có thể.