Categories Lazy load

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

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="speed-family.jpg" width="100%"/> 

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

<img data-src="speed-family.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ã JavaScript nhỏ sẽ kiểm tra xem liệu rằng ảnh có nằm trong khung nhìn trình duyệt 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.

Xem video giới thiệu nếu bạn muốn:


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

Trình duyệt Chrome đã mở rộng tính nă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 / tiếng Anh (Speed.Family cũng đã dịch hoàn chỉnh bài viết sang tiếng Việt, bạn có thể tham khảo: Native lazy-loading là gì?)

Điểm cải tiến của native lazy-loading là nó KHÔNG cần JavaScript và yếu tố 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 (thêm thuộc tính loading=”lazy” và giữ nguyên src không cần đổi thành data-src):

<img src="speed-family.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, cập nhật: hiện có nhiều trình duyệt lớn đã thêm tính năng này), với những trình duyệt không hỗ trợ 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 (đây là tính năng rất quan trọng giúp cải thiện trải nghiệm người dùng, tránh hiện tượng trễ. Một plugin lazy load rất chất lượng khác cũng có tính năng tương tự là a3 Lazy Load).

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 hoặc hosting gốc ở xa người dùng (ví dụ người dùng ở Việt Nam nhưng hosting lại nằm ở Hoa Kỳ, châu Â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ờ plugin 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 Flying Images 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à hosting 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 CSS;
  • 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/

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


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, và ảnh chiếm dung lượng đa số).

Do vậy với nhiều 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 có thể không nên dùng lazy load). Người dùng trên trang thương mại điện tử thường thiếu kiên nhẫn chờ ảnh tải về.
  • Trang có rất nhiều ảnh dưới màn hình đầu tiên. Triển khai lazy load sẽ giúp tăng đáng kể tốc độ.
  • 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 điện tử 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. Xem các tùy chọn nhanh trong cài đặt của plugin Flying Images ở đây.

P/S: giờ tôi có cái nhìn khắt khe hơn với lazy load ảnh, bạn có thể đọc bài viết này để hiểu rõ hơn lý do tại sao tải lười ảnh lại không hấp dẫn như mong đợi. Hiện tại tôi cho rằng chỉ các trang có lưu lượng truy cập cực lớn hoặc/và có rất nhiều ảnh dưới màn hình đầu tiên mới nên cân nhắc sử dụng lazy load ảnh, khi đó lợi ích mới có tiềm năng lớn hơn đáng kể rủi ro ảnh hưởng đến trải nghiệm người dùng.


Cập Nhật

Plugin Flying Images mới update với một số tính năng thú vị mà các bạn có thể quan tâm, dùng thử. Cụ thể nó bổ sung thêm dịch vụ CDN miễn phí, tối ưu hóa dung lượng ảnh (với tùy chỉnh chất lượng), tự động chuyển ảnh sang định dạng .webp trên trình duyệt thích hợp như Chrome (giúp tăng tốc độ tải ảnh). Nói về CDN, Flying Images đang sử dụng sản phẩm miễn phí từ statically.io sản phẩm này được tài trợ bởi các ông lớn trong lĩnh vực CDN (CDN77, BunnyCDN, CloudFlare, Fastly).

Ưu điểm nữa là ảnh có gắn canonical giúp CDN không ảnh hưởng đến SEO. Nhưng cũng có nhược điểm, ảnh webp suy giảm chất lượng quan sát được bằng mắt thường ngay cả khi để chất lượng 100%, nhưng hiện tại thì plugin chưa có tính năng tắt áp dụng webp (trừ khi bạn tắt CDN thì webp cũng tự tắt nhưng như thế bạn không tận dụng được lợi thế của CDN). Hiện plugin này đã khắc phục được vấn đề suy giảm chất lượng, giờ nếu bạn để 100% ảnh sẽ không bị ảnh hưởng đến chất lượng.

Mời bàn xem thêm bài đánh giá tổng hợp các dịch vụ CDN chất lượng cho WordPress.

Back to Top