JavaScript, CSS, hình ảnh, iframe và các tài nguyên khác tác động đến tốc độ tải, hiển thị và khả dụng của trang web đối với người dùng. Trải nghiệm tải rất quan trọng đối với ấn tượng đầu tiên của người dùng và khả năng sử dụng chung, do đó Google đã định nghĩa số liệu Largest Contentful Paint (LCP) để đo tốc độ tải và hiển thị nội dung chính cho người dùng.
Nội dung chính đối với LCP thường là phần tử lớn nhất nằm ở phía trên màn hình. Phần tử này có thể là hình ảnh, video hoặc đơn giản là một khối văn bản lớn. Trong tất cả các tùy chọn đó, có thể cho rằng văn bản là lựa chọn tốt nhất cho hiệu suất LCP vì nó tải và hiển thị nhanh.
Trình duyệt tuân theo đường dẫn hiển thị quan trọng để phân tích cú pháp tài liệu HTML và các tài nguyên được tham chiếu (CSS, JS, hình ảnh, v.v.) để hiển thị nội dung trên màn hình. Trình duyệt xây dựng cây kết xuất bằng DOM và CSSOM, và trang sẽ kết xuất sau khi tất cả các tài nguyên chặn kết xuất như CSS, tệp phông chữ và tập lệnh đã được phân tích cú pháp và xử lý.
Sau đây là tóm tắt sơ bộ theo “Ưu tiên và Lên lịch Lấy tài nguyên trong Chromium” của Patrick Meenan:
Các mức độ ưu tiên mặc định này hoạt động khá tốt trong hầu hết các trường hợp, thường dẫn đến hiệu suất tốt. Tuy nhiên, các nhà phát triển hiểu sâu sắc về dự án có thể muốn cải thiện hiệu suất vượt xa hơn thế bằng cách thực hiện một số tinh chỉnh bên trong. Ai cũng biết rằng hiệu suất trang web tốt hơn sẽ dẫn đến nhiều chuyển đổi hơn, nhiều lưu lượng truy cập hơn và trải nghiệm người dùng tốt hơn.
Chúng ta có thể sử dụng thuộc tính
Ví dụ: giả sử chúng ta đang tải hai bảng định kiểu chặn hiển thị. Làm thế nào chúng ta có thể báo hiệu cho trình duyệt rằng tệp
Nhập thuộc tính HTML
Điều quan trọng cần lưu ý là thuộc tính này không đảm bảo rằng tài nguyên có mức độ ưu tiên cao hơn sẽ được tải trước các tài nguyên khác (có mức độ ưu tiên thấp hơn) cùng loại. Vì vậy, không nên sử dụng
Ngoài ra, thuộc tính này không buộc trình duyệt phải tìm nạp tài nguyên hoặc ngăn không cho trình duyệt tìm nạp. Việc có tìm nạp tài nguyên hay không là tùy thuộc vào trình duyệt. Thuộc tính này chỉ giúp trình duyệt ưu tiên khi nó được tải xuống.
Điều đó có nghĩa là thuộc tính
Khá đơn giản, phải không?
Lưu ý: Tại thời điểm viết bài viết này, thuộc tính
Với suy nghĩ đó, chúng ta hãy chuyển sang một số ví dụ và tình huống thực tế để chúng ta có thể sử dụng thuộc tính mới này một cách hiệu quả.
Với suy nghĩ đó, khối văn bản là ứng cử viên LCP tùy chọn nhất trong hầu hết các trường hợp, vì nó hoạt động tốt hơn hình ảnh hoặc nội dung phương tiện khác. Đối với những trường hợp hình ảnh quan trọng hoặc là phần chính của nội dung, chúng ta không có lựa chọn nào khác ngoài việc chỉ hiển thị chúng. Vì vậy, chúng ta cần tối ưu hóa chúng để tải nhanh nhất có thể.
Chúng ta hãy xem một ví dụ đơn giản về băng chuyền hình ảnh, đây cũng là nội dung chính trong khung nhìn và là ứng cử viên hàng đầu cho LCP.
Xem Bút [Ví dụ - không có ưu tiên tìm nạp](https://codepen.io/smashingmag/pen/oNppEoX) của Adrian Bece.
Xem Bút Ví dụ - không có ưu tiên tìm nạp của Adrian Bece.
Chúng ta có thể chạy thử nghiệm Lighthouse để kiểm tra số liệu và sử dụng dữ liệu này để so sánh.
Xin lưu ý: Một số yếu tố có thể ảnh hưởng đến số liệu thống kê, do đó kết quả có thể khác nhau, nhưng ý chính chung là giống nhau.
Chúng ta hãy sử dụng
Xem Bút [Ví dụ - với ưu tiên tìm nạp ([https://codepen.io/smashingmag/pen/mdppXLR](https://codepen.io/smashingmag/pen/mdppXLR)) của Adrian Bece.
Xem Bút [Ví dụ - với ưu tiên tìm nạp (https://codepen.io/smashingmag/pen/mdppXLR) của Adrian Bece.
Hãy chạy Lighthouse trên ví dụ đã sửa đổi và chúng ta có thể nhận thấy LCP của chúng ta đã được cải thiện.
Bằng cách sử dụng
Hãy nhớ rằng, thuộc tính này không buộc trình duyệt phải tìm nạp tài nguyên. Ngay cả khi
Xin lưu ý: Các tập lệnh và bảng định kiểu vẫn chặn hiển thị nếu chúng không bị trì hoãn.
Chúng ta hãy xem ví dụ sau. Nếu bạn muốn theo dõi ví dụ này trên CodePen, hãy đảm bảo kiểm tra cấu hình của tab HTML trên ví dụ CodePen bên dưới. Mã được tham chiếu bên dưới được bao gồm ở đó, vì tab HTML CodePen chỉ bao gồm HTML
Xem Bút [Ưu tiên các bảng định kiểu](https://codepen.io/smashingmag/pen/oNppEQx) của Adrian Bece.
Xem Bút Ưu tiên các bảng định kiểu của Adrian Bece.
Chúng tôi đang tải các tài nguyên sau:
[*] Bảng định kiểu phông chữ của Google
Hoãn tải ngay sau lần hiển thị đầu tiên. Chuyển đổi phông chữ này hiển thị cho người dùng (FOUT).
[*] Bảng định kiểu không quan trọng bên dưới (Bootstrap chỉ được sử dụng làm ví dụ cho tệp CSS có kích thước lớn hơn)
Hoãn tải sau lần hiển thị đầu tiên với mức độ ưu tiên thấp, vì các kiểu đó được sử dụng bên dưới.
[*] CSS quan trọng
Chặn hiển thị và áp dụng ngay lập tức.[/LIST]
Chúng tôi sẽ sử dụng một kỹ thuật phổ biến để hoãn tải các bảng định kiểu không quan trọng và thêm
Mặc dù cấu hình này sẽ không ảnh hưởng đến LCP hoặc một số số liệu hiệu suất khác, nhưng nó cho thấy cách chúng ta có thể sử dụng
Xem Pen [Ưu tiên các bảng định kiểu - với fetchpriority](https://codepen.io/smashingmag/pen/oNppEVL) của Adrian Bece.
Xem Pen Ưu tiên các bảng định kiểu - với fetchpriority của Adrian Bece.
Hai ví dụ này từ web.dev minh họa hoàn hảo cách chúng ta có thể kết hợp các thuộc tính này để có nhiều tùy chọn tải tập lệnh hơn nữa:
Ưu tiên các yêu cầu
Thuộc tính này không chỉ giới hạn ở HTML, nó cũng có thể được sử dụng trong
Ví dụ, giả sử chúng ta đang tải một bài đăng trên blog. Chúng tôi muốn ưu tiên nội dung chính hơn bình luận, vì vậy chúng tôi cần truyền thuộc tính
Xin lưu ý: Giá trị
Xem Bút [Lấy với mức độ ưu tiên](https://codepen.io/smashingmag/pen/ExooQBa) của Adrian Bece.
Xem Bút Lấy với mức độ ưu tiên của Adrian Bece.Các phần tử
Chúng ta có thể gán
Với suy nghĩ đó,
Nội dung chính đối với LCP thường là phần tử lớn nhất nằm ở phía trên màn hình. Phần tử này có thể là hình ảnh, video hoặc đơn giản là một khối văn bản lớn. Trong tất cả các tùy chọn đó, có thể cho rằng văn bản là lựa chọn tốt nhất cho hiệu suất LCP vì nó tải và hiển thị nhanh.
Trình duyệt tuân theo đường dẫn hiển thị quan trọng để phân tích cú pháp tài liệu HTML và các tài nguyên được tham chiếu (CSS, JS, hình ảnh, v.v.) để hiển thị nội dung trên màn hình. Trình duyệt xây dựng cây kết xuất bằng DOM và CSSOM, và trang sẽ kết xuất sau khi tất cả các tài nguyên chặn kết xuất như CSS, tệp phông chữ và tập lệnh đã được phân tích cú pháp và xử lý.
Mặc định về mức độ ưu tiên của tài nguyên
Chúng ta hãy tập trung vào cách các tài nguyên này được yêu cầu và tải xuống. Tài liệu HTML là tài nguyên đầu tiên được yêu cầu và tải xuống, nhưng trình duyệt xác định tài nguyên nào sẽ tải xuống tiếp theo và theo thứ tự nào? Trình duyệt có một bộ ưu tiên được xác định trước cho từng loại tài nguyên, do đó chúng có thể được tải xuống theo thứ tự tối ưu.Sau đây là tóm tắt sơ bộ theo “Ưu tiên và Lên lịch Lấy tài nguyên trong Chromium” của Patrick Meenan:
| Ưu tiên | |
|---|---|
| Cao nhất |
|
| Cao |
|
| Trung bình |
|
| Thấp |
|
| Thấp nhất |
|
Chúng ta có thể sử dụng thuộc tính
preload cho phần tử link HTML để tối ưu hóa hiệu suất tải bằng cách đảm bảo trình duyệt phát hiện ra tài nguyên sớm hơn, tải xuống và lưu vào bộ nhớ đệm. Tuy nhiên, điều đó không cung cấp cho chúng ta quyền kiểm soát chi tiết hơn đối với một loại tài nguyên cụ thể.Ví dụ: giả sử chúng ta đang tải hai bảng định kiểu chặn hiển thị. Làm thế nào chúng ta có thể báo hiệu cho trình duyệt rằng tệp
main.css quan trọng hơn tệp third-party-plugin.css mà không cần dùng đến JavaScript hoặc một số giải pháp thay thế khác?Thuộc tính HTML fetchpriority
Nhập thuộc tính HTML fetchpriority. Thuộc tính mới này có thể được gán cho hầu như bất kỳ phần tử HTML nào tải một số loại tài nguyên như hình ảnh và tập lệnh và ảnh hưởng đến mức độ ưu tiên tương đối của nó. Mức độ ưu tiên tương đối có nghĩa là chúng ta chỉ có thể ảnh hưởng đến mức độ ưu tiên trong cùng một loại tài nguyên. Nghĩa là chúng ta không thể yêu cầu trình duyệt tải hình ảnh trước khi tải JavaScript chặn hiển thị.Điều quan trọng cần lưu ý là thuộc tính này không đảm bảo rằng tài nguyên có mức độ ưu tiên cao hơn sẽ được tải trước các tài nguyên khác (có mức độ ưu tiên thấp hơn) cùng loại. Vì vậy, không nên sử dụng
fetchpriority để kiểm soát thứ tự tải, chẳng hạn như trong trường hợp chúng ta muốn tải phụ thuộc JavaScript trước tập lệnh sử dụng phụ thuộc đó.Ngoài ra, thuộc tính này không buộc trình duyệt phải tìm nạp tài nguyên hoặc ngăn không cho trình duyệt tìm nạp. Việc có tìm nạp tài nguyên hay không là tùy thuộc vào trình duyệt. Thuộc tính này chỉ giúp trình duyệt ưu tiên khi nó được tải xuống.
Điều đó có nghĩa là thuộc tính
fetchpriority chấp nhận một trong ba giá trị sau:-
low
Giảm mức độ ưu tiên tương đối của tài nguyên. -
high
Tăng mức độ ưu tiên tương đối của tài nguyên. -
auto
Giá trị mặc định cho phép trình duyệt quyết định mức độ ưu tiên.
main.css ở mức độ ưu tiên cao hơn third-party-plugin.css, đây là cùng một tài nguyên CSS chặn hiển thị như main.css.
Mã:
[*]Lưu ý: Tại thời điểm viết bài viết này, thuộc tính
fetchpriority hiện được hỗ trợ trong Chrome Canary với bản phát hành đầy đủ cho Chrome phiên bản 101, các trình duyệt khác sẽ làm theo.Sử dụng một cách tiết kiệm
Không nên gánfetchpriority cho mọi tài nguyên. Trình duyệt đã thực hiện công việc đủ tốt, vì vậy chỉ nên sử dụng hạn chế cho các trường hợp sử dụng rất cụ thể khi chúng ta muốn ưu tiên các yêu cầu để cải thiện LCP, ưu tiên một tài nguyên bị hoãn hơn tài nguyên khác cùng loại, ưu tiên các yêu cầu tải trước, v.v. Việc sử dụng quá mức thuộc tính này hoặc chạy tối ưu hóa sớm có thể gây hại cho hiệu suất, vì vậy hãy đảm bảo chạy các bài kiểm tra hiệu suất để xác minh.Với suy nghĩ đó, chúng ta hãy chuyển sang một số ví dụ và tình huống thực tế để chúng ta có thể sử dụng thuộc tính mới này một cách hiệu quả.
Ví dụ và trường hợp sử dụng
Cải thiện hiệu suất Largest Contentful Paint
Đây hiện là trường hợp sử dụng tốt nhất chofetchpriority. Hình ảnh được xử lý sau khi tất cả các tài nguyên chặn hiển thị và quan trọng đã được hiển thị và ngay cả khi sử dụng preload hoặc loading="eager" cũng không thay đổi điều đó. Tuy nhiên, với fetchpriority, chúng ta có thể cố gắng đảm bảo hình ảnh LCP có nhiều khả năng sẵn sàng cho lần kết xuất ban đầu đó, dẫn đến hiệu suất tăng đáng kể.Với suy nghĩ đó, khối văn bản là ứng cử viên LCP tùy chọn nhất trong hầu hết các trường hợp, vì nó hoạt động tốt hơn hình ảnh hoặc nội dung phương tiện khác. Đối với những trường hợp hình ảnh quan trọng hoặc là phần chính của nội dung, chúng ta không có lựa chọn nào khác ngoài việc chỉ hiển thị chúng. Vì vậy, chúng ta cần tối ưu hóa chúng để tải nhanh nhất có thể.
Chúng ta hãy xem một ví dụ đơn giản về băng chuyền hình ảnh, đây cũng là nội dung chính trong khung nhìn và là ứng cử viên hàng đầu cho LCP.
Xem Bút [Ví dụ - không có ưu tiên tìm nạp](https://codepen.io/smashingmag/pen/oNppEoX) của Adrian Bece.
Xem Bút Ví dụ - không có ưu tiên tìm nạp của Adrian Bece.
Chúng ta có thể chạy thử nghiệm Lighthouse để kiểm tra số liệu và sử dụng dữ liệu này để so sánh.
Xin lưu ý: Một số yếu tố có thể ảnh hưởng đến số liệu thống kê, do đó kết quả có thể khác nhau, nhưng ý chính chung là giống nhau.
Chúng ta hãy sử dụng
fetchpriority và chỉ định mức độ ưu tiên cao cho hình ảnh chính (đang hoạt động) và mức độ ưu tiên thấp cho hình thu nhỏ.
Mã:
[LIST]
[IMG]...[/IMG]
[*]
[IMG]...[/IMG]
[IMG]...[/IMG]Xem Bút [Ví dụ - với ưu tiên tìm nạp (https://codepen.io/smashingmag/pen/mdppXLR) của Adrian Bece.
Hãy chạy Lighthouse trên ví dụ đã sửa đổi và chúng ta có thể nhận thấy LCP của chúng ta đã được cải thiện.
Bằng cách sử dụng
fetchpriority, chúng tôi đánh dấu hình ảnh nào quan trọng hơn đối với nội dung và hình ảnh nào thì không. Vì vậy, trình duyệt đã tính đến các tín hiệu này khi tìm nạp tài nguyên, ưu tiên hình ảnh nội dung chính, từ đó cho phép nội dung chính hiển thị sớm hơn, cải thiện số liệu LCP!Hình ảnh bị trì hoãn
Tương tự, chúng ta có thể sử dụng thuộc tínhfetchpriority để ưu tiên các tài nguyên bên dưới màn hình có thuộc tính loading="lazy". Mặc dù điều này sẽ không ảnh hưởng đến thời gian LCP, nhưng chúng ta vẫn có thể báo hiệu cho trình duyệt ưu tiên hình ảnh băng chuyền lớn nhất (đang hoạt động) hơn các hình thu nhỏ nhỏ khi trình duyệt quyết định tải chúng. Theo cách đó, chúng ta có thể cải thiện ngay cả trải nghiệm người dùng tải chậm.Hãy nhớ rằng, thuộc tính này không buộc trình duyệt phải tìm nạp tài nguyên. Ngay cả khi
fetchpriority được đặt thành high, trình duyệt vẫn sẽ quyết định xem tài nguyên có được tìm nạp hay không. Chúng tôi chỉ báo hiệu cho trình duyệt biết yêu cầu nào trong số những yêu cầu này quan trọng hơn từ mỗi nhóm.
Mã:
[*]
[IMG]...[/IMG]
[*]
[IMG]...[/IMG]
[IMG]...[/IMG]Bảng định kiểu bị trì hoãn
Chúng ta cũng có thể sử dụngfetchpriority để báo hiệu tập lệnh và bảng định kiểu nào sẽ có mức độ ưu tiên cao hơn khi tải.Xin lưu ý: Các tập lệnh và bảng định kiểu vẫn chặn hiển thị nếu chúng không bị trì hoãn.
Chúng ta hãy xem ví dụ sau. Nếu bạn muốn theo dõi ví dụ này trên CodePen, hãy đảm bảo kiểm tra cấu hình của tab HTML trên ví dụ CodePen bên dưới. Mã được tham chiếu bên dưới được bao gồm ở đó, vì tab HTML CodePen chỉ bao gồm HTML
body và head được thêm vào bằng cấu hình riêng biệt này.Xem Bút [Ưu tiên các bảng định kiểu](https://codepen.io/smashingmag/pen/oNppEQx) của Adrian Bece.
Xem Bút Ưu tiên các bảng định kiểu của Adrian Bece.
Chúng tôi đang tải các tài nguyên sau:
[*] Bảng định kiểu phông chữ của Google
Hoãn tải ngay sau lần hiển thị đầu tiên. Chuyển đổi phông chữ này hiển thị cho người dùng (FOUT).
[*] Bảng định kiểu không quan trọng bên dưới (Bootstrap chỉ được sử dụng làm ví dụ cho tệp CSS có kích thước lớn hơn)
Hoãn tải sau lần hiển thị đầu tiên với mức độ ưu tiên thấp, vì các kiểu đó được sử dụng bên dưới.
[*] CSS quan trọng
Chặn hiển thị và áp dụng ngay lập tức.[/LIST]
Chúng tôi sẽ sử dụng một kỹ thuật phổ biến để hoãn tải các bảng định kiểu không quan trọng và thêm
tải trước với fetchpriority phù hợp để đảm bảo phông chữ được tải sớm nhất có thể, do đó FOUT (Đèn nháy văn bản chưa định kiểu) xảy ra ngay sau lần hiển thị đầu tiên.
Mã:
[*] /* CSS quan trọng */fetchpriority để cải thiện trải nghiệm tải bằng cách ưu tiên một tài nguyên hơn tài nguyên khác trong cùng một loại.Xem Pen [Ưu tiên các bảng định kiểu - với fetchpriority](https://codepen.io/smashingmag/pen/oNppEVL) của Adrian Bece.
Xem Pen Ưu tiên các bảng định kiểu - với fetchpriority của Adrian Bece.
Tinh chỉnh các ưu tiên tài nguyên JavaScript
Mặc dù chúng ta có thể sử dụngasync và defer để thay đổi thời điểm các tập lệnh được tải và phân tích cú pháp, nhưng với fetchpriority, chúng ta có thể kiểm soát chi tiết hơn các tài nguyên JavaScript.Hai ví dụ này từ web.dev minh họa hoàn hảo cách chúng ta có thể kết hợp các thuộc tính này để có nhiều tùy chọn tải tập lệnh hơn nữa:
Mã:
Ưu tiên các yêu cầu fetch của JavaScript
Thuộc tính này không chỉ giới hạn ở HTML, nó cũng có thể được sử dụng trong fetch của JavaScript để ưu tiên một số lệnh gọi API hơn các lệnh khác.Ví dụ, giả sử chúng ta đang tải một bài đăng trên blog. Chúng tôi muốn ưu tiên nội dung chính hơn bình luận, vì vậy chúng tôi cần truyền thuộc tính
priority trong đối tượng tùy chọn fetch.Xin lưu ý: Giá trị
priority là high theo mặc định, vì vậy chúng tôi chỉ cần gán low khi chúng tôi muốn giảm mức độ ưu tiên của yêu cầu fetch.
Mã:
/* Lấy nội dung bài đăng có mức độ ưu tiên cao (mặc định) */function loadPost() { fetch("https://jsonplaceholder.typicode.com/posts/1") .then(parseResponse) .then(parsePostData) .catch(handleError);}/* Lấy bình luận có mức độ ưu tiên thấp hơn (có tùy chọn mức độ ưu tiên) */function loadComments() { fetch("https://jsonplaceholder.typicode.com/posts/1/comments", { priority: "low" }) .then(parseResponse) .then(parseCommentsData) .catch(handleError);}Xem Bút Lấy với mức độ ưu tiên của Adrian Bece.
Các phần tử iframe được nhúng
Chúng ta có thể gán fetchpriority cho Các phần tử iframe giống như bất kỳ tài nguyên nào khác. Tuy nhiên, hãy nhớ rằng thuộc tính này chỉ ảnh hưởng đến tài nguyên chính của iframe và không áp dụng cho các tài nguyên bên trong iframe. Trình duyệt sẽ tải các tài nguyên bên trong iframe với các mức ưu tiên mặc định. Tuy nhiên, chúng tôi vẫn đang trì hoãn chúng để bắt đầu sau.
Mã:
[URL=http://www.youtube.com/embed/...]Xem thêm tại đây[/URL]Kết luận
Gần đây, chúng ta đã thấy những tính năng mới thú vị cho phép chúng ta kiểm soát trình duyệt và hành vi tải — CSS Cascade Layers cho phép chúng ta kiểm soát các lớp quy tắc CSS và hiện tại,fetchpriority sẽ cho phép chúng ta kiểm soát chi tiết hơn mức độ ưu tiên tải tài nguyên. Tuy nhiên, việc kiểm soát các khái niệm cốt lõi này đòi hỏi các nhà phát triển phải cẩn thận và sử dụng chúng theo các thông lệ tốt nhất, vì việc sử dụng không đúng cách có thể gây hại cho cả hiệu suất và trải nghiệm của người dùng.Với suy nghĩ đó,
fetchpriority chỉ nên được sử dụng trong các trường hợp cụ thể, chẳng hạn như:- Cải thiện hiệu suất LCP cho hình ảnh và các tài nguyên phương tiện khác;
- Thay đổi mức độ ưu tiên của các tài nguyên
linkvàscript; - Giảm mức độ ưu tiên của các yêu cầu
fetchJavaScript không quan trọng đối với nội dung hoặc chức năng; - Giảm mức độ ưu tiên của các phần tử iframe.
Tài liệu tham khảo
- Gợi ý về ưu tiên, Báo cáo dự thảo của Nhóm cộng đồng
- “Tối ưu hóa việc tải tài nguyên bằng gợi ý về ưu tiên”, Leena Sohoni, Addy Osmani và Patrick Meenan
Đọc thêm
- Thời gian đến Byte đầu tiên: Ngoài thời gian phản hồi của máy chủ
- Tại sao tối ưu hóa Điểm Lighthouse của bạn là không đủ cho một trang web nhanh
- Tạo biểu mẫu nhiều bước hiệu quả để có trải nghiệm người dùng tốt hơn
- Cách xây dựng Trang web đa ngôn ngữ với Nuxt.js
