Bài học rút ra khi áp dụng thuộc tính tải chuẩn hoá
Mục tiêu của tôi trong bài đăng này là thuyết phục các nhà phát triển và người đóng góp cho nền tảng CMS (tức là những người phát triển nhân CMS) rằng đã đến lúc triển khai tính năng hỗ trợ tải chậm hình ảnh ở cấp trình duyệt. Tôi cũng sẽ chia sẻ các đề xuất về cách đảm bảo trải nghiệm chất lượng cao cho người dùng và cho phép các nhà phát triển khác tuỳ chỉnh trong khi triển khai tính năng tải từng phần. Những nguyên tắc này được đúc kết từ kinh nghiệm của chúng tôi khi thêm tính năng hỗ trợ cho WordPress cũng như giúp Joomla, Drupal và TYPO3 triển khai tính năng này.
Bất kể bạn là nhà phát triển nền tảng CMS hay người dùng CMS (tức là người xây dựng trang web bằng CMS), bạn đều có thể sử dụng bài đăng này để tìm hiểu thêm về lợi ích của tính năng tải chậm ở cấp trình duyệt trong CMS. Hãy xem phần Các bước tiếp theo để biết các đề xuất về cách bạn có thể khuyến khích nền tảng CMS triển khai tính năng tải chậm.
Thông tin khái quát
Trong năm qua,
việc tải từng phần hình ảnh và iframe bằng thuộc tính loading
đã
trở thành một phần của Tiêu chuẩn HTML WHATWG
và
ngày càng được nhiều trình duyệt áp dụng.
Tuy nhiên, những mốc quan trọng này chỉ đặt nền móng cho một
web nhanh hơn và tiết kiệm tài nguyên hơn.
Giờ đây, hệ sinh thái web phân tán sẽ sử dụng thuộc tính loading.
Hệ thống quản lý nội dung
vận hành khoảng 60% trang web,
vì vậy, các nền tảng này đóng vai trò quan trọng trong việc áp dụng các tính năng
của trình duyệt hiện đại vào web. Với một vài CMS nguồn mở phổ biến như
WordPress,
Joomla và
TYPO3 đã
triển khai tính năng hỗ trợ cho thuộc tính loading trên hình ảnh, hãy cùng xem xét
các phương pháp tiếp cận và bài học kinh nghiệm liên quan đến việc áp dụng tính năng này
trong các nền tảng CMS khác. Tải chậm nội dung nghe nhìn là một tính năng quan trọng về hiệu suất web mà các trang web nên hưởng lợi trên quy mô lớn. Đó là lý do bạn nên áp dụng tính năng này ở cấp cốt lõi của CMS.
Lý do nên triển khai tính năng tải chậm ngay bây giờ
Chuẩn hoá
Việc áp dụng các tính năng không chuẩn hoá của trình duyệt trong CMS giúp tạo điều kiện cho việc thử nghiệm rộng rãi và có thể cho thấy những khía cạnh có thể cải thiện. Tuy nhiên, sự đồng thuận chung giữa các CMS là miễn là một tính năng của trình duyệt không được chuẩn hoá, thì tính năng đó nên được triển khai dưới dạng tiện ích hoặc trình bổ trợ cho nền tảng tương ứng. Chỉ khi được chuẩn hoá, một tính năng mới được xem xét để áp dụng trong lõi nền tảng.
Hỗ trợ trình duyệt
Khả năng hỗ trợ tính năng của trình duyệt cũng là một mối lo ngại tương tự: Phần lớn người dùng CMS sẽ có thể hưởng lợi từ tính năng này. Nếu có một tỷ lệ đáng kể trình duyệt chưa hỗ trợ tính năng này, thì tính năng đó phải đảm bảo ít nhất là không gây ảnh hưởng xấu đến các trình duyệt đó.
Ngưỡng khoảng cách từ khung nhìn
Một mối lo ngại thường gặp khi triển khai tính năng tải chậm là về nguyên tắc, tính năng này làm tăng khả năng hình ảnh sẽ không được tải sau khi xuất hiện trong khung nhìn của người dùng vì chu kỳ tải bắt đầu ở giai đoạn sau. Trái ngược với các giải pháp dựa trên JavaScript trước đây, các trình duyệt tiếp cận vấn đề này một cách thận trọng và hơn nữa, có thể tinh chỉnh phương pháp tiếp cận dựa trên dữ liệu trải nghiệm thực tế của người dùng, giảm thiểu tác động, vì vậy, các nền tảng CMS nên áp dụng tính năng tải lười ở cấp trình duyệt.
Đề xuất về trải nghiệm người dùng
Yêu cầu thuộc tính kích thước trên các phần tử
Để tránh thay đổi bố cục, từ lâu chúng tôi đã khuyến nghị rằng nội dung được nhúng như hình ảnh hoặc iframe phải luôn bao gồm các thuộc tính kích thước width và height, để trình duyệt có thể suy luận tỷ lệ khung hình của các phần tử đó trước khi thực sự tải chúng. Đề xuất này phù hợp cho dù một phần tử có đang được tải lười hay không. Tuy nhiên, do
khả năng hình ảnh không được tải đầy đủ khi xuất hiện trong khung nhìn cao hơn 0,1%
nên chỉ số này sẽ phù hợp hơn một chút khi áp dụng tính năng tải chậm.
Tốt nhất là CMS nên cung cấp các thuộc tính kích thước cho tất cả hình ảnh và iframe. Nếu không thể thực hiện việc này cho mọi phần tử như vậy, thì bạn nên bỏ qua những hình ảnh tải chậm không cung cấp cả hai thuộc tính này.
Tránh tải chậm các phần tử trong màn hình đầu tiên
Hiện tại, các CMS chỉ nên thêm thuộc tính loading="lazy" vào hình ảnh và iframe nằm ở phần dưới màn hình đầu tiên để tránh làm chậm chỉ số Nội dung lớn nhất hiển thị. Trong một số trường hợp, độ trễ này có thể khá lớn như đã phát hiện vào tháng 7 năm 2021. Tuy nhiên, bạn phải thừa nhận rằng việc đánh giá vị trí của một phần tử so với khung nhìn trước quá trình kết xuất là rất phức tạp. Điều này đặc biệt đúng nếu CMS sử dụng phương pháp tự động để thêm thuộc tính loading, nhưng ngay cả khi dựa trên sự can thiệp thủ công, bạn vẫn phải xem xét một số yếu tố như kích thước khung nhìn và tỷ lệ khung hình khác nhau. Tuy nhiên, bạn nên bỏ qua hình ảnh chính và các hình ảnh hoặc iframe khác có khả năng xuất hiện trong màn hình đầu tiên khỏi chế độ tải từng phần.
Tránh sử dụng phương án dự phòng JavaScript
Mặc dù JavaScript có thể được dùng để cung cấp tính năng tải chậm cho các trình duyệt (chưa) hỗ trợ thuộc tính loading, nhưng các cơ chế như vậy luôn dựa vào việc xoá thuộc tính src của hình ảnh hoặc iframe, khiến các trình duyệt có hỗ trợ thuộc tính này bị chậm trễ. Ngoài ra, việc triển khai giải pháp dựa trên JavaScript như vậy trong giao diện người dùng của một CMS quy mô lớn sẽ làm tăng diện tích bề mặt cho các vấn đề tiềm ẩn. Đây là một phần lý do khiến không có CMS lớn nào áp dụng tính năng tải chậm trong cốt lõi của nó trước tính năng trình duyệt được chuẩn hoá.
Đề xuất kỹ thuật
Bật tính năng tải chậm theo mặc định
Đề xuất chung cho các CMS triển khai tính năng tải chậm ở cấp trình duyệt là bật tính năng này theo mặc định, tức là bạn nên thêm loading="lazy" vào hình ảnh và iframe, tốt nhất là chỉ cho những phần tử có thuộc tính kích thước.
Việc bật tính năng này theo mặc định sẽ giúp tiết kiệm tài nguyên mạng nhiều hơn so với việc phải bật tính năng này theo cách thủ công, chẳng hạn như trên cơ sở từng hình ảnh.
Trong phạm vi có thể, loading="lazy" chỉ nên được thêm vào các phần tử có khả năng xuất hiện ở phần dưới màn hình đầu tiên.
Mặc dù yêu cầu này có thể phức tạp khi triển khai cho CMS do thiếu nhận thức phía máy khách và nhiều kích thước khung nhìn, nhưng bạn nên ít nhất sử dụng phương pháp phỏng đoán gần đúng để bỏ qua các phần tử như hình ảnh chính có khả năng xuất hiện trong màn hình đầu tiên khỏi việc tải từng phần.
Cho phép sửa đổi từng phần tử
Mặc dù loading="lazy" phải được thêm vào hình ảnh và iframe theo mặc định, nhưng bạn cần cho phép bỏ qua thuộc tính này trên một số hình ảnh nhất định, chẳng hạn như để tối ưu hoá cho LCP. Nếu đối tượng của CMS được coi là am hiểu công nghệ hơn mức trung bình, thì đây có thể là một thành phần điều khiển trên giao diện người dùng được hiển thị cho mọi hình ảnh và iframe, cho phép chọn không sử dụng tính năng tải chậm cho phần tử đó.
Ngoài ra, bạn có thể hiển thị một API cho các nhà phát triển bên thứ ba để họ có thể thực hiện các thay đổi tương tự thông qua mã.
Ví dụ: WordPress cho phép bỏ qua thuộc tính loading cho
toàn bộ thẻ HTML hoặc ngữ cảnh
hoặc cho một
phần tử HTML cụ thể trong nội dung.
Trang bị thêm cho nội dung hiện có
Nhìn chung, có hai cách để thêm thuộc tính loading vào các phần tử HTML trong một CMS:
- Thêm thuộc tính từ trong trình chỉnh sửa nội dung ở phần phụ trợ, lưu thuộc tính đó vào cơ sở dữ liệu một cách liên tục.
- Thêm thuộc tính một cách nhanh chóng khi hiển thị nội dung từ cơ sở dữ liệu trong giao diện người dùng.
CMS nên chọn thêm thuộc tính một cách nhanh chóng khi hiển thị để mang lại lợi ích của tính năng tải chậm cho mọi nội dung hiện có. Nếu thuộc tính chỉ có thể được thêm thông qua trình chỉnh sửa, thì chỉ những nội dung mới hoặc được sửa đổi gần đây mới nhận được lợi ích, làm giảm đáng kể tác động của CMS trong việc tiết kiệm tài nguyên mạng. Hơn nữa, việc thêm thuộc tính một cách nhanh chóng sẽ dễ dàng cho phép sửa đổi trong tương lai, nếu các khả năng của tính năng tải chậm ở cấp trình duyệt được mở rộng hơn nữa.
Tuy nhiên, việc thêm thuộc tính một cách nhanh chóng sẽ đáp ứng thuộc tính loading có thể tồn tại trên một phần tử và cho phép thuộc tính đó được ưu tiên. Bằng cách này, CMS hoặc tiện ích của CMS cũng có thể triển khai phương pháp do trình chỉnh sửa điều khiển mà không gây xung đột với các thuộc tính trùng lặp.
Tối ưu hoá hiệu suất phía máy chủ
Khi thêm thuộc tính loading vào nội dung một cách nhanh chóng bằng cách sử dụng (ví dụ) một phần mềm trung gian phía máy chủ, bạn cần cân nhắc đến tốc độ. Tuỳ thuộc vào CMS, bạn có thể thêm thuộc tính này thông qua việc duyệt qua DOM hoặc biểu thức chính quy, trong đó biểu thức chính quy được đề xuất để cải thiện hiệu suất.
Bạn nên hạn chế tối đa việc sử dụng biểu thức chính quy, ví dụ: một biểu thức chính quy duy nhất thu thập tất cả thẻ img và iframe trong nội dung, bao gồm cả thuộc tính của các thẻ đó, rồi thêm thuộc tính loading vào mỗi chuỗi thẻ nếu có. Ví dụ: WordPress thậm chí còn có một biểu thức chính quy chung để thực hiện nhiều thao tác nhanh chóng đối với một số phần tử nhất định, trong đó việc thêm loading="lazy" chỉ là một trong số đó, sử dụng một biểu thức chính quy duy nhất để hỗ trợ nhiều tính năng. Ngoài ra, hình thức tối ưu hoá này là một lý do khác khiến bạn nên áp dụng tính năng tải từng phần trong lõi của CMS thay vì một tiện ích – tính năng này giúp tối ưu hoá hiệu suất phía máy chủ tốt hơn.
Các bước tiếp theo
Kiểm tra xem có phiếu yêu cầu về tính năng hiện có để thêm tính năng hỗ trợ cho tính năng này trong CMS của bạn hay không, hoặc mở một phiếu mới nếu chưa có. Hãy tham khảo bài đăng này nếu cần để hỗ trợ đề xuất của bạn.
Hãy tweet cho tôi (felixarntz@) nếu bạn có câu hỏi hoặc nhận xét, hoặc để đưa CMS của bạn vào trang này nếu bạn đã thêm tính năng hỗ trợ tải chậm ở cấp trình duyệt. Nếu bạn gặp phải những khó khăn khác, tôi cũng rất muốn tìm hiểu thêm để hy vọng tìm ra giải pháp.
Nếu bạn là nhà phát triển nền tảng CMS, hãy nghiên cứu cách các CMS khác triển khai tính năng tải chậm:
Bạn có thể sử dụng những kiến thức thu được từ nghiên cứu và các đề xuất kỹ thuật trong bài đăng này để bắt đầu đóng góp mã cho CMS, chẳng hạn như dưới dạng bản vá hoặc yêu cầu kéo.