Kiến thức về cách áp dụng thuộc tính tải đã chuẩn hoá
Mục tiêu của tôi cho bài đăng này là thuyết phục các nhà phát triển và người đóng góp nền tảng CMS (tức là những người phát triển lõi CMS) rằng bây giờ là thời điểm cần triển khai hỗ trợ cho tính năng tải từng phần 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 người dùng chất lượng cao 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 xuất phát từ kinh nghiệm của chúng tôi khi thêm dịch vụ hỗ trợ vào WordPress cũng như giúp Dagger, 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 từng phần ở 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 của mình triển khai tính năng tải từng phần.
Thông tin khái quát
Trong năm qua, hình ảnh và iframe tải từng phần 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.
Tuy nhiên, những cột mốc này chỉ đặt nền tảng để xây dựng 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 trong hệ sinh thái web phân phối.
Hệ thống quản lý nội dung chiếm khoảng 60% số 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 hiện đại của trình duyệt trên web. Với một số CMS nguồn mở phổ biến như WordPress, Cũ và TYPO3 đã triển khai tính năng hỗ trợ cho thuộc tính loading trên hình ảnh, hãy xem xét các phương pháp tiếp cận của họ và những bài học rút ra có 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ính năng tải từng phần 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 sử dụng tính năng này ở cấp độ cốt lõi trong Hệ thống quản lý nội dung (CMS).
Trường hợp triển khai tính năng tải từng phần ngay bây giờ
Tiêu chuẩn hoá
Việc sử dụng các tính năng trình duyệt không được chuẩn hoá trong CMS sẽ hỗ trợ việc kiểm thử trên diện rộng và có thể cho thấy những khía cạnh cần cải thiện. Tuy nhiên, thống nhất chung trên 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á, tốt nhất là bạn nên triển khai tính năng này ở dạng tiện ích hoặc trình bổ trợ cho nền tảng tương ứng. Chỉ sau khi được chuẩn hoá, chúng tôi mới có thể xem xét đưa một tính năng vào nền tảng cốt lõi.
Hỗ trợ trình duyệt
Việc trình duyệt hỗ trợ tính năng này cũng có một mối lo ngại tương tự: Phần lớn người dùng CMS sẽ được hưởng lợi từ tính năng này. Nếu có một tỷ lệ đáng kể các trình duyệt chưa hỗ trợ tính năng này, thì tính năng này ít nhất phải đảm bảo không gây bất lợi cho các trình duyệt đó.
Ngưỡng khoảng cách từ khung nhìn
Một mối lo ngại phổ biến về việc triển khai tính năng tải từng phần là về nguyên tắc, chúng sẽ làm tăng khả năng hình ảnh không được tải sau khi 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 áp dụng phương pháp 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 của mình dựa trên dữ liệu trải nghiệm người dùng trong thực tế, giảm thiểu tác động. Vì vậy, tính năng tải từng phần ở cấp trình duyệt là lựa chọn an toàn để áp dụng các nền tảng CMS.
Đề xuất về trải nghiệm người dùng
Bắt buộc phải có thuộc tính kích thước trên các phần tử
Để tránh thay đổi bố cục, theo đề xuất từ lâu, 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ể dự đoán tỷ lệ khung hình của các phần tử đó trước khi thực sự tải. Đề xuất này phù hợp bất kể một phần tử có đang được tải từng phần hay không. Tuy nhiên, do khả năng hình ảnh không được tải đầy đủ một lần trong khung nhìn cao hơn 0,1%, nên hình ảnh sẽ phù hợp hơn một chút khi tải từng phần.
CMS tốt hơn nên cung cấp thuộc tính kích thước trên tất cả các hình ảnh và iframe. Nếu không thể thực hiện điều này cho mọi phần tử như vậy, bạn nên bỏ qua những hình ảnh tải từng phần không cung cấp cả hai thuộc tính này.
Tránh tải từng phần các phần tử trong màn hình đầu tiên
Hiện tại, CMS chỉ nên thêm các thuộc tính loading="lazy" vào hình ảnh và iframe được đặt dưới màn hình đầu tiên để tránh sự chậm trễ của chỉ số Nội dung lớn nhất hiển thị. Điều này trong một số trường hợp có thể có ý nghĩa đáng kể như được 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 khi kết xuất là rất phức tạp. Điều này đặc biệt cần thiết 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 sự can thiệp thủ công, vẫn có một số yếu tố như kích thước khung nhìn và tỷ lệ khung hình khác nhau vẫn cần được xem xét. 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 do tải từng phần.
Tránh sử dụng tệp dự phòng JavaScript
Mặc dù bạn có thể 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 (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 ngay từ đầu. Điều này gây chậm 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 làm tăng diện tích bề mặt phát sinh các vấn đề tiềm ẩn. Đó là một phần lý do tại sao không có CMS chính nào sử dụng tính năng tải từng phần trong lõi trước khi có tính năng chuẩn hoá trình duyệt.
Đề xuất kỹ thuật
Bật tính năng tải từng phần theo mặc định
Đối với các CMS triển khai tính năng tải từng phần ở cấp trình duyệt, bạn nên 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, chỉ cho các phần tử 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 khi 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.
Chỉ nên thêm loading="lazy" vào các phần tử có khả năng xuất hiện dưới màn hình đầu tiên nhiều nhất có thể.
Mặc dù yêu cầu này có thể phức tạp khi 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, ít nhất bạn nên sử dụng phương pháp phỏng đoán gần đúng để loại bỏ các phần tử như hình ảnh chính có thể xuất hiện trong màn hình đầu tiên không bị tải từng phần.
Cho phép sửa đổi theo từng phần tử
Mặc dù theo mặc định, loading="lazy" nên được thêm vào hình ảnh và iframe, nhưng việc cho phép bỏ qua thuộc tính này trên một số hình ảnh là rất quan trọng, chẳng hạn như để tối ưu hoá cho LCP. Nếu đối tượng của CMS thường được coi là am hiểu công nghệ hơn, 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 tải từng phần cho phần tử đó.
Ngoài ra, một API có thể được hiển thị với 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 đối với 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.
Retrofit nội dung hiện có
Nhìn chung, có 2 phương pháp để thêm thuộc tính loading vào các phần tử HTML trong CMS:
- Thêm thuộc tính bên trong trình chỉnh sửa nội dung trong phần phụ trợ, liên tục lưu thuộc tính đó trong cơ sở dữ liệu.
- Thêm thuộc tính một cách nhanh chóng khi kết xuất 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 ngay khi kết xuất để mang lại lợi ích tải từng phần cho mọi nội dung hiện có. Nếu bạn chỉ có thể thêm thuộc tính thông qua trình chỉnh sửa, thì chỉ 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 đến 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 khả năng tải từng phần ở cấp trình duyệt được mở rộng hơn nữa.
Tuy nhiên, việc thêm nhanh thuộc tính này nên phục vụ cho thuộc tính loading có thể hiện có trên một phần tử và hãy để thuộc tính đó chiếm ưu thế. Bằng cách này, CMS hoặc tiện ích của CMS đó cũng có thể triển khai phương thức do người chỉnh sửa thực hiện mà không gây ra 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 (ví dụ) bằng 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 truyền tải DOM hoặc biểu thức chính quy, trong đó thuộc tính sau được đề xuất cho hiệu suất.
Bạn nên duy trì sử dụng biểu thức chính quy ở mức tối thiểu, 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, sau đó thêm thuộc tính loading vào từng chuỗi thẻ nếu có. Ví dụ: WordPress có thể mở rộng phạm vi có một biểu thức chính quy chung để thực hiện nhanh nhiều thao tác cho một số phần tử nhất định, trong đó việc thêm loading="lazy" chỉ là một, 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 còn là một lý do khác khiến bạn nên sử 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. Phương thức này giúp tối ưu hoá hiệu suất phía máy chủ hiệu quả hơn.
Các bước tiếp theo
Xem liệu hiện có phiếu yêu cầu về tính năng nào để thêm tính năng hỗ trợ cho tính năng này trong CMS hay mở một vé 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 (Frexarntz@) nếu có thắc mắc 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 từng phần ở cấp trình duyệt. Nếu bạn gặp phải những thách thức khác, tôi cũng rất muốn tìm hiểu thêm về những thách thức đó để 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 từng phần:
Bạn có thể vận dụng những điều đúc kết được từ nghiên cứu của mình 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 của Colin Watts trên Unsplash.