Đường dẫn hiển thị quan trọng là các bước có liên quan cho đến khi trang web bắt đầu kết xuất trong trình duyệt. Để hiển thị trang, trình duyệt cần có tài liệu HTML cũng như tất cả các tài nguyên quan trọng cần thiết để hiển thị tài liệu đó.
Việc tải tài liệu HTML lên trình duyệt đã được đề cập trong mô-đun Những điều cần cân nhắc chung về hiệu suất HTML trước đó. Tuy nhiên, trong mô-đun này, chúng ta sẽ xem xét thêm những việc trình duyệt làm sau khi tải tài liệu HTML xuống để hiển thị trang.
Kết xuất tăng dần
Web được phân phối theo tự nhiên. Không giống như các ứng dụng gốc được cài đặt trước khi sử dụng, trình duyệt không thể phụ thuộc vào những trang web có tất cả tài nguyên cần thiết để hiển thị trang. Do đó, trình duyệt rất hiệu quả trong việc kết xuất các trang dần dần. Ứng dụng gốc thường có một giai đoạn cài đặt, sau đó là một giai đoạn chạy. Tuy nhiên, đối với trang web và ứng dụng web, ranh giới giữa hai giai đoạn này ít khác biệt hơn nhiều, đồng thời các trình duyệt đã được thiết kế dành riêng cho điều đó.
Sau khi có tài nguyên để hiển thị một trang, trình duyệt thường sẽ bắt đầu làm việc đó. Do đó, lựa chọn sẽ xuất hiện khoảng thời điểm hiển thị: khi nào là quá sớm?
Nếu trình duyệt hiển thị sớm nhất có thể khi chỉ có một số HTML (nhưng trước khi có CSS hoặc JavaScript cần thiết) thì trang trong giây lát sẽ bị hỏng và có sự thay đổi đáng kể trong lần kết xuất cuối cùng. Đây là trải nghiệm tệ hơn so với ban đầu trình bày màn hình trống trong một thời gian cho đến khi trình duyệt có nhiều tài nguyên cần thiết hơn để kết xuất ban đầu nhằm mang lại trải nghiệm người dùng tốt hơn.
Mặt khác, nếu trình duyệt chờ tất cả các tài nguyên có sẵn thay vì thực hiện bất kỳ quá trình kết xuất tuần tự nào, thì người dùng sẽ phải chờ trong một thời gian dài; thường là không cần thiết nếu trang có thể sử dụng được sớm hơn nhiều.
Trình duyệt cần biết số lượng tài nguyên tối thiểu sẽ chờ đợi để tránh hiển thị trải nghiệm rõ ràng bị hỏng. Mặt khác, trình duyệt cũng không nên đợi lâu hơn mức cần thiết trước khi hiển thị cho người dùng một số nội dung. Trình tự các bước mà trình duyệt thực hiện trước khi thực hiện lượt kết xuất ban đầu đó được gọi là đường dẫn kết xuất quan trọng.
Việc hiểu đường dẫn hiển thị quan trọng có thể giúp cải thiện hiệu suất web bằng cách đảm bảo bạn không chặn hiển thị trang ban đầu nhiều hơn mức cần thiết. Tuy nhiên, đồng thời, điều quan trọng là không cho phép kết xuất quá sớm bằng cách xoá các tài nguyên cần thiết cho kết xuất ban đầu đó khỏi đường dẫn kết xuất quan trọng.
Đường dẫn kết xuất (quan trọng)
Đường dẫn kết xuất bao gồm các bước sau:
- Xây dựng Mô hình đối tượng tài liệu (DOM) từ HTML.
- Xây dựng Mô hình đối tượng CSS (CSSOM) từ CSS.
- Áp dụng bất kỳ JavaScript nào làm thay đổi DOM hoặc CSSOM.
- Xây dựng cây hiển thị từ DOM và CSSOM.
- Thực hiện các thao tác định kiểu và bố cục trên trang để xem phần tử nào phù hợp ở vị trí nào.
- Vẽ các pixel của các phần tử trong bộ nhớ.
- Kết hợp các pixel nếu có bất kỳ pixel nào trùng nhau.
- Vẽ tất cả các pixel thu được lên màn hình về mặt vật lý.
Chỉ sau khi hoàn tất tất cả các bước này, người dùng mới thấy nội dung trên màn hình.
Quá trình kết xuất này diễn ra nhiều lần. Quá trình kết xuất ban đầu sẽ gọi quá trình này, nhưng khi có thêm nhiều tài nguyên ảnh hưởng đến quá trình kết xuất trang, trình duyệt sẽ chạy lại quy trình này (hoặc có thể chỉ là một phần của quy trình) để cập nhật những gì người dùng nhìn thấy. Đường dẫn hiển thị quan trọng tập trung vào quy trình đã nêu trước đó cho lượt kết xuất ban đầu, đồng thời phụ thuộc vào các tài nguyên quan trọng cần thiết cho quy trình đó.
Những tài nguyên nào có trên đường dẫn hiển thị quan trọng?
Trình duyệt cần đợi một số tài nguyên quan trọng tải xuống trước khi có thể hoàn tất lượt kết xuất ban đầu. Những nguồn hỗ trợ đó bao gồm:
- Một phần của HTML.
- CSS chặn hiển thị trong phần tử
<head>. - Chặn hiển thị JavaScript trong phần tử
<head>.
Điểm quan trọng là trình duyệt xử lý HTML theo cách truyền trực tuyến. Ngay khi trình duyệt nhận được bất kỳ phần nào của HTML của một trang, trình duyệt sẽ bắt đầu xử lý phần đó. Sau đó, trình duyệt có thể quyết định hiển thị trang đúng cách trước khi nhận được phần còn lại của HTML của trang.
Quan trọng là đối với lượt kết xuất ban đầu, trình duyệt thường không chờ:
- Tất cả HTML.
- Phông chữ.
- Hình ảnh.
- JavaScript không hiển thị chặn bên ngoài phần tử
<head>(ví dụ: các phần tử<script>đặt ở cuối HTML). - CSS không chặn kết xuất bên ngoài phần tử
<head>hoặc CSS có giá trị thuộc tínhmediakhông áp dụng cho khung nhìn hiện tại.
Phông chữ và hình ảnh thường được trình duyệt coi là nội dung cần được điền vào trong quá trình hiển thị lại trang tiếp theo, vì vậy, chúng không cần giữ lại quá trình kết xuất ban đầu. Tuy nhiên, điều này có thể có nghĩa là các khu vực không gian trống sẽ được để lại trong lần kết xuất ban đầu trong khi văn bản bị ẩn khi đang chờ phông chữ, hoặc cho đến khi có hình ảnh. Tệ hơn nữa là khi không có đủ không gian cho một số loại nội dung (cụ thể là khi kích thước hình ảnh không được cung cấp trong HTML), bố cục của trang có thể thay đổi khi nội dung này tải sau đó. Khía cạnh này của trải nghiệm người dùng được đo lường bằng chỉ số Điểm số tổng hợp về mức thay đổi bố cục (CLS).
Phần tử <head> là thành phần quan trọng để xử lý đường dẫn kết xuất quan trọng. Phần tiếp theo sẽ trình bày chi tiết về vấn đề này một cách chi tiết. Việc tối ưu hoá nội dung của phần tử <head> là một khía cạnh quan trọng đối với hiệu suất web. Tuy nhiên, để hiểu hiện tại về đường dẫn hiển thị quan trọng, bạn chỉ cần biết rằng phần tử <head> chứa siêu dữ liệu về trang và tài nguyên trên trang, nhưng không có nội dung thực tế nào người dùng có thể nhìn thấy. Nội dung hiển thị có trong phần tử <body> theo phần tử <head>. Trước khi có thể kết xuất bất kỳ nội dung nào, trình duyệt cần cả nội dung cần kết xuất cũng như siêu dữ liệu về cách hiển thị.
Tuy nhiên, không phải mọi tài nguyên được tham chiếu trong phần tử <head> đều thực sự cần thiết cho lần hiển thị trang ban đầu, vì vậy trình duyệt sẽ chỉ đợi những tài nguyên đó. Để xác định tài nguyên nào nằm trong đường dẫn hiển thị quan trọng, bạn cần tìm hiểu chặn hiển thị và chặn trình phân tích cú pháp CSS và JavaScript.
Tài nguyên chặn hiển thị
Một số tài nguyên được coi là quan trọng đến mức trình duyệt tạm dừng hiển thị trang cho đến khi xử lý xong. Theo mặc định, CSS nằm trong danh mục này.
Khi trình duyệt thấy CSS – cho dù là CSS cùng dòng trong phần tử <style> hay tài nguyên được tham chiếu bên ngoài do phần tử <link rel=stylesheet href="..."> chỉ định – trình duyệt sẽ tránh hiển thị thêm bất kỳ nội dung nào cho đến khi hoàn tất quá trình tải xuống và xử lý CSS đó.
Việc tài nguyên chặn kết xuất không nhất thiết có nghĩa là tài nguyên đó ngăn trình duyệt thực hiện bất kỳ thao tác nào khác. Các trình duyệt sẽ cố gắng hoạt động hiệu quả nhất có thể, vì vậy, khi thấy cần tải tài nguyên CSS xuống, trình duyệt sẽ yêu cầu và tạm dừng hiển thị, nhưng vẫn sẽ tiếp tục xử lý phần còn lại của HTML và tìm tác vụ khác trong thời gian chờ đợi.
Các tài nguyên chặn hiển thị, chẳng hạn như CSS, dùng để chặn tất cả hoạt động kết xuất trang khi người dùng phát hiện thấy các tài nguyên đó. Điều này có nghĩa là việc một số CSS có đang chặn hiển thị hay không phụ thuộc vào việc trình duyệt có phát hiện thấy CSS đó hay không. Một số trình duyệt (ban đầu là Firefox và bây giờ là cả Chrome) chỉ chặn hiển thị nội dung bên dưới tài nguyên chặn hiển thị. Điều này có nghĩa là đối với đường dẫn chặn hiển thị quan trọng, chúng ta thường quan tâm đến các tài nguyên chặn hiển thị trong <head>, vì các tài nguyên này chặn hiệu quả quá trình kết xuất toàn bộ trang.
Một điểm cải tiến mới hơn là thuộc tính blocking=render đã được thêm vào Chrome 105. Điều này cho phép nhà phát triển đánh dấu rõ ràng một phần tử <link>, <script> hoặc <style> là chặn hiển thị cho đến khi phần tử này được xử lý, nhưng vẫn cho phép trình phân tích cú pháp tiếp tục xử lý tài liệu trong thời gian chờ đợi.
Tài nguyên chặn trình phân tích cú pháp
Tài nguyên chặn trình phân tích cú pháp là những tài nguyên ngăn trình duyệt tìm việc cần làm khác bằng cách tiếp tục phân tích cú pháp HTML. Theo mặc định, JavaScript là trình phân tích cú pháp chặn (trừ phi được đánh dấu cụ thể là không đồng bộ hoặc bị trì hoãn), vì JavaScript có thể thay đổi DOM hoặc CSSOM khi thực thi. Do đó, trình duyệt không thể tiếp tục xử lý các tài nguyên khác cho đến khi biết đầy đủ tác động của JavaScript được yêu cầu đối với HTML của trang. Do đó, JavaScript đồng bộ sẽ chặn trình phân tích cú pháp.
Các tài nguyên chặn trình phân tích cú pháp cũng giúp chặn hiển thị một cách hiệu quả. Vì không thể tiếp tục xử lý tài nguyên chặn phân tích cú pháp cho đến khi tài nguyên đó được xử lý đầy đủ, nên trình phân tích cú pháp sẽ không thể truy cập và hiển thị nội dung sau đó. Trình duyệt có thể kết xuất mọi HTML đã nhận được trong khi chờ, nhưng trong trường hợp đường dẫn hiển thị quan trọng, mọi tài nguyên chặn trình phân tích cú pháp trong <head> đều có nghĩa là tất cả nội dung trang đều bị chặn hiển thị.
Việc chặn trình phân tích cú pháp có thể gây ra chi phí hiệu suất rất lớn, nhiều hơn so với việc chỉ chặn kết xuất. Vì lý do này, các trình duyệt sẽ cố gắng giảm chi phí này bằng cách sử dụng một trình phân tích cú pháp HTML phụ được gọi là trình quét tải trước để tải xuống tài nguyên sắp tới trong khi trình phân tích cú pháp HTML chính bị chặn. Mặc dù không hiệu quả như khi phân tích cú pháp HTML, nhưng ít nhất nó cho phép các hàm nối mạng trong trình duyệt hoạt động trước trình phân tích cú pháp bị chặn, nghĩa là ít có khả năng bị chặn lần nữa trong tương lai.
Xác định tài nguyên chặn
Nhiều công cụ kiểm tra hiệu suất xác định các tài nguyên chặn trình phân tích cú pháp và hiển thị. WebPageTest đánh dấu các tài nguyên chặn hiển thị bằng một vòng tròn màu cam ở bên trái URL của tài nguyên:
Bạn cần tải xuống và xử lý tất cả các tài nguyên chặn hiển thị trước khi có thể bắt đầu kết xuất. Điều này được ghi chú bằng đường đồng nhất màu xanh lục đậm trong thác nước.
Lighthouse cũng làm nổi bật các tài nguyên chặn hiển thị, nhưng theo cách tinh tế hơn và chỉ khi tài nguyên đó thực sự trì hoãn việc kết xuất trang. Điều này có thể giúp tránh tình trạng cảnh báo nhầm khi bạn đang giảm thiểu tình trạng chặn hiển thị. Chạy cùng một URL trang như hình minh hoạ WebPageTest trước đó thông qua Lighthouse chỉ xác định một trong các biểu định kiểu là tài nguyên chặn hiển thị.
Tối ưu hoá đường dẫn hiển thị quan trọng
Để tối ưu hoá đường dẫn hiển thị quan trọng, bạn cần giảm thời gian nhận HTML (được biểu thị bằng chỉ số Thời gian cho byte đầu tiên (TTFB)) như đã nêu chi tiết trong mô-đun trước đó và giảm tác động của các tài nguyên chặn hiển thị. Những khái niệm này sẽ được tìm hiểu trong các học phần tiếp theo.
Đường dẫn hiển thị nội dung quan trọng
Trong một thời gian dài, đường dẫn kết xuất quan trọng đã liên quan đến lượt kết xuất ban đầu. Tuy nhiên, ngày càng có nhiều chỉ số tập trung vào người dùng đối với hiệu suất web. Điều này có một số câu hỏi về việc liệu điểm cuối của đường dẫn hiển thị quan trọng sẽ là điểm hiển thị đầu tiên hay là một trong những nội dung hiển thị tiếp theo.
Thay vào đó, một khung hiển thị thay thế là tập trung vào thời gian cho đến khi Thời gian hiển thị nội dung lớn nhất (LCP) hay thậm chí là Thời gian hiển thị nội dung đầu tiên (FCP) – dưới dạng một phần của đường dẫn hiển thị có nội dung (hoặc đường dẫn chính như các cách gọi khác). Trong trường hợp này, bạn có thể cần thêm các tài nguyên không nhất thiết là chặn (như định nghĩa thông thường cho đường dẫn kết xuất quan trọng), nhưng cần thiết để hiển thị nội dung hiển thị.
Bất kể bạn xác định định nghĩa chính xác là gì là "quan trọng", việc hiểu rõ điều gì giữ chân lượt kết xuất ban đầu và nội dung chính là rất quan trọng. Nội dung hiển thị đầu tiên đo lường cơ hội đầu tiên có thể hiển thị bất kỳ nội dung nào cho người dùng. Lý tưởng nhất là phải có giá trị nào đó có ý nghĩa (không phải màu nền chẳng hạn), nhưng ngay cả khi không có nội dung, thì người dùng vẫn có giá trị khi thể hiện nội dung nào đó. Đây là một đối số để đo lường đường dẫn kết xuất quan trọng như định nghĩa trước đây. Đồng thời, việc đo lường thời điểm nội dung chính hiển thị với người dùng cũng mang lại giá trị.
Xác định đường dẫn hiển thị nội dung
Nhiều công cụ có thể xác định các phần tử LCP và thời điểm chúng hiển thị. Ngoài phần tử LCP, Lighthouse cũng sẽ giúp xác định các giai đoạn LCP và thời gian dành cho mỗi giai đoạn để giúp bạn biết được nơi cần tập trung nỗ lực tối ưu hoá:
Đối với các trang web phức tạp hơn, Lighthouse cũng làm nổi bật chuỗi yêu cầu quan trọng trong một quy trình kiểm tra riêng:
Bài kiểm tra Lighthouse này quan sát tất cả các tài nguyên được tải có mức độ ưu tiên cao, vì vậy, bài kiểm tra này sẽ bao gồm phông chữ web và nội dung khác mà Chrome đặt làm tài nguyên có mức độ ưu tiên cao, ngay cả khi tài nguyên đó thực sự không chặn hiển thị.
Kiểm tra kiến thức
Đường dẫn hiển thị quan trọng đề cập đến điều gì?
Những tài nguyên nào có liên quan đến đường dẫn hiển thị quan trọng?
<head>.<head>.Tại sao chặn hiển thị là một phần cần thiết của hiển thị trang?
Tại sao JavaScript chặn trình phân tích cú pháp HTML (giả sử các thuộc tính defer, async hoặc module không được chỉ định trong phần tử <script>)?
<script> sẽ chặn trình phân tích cú pháp và chặn hiển thị.Tiếp theo: Tối ưu hoá việc tải tài nguyên
Mô-đun này bao gồm một số lý thuyết về cách trình duyệt hiển thị trang web và cụ thể là những gì cần thiết để hoàn tất quá trình hiển thị ban đầu của một trang. Mô-đun tiếp theo sẽ tìm hiểu cách tối ưu hoá đường dẫn kết xuất này bằng cách tìm hiểu cách tối ưu hoá việc tải tài nguyên.