A3 lazy load hướng dẫn
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. 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:
[Lazy Load Video và iframes]
[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://kiencang.net/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:
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í. |