Ảnh hưởng của việc tải từng phần quá nhiều đến hiệu suất

Lời khuyên dựa trên dữ liệu về cách tải từng phần hình ảnh có tính đến Các chỉ số quan trọng về trang web.

Flix Arntz

Rick Viscomi

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, giúp bảo toàn dữ liệu và giảm tranh chấp mạng cho các tài sản quan trọng. API này đã trở thành tiêu chuẩn web vào năm 2019 và ngày nay, loading="lazy" dành cho hình ảnh được hầu hết trình duyệt lớn hỗ trợ. Điều đó nghe có vẻ tuyệt vời, nhưng có vấn đề gì như việc tải từng phần quá mức không?

Bài đăng này tóm tắt cách chúng tôi phân tích dữ liệu được cung cấp công khai về tính minh bạch của web và thử nghiệm A/B đặc biệt để hiểu rõ các đặc điểm áp dụng và hiệu suất của tính năng tải từng phần của hình ảnh gốc. Chúng tôi nhận thấy rằng tải từng phần có thể là một công cụ vô cùng hiệu quả giúp 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 xấu đến hiệu suất. Cụ thể, phân tích của chúng tôi cho thấy việc tải hình ảnh sôi nổi hơn trong khung nhìn ban đầu (trong khi tải từng phần những hình ảnh còn lại) có thể mang lại cho chúng ta những gì tốt nhất: tải ít byte hơn và Các chỉ số quan trọng về trang web được cải thiện.

Nhận con nuôi

Theo dữ liệu gần đây nhất trong Kho lưu trữ HTTP, tính năng tải từng phần của hình ảnh gốc được 17% số trang web sử dụng và mức độ sử dụng đang gia tăng nhanh chóng. Phần lớn chỗ đứng trong hệ sinh thái này là đáng kể đối với một API tương đối mới.

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ề loại trang web đang thúc đẩy việc sử dụng: 84% trang web sử dụng tính năng tải từng phần hình ảnh gốc 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 WordPress đang dẫn đầu về mức phí trong việc áp dụng.

Tỷ lệ sử dụng cũng đáng lưu ý. Một năm trước, vào tháng 7 năm 2020, những 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, tức là khoảng 6 triệu trang (1% trong tổng số trang). Chỉ riêng tính năng tải từng phần trong WordPress đã tăng lên hơn 1 triệu trang web (14% trong tổng số trang web).

Hiệu suất tương quan

Tìm hiểu kỹ hơn về Kho lưu trữ HTTP, chúng tôi có thể so sánh hiệu quả hoạt động của các trang có và không có tính năng tải từng phần hình ảnh gốc với chỉ số Thời gian hiển thị nội dung lớn nhất (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ì dựa trên quy trình kiểm thử tổng hợp trong phòng thí nghiệm. Biểu đồ dưới đây sử dụng biểu đồ dạng hộp và râu để trực quan hoá việc phân phối LCP phân vị thứ 75 của từng trang: các đường biểu thị phân vị thứ 10 và 90, còn các hộp đại diện cho phân vị thứ 25 và 75.

Trung vị của trang không có tải từng phần có LCP thứ 75 là 2.922 mili giây, so với 3.546 mili giây của trang trung bình có 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 thường có hiệu suất LCP kém hơn.

Điều quan trọng cần chỉ ra rằng đây là các 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. Giả thuyết, nếu các trang web WordPress có xu hướng chậm hơn một chút và dựa trên mức độ thành lập nhóm thuần tập tải từng phần, thì điều đó có thể giải thích sự khác biệt. Vì vậy, hãy cố gắng loại bỏ sự thay đổi đó bằng cách chỉ xem xét các trang web WordPress.

Thật không may, mẫu tương tự cũng xuất hiện khi chúng ta 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. Trung vị của trang WordPress không có tính năng tải từng phần có LCP thứ 75 là 3.495 mili giây, so với 3.768 mili giây của trang trung bình có tải từng phần.

Điều này vẫn không chứng minh được rằ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 thức này lại xảy ra trường hợp 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 dựa trên 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 của hình ảnh gốc (như triển khai trong lõi WordPress) sẽ làm giảm hiệu suất LCP và giảm số byte hình ảnh. Phương pháp mà chúng tôi sử dụng là kiểm thử một trang web WordPress minh hoạ với chủ đề ttwoythaiyone. Chúng tôi đã kiểm thử cả loại trang lưu trữ và loại trang đơn, chẳng hạn 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ách sử dụng WebPageTest. Chúng tôi đã kiểm thử từng tổ hợp các trang có và không bật tính năng tải từng phần và chạy từng quy trình kiểm tra 9 lần để lấy giá trị LCP trung bình và số byte hình ảnh.

Các kết quả ở trên 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ắt tính năng tải từng phần trên các trang lưu trữ, chúng tôi nhận thấy LCP cải thiện đáng kể. Tuy nhiên, sự khác biệt trung bình hơn trên các trang đơn lẻ.

Điểm đáng chú ý là hiệu ứng của việc tắt tính năng tải từng phần thực sự giúp các trang đơn lẻ nhanh hơn một chút. Tuy nhiên, sự khác biệt về LCP nhỏ hơn một độ lệch chuẩn đối với cả thử nghiệm trên máy tính và thiết bị di động. Vì vậy, chúng tôi phân bổ điểm này là do phương sai và xem xét tổng thể thay đổi là không thay đổi. So sánh, sự khác biệt đối với các trang lưu trữ giống như có 2 đến 3 độ lệch chuẩn.

Kết quả ở trên so sánh số byte hình ảnh trung bình (tính bằng KB) của mỗi thử nghiệm. Như dự kiến, tải từng phần có tác động tích cực rất rõ ràng đến việc giảm số lượng byte hình ảnh. Nếu người dùng thực cuộn xuống toàn bộ trang, thì tất cả hình ảnh vẫn sẽ tải khi chuyển vào khung nhìn, nhưng những kết quả này cho thấy hiệu suất đã cải thiện trong 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 đã giúp giảm số byte hình ảnh nhưng đổi lại là LCP bị trễ.

Kiểm thử bản sửa lỗi

Trước khi chúng ta tìm hiểu cách triển khai biện pháp khắc phục, hãy xem cách hoạt động của tính năng tải từng phần trong WordPress hôm nay. Khía cạnh quan trọng nhất của phương thức triển khai hiện tại là tải từng phần hình ảnh trong màn hình đầu tiên (trong khung nhìn). Bài đăng trên blog CMS công nhận đây là một mô hình cần tránh, nhưng dữ liệu thử nghiệm tại thời điểm đó chỉ ra rằng tác động đối với LCP là tối thiểu và đáng để đơn giản hoá việc triển khai trong lõi WordPress.

Với dữ liệu mới này, chúng tôi đã tạo một bản sửa lỗi thử nghiệm giúp tránh tải từng phần hình ảnh trong màn hình đầu tiên và chúng tôi đã thử nghiệm hình ảnh đó trong cùng điều kiện như thử nghiệm A/B đầu tiên.

Những kết quả này hứa hẹn hơn nhiều. Việc chỉ tải từng phần đối với các hình ảnh dưới màn hình đầu tiên sẽ đảo ngược hoàn toàn hồi quy LCP và thậm chí có thể cải thiện một chút so với việc tắt hoàn toàn LCP. Làm thế nào để tải nhanh hơn là không tải từng phần? Một cách 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, cho phép hình ảnh tải nhanh hơn.

Về số byte hình ảnh, bản sửa lỗi hoàn toàn không thay đổi 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 cách tiếp cận hiện tại.

Có một số lưu ý với bản sửa lỗi này. WordPress xác định những hình ảnh nào sẽ tải từng phần ở phía máy chủ, có nghĩa là WordPress không biết bất kỳ điều gì về kích thước khung nhìn của người dùng hoặc liệu hình ảnh ban đầu có tải trong đó hay không. Vì vậy, cách sửa lỗi sử dụng thông tin 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ó nằm 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 với hình ảnh đó) và sẽ không 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 trong đ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ó 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 thông tin 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 phải xác nhận 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à bạn có thể cần tinh chỉnh để những kết quả này có thể áp dụng được cho tất cả tình huống thực tế.

Ra mắt

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ả mức tiết kiệm hình ảnh và hiệu suất LCP nhanh hơn, chúng ta có thể làm gì để các trang web bắt đầu sử dụng công cụ này? Thay đổi có mức độ ưu tiên cao nhất là gửi bản vá cho lõi WordPress để triển khai bản sửa lỗi thử nghiệm. Chúng tôi cũng sẽ cập nhật hướng dẫn trong bài đăng trên blog về Tính năng tải từng phần ở cấp trình duyệt cho CMS để làm rõ ảnh hưở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 CMS có thể sử dụng phương pháp phỏng đoán để tránh tình trạng này.

Vì những phương pháp hay nhất này có thể áp dụng cho tất cả các nhà phát triển web, bạn cũng nên gắn cờ cá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 kiểm tra đó. Cho đến lúc đó, một điều mà các nhà phát triển có thể làm để tìm thực thể của các phần tử LCP đượ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 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ên sẽ đánh giá phần tử LCP mới nhất và ghi lại một cảnh báo nếu được tải từng phần.

Điều này cũng làm nổi bật lợi thế sắc nét 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 sự cố chưa giải quyết xong để thử nghiệm tải nguyên gốc một số hình ảnh đầu tiên, tương tự như bản sửa lỗi, mặc dù có thuộc tính loading.

Kết thúc

Nếu trang web của bạn sử dụng tính năng tải từng phần của hình ảnh gốc, hãy kiểm tra cách triển khai 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 nhanh chóng hơn trong màn hình đầu tiên có thể giúp ích cho bạn. Nếu bạn có một trang web WordPress, hy vọng rằng sẽ sớm có bản vá phát hành 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 trên nền tảng web tương đối mới có thể đi kèm cả rủi ro và cả 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 nào đó. Mặc dù đã bắt đầu hiểu được sự khó khăn của việc tải từng phần hình ảnh gốc, nhưng chúng tôi cũng đã nhận thấy những ưu điểm của việc sử dụng tính năng này để đạt được hiệu suất tốt hơn.

Ảnh chụp của Frankie Lopez trên Unsplash