Đang tải Lazy

Kỹ thuật tải lười (lazy loading) trì hoãn việc tải tài nguyên cho đến khi chúng thực sự cần thiết, thường bằng cách trì hoãn việc tải hình ảnh, iframe và các thành phần cho đến khi chúng nằm gần khu vực hiển thị của màn hình. Mục đích là để giảm thiểu khối lượng công việc cần thiết để hiển thị nội dung ban đầu, sao cho nội dung mà người dùng nhìn thấy ngay lập tức không phải cạnh tranh băng thông và xử lý với nội dung nằm sâu bên dưới màn hình mà có thể sẽ không bao giờ được xem.

Kỹ thuật này đã trở nên dễ áp ​​dụng cho hình ảnh và iframe, nơi thuộc tính gốc của trình duyệt xử lý mà không cần bất kỳ JavaScript nào, trình duyệt sẽ quyết định thời điểm bắt đầu tải dựa trên khoảng cách đến khung nhìn và điều kiện kết nối. Đối với các thành phần và tuyến đường, việc chia tách mã đạt được hiệu quả tương đương bằng cách trì hoãn việc tải các gói JavaScript cho đến khi một tuyến đường được truy cập hoặc một tính năng được sử dụng, điều này có thể giảm đáng kể lượng mã cần được tải xuống và thực thi trước khi một trang trở nên tương tác.

Sai lầm phổ biến và tai hại nhất là áp dụng nó một cách bừa bãi, bao gồm cả nội dung hiển thị ngay trong khung nhìn đầu tiên. Việc tải ảnh chính (hero image) theo kiểu lười biếng sẽ làm trì hoãn chính xác phần tử quyết định kích thước vùng hiển thị nội dung lớn nhất, và tạo ra kết quả tệ hơn so với việc không áp dụng kỹ thuật này. Cách làm đúng là tải nội dung phía trên màn hình (above-the-fold) ngay lập tức, lý tưởng nhất là sử dụng gợi ý ưu tiên (priority hint), và chỉ trì hoãn việc tải nội dung thực sự nằm dưới màn hình (below the fold). Việc áp dụng tràn lan thông qua plugin hoặc cài đặt toàn cục là nguyên nhân khiến các trang web có chỉ số tải kém hơn sau khi thực hiện tối ưu hóa hiệu suất.

Tính ổn định bố cục là yếu tố thứ hai cần xem xét. Hình ảnh được tải trì hoãn mà không có không gian dành riêng sẽ khiến nội dung bị xê dịch khi tải, biến việc cải thiện tốc độ tải thành vấn đề không ổn định về mặt hình ảnh. Kích thước hoặc tỷ lệ khung hình cụ thể cho mỗi phần tử được tải trì hoãn là bắt buộc, và một phần tử giữ chỗ chiếm đúng không gian sẽ giúp việc tải trì hoãn trở nên vô hình đối với người dùng, chứ không chỉ đơn thuần là nhanh hơn.

Có những trường hợp kỹ thuật này không phù hợp. Nội dung cần phải có mặt để công cụ tìm kiếm lập chỉ mục một cách đáng tin cậy, các trang in cần hiển thị đầy đủ thông tin, và giao diện nơi người dùng thường xuyên cuộn nhanh qua các danh sách dài đều bị ảnh hưởng bởi việc trì hoãn tải quá mức. Trong trường hợp cuối cùng, hình ảnh chỉ tải khi chúng đến gần khung nhìn sẽ đến quá muộn đối với người dùng cuộn nhanh, tạo ra một loạt các hình ảnh trống, và cần có biên độ tải lớn hơn hoặc một chiến lược khác.

Một vấn đề cần xem xét liên quan là điều gì xảy ra khi việc trì hoãn tải hình ảnh thất bại. Nếu hình ảnh chỉ được tải thông qua JavaScript mà không được thực thi do lỗi, tập lệnh bị chặn hoặc trình duyệt không hỗ trợ, trang sẽ hiển thị mà không có hình ảnh và không có phương án dự phòng. Việc trì hoãn tải hình ảnh gốc của trình duyệt tránh hoàn toàn điều này, đó là một lý do tại sao nên ưu tiên sử dụng phương pháp này hơn các phương pháp dựa trên tập lệnh bất cứ khi nào nó đáp ứng được yêu cầu. Trong trường hợp thực sự cần thiết phải sử dụng phương pháp dựa trên tập lệnh, việc cung cấp một phương án dự phòng để tải nội dung khi cơ chế này không khả dụng là một công việc nhỏ giúp ngăn ngừa một loại lỗi không thể phát hiện được trong quá trình kiểm thử thông thường và ảnh hưởng đến một tỷ lệ nhỏ nhưng có thật đối với khách truy cập.

Nếu được áp dụng một cách khéo léo, việc trì hoãn hiển thị nội dung là một trong những kỹ thuật hiệu quả nhất dành cho các trang có nhiều nội dung nằm ngoài phần hiển thị ban đầu, điển hình là các trang liệt kê sản phẩm, bài viết và các trang tiếp thị dài. Trên thực tế, đây là một thành phần của chiến lược tải trang rộng hơn được đề cập trong bài viết này. hiệu suất web công việc này, cùng với định dạng và kích thước hình ảnh, ưu tiên tài nguyên và cấu trúc gói, và tác động của nó là lớn nhất trong thương mại điện tử trong những trường hợp trang danh mục chứa hàng chục hình ảnh và người dùng truy cập bằng thiết bị di động phải chịu toàn bộ chi phí tải tất cả hình ảnh cùng một lúc.