Trở về

Google phát hành plugin Lazyload giúp giảm thời gian load web

bởi Vi Nè

Nếu bạn chưa biết thì lazy-loading là một tính năng cho phép trình duyệt web chỉ tải các nội dung như hình ảnh khi người dùng cuộn trang tới. Điều này cho phép giảm thời gian load web của bạn do trình duyệt web chỉ phải tải những phần nội dung đang được hiển thị trên màn hình thay vì tải tất cả cùng một lúc.

Google đồng thời cũng đã phát hành plugin “chính chủ”, giúp các blogger/ webmaster có thể triển khai tính năng này một cách dễ dàng trên nền tảng WordPress.

Tất cả những gì các bạn cần phải làm là cài đặt và kích hoạt plugin Native Lazyload được phát hành miễn phí trên kho plugin của WordPress.org (link download).

Trước đó, nhớ vô hiệu hóa chức năng lazyload hình ảnh của theme hoặc các plugin khác để tránh xung đột.

Plugin Native Lazyload không có phần thiết lập và nó hoạt động theo nguyên tắc rất đơn giản:

  • Nếu thuộc tính loading không được trình duyệt web hỗ trợ, plugin sẽ quay trở lại giải pháp JavaScript dựa trên IntersectionObserver.
  • Đối với trường hợp JavaScript bị vô hiệu hóa, nhưng thuộc tính loading được trình duyệt web hỗ trợ, một biến thể noscript của phần tử tương ứng sẽ được thêm vào, bao gồm cả thuộc tính loading mà không có bất kỳ thay đổi nào khác.

Native Lazyload không sử dụng JavaScript để lazyload hình ảnh mà sử dụng chính tính năng có sẵn của trình duyệt web Google Chrome (đang chiếm khoảng gần 70% thị phần). Do đó, nó nhẹ và nhanh hơn rất nhiều so với các plugin hay code lazyload khác. Bạn hầu như không thể nhận ra tính năng lazyload đang hoạt động nếu tốc độ mạng và máy tính đủ nhanh (không thấy độ trễ khi load web). Chúng tôi cũng đang sử dụng plugin này trên tất cả hệ thống website của mình.
Kiểm tra xem plugin đã hoạt động hay chưa bằng cách click chuột phải vào 1 hình ảnh trên website của bạn, sau đó chọn Inspect (đối với trình duyệt Google Chrome). Nếu bạn thấy thẻ loading="lazy" xuất hiện trong mã nguồn HTML thì có nghĩa là plugin đã hoạt động bình thường.

Thật đơn giản phải không nào? Chúc các bạn thành công!

Chúng tôi tạm dừng chức năng bình luận, mọi thắc mắc vui lòng gửi thông qua mục liên hệ. Xin cám ơn!

Bài 5: Cách tạo comment trong Python

Bài 4: Cách khai báo biến trong Python

Bài 3: Cài đặt Intellij IDEA và chạy Hello World trong Python

Bài 2: Hướng dẫn download và cài đặt python trên Windows

Bài 5: Tìm hiểu về Props trong ReactJS

Bài 4: Components trong ReactJS

Bài 3: Giới thiệu JSX trong ReactJS

Bài 2: Cài đặt môi trường chạy ReactJS

Bài 18: Thuộc tính icon trong CSS

Các biểu tượng có thể dễ dàng được thêm vào trang HTML của b...

Bài 17: Thuộc tính box model trong CSS

Bài 16: Thuộc tính outline trong CSS

Bài 15: Thuộc tính Height/Width trong CSS

Chat Icon Close Icon