Giới thiệu Flying Images: plugin lazy load ảnh hiệu suất cao

bởi Nguyễn Đức Anh

Lazy loading hoạt động như thế nào?

Một ảnh thông thường trong HTML trông giống như thế này:

<img src="sample.jpg" width="100%"/>

Các plugin lazy loading sẽ ghi lại đoạn mã trên thành:

<img data-src="sample.jpg" width="100%"/>

Bạn có thể để ý thấy là thuộc tính src được thay thành data-src.

Khi không có src, trình duyệt sẽ không tải ảnh ngay lập tức. Sau đó một đoạn mã nhỏ JavaScript sẽ kiểm tra xem liệu rằng ảnh có nằm trong khung nhìn hay không (viewport – khu vực nằm trong phần quan sát của người xem trên trình duyệt) và nếu nó nằm trong đó, data-src được thay thế thành src, và kích hoạt trình duyệt tải và hiển thị hình ảnh.

Lazy loading kiểu Native nghĩa là gì?

Trình duyệt Chrome đã mở rộng với thuộc tính “native lazy loading”. Bạn có thể tìm hiểu kỹ hơn ở liên kết này.

Điểm cải tiến của native lazy loading là nó không cần JavaScript và điểm thậm chí còn quan trọng hơn là nó sẽ nhanh hơn nhờ quá trình được thực hiện nội bộ bởi trình duyệt.

Đoạn mã giờ đây trông giống như thế này:

<img src="sample.jpg" loading="lazy" width="100%"/>

Plugin Flying Images có gì hay?

plugin flying images

Flying Images là plugin lazy loading có hiệu suất cao. Nó sử dụng chức năng lazy loading “bản địa/native” của trình duyệt khi có thể (hiện chỉ có trên Google Chrome), với những trình duyệt khác nó vẫn sử dụng JavaScript để thực hiện lazy loading.

Flying Images có điểm thú vị là nó tải ảnh trước khi bức ảnh đó nằm trong khung nhìn.

Nhiều người lo lắng không sử dụng lazy loading ảnh vì nó có thể làm giảm trải nghiệm người dùng. Điều đó là có thật vì hiện tượng giật khi tải ảnh, nhất là trên đường truyền yếu. Thậm chí trong trường hợp tệ nhất khi người dùng đọc đến phần có ảnh, mà ảnh mới bắt đầu tải được một chút (dẫn đến khoảng trống khó chịu).

Nhưng với plugin này, hiện tượng đó giảm đi rất nhiều, đến mức rất nhỏ nhờ nó tải trước ảnh khi nó đi vào khung nhìn.

P/S: Hiện tượng tải chậm vẫn có khả năng xảy ra với plugin này nếu đường truyền internet quá thấp, nhưng với đường truyền thấp như vậy thì ngay cả khi không sử dụng lazy load thì ảnh cũng sẽ rất khó tải. Một lý do nữa là hiện đường truyền thấp rất hiếm gặp (trừ khi đứt cáp và host của bạn quá xa Việt Nam). Do vậy chúng ta có nhiều lý do để tự tin sử dụng lazy load trên hầu hết website.

Plugin Flying Images khác biệt với các plugin lazy load khác như thế nào?

  • Sử dụng native lazy loading – Nó sử dụng native lazy loading khi có thể (như đã nói hiện mới chỉ có trên trình duyệt Chrome), với những trình duyệt khác nó sử dụng JavaScript để tải lười ảnh.
  • Tải ảnh trước khi nó đi vào khung nhìn của người xem – Trong khi các plugin khác tải ảnh khi nó “ở bên trong” khung nhìn, Flying Images tải ảnh khi chúng sắp sửa đi vào khung nhìn, giúp giảm hiện tượng giật, lỗi gần như 100%
  • JavaScript nhỏ gọn –  Chỉ có dung lượng 0,5 KB ở dạng tối ưu (minified) và nén gzip.
  • Tùy chọn chỉ sử dụng native – Trong trường hợp bạn chỉ muốn thiết lập lazy load với những ai sử dụng trình duyệt Chrome còn các trình duyệt khác thì không lazy loading, bạn có thể chuyển sang “native only”.
  • Viết lại toàn bộ HTML – Không bao giờ bỏ lỡ bất cứ ảnh nào khỏi chức năng lazy loading (thậm chí là những ảnh nằm trong plugin thư viện/gallery).
  • Placeholder trong suốt – Một ảnh trong suốt base64 được thêm vào tất cả các ảnh. Không còn hiện tượng nhấp nháy trong khi tải ảnh.
  • Tính năng loại trừ từ khóa – Hầu hết tất cả plugin lazy loading cung cấp tính năng loại trừ, tuy nhiên Flying Images có thể loại trừ cả ảnh từ các node cha của ảnh. Hữu ích trong trường hợp ảnh của bạn không có class.
  • Hỗ trợ IE và các trình duyệt tắt JavaScript – Tất cả ảnh được tải ngay lập tức nếu trình duyệt là Internet Explorer hoặc thậm chí nếu JavaScript hoàn toàn bị vô hiệu hóa (sử dụng thẻ noscript).

Tải plugin ở đây: https://wordpress.org/plugins/nazy-load/

Quan điểm của người dịch về plugin này

Vì lazy load ảnh có nhiều tác dụng, trong đó phải kể đến:

  • Tăng tốc độ website đáng kể.
  • Giảm tải cho máy chủ gốc nhờ giảm số lượng kết nối đồng thời.
  • Tiết kiệm tiền nếu bạn đang dùng CDN (vì phần lớn dịch vụ CDN tính tiền theo dung lượng).

Do vậy với hầu hết website chỉ cần có một trong các đặc tính sau bạn nên cân nhắc triển khai Flying Images:

  • Không phải trang thương mại điện tử (nếu là trang thương mại điện tử bạn không nên dùng lazy load). Người dùng trên trang thương mại điện tử không muốn đợi chờ để tải ảnh.
  • Trang có lưu lượng truy cập lớn (bạn sẽ tiết kiệm và tối ưu được rất nhiều nhờ lazy load). Nếu bạn để ý hầu hết các trang báo lớn hiện nay đều triển khai tải lười ảnh.
  • Người duyệt web của bạn dùng trình duyệt Chrome nhiều (sử dụng Google Analytics để biết người dùng của bạn đang dùng các trình duyệt nào). Bạn sẽ tận dụng được lợi ích rất lớn từ tính năng native lazy load của Chrome.

Lưu ý cuối cùng: Sau khi cài đặt, bạn nên kiểm tra cẩn thận tính năng tải lười ảnh trên các trình duyệt khác nhau để đảm bảo rằng không có vấn đề lỗi nào xảy ra, vì lỗi ảnh sẽ là vấn đề rất nghiêm trọng với bất cứ website nào.

(Dịch từ bài viết: Flying Images – A High-Performance Lazy Loading Plugin, tác giả: Gijo Varghese, website: WPSpeedMatters)

0 bình luận

Khu vực bình luận

avatar