Lời khuyên dựa trên dữ liệu về việc tải chậm hình ảnh, có tính đến Core Web Vitals.
Tải từng phần là một kỹ thuật trì hoãn việc tải tài nguyên xuống cho đến khi cần thiết, nhằm tiết kiệm dữ liệu và giảm tranh chấp mạng đối với các tài sản quan trọng. Thuộc tính này đã trở thành một tiêu chuẩn web vào năm 2019 và hiện nay, hầu hết các trình duyệt chính đều hỗ trợ thuộc tính loading="lazy" cho hình ảnh.
Hướng dẫn này tóm tắt cách phân tích dữ liệu tính minh bạch trên web công khai và thử nghiệm A/B đặc biệt để hiểu rõ các đặc điểm về hiệu suất và mức độ sử dụng của tính năng tải chậm hình ảnh ở cấp trình duyệt. Kết quả cho thấy tải chậm có thể là một công cụ hiệu quả đáng kinh ngạc để giảm số byte hình ảnh không cần thiết, nhưng việc lạm dụng có thể ảnh hưởng tiêu cực đến hiệu suất. Cụ thể, kết quả phân tích này cho thấy việc tải hình ảnh nhanh hơn trong khung nhìn ban đầu (đồng thời tải chậm phần còn lại) có thể mang lại lợi ích cho cả hai bên: tải ít byte hơn và cải thiện Core Web Vitals.
Nghĩa dưỡng
Theo dữ liệu gần đây nhất trong HTTP Archive, tính năng tải chậm hình ảnh tích hợp sẵn được 29% trang web sử dụng và tỷ lệ sử dụng đang tăng nhanh.
Việc truy vấn dữ liệu thô trong dự án HTTP Archive giúp chúng ta hiểu rõ hơn về loại trang web nào đang thúc đẩy việc áp dụng: 84% trang web sử dụng tính năng tải chậm hình ảnh ở cấp trình duyệt sử dụng WordPress, 2% sử dụng một CMS khác và 14% còn lại không sử dụng CMS đã biết. Những kết quả này cho thấy rõ WordPress đang dẫn đầu về tỷ lệ sử dụng.
Tỷ lệ sử dụng cũng là một chỉ số đáng lưu ý. Một năm trước, vào tháng 7 năm 2020, các trang web WordPress sử dụng tính năng tải chậm chiếm hàng chục nghìn trang web trong tập dữ liệu gồm khoảng 6 triệu trang web (1% tổng số). Chỉ riêng việc áp dụng tính năng tải chậm trong WordPress đã tăng lên hơn 1 triệu trang web (14% tổng số).
Hiệu suất tương quan
Tìm hiểu sâu hơn về HTTP Archive, bạn có thể so sánh hiệu suất của các trang có và không có tính năng tải chậm hình ảnh ở cấp trình duyệt bằng chỉ số Nội dung lớn nhất hiển thị (LCP). Dữ liệu LCP đến từ trải nghiệm của người dùng thực tế trong Báo cáo trải nghiệm người dùng trên Chrome (CrUX), trái ngược với thử nghiệm tổng hợp trong phòng thí nghiệm. Biểu đồ sau đây sử dụng biểu đồ hộp và râu để minh hoạ mức phân phối LCP ở phân vị thứ 75 của mỗi trang: các đường biểu thị phân vị thứ 10 và 90, còn các hộp biểu thị phân vị thứ 25 và 75.
Trang trung vị không có tính năng tải chậm có LCP ở phân vị thứ 75 là 2.922 mili giây, so với 3.546 mili giây đối với trang trung vị có tính năng tải chậm. Nhìn chung, các trang web sử dụng tính năng tải chậm thường có hiệu suất LCP kém hơn.
Bạn cần lưu ý rằng đây là kết quả tương quan và không nhất thiết cho thấy việc tải từng phần là nguyên nhân khiến hiệu suất chậm hơn. Theo giả thuyết, nếu các trang web WordPress có xu hướng chậm hơn một chút và xét đến mức độ đóng góp của các trang web này vào nhóm tải chậm, thì điều đó có thể giải thích cho sự khác biệt. Để loại bỏ sự khác biệt đó, bạn có thể thu hẹp phạm vi tập trung vào các trang web WordPress.
Rất tiếc, mô hình tương tự cũng xuất hiện khi xem chi tiết các trang WordPress; những trang sử dụng tính năng tải chậm có xu hướng có hiệu suất LCP chậm hơn. Trang WordPress trung vị không có tính năng tải chậm có LCP ở phân vị thứ 75 là 3.495 mili giây, so với 3.768 mili giây đối với trang trung vị có tính năng tải chậm.
Điều này vẫn không chứng minh được rằng việc tải từng phần khiến trang tải chậm hơn, nhưng việc sử dụng tính năng này trùng khớp với việc hiệu suất chậm hơn. Để cố gắng trả lời câu hỏi về quan hệ nhân quả, chúng tôi đã thiết lập một thử nghiệm A/B trong phòng thí nghiệm.
Hiệu suất của trang phục thường ngày
Mục tiêu của thử nghiệm A/B là chứng minh hoặc bác bỏ giả thuyết rằng tính năng tải chậm hình ảnh tích hợp sẵn (như được triển khai trong WordPress Core) dẫn đến hiệu suất LCP chậm hơn và ít byte hình ảnh hơn. Phương pháp được sử dụng là thử nghiệm một trang web WordPress minh hoạ với giao diện twentytwentyone. Cả hai loại trang lưu trữ và trang đơn đều được thử nghiệm, giống như trang chủ và trang bài viết, trên máy tính và thiết bị di động mô phỏng bằng WebPageTest. Mỗi tổ hợp trang có và không bật tính năng tải chậm đều được kiểm thử và mỗi lần kiểm thử được chạy 9 lần để lấy giá giá trị LCP trung vị và số byte hình ảnh.
| Loạt chương trình | mặc định | đã vô hiệu | Sự khác biệt so với mặc định |
|---|---|---|---|
| twentytwentyone-archive-desktop | 2.029 | 1.759 | Giảm 13% |
| twentytwentyone-archive-mobile | 1.657 | 1.403 | Giảm 15% |
| twentytwentyone-single-desktop | 1.655 | 1.726 | 4% |
| twentytwentyone-single-mobile | 1.352 | 1.384 | 2% |
Những kết quả này so sánh LCP trung bình (tính bằng mili giây) cho các thử nghiệm trên trang lưu trữ và trang đơn lẻ cho máy tính và thiết bị di động. Khi tắt tính năng tải chậm trên các trang lưu trữ, LCP đã cải thiện đáng kể. Tuy nhiên, trên các trang đơn, sự khác biệt này không đáng kể.
Việc tắt tính năng tải chậm dường như giúp các trang đơn tải nhanh hơn một chút. Tuy nhiên, mức chênh lệch về LCP nhỏ hơn một độ lệch chuẩn cho cả thử nghiệm trên máy tính và thiết bị di động, vì vậy, điều này có thể là do sự khác biệt và coi thay đổi này là trung tính về tổng thể. Để so sánh, mức chênh lệch đối với các trang lưu trữ gần bằng 2 đến 3 độ lệch chuẩn.
| Loạt chương trình | mặc định | đã vô hiệu | Sự khác biệt so với mặc định |
|---|---|---|---|
| twentytwentyone-archive-desktop | 577 | 1173 | 103% |
| twentytwentyone-archive-mobile | 172 | 378 | 120% |
| twentytwentyone-single-desktop | 301 | 850 | 183% |
| twentytwentyone-single-mobile | 114 | 378 | 233% |
Những kết quả này so sánh số byte hình ảnh trung bình (tính bằng KB) cho mỗi lần kiểm tra. Đúng như dự kiến, tính năng tải chậm có tác động tích cực rất rõ ràng trong việc giảm số byte hình ảnh. Nếu người dùng thực tế cuộn qua toàn bộ trang, thì tất cả hình ảnh sẽ tải khi họ di chuyển vào khung nhìn, nhưng những kết quả này cho thấy hiệu suất được cải thiện của lần tải trang ban đầu.
Tóm tắt kết quả của thử nghiệm A/B, kỹ thuật tải chậm mà WordPress sử dụng rõ ràng giúp giảm số byte hình ảnh nhưng lại làm chậm LCP.
Kiểm thử bản sửa lỗi
Khía cạnh quan trọng nhất của việc triển khai tính năng tải từng phần hiện tại của WordPress cho thử nghiệm này là tính năng này tải từng phần hình ảnh trong khung nhìn (trong màn hình đầu tiên). Bài đăng trên blog của CMS thừa nhận đây là một mẫu cần tránh, nhưng dữ liệu thử nghiệm tại thời điểm đó cho thấy tác động đến LCP là không đáng kể và đáng để đơn giản hoá việc triển khai trong lõi WordPress.
Dựa trên dữ liệu mới này, một bản sửa lỗi thử nghiệm đã được tạo để tránh tải chậm hình ảnh ở phần trong màn hình đầu tiên và bản sửa lỗi này đã được thử nghiệm trong cùng điều kiện với thử nghiệm A/B đầu tiên.
| Loạt chương trình | mặc định | đã vô hiệu | sửa | Sự khác biệt so với mặc định | Sự khác biệt so với trạng thái tắt |
|---|---|---|---|---|---|
| twentytwentyone-archive-desktop | 2.029 | 1.759 | 1.749 | -14% | -1% |
| twentytwentyone-archive-mobile | 1.657 | 1.403 | 1.352 | -18% | -4% |
| twentytwentyone-single-desktop | 1.655 | 1.726 | 1.676 | 1% | -3% |
| twentytwentyone-single-mobile | 1.352 | 1.384 | 1.342 | -1% | -3% |
Những kết quả này hứa hẹn hơn nhiều. Việc chỉ tải chậm những hình ảnh dưới màn hình đầu tiên sẽ giúp đảo ngược hoàn toàn tình trạng sự hồi quy LCP (Nội dung lớn nhất hiển thị) và thậm chí có thể mức độ cải thiện một chút so với việc tắt hoàn toàn tính năng tải chậm. Làm sao mà cách này lại nhanh hơn việc không tải chậm? Một cách giải thích là bằng cách không tải hình ảnh trong màn hình đầu tiên, sẽ có ít tranh chấp mạng hơn với hình ảnh LCP, giúp hình ảnh tải nhanh hơn.
| Loạt chương trình | mặc định | đã vô hiệu | sửa | Sự khác biệt so với mặc định | Sự khác biệt so với trạng thái tắt |
|---|---|---|---|---|---|
| twentytwentyone-archive-desktop | 577 | 1173 | 577 | 0% | Giảm 51% |
| twentytwentyone-archive-mobile | 172 | 378 | 172 | 0% | -54% |
| twentytwentyone-single-desktop | 301 | 850 | 301 | 0% | -65% |
| twentytwentyone-single-mobile | 114 | 378 | 114 | 0% | -70% |
Về số byte hình ảnh, bản sửa lỗi hoàn toàn không có thay đổi nào so với hành vi mặc định. Điều này rất tuyệt vì đó là một trong những điểm mạnh của phương pháp hiện tại.
Cách khắc phục này có một số lưu ý. WordPress xác định hình ảnh nào sẽ tải chậm ở phía máy chủ, tức là WordPress không biết gì về kích thước khung nhìn của người dùng hoặc liệu hình ảnh có tải ban đầu trong khung nhìn đó hay không. Vì vậy, bản sửa lỗi sử dụng phương pháp phỏng đoán về vị trí tương đối của hình ảnh trong mã đánh dấu để đoán xem hình ảnh đó có tải trong khung nhìn hay không. Cụ thể, nếu hình ảnh là hình ảnh nổi bật đầu tiên trên trang hoặc hình ảnh đầu tiên trong nội dung chính, thì hình ảnh đó được giả định là nằm trong màn hình đầu tiên hoặc gần màn hình đầu tiên và sẽ không được tải từng phần.
Các điều kiện ở cấp trang như số từ trong tiêu đề hoặc số lượng văn bản đoạn văn ở đầu nội dung chính có thể ảnh hưởng đến việc hình ảnh có nằm trong khung nhìn hay không. Ngoài ra, còn có các điều kiện ở cấp người dùng có thể ảnh hưởng đến độ chính xác của phương pháp phỏng đoán, đặc biệt là kích thước khung nhìn và việc sử dụng đường dẫn liên kết neo làm thay đổi vị trí cuộn của trang.
Vì những lý do đó, bạn cần lưu ý rằng bản sửa lỗi chỉ được điều chỉnh để mang lại hiệu suất tốt trong trường hợp chung và có thể cần phải tinh chỉnh để áp dụng các kết quả này cho mọi trường hợp thực tế.
Triển khai
Giờ đây, khi đã xác định được cách tải từng phần hình ảnh hiệu quả hơn, tất cả các khoản tiết kiệm hình ảnh và hiệu suất LCP nhanh hơn, làm cách nào để các trang web bắt đầu sử dụng? Thay đổi có mức độ ưu tiên cao nhất là gửi bản vá cho WordPress Core để triển khai bản sửa lỗi thử nghiệm. Hướng dẫn trong bài đăng trên blog Tải chậm ở cấp trình duyệt cho CMS cũng sẽ được cập nhật để làm rõ những ảnh hưởng tiêu cực của việc tải chậm trong màn hình đầu tiên và cách CMS có thể sử dụng phương pháp phỏng đoán để tránh việc này.
Vì các phương pháp hay nhất này áp dụng cho tất cả nhà phát triển web, nên bạn cũng nên gắn cờ các mẫu phản tác dụng của tính năng tải chậm trong các công cụ như Lighthouse. Hãy tham khảo yêu cầu về tính năng trên GitHub nếu bạn muốn theo dõi tiến trình của quy trình kiểm tra đó. Trong thời gian chờ đợi, một việc mà nhà phát triển có thể làm để tìm các thực thể của phần tử LCP đang được tải từng phần là thêm thông tin ghi nhật ký chi tiết hơn vào dữ liệu thực địa.
new PerformanceObserver((list) => {
const latestEntry = list.getEntries().at(-1);
if (latestEntry?.element?.getAttribute('loading') == 'lazy') {
console.warn('Warning: LCP element was lazy loaded', latestEntry);
}
}).observe({type: 'largest-contentful-paint', buffered: true});
Đoạn mã JavaScript trước đó sẽ đánh giá phần tử LCP gần đây nhất và ghi lại cảnh báo nếu phần tử đó được tải từng phần.
Điều này cũng cho thấy một điểm hạn chế của kỹ thuật tải chậm và tiềm năng cải thiện API ở cấp nền tảng. Ví dụ: có một vấn đề chưa được giải quyết trong Chromium để thử nghiệm với việc tải một cách háo hức một vài hình ảnh đầu tiên, tương tự như cách khắc phục, bất chấp thuộc tính loading.
Kết luận
Nếu trang web của bạn sử dụng tính năng tải từng phần hình ảnh ở cấp trình duyệt, hãy kiểm tra cách triển khai tính năng này và chạy thử nghiệm A/B để hiểu rõ hơn về chi phí hiệu suất của tính năng này. Trang này có thể hưởng lợi từ việc tải hình ảnh trong màn hình đầu tiên một cách nhanh chóng hơn. Nếu bạn có trang web WordPress, hy vọng sẽ sớm có bản vá trong WordPress Core. Nếu bạn đang sử dụng một CMS khác, hãy đảm bảo rằng họ biết về các vấn đề tiềm ẩn về hiệu suất được mô tả tại đây.
Việc thử nghiệm các API nền tảng web tương đối mới có thể mang lại cả rủi ro và phần thưởng – chúng được gọi là các tính năng tiên tiến vì một lý do. Mặc dù bắt đầu nhận thấy sự phức tạp của tính năng tải chậm hình ảnh ở cấp trình duyệt, nhưng chúng tôi cũng nhận thấy những lợi ích của việc sử dụng tính năng này để đạt được hiệu suất tốt hơn.