Lazy Loading mà Không Gây Trang Hỏng

Quyết định thứ cần thiết ngay bây giờ, không chỉ thứ xuất hiện sớm trong markup

Lazy loading đánh dấu một tài nguyên là không quan trọng cho đến khi cần. Phân loại theo hành trình thực tế: thiết yếu cho lần xem đầu, phương tiện dưới nếp gấp (below-the-fold), nhúng tùy chọn, và mã cho route hoặc panel sau này. Vị trí trong CMS không phải bằng chứng đủ; một ảnh có thể nằm ngoài vùng nhìn trong một template nhưng là trung tâm trong template khác.

Xem xét lần tải lạnh (cold load) trên một điện thoại nhỏ và một desktop điển hình. Cũng thử các liên kết chiến dịch và anchor trong trang, vì chúng có thể đưa khách xuống sâu hơn trong trang. Việc xem xét đó cho bạn biết những gì phải sẵn sàng mà không cần một yêu cầu kích hoạt bởi cuộn.

Bảo vệ hero và vùng nhìn ban đầu

Không lazy-load nội dung có khả năng xuất hiện khi trang mở. Google cảnh báo chống lại điều này, và phân tích chuyên sâu của web.dev cho thấy lazy-loading ảnh trong viewport ban đầu có thể trì hoãn LCP. Phần tử LCP có thể là hero, ảnh sản phẩm, poster hoặc văn bản; xác minh trên từng template quan trọng thay vì đoán.

Tải một ảnh LCP đã xác nhận một cách eager. Nếu kiểm thử cho thấy một ảnh quan trọng bị mất sự chú ý mạng, thử gợi ý fetch-priority cao cho nó. Đó là một gợi ý, không phải lệnh. Một ảnh nền CSS quan trọng có thể cần preload sớm vì parser không thể khám phá trực tiếp; đo lường trường hợp đó.

Dự trữ không gian trước khi phương tiện đến

Cumulative Layout Shift (CLS) là sự dịch chuyển bất ngờ của nội dung nhìn thấy. Một ảnh bị hoãn mà không có chiều cao xác định có thể đẩy văn bản và điều khiển sau khi người đọc bắt đầu quét hoặc với ý định chạm nút. Đó là rủi ro tương tác, không chỉ vấn đề số liệu.

Cung cấp thuộc tính width và height chính xác cho ảnh và video, hoặc dự trữ hình dạng bằng CSS aspect-ratio. Dùng placeholder có footprint cuối cùng của component. Với iframe của bên thứ ba, dự trữ chiều cao của nó và cung cấp trạng thái đang tải hoặc không khả dụng rõ ràng.

Giữ nội dung có thể tìm thấy và tương tác dễ hiểu

Google Search Central nói rằng Google không tương tác với trang bằng cách cuộn hoặc nhấp. Nội dung lazy-loaded quan trọng nên tải khi nó nhìn thấy, và HTML đã dựng nên tiết lộ nội dung hoặc URL media mong đợi. Kiểm tra các trang đại diện trong Search Console sau khi triển khai.

Một danh sách vô hạn (infinite list) có thể lập chỉ mục cần một route phân trang cho mỗi đoạn bền vững: URL duy nhất và tồn tại lâu dài, nội dung ổn định tại URL đó, và các liên kết đi qua chuỗi. Điều này cũng tạo vị trí có thể chia sẻ để người dùng quay lại.

Khi một hành động tiết lộ nội dung, giữ điều khiển có thể thao tác bằng bàn phím và làm cho kết quả dễ hiểu. Với một cập nhật có ý nghĩa không kèm theo chuyển focus như 'kết quả đã tải', phơi bày trạng thái đó theo chương trình để các công nghệ hỗ trợ có thể thông báo mà không cần di chuyển focus.

Dùng cơ chế ít dễ vỡ nhất

Với ảnh và iframe thông thường nằm ngoài vùng nhìn, lazy loading native của trình duyệt thường là điểm khởi đầu đơn giản nhất. Trình duyệt quyết định khi nào bắt đầu yêu cầu gần viewport; khoảng cách đó không phải là một đảm bảo. Sự kiện load của window có thể xảy ra trong khi các tài nguyên lazy vẫn chưa hoàn tất.

Dùng Intersection Observer khi một component đặt tên cần kích hoạt tùy chỉnh, chẳng hạn mount một panel tốn kém ngay trước khi nó xuất hiện. Giữ observer hẹp và bắt đầu công việc đủ sớm cho cuộn nhanh. Dùng code splitting cho các route không khởi tạo hoặc các tính năng tùy chọn, không dùng nó như lý do trì hoãn nhiệm vụ hiện tại.

Đo lường, phát hành và khắc phục cùng nhau

So sánh baseline và candidate trên cùng URL, trạng thái cache, viewport và đường dẫn người dùng. Dùng kiểm thử lạnh trên mobile có băng thông hạn chế cộng với kiểm tra thiết bị thật nếu có thể. Ghi lại LCP, chuỗi hiển thị, layout shift, lỗi media, HTML đã dựng và các hành động thiết yếu. Dữ liệu thực trường bổ sung cho thử nghiệm lab.

Triển khai một thay đổi có thể đảo ngược và có phạm vi template. Ghi lại các tài sản chuyển từ eager sang deferred, tham chiếu triển khai, hành động cache, chủ sở hữu và bước rollback đầu tiên. Nếu LCP bị lazy hoặc hành trình chuyển đổi trở nên không hoàn chỉnh, loại bỏ quy tắc đó cho tài sản quan trọng và xác minh lại. Kiểm tra lại sau khi thay đổi theme, CMS, dịch vụ ảnh, tag hoặc nhúng.