Giới thiệu plugin a3 Lazy Load

Thường thì tôi sẽ dùng luôn tính năng lazy load ảnh, iframe (video, hộp like facebook,…) của plugin cache như LiteSpeed cache, WP-Rocket, Swift Performance. Tuy nhiên vì một lý do nào đó mà việc sử dụng tính năng sẵn có này không làm bạn hài lòng hoặc plugin cache của bạn không có (ví dụ Cache Enabler) thì việc cân nhắc sử dụng plugin chuyên cho lazy load ảnh là lựa chọn rất dễ tìm & còn miễn phí nữa.

a3 Lazy Load

Hôm nay chúng ta sẽ tìm hiểu về a3 Lazy Load– một trong các plugin chuyên tốt nhất về mảng này.

Lưu ý: ngay sau khi kích hoạt plugin, các tính năng mặc định của a3 đã rất tốt rồi, nếu bạn muốn tuỳ chỉnh thêm thì cần tham khảo cẩn thận ý nghĩa của từng tuỳ chọn.

Các tính năng

[Plugin Framework Global Settings]

House Keeping: nếu bạn bật tính năng này, thì khi bạn xoá plugin (chứ không chỉ vô hiệu hoá nó/deactivate), plugin sẽ loại bỏ tất cả các bảng và dữ liệu nó đã tạo, không để lại dấu vết nào.

Đây là tính năng rất hiếm plugin tích hợp vào, có thể là vì lý do kỹ thuật nhưng thường do các lập trình viên lười làm chuyện này, có vẻ như ít ai muốn bản thân không có dấu vết nào trên một website đã từng cài plugin của mình.

NHIỀU LỜI: nếu website của bạn thường xuyên cài rồi gỡ nhiều plugin một thời gian dài, bạn có thể cân nhắc sử dụng plugin tối ưu database.

[Lazy Load Activation]

Bạn để là Enable để bật tính năng lazy load ảnh. Mặc định là nó đã bật.


[Lazy Load Images]

Enable Lazy Load for Images: Bật.

Thường thì các cái dưới bạn cũng nên bật, trừ cái thumbnails bao gồm:

  • Images in Content: Lazy load ảnh trong nội dung;
  • Images in Widgets: Lazy load ảnh trong widget, ví dụ ảnh ở cột phải, cột trái hoặc chân trang;
  • Post Thumbnails: Lazy load ảnh đại diện. Đây là ảnh tác động rất nhiều đến tốc độ duyệt thư mục và đặc biệt là bài post, vì ảnh này luôn chiếm vị trí đầu tiên trên trang- trên hoặc dưới tiêu đề, tức là thuộc màn hình đầu tiên, và do vậy không nên lazy load nó. Trên một số trang ưu tiên tốc độ tôi không dùng ảnh đại diện, tất nhiên trong trang vẫn có ảnh khi cần thiết. Ngoài ra tôi đôi khi cũng dùng thư mục được thiết kế theo kiểu không cần ảnh đại diện;
  • Gravatars: lazy load cho ảnh của người bình luận có ảnh đại diện trên Gravatar, một số plugin cache thậm chí còn làm điều này tốt hơn bằng cách tải các ảnh này xuống lưu cache ở hosting, điều đó giúp giảm tải đáng kể trên các trang có nhiều bình luận;
  • Noscript Support: hiếm thôi, nhưng cũng có người dùng vô hiệu hoá JS, để dự phòng trường hợp đó, bạn bật tính năng này để ảnh vẫn hiện ra;
  • Exclude Images: loại trừ không lazy load ảnh nào đó dựa trên class CSS của nó. Bạn nhập tên các class ảnh không cần lazy load vào phần Skip Images Classes (bỏ qua các ảnh có class này), nếu có nhiều class thì để cách nhau ra bằng dấu phẩy. Thật đáng tiếc là plugin này không có tính năng loại trừ dựa trên URL của ảnh, ví dụ tôi muốn loại trừ không lazy load ảnh logo chẳng hạn, tôi chỉ có URL của nó chứ không có class. a3 Lazy Load nói rằng nếu ảnh không có class thì bất cứ ảnh nào được chủ động thêm class skip-lazy hoặc thuộc tính data-skip-lazy sẽ được loại trừ. Tuy nhiên điều này chỉ khả thi với những ảnh mà bạn biên tập mã được, thí dụ ảnh trong nội dung hoặc widget, còn như logo thì tôi không rõ sẽ chèn thế nào;
  • Horizontal Scroll: a3 Lazy Load có hỗ trợ galleries ảnh theo kiểu cuộn ngang. NHƯNG bạn phải nhập tên class hoặc ID của container bên dưới để nó áp dụng vào container cuộn ngang. Sử dụng trình kiểm tra mã của bạn để có được classname hoặc ID chính xác, nó sẽ có style kiểu như overflow-x:scroll;
  • Container Classnames or IDs: thêm tên lớp với dấu chấm đằng trước, ví dụ .images_holder, thêm ID với hash tag đằng trước, ví dụ #wrapper và phân chia nó bằng dấu phẩy nếu có nhiều hơn một cái.

[Lazy Load Video và iframes]

  • Video and iframes: Để ON để kích hoạt Lazy Load cho WordPress Embeds, HTML5 Video và nội dung tải bằng iframe từ tất cả các nguồn. Lưu ý: WordPress Shortcode không được hỗ trợ;
  • In Content: chỉ video và iframe trong content, mặc định là ON;
  • In Widget: chỉ video và iframe trong widget, mặc định là ON;
  • Noscript support: tương tự như trường hợp với ảnh, bật để dự phòng người dùng vô hiệu hoá JS;
  • Exclude Videos / iframes: loại trừ video, iframe khỏi lazy load dựa trên class của nó, điều cũng tương tự như với ảnh. Với những video không có class name bạn có thể thêm class skip-lazy hoặc thuộc tính data-skip-lazy để chủ động loại trừ.
  • Skip Videos Classes: nơi bạn thêm các class vào, nếu có nhiều class thì cách nhau bằng dấu phẩy.

[Exclude by URI’s and Page Types / loại trừ dựa trên URL và kiểu trang]

Exclude by URIs / loại trừ dựa trên URL: Phần này được dùng để loại trừ các post/page mà bạn không muốn lazy load các ảnh trong đó. Bạn nhập đường dẫn vào phần URIs, không cần nhập đủ cả tên miền, mà chỉ cần nhập phần đuôi là đủ. Ví dụ URL: https://speed.family/chuyen-muc-chi-tieu-de/ thì chỉ cần nhập /chuyen-muc-chi-tieu-de/

Page Type Exclusions / loại trừ dựa trên kiểu trang: Bạn không áp dụng lazy load ảnh trên một số kiểu bài post/page nào đó. Để ON nghĩa là bạn loại trừ. Các kiểu post/page mà a3 hỗ trợ loại trừ bao gồm:

  • Home page/Trang chủ;
  • Front page;
  • Posts;
  • Pages;
  • Post Categories / Trang chuyên mục;
  • Post Tags / Trang tags;
  • Search Page / Trang tìm kiếm;
  • Author Pages / Trang tác giả;
  • Archive Pages / Trang lưu trữ;

NHIỀU LỜI: xem thêm sự khác nhau giữa post và page trong WordPress.


[Script Load Optimization]

Mặc định để ở footer. a3 lazy Load nói rằng, theme của bạn phải có hàm wp_footer() nếu bạn chọn tải FOOTER.

[WordPress Mobile Template Plugins]

Disable On WPTouch: Vô hiệu hoá a3 Lazy Load khi bạn đang dùng WPTouch mobile theme;

Disable On MobilePress: Vô hiệu hoá a3 Lazy Load khi bạn dùng theme MobilePress;

Ở phần này thì tôi hiểu là nếu bạn cài 2 theme trên thì không nên cài plugin a3 lazy load nữa.


[Effect & Style / Hiệu ứng]

Loading Effect: Mặc định là spinner (biểu tượng load quay vòng) hoặc fade in (ảnh dần hiện lên). Bạn thích cái nào thì bật lên, cá nhân tôi thích fade in hơn.

Loading Background Colour: Màu nền đợi, mặc định là màu trắng, bạn có thể để là màu xám nhạt cũng ổn để người dùng biết là khu vực đó đang có chỗ chờ tải về thay vì người dùng nghĩ là bị lỗi bố cục gì đó. Với những hosting nhanh và đủ gần, hiếm khi bạn thấy màu nền chờ này.


[Image Load Threshold / Ngưỡng load ảnh]

Đây là tính năng quan trọng giúp cái thiện độ trễ trong lazy load ảnh. Bình thường thì ảnh sẽ chỉ load khi nó đi vào khung nhìn trình duyệt (viewport), với tính năng này, ảnh cách khung nhìn tình duyệt một khoảng (theo chiều dọc) mà bạn chọn thì nó đã được tải rồi (ví dụ 1000px). Plugin lazy load ảnh có chất lượng khác là Flying Images cũng có tính năng này.

Vấn đề độ trễ rất hay gặp trên các hosting ở xa người dùng, vì thời gian tải cần tăng lên do quãng đường truyền tải dữ liệu xa. Nó cũng gặp ở trường hợp người dùng có thói quen lướt nhanh trên di động thay vì đọc chậm rãi (dở cái, thói quen lướt nhanh ngày càng phổ biến- tôi không loại trừ bản thân mình!).

Thường thì tôi hay để 1000px, để giá trị càng cao, bạn càng giảm bớt được ảnh hướng xấu của độ trễ, nhưng ngược lại, khả năng tích kiệm băng thông, và giảm thời gian tải lần đầu cũng bị tụt đi.


[Khả năng tương thích với Jetpack Site Accelerator (Photon)]

Nếu bạn sử dụng Jetpack để làm CDN ảnh, bạn bật tính năng này lên để ảnh được lazy load.

Nói thêm một chút: Jetpack cũng với Cloudflare là hai dịch vụ CDN miễn phí đúng nghĩa và có chất lượng tốt một thời gian dài rồi, mới đây còn có thêm statically.io nữa, dịch vụ này được khá nhiều công ty tài trợ, trong đó có cả Cloudflare.

PS1: Ngoài a3 Lazy Load bạn có thể tham khảo plugin lazy ảnh rất tốt khác là Flying Images, ưu điểm là có thêm CDN miễn phí từ statically.io

PS2: Giảm ảnh hưởng xấu đến trải nghiệm người dùng, ngoài cách sử dụng ngưỡng tải trước còn có LQIP. Tuy nhiên LQIP không có trên phần đa các plugin miễn phí, hiện chỉ có LiteSpeed cache, nhưng cũng khá giới hạn số lượng. Swift Performance cũng sử dụng LQIP và có chất lượng tốt- nhưng đây lại là plugin có phí.

Leave a Comment