Lời khuyên dựa trên dữ liệu dành cho hình ảnh tải từng phần với Chỉ số quan trọng chính của trang web.
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, để bảo toàn dữ liệu và giảm tình trạng tranh chấp mạng cho các thành phần quan trọng. Công cụ này đã trở thành tiêu chuẩn web vào năm 2019 và hiện nay, loading="lazy" đối với hình ảnh được hỗ trợ trên hầu hết các trình duyệt lớn.
Hướng dẫn này tóm tắt cách phân tích dữ liệu minh bạch được cung cấp công khai trên web và thử nghiệm A/B đặc biệt để hiểu đặc điểm về tình hình sử dụng và hiệu suất của tính năng tải từng phần hình ảnh ở cấp trình duyệt. Các phát hiện bao gồm việc tải từng phần có thể là một công cụ hiệu quả đáng kinh ngạc giúp giảm số byte ảnh không cần thiết, nhưng việc sử dụng quá mức có thể ảnh hưởng tiêu cực đến hiệu suất. Cụ thể, bản phân tích này cho thấy rằng việc tải hình ảnh nhanh hơn trong khung nhìn ban đầu (trong khi tải từng phần các hình ảnh còn lại) có thể mang lại cho chúng ta lợi ích tốt nhất ở cả hai nền tảng: tải ít byte hơn và cải thiện Chỉ số quan trọng chính của trang web.
Nhận con nuôi
Theo dữ liệu gần đây nhất trong HTTP Archive, tính năng tải từng phần hình ảnh tích hợp được 29% trang web sử dụng và tỷ lệ sử dụng đang tăng nhanh chóng.
Việc truy vấn dữ liệu thô trong dự án Lưu trữ HTTP giúp chúng tôi hiểu rõ hơn về những loại trang web đang thúc đẩy việc áp dụng: 84% trang web sử dụng tính năng tải từng phần 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õ cách đó là giải pháp dẫn đầu về mức phí.
Tỷ lệ sử dụng cũng rất đáng chú ý. 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 từng phần tạo thành hàng chục nghìn trang web trong kho dữ liệu khoảng 6 triệu (1% tổng số). Chỉ riêng WordPress tải từng phần đã phát triển 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ề Lưu trữ HTTP, 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 từng phần hình ảnh ở cấp trình duyệt với chỉ số Nội dung lớn nhất hiển thị (LCP). Dữ liệu LCP được lấy từ trải nghiệm thực tế của người dùng trong Báo cáo trải nghiệm người dùng trên Chrome (CrUX) thay vì thử nghiệm tổng hợp trong phòng thí nghiệm. Biểu đồ sau đây sử dụng biểu đồ hình hộp và râu để trực quan hóa sự phân bố LCP phần trăm thứ 75 của mỗi trang: các đường đại diện cho phần trăm thứ 10 và 90 và các hộp đại diện cho phần trăm thứ 25 và 75.
Trang trung vị không tải từng phần 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 từng phần. Nhìn chung, các trang web sử dụng tính năng tải từng phần có xu hướng có hiệu suất LCP kém hơn.
Điều quan trọng là phải chỉ ra rằng đây là kết quả tương quan và không nhất thiết chỉ ra rằng tải từng phần là nguyên nhân của hiệu suất chậm hơn. Theo giả thuyết, nếu các trang web WordPress có xu hướng hoạt động chậm hơn một chút và căn cứ vào mức độ tạo thành nhóm thuần tập tải từng phần, thì điều đó có thể giải thích cho sự khác biệt này. Để loại bỏ sự thay đổi đó, có thể thu hẹp trọng tâm vào các trang web WordPress.
Thật không may, cùng một mẫu lại 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 từng phần có xu hướng có hiệu suất LCP chậm hơn. Trang WordPress trung bình mà không tải từng phần 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 bình có tính năng tải từng phần.
Điều này vẫn không chứng minh được rằng tính năng tải từng phần khiến các trang tải chậm hơn, nhưng việc sử dụng phương pháp này đồng nghĩa với việc có hiệu suất chậm hơn. Để trả lời câu hỏi về 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 nhân quả
Mục tiêu của thử nghiệm A/B là chứng minh hoặc bác bỏ giả thuyết cho rằng tính năng tải từng phần hình ảnh tích hợp (như được triển khai trong lõi WordPress) làm giảm hiệu suất LCP và số byte hình ảnh ít hơn. Phương pháp được sử dụng là thử nghiệm một trang web WordPress minh hoạ với chủ đề thaiyttwoyone. Cả loại trang lưu trữ và loại trang đơn đều được kiểm thử (tương tự như trang chủ và trang bài viết) trên máy tính và thiết bị di động được mô phỏng bằng công cụ WebPageTest. Chúng tôi kiểm tra từng tổ hợp trang có và không bật tính năng tải từng phần, đồng thời mỗi thử nghiệm được chạy 9 lần để lấy giá trị LCP trung bình và số byte ảnh.
| Chương trình dài tập | mặc định | đã vô hiệu | Mức chênh lệch so với giá trị mặc định |
|---|---|---|---|
| thaityhaithai-cua-ban-cua-ban | 2.029 | 1.759 | Giảm 13% |
| hai-thai-thai-ng-p-p-p-p-p-p-m-ch-a | 1.657 | 1.403 | Giảm 15% |
| 20yttwoyone-single-desktop | 1.655 | 1.726 | 4% |
| 2020-duy-nhất-một-thiết-bị-di-động | 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 đối với các thử nghiệm trên kho lưu trữ và các trang đơn cho máy tính và thiết bị di động. Khi tính năng tải từng phần bị tắt trên các trang lưu trữ, LCP được cải thiện đáng kể. Tuy nhiên, trên các trang đơn, phương pháp này tạo ra ít sự khác biệt hơn.
Việc tắt tính năng tải từng phần có vẻ như giúp các trang đơn lẻ nhanh hơn một chút. Tuy nhiên, sự chênh lệch về LCP nhỏ hơn 1 độ lệch chuẩn đối với cả thử nghiệm dành cho máy tính và thiết bị di động. Do đó, nguyên nhân có thể là do phương sai và xem xét tổng thể sự thay đổi là không thay đổi. Để so sánh, mức chênh lệch chuẩn đối với các trang lưu trữ gần 2 đến 3 độ lệch chuẩn.
| Chương trình dài tập | mặc định | đã vô hiệu | Mức chênh lệch so với giá trị mặc định |
|---|---|---|---|
| thaityhaithai-cua-ban-cua-ban | 577 | 1173 | Tăng 103% |
| hai-thai-thai-ng-p-p-p-p-p-p-m-ch-a | 172 | 378 | 120% |
| 20yttwoyone-single-desktop | 301 | 850 | Tăng 183% |
| 2020-duy-nhất-một-thiết-bị-di-động | 114 | 378 | Tăng 233% |
Những kết quả này so sánh số byte ả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 từng phần có tác động tích cực rõ ràng đến việc giảm số byte ảnh. Nếu người dùng thực cuộn qua toàn bộ trang, tất cả hình ảnh vẫn sẽ tải khi chúng đi 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 từng phần mà WordPress sử dụng rất rõ ràng sẽ giúp giảm số byte hình ảnh nhưng đổi lại LCP bị trễ.
Kiểm thử bản sửa lỗi
Khía cạnh quan trọng nhất của phương pháp 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à nó 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 Hệ thống quản lý nội dung (CMS) này đã xác nhận đây là một quy luật cần tránh, nhưng dữ liệu thử nghiệm tại thời điểm đó chỉ ra rằng ảnh hưởng đối với LCP là rất nhỏ và đáng để đơn giản hoá quá trình triển khai trong lõi WordPress.
Với 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 từng phần hình ảnh nằm trong màn hình đầu tiên. Bản sửa lỗi đã được thử nghiệm trong các điều kiện giống như thử nghiệm A/B đầu tiên.
| Chương trình dài tập | mặc định | đã vô hiệu | fix | Mức chênh lệch so với giá trị mặc định | Sự khác biệt với mục bị tắt |
|---|---|---|---|---|---|
| thaityhaithai-cua-ban-cua-ban | 2.029 | 1.759 | 1.749 | Giảm 14% | Giảm 1% |
| hai-thai-thai-ng-p-p-p-p-p-p-m-ch-a | 1.657 | 1.403 | 1.352 | Giảm 18% | Giảm 4% |
| 20yttwoyone-single-desktop | 1.655 | 1.726 | 1.676 | 1% | Giảm 3% |
| 2020-duy-nhất-một-thiết-bị-di-động | 1.352 | 1.384 | 1.342 | Giảm 1% | Giảm 3% |
Những kết quả này hứa hẹn hơn nhiều. Chỉ tải từng phần hình ảnh dưới màn hình đầu tiên sẽ dẫn đến sự đảo ngược hoàn toàn sự hồi quy LCP và thậm chí có thể cải thiện đôi chút so với việc tắt hoàn toàn tính năng tải từng phần. Vì sao ứng dụng này có thể nhanh hơn so với việc không tải từng phần? Có một lý do giải thích là bằng cách không tải hình ảnh dưới màn hình đầu tiên, sẽ có ít tranh chấp về mạng hơn với hình ảnh LCP, giúp hình ảnh tải nhanh hơn.
| Chương trình dài tập | mặc định | đã vô hiệu | fix | Mức chênh lệch so với giá trị mặc định | Sự khác biệt với mục bị tắt |
|---|---|---|---|---|---|
| thaityhaithai-cua-ban-cua-ban | 577 | 1173 | 577 | 0% | Giảm 51% |
| hai-thai-thai-ng-p-p-p-p-p-p-m-ch-a | 172 | 378 | 172 | 0% | Giảm 54% |
| 20yttwoyone-single-desktop | 301 | 850 | 301 | 0% | Giảm 65% |
| 2020-duy-nhất-một-thiết-bị-di-động | 114 | 378 | 114 | 0% | Giảm 70% |
Về số byte ảnh, cách khắc phục hoàn toàn không có thay đổi nào so với hành vi mặc định. Điều này thật tuyệt vời vì đó là một trong những điểm mạnh của phương pháp hiện tại.
Sửa lỗi này đi kèm với một số lưu ý. WordPress xác định những hình ảnh cần tải từng phần ở phía máy chủ, tức là 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 từng phần trong đó hay không. Vì vậy, cách khắc phục sẽ 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 coi là nằm trong màn hình đầu tiên hoặc ở gần hình ảnh 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 lượng văn bản của đoạn văn bả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ó một số đ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 các đường 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 hiểu rằng bản sửa lỗi chỉ được hiệu chỉnh để mang lại hiệu suất tốt trong trường hợp chung và có thể cần tinh chỉnh để những kết quả này có thể áp dụng được cho mọi tình huống thực tế.
Triển khai (:#implementation)
Giờ đây, khi đã xác định được cách hiệu quả hơn để tải từng phần hình ảnh, tất cả khả năng tiết kiệm dung lượng hình ảnh và hiệu suất LCP nhanh hơn. Vậy các trang web có thể bắt đầu sử dụng tính năng này bằng cách nào? Thay đổi có mức độ ưu tiên cao nhất là gửi bản vá đến cốt lõi WordPress để 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 từng phần ở cấp trình duyệt dành cho CMS cũng sẽ được cập nhật để làm rõ các tác động tiêu cực của tính năng tải từng phần trong màn hình đầu tiên và cách các CMS có thể sử dụng phương pháp phỏng đoán để tránh điều này.
Vì các phương pháp hay nhất này có thể áp dụng cho tất cả nhà phát triển web, bạn cũng nên gắn cờ phản mẫu tải từng phần 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 quá trình kiểm tra đó. Cho đến lúc đó, có một việc mà nhà phát triển có thể làm để tìm các bản sao của phần tử LCP đang được tải từng phần là thêm nhật ký chi tiết hơn vào dữ liệu trường của họ.
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 một cảnh báo nếu phần tử này được tải từng phần.
Điều này cũng làm nổi bật ưu thế vượt trội của kỹ thuật tải từng phần và tiềm năng cải thiện API ở cấp nền tảng. Ví dụ: Chromium có một vấn đề chưa giải quyết cần bạn thử nghiệm với việc tải nguyên gốc một số hình ảnh đầu tiên một cách nhanh chóng, tương tự như bản sửa lỗi mặc dù có 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 hình ảnh đó và chạy thử nghiệm A/B để hiểu rõ hơn về chi phí hiệu suất của trang web. Việc tải hình ảnh trong màn hình đầu tiên nhanh hơn có thể mang lại lợi ích cho bạn. Nếu bạn sở hữu một trang web WordPress, chúng tôi hy vọng sẽ sớm có bản vá trong lõi WordPress. Nếu bạn đang sử dụng một CMS khác, hãy đảm bảo họ biết các vấn đề tiềm ẩn về hiệu suất được mô tả ở đây.
Việc dùng thử các API nền tảng web tương đối mới có thể đi kèm với cả rủi ro và lợi ích – vì có lý do nào đó mà chúng được gọi là tính năng tiên tiến. Mặc dù chúng tôi đã bắt đầu hiểu được sự phức tạp của tính năng tải từng phần hình ảnh ở cấp trình duyệt, nhưng chúng tôi cũng đang nhận thấy những ưu điểm của phương pháp này để đạt được hiệu suất tốt hơn.
Ảnh chụp của Frankie Lopez trên Unsplash