Kiến thức rút ra khi áp dụng thuộc tính tải được chuẩn hoá
Mục tiêu của bài đăng này là thuyết phục các nhà phát triển và cộng tác viên nền tảng CMS (tức là những người phát triển lõi CMS) rằng đã đến lúc triển khai tính năng hỗ trợ tải lười 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 lười. Các nguyên tắc này dựa trên 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 tạo trang web bằng CMS), bạn đều có thể tham khảo bài đăng này để tìm hiểu thêm về các lợi ích của tính năng tải lười ở 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 khuyến khích nền tảng CMS triển khai tính năng tải lười.
Thông tin khái quát
Trong năm qua, việc tải lười 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 sử dụng tính năng này.
Tuy nhiên, những mốc này chỉ là nền tảng cho một web nhanh hơn và tiết kiệm tài nguyên hơn.
Giờ đây, bạn có thể sử dụng thuộc tính loading trên hệ sinh thái web phân tán.
Hệ thống quản lý nội dung cung cấp dịch vụ cho 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 đưa các tính năng trình duyệt hiện đại vào web. Một số CMS nguồn mở phổ biến như WordPress, Joomla và TYPO3 đã triển khai tính năng hỗ trợ thuộc tính loading trên hình ảnh. Hãy cùng xem xét các phương pháp và thông tin cần lưu ý 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 nội dung nghe nhìn từng phần là một tính năng hiệu suất web quan trọng mà các trang web nên tận dụng trên quy mô lớn. Đó là lý do bạn nên áp dụng tính năng này ở cấp lõi CMS.
Trường hợp triển khai tính năng tải từng phần ngay
Chuẩn hoá
Việc sử dụng các tính năng trình duyệt không chuẩn hoá trong CMS sẽ tạo điều kiện cho việc kiểm thử rộng rãi và có thể cho thấy các khía cạnh có thể cải thiện. Tuy nhiên, quan điểm chung trên các CMS là miễn là một tính năng của trình duyệt chưa được chuẩn hoá, thì bạn nên triển khai tính năng đó dưới dạng một 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ó thể được xem xét để sử dụng trong lõi nền tảng.
Hỗ trợ trình duyệt
Hỗ trợ trình duyệt cho tính năng này cũng là một vấn đề tương tự: Phần lớn người dùng CMS phải 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 rằng ít nhất là không gây ảnh hưởng bất lợi cho những trình duyệt đó.
Ngưỡng khoảng cách từ khung nhìn
Một mối lo ngại phổ biến đối với việc triển khai tính năng tải lười 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 hình ảnh đó hiển thị 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ể điều chỉnh phương pháp tiếp cận dựa trên dữ liệu trải nghiệm người dùng thực tế, giảm thiểu tác động, vì vậy, các nền tảng CMS có thể áp dụng tính năng tải lười ở cấp trình duyệt một cách an toàn.
Đề xuất về trải nghiệm người dùng
Yêu cầu thuộc tính phương diện trên các phần tử
Để tránh thay đổi bố cục, chúng tôi luôn đề xuất 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 các phần tử đó. Đề xuất này phù hợp bất kể 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 tải đầy đủ trong khung nhìn cao hơn 0,1%, nên việc tải lười sẽ phù hợp hơn một chút.
Tốt nhất là các hệ thống quản lý nội dung (CMS) nên cung cấp các thuộc tính kích thước trên 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, bạn nên bỏ qua hình ảnh tải lười không cung cấp cả hai thuộc tính này.
Tránh tải lười các phần tử ở đầu trang
Hiện tại, các CMS chỉ nên thêm các thuộc tính loading="lazy" vào hình ảnh và iframe nằm ở phần dưới cùng của màn hình để tránh độ trễ trong chỉ số Largest Contentful Paint (Lần vẽ có nội dung lớn nhất). Trong một số trường hợp, độ trễ này có thể đáng kể như phát hiện được vào tháng 7 năm 2021. Tuy nhiên, bạn cầ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 khi hiển thị là một việc phức tạp. Điều này đặc biệt áp dụng nếu CMS sử dụng phương pháp tự động để thêm các thuộc tính loading, nhưng ngay cả khi dựa trên biện pháp 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 ở đầu trang để tải lười.
Tránh sử dụng phương thức dự phòng JavaScript
Mặc dù có thể sử dụng JavaScript để cung cấp tính năng tải từng phần 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 ban đầu, gây ra độ trễ cho các trình duyệt có hỗ trợ thuộc tính này. Ngoài ra, việc triển khai một 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 tại sao không có CMS lớn nào áp dụng tính năng tải lười trong cốt lõi của CMS trước khi 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 từng phần theo mặc định
Đề xuất chung cho các CMS triển khai tính năng tải lười ở 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ỉ dành cho những phần tử có chứa 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ở mỗi hình ảnh.
Càng nhiều càng tốt, bạn nên chỉ thêm loading="lazy" vào các phần tử có thể xuất hiện ở phần dưới cùng của màn hình.
Mặc dù yêu cầu này có thể phức tạp để triển khai cho một CMS do thiếu khả năng nhận biết 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ó thể xuất hiện ở đầu trang khi tải lười.
Cho phép sửa đổi theo 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 điều quan trọng là bạn phải 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 trung bình, thì đây có thể là một thành phần điều khiển giao diện người dùng hiển thị cho mọi hình ảnh và iframe cho phép chọn không tải lười cho phần tử đó.
Ngoài ra, bạn có thể hiển thị 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ẻ hoặc ngữ cảnh HTML hoặc cho một phần tử HTML cụ thể trong nội dung.
Cải tiến nội dung hiện có
Ở cấp độ cao, có hai phương pháp để 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 đó liên tục trong cơ sở dữ liệu.
- Thêm thuộc tính ngay khi hiển thị nội dung từ cơ sở dữ liệu ở giao diện người dùng.
Bạn nên chọn thêm thuộc tính này ngay khi hiển thị để mang lại lợi ích tải lười cho mọi nội dung hiện có. Nếu chỉ có thể thêm thuộc tính thông qua trình chỉnh sửa, thì chỉ những nội dung mới hoặc nội dung mới đượ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 đối với 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 linh hoạt sẽ dễ dàng cho phép sửa đổi trong tương lai, nếu các tính năng của tính năng tải lười ở 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 ngay lập tức phải đá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 cho 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 tốc độ. Tuỳ thuộc vào CMS, bạn có thể thêm thuộc tính thông qua tính năng 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ế 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ả các thuộc tính của thẻ, sau đó thêm thuộc tính loading vào từng chuỗi thẻ nếu có thể. Ví dụ: WordPress đi xa đến mức có một biểu thức chính quy chung để thực hiện nhiều thao tác nhanh cho một số phần tử nhất định, trong đó việc thêm loading="lazy" chỉ là một thao tác, 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 sử dụng tính năng tải lười trong phần cốt lõi của CMS thay vì một tiện ích – tính năng này cho phé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ó yêu cầu hỗ trợ tính năng nào hiện có để thêm tính năng hỗ trợ trong CMS hay không, hoặc mở yêu cầu hỗ trợ mới nếu chưa có. Hãy tham khảo bài đăng này khi 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 để CMS của bạn được liệt kê trên trang này nếu bạn đã thêm tính năng hỗ trợ tải lười ở cấp trình duyệt. Nếu bạn gặp phải các vấn đề khác, tôi cũng rất muốn tìm hiểu thêm về những vấn đề đó để có thể 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 lười:
Bạn có thể sử dụng những điều đã học đượ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.
Ảnh chính do Colin Watts chụp trên Unsplash.