Tìm hiểu cách áp dụng thuộc tính tải được chuẩn hoá
Mục tiêu của tôi với bài đăng này là thuyết phục những người đóng góp và nhà phát triển nền tảng CMS (tức là những người phát triển lõi CMS) rằng giờ là lúc triển khai việc hỗ trợ 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 bổ sung tính năng hỗ trợ vào 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 (nghĩa 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 việc 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 nội dung đề 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 từng phần.
Thông tin khái quát
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 của WhatWG và nhiều trình duyệt nhận thấy ngày càng nhiều trình duyệt sử dụng.
Tuy nhiên, những mốc quan trọng này chỉ đặt nền tảng cho một web nhanh hơn và tiết kiệm tài nguyên hơn.
Nay đã có trong hệ sinh thái web được phân phối để sử dụng thuộc tính loading.
Các hệ thống quản lý nội dung hỗ trợ khoảng 60% các 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 hiện đại của trình duyệt lên web. Với 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 phương pháp hỗ trợ của các CMS đó cũng như những điểm cần ghi nhớ 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 từng phần nội dung đa phương tiện là một tính năng hiệu suất web quan trọng mà các trang web sẽ hưởng lợi ở quy mô lớn. Đó là lý do bạn nên áp dụng phương tiện này ở cấp độ cốt lõi CMS.
Trường hợp triển khai tải từng phần ngay bây giờ
Tiêu chuẩn hoá
Việc áp dụng các tính năng không được chuẩn hoá của trình duyệt trong CMS tạo điều kiện cho việc thử nghiệm trên diện rộng và có thể cho thấy các khía cạnh tiềm năng cần cải thiện. Tuy nhiên, điểm đồ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 chưa được chuẩn hoá, thì tốt nhất 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ỉ sau khi chuẩn hoá một tính năng mới có thể được xem xét đưa vào sử dụng trong lõi nền tảng.
Hỗ trợ trình duyệt
Khả năng hỗ trợ tính năng này trên trình duyệt cũng là mối lo ngại tương tự: Phần lớn người dùng CMS có thể hưởng lợi từ tính năng này. Nếu có một tỷ lệ phần trăm đáng kể 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 rằng tính năng này ít nhất không ảnh hưởng xấu đến 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ải từng phần là về nguyên tắc, các phương pháp này 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. Không giống với các giải pháp dựa trên JavaScript trước đây, các trình duyệt sử 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 của mình 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, tính năng tải từng phần ở cấp trình duyệt phải an toàn để được các nền tảng CMS áp dụng.
Đề 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 hiện tượng thay đổi bố cục, chúng tôi vẫn 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ể 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ó đượ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 sẽ cao hơn 0,1%, cách này sẽ phù hợp hơn một chút nếu sử dụng phương thức tải từng phần.
CMS nên cung cấp các 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 việc này cho tất cả phần tử như vậy, thì bạn nên bỏ qua hoạt động tải từng phần của những hình ảnh 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, bạn chỉ nên thêm 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 bị trễ chỉ số Thời gian hiển thị nội dung lớn nhất. Trong một số trường hợp, chỉ số này có thể là đáng kể như đã phát hiện vào tháng 7 năm 2021. Tuy nhiên, bạn phải xác 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 các thuộc tính loading. Tuy nhiên, ngay cả khi có sự can thiệp thủ công, bạn vẫn cần 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ó thể xuất hiện trong màn hình đầu tiên khỏi bị tải từng phần.
Tránh dùng JavaScript dự phòng
Bạn có thể dùng JavaScript để cung cấp chế độ tải từng phần cho các trình duyệt không (chưa) hỗ trợ thuộc tính loading, nhưng ban đầu, các cơ chế như vậy luôn dựa vào việc xoá thuộc tính src của một hình ảnh hoặc iframe. Điều này 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 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. Đó là một phần lý do tại sao không có CMS lớn nào sử dụng tính năng tải từng phần trong cốt lõi trước tính năng của trình duyệt được chuẩn hoá.
Đề xuất kỹ thuật
Bật chế độ 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 từng phần ở cấp trình duyệt là bật tính năng này theo mặc định, tức là 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ó 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 hơn so với khi phải bật theo cách thủ công, chẳng hạn như trên cơ sở từng hình ảnh.
Nhiều nhất có thể, loading="lazy" chỉ nên
thêm vào các phần tử có khả năng xuất hiệ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 về phía máy khách và kích thước khung nhìn khác nhau, nhưng ít nhất bạn nên sử dụng thông tin 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 tải từng phần.
Cho phép sửa đổi từng phần tử
Mặc dù phải thêm loading="lazy" vào hình ảnh và iframe theo mặc định, nhưng việc cho phép bỏ qua thuộc tính trên một số hình ảnh nhất đị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 trung bình được xem là am hiểu công nghệ hơn, thì đây có thể là một thành phần điều khiể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ị 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 phần tử HTML cụ thể trong nội dung.
Retrofit cho 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 từ bên trong trình chỉnh sửa nội dung ở 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 nhanh chóng khi kết xuất, để cũng áp dụng lợi ích tải từng phần vào 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ỉ phần nội dung mới hoặc được sửa đổi gần đây mới nhận được lợi ích, 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 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.
Việc thêm thuộc tính nhanh chóng sẽ phục vụ cho thuộc tính loading có thể có sẵn trên một phần tử và cho phép thuộc tính như vậy được ưu tiên. Bằng cách này, CMS hoặc tiện ích cho nó cũng có thể triển khai phương pháp dựa trên trình chỉnh sửa 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 cách sử dụng phần mềm trung gian phía máy chủ (chẳng hạn như 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ì việc 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 thu thập tất cả các thẻ img và iframe trong nội dung bao gồm cả các thuộc tính tương ứng, sau đó thêm thuộc tính loading vào từng chuỗi thẻ (nếu có). Ví dụ như WordPress có một biểu thức chính quy chung duy nhất để 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, bằng cách sử dụng một biểu thức chính quy duy nhất để hỗ trợ nhiều tính năng. Hình thức tối ưu hoá này cũng 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 phần cốt lõi của CMS thay vì một tiện ích – điều 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
Kiểm tra xem liệu có sẵn phiếu yêu cầu hỗ trợ về tính năng để thêm dịch vụ hỗ trợ cho tính năng đó trong CMS hay không, hoặc mở một phiếu yêu cầu hỗ trợ mới nếu chưa có. Hãy tham chiếu đến bài đăng này nếu cần để hỗ trợ đề xuất của bạn.
Tweet cho tôi (đại diện cho tôi@ ) nếu bạn có câu hỏi hoặc nhận xét, hoặc để CMS 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 hiếu kỳ tìm hiểu thêm về chúng để 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ể sử dụng những gì học hỏi được từ nghiên cứu của mình và đề xuất kỹ thuật trong bài đăng này để bắt đầu đóng góp mã cho CMS của mình, chẳng hạn như dưới dạng bản vá hoặc yêu cầu lấy dữ liệu.
Ảnh chính của Colin Watts trên Unsplash.