Tải từng phần hình ảnh ngoài màn hình bằng kích thước tải từng phần

Katie Hempenius

Tải từng phần là phương pháp chờ tải tài nguyên cho đến khi cần thiết, thay vì tải trước. Điều này có thể cải thiện hiệu suất bằng cách giảm lượng tài nguyên cần tải và phân tích cú pháp trong lần tải trang đầu tiên.

Các hình ảnh nằm ngoài màn hình trong lượt tải trang ban đầu là đề xuất lý tưởng cho kỹ thuật này. Hơn hết, kích thước từng phần làm cho chiến lược này trở nên rất đơn giản để triển khai.

Thêm tập lệnh lazysizes vào trang

• Nhấp vào Remix để chỉnh sửa (Remix) để chỉnh sửa dự án.

lazysizes.min.js đã được tải xuống và thêm vào sự cố nhỏ này. Cách đưa dữ liệu này vào trang:

• Thêm thẻ <script> sau vào index.html:

  <script src="lazysizes.min.js" async></script>
  <!-- Images End -->
</body>

lazysizes sẽ tải hình ảnh một cách thông minh khi người dùng cuộn qua trang và ưu tiên những hình ảnh mà người dùng sẽ sớm bắt gặp.

Chỉ báo hình ảnh để tải từng phần

• Thêm lớp lazyload vào những hình ảnh cần tải từng phần. Ngoài ra, hãy thay đổi thuộc tính src thành data-src.

Ví dụ: các thay đổi cho flower3.png sẽ như sau:

<img src="images/flower3.png" alt="">
<img data-src="images/flower3.png" class="lazyload" alt="">

Trong ví dụ này, hãy thử tải từng phần flower3.png, flower4.jpg và flower5.jpg.

Xem ví dụ thực tiễn

Vậy là xong! Để xem những thay đổi này trong thực tế, hãy làm theo các bước sau:

• Để xem trước trang web, hãy nhấn vào View App (Xem ứng dụng), sau đó nhấn vào Fullscreen (Toàn màn hình).

• Mở bảng điều khiển và tìm những bức ảnh bạn vừa thêm. Các lớp của họ sẽ thay đổi từ lazyload thành lazyloaded khi bạn cuộn trang xuống.

• Xem bảng điều khiển mạng để xem các tệp hình ảnh tải riêng lẻ khi bạn cuộn trang xuống.

Xác minh bằng Lighthouse

Cuối cùng, bạn nên sử dụng Lighthouse để xác minh những thay đổi này. Hoạt động kiểm tra hiệu suất "Trì hoãn hình ảnh ngoài màn hình" của Lighthouse sẽ cho biết liệu bạn có quên thêm tính năng tải từng phần vào bất kỳ hình ảnh ngoài màn hình nào hay không.

1. Để xem trước trang web, hãy nhấn vào View App (Xem ứng dụng), sau đó nhấn vào Fullscreen (Toàn màn hình).
2. Nhấn tổ hợp phím "Control+Shift+J" (hoặc "Command+Option+J" trên máy Mac) để mở Công cụ cho nhà phát triển.
3. Nhấp vào thẻ Lighthouse.
4. Đảm bảo bạn đã chọn hộp đánh dấu Hiệu suất trong danh sách Danh mục.
5. Nhấp vào nút Tạo báo cáo.
6. Xác minh rằng bạn đã vượt qua quy trình kiểm tra Trì hoãn hình ảnh ngoài màn hình.

Thành công! Bạn đã sử dụng phương thức tải từng phần để tải từng phần hình ảnh trên trang.