a3 Lazy Load – Plugin tăng tốc WordPress, tương thích AMP



Xin giới thiệu luôn với các bạn, a3 Lazy Load (a3LL) là 1 plugin thuộc “bộ 3 plugin thần thánh” giúp tăng tốc WordPress mà mình rất tâm đắc, 2 thằng còn lại gồm WP Fastest Cache và Async JS/CSS.

a3 Lazy Load – Cái tên nói lên tất cả. Đơn giản đây là 1 plugin WordPress làm giảm tải việc load ảnh, video, iframe từ đó tăng tốc tải trang, cải thiện trải nghiệm người dùng.

1. Lazy Load là gì? Có ăn được không?

Ở trong một bài viết trước đây, mình đã từng giới thiệu qua về công nghệ Lazy Load. Hiểu nôm na thì nó là một cách khiến cho trình duyệt web “lười đi”, chỉ load ảnh, video… sau các thành phần khác hoặc chỉ load khi người dùng lăn chuột đến nội dung đó. Điều này sẽ giúp giảm tải xử lý cho cả hosting cũng như trình duyệt.



Hiểu đơn giản thì như thế này. Theo lẽ thông thường, khi bạn mở 1 trang web lên, trình duyệt web sẽ phải tải tất cả ảnh về máy để hiển thị, rất mất thời gian. Nhưng với lazyload, nó sẽ không tải tất mà chỉ tải ảnh khi chúng ta lăn chuột đến nó. Điều này khiến trang web mở lên nhanh hơn, người dùng “khoái” hơn, không những thế còn giúp giảm tải máy chủ, do không phải hoạt động với cường độ cao.

2. Tại sao phải sử dụng Lazy Load cho WordPress?

Mình đã thử tắt bỏ a3 Lazy Load (a3LL) để kiểm tra sự khác biệt giữa lúc dùng và không dùng a3LL. Dưới đây là kết quả kiểm tra tốc độ load trang với Pingdom toolGTmetrix. Thử nghiệm với 1 bài viết đã được cache bằng WP Fastest Cache để tăng tính trung thực cho bài test.

Khi không dùng a3LL:

Khi có dùng a3LL:

Như trên, ta có thể thấy việc sử dụng a3LL giúp giảm thời gian tải nội dung trang xuống từ 0,6 đến 0,8 giây. Con số này không hề nhỏ đâu ạ! Chưa kể bài viết mà mình đem thử nghiệm này chỉ có lác đác vài cái ảnh thôi nên sự chênh lệch còn chưa nhiều. Các bạn hãy tự tay làm 1 cuộc thử nghiệm với 1 bài viết cỡ chục cái ảnh full HD cộng với 2,3 cái video Youtube thì sẽ thấy sự chênh lệch nó trở nên “dã man” như thế nào. Mình ước chừng sẽ rơi vào cỡ 3,4 giây – không phải dạng vừa đâu! 😀

3. Hướng dẫn cài đặt và sử dụng a3 Lazy Load

Một đặc điểm chung của “bộ 3 thần thánh” mà mình đề cập ở trên, chính là nó quá đỗi dễ sử dụng. Và a3LL cũng không phải ngoại lệ. Chỉ đơn giản là cài, kích hoạt là xong. Thông số tùy chỉnh mặc định đã quá tối ưu rồi nên ta không cần can thiệp thêm.

Không chỉ lazy load được ảnh và video trong bài viết, a3LL còn giúp ta lazy load được toàn trang, từ bài viết, cho đến widget… Ngoài ra, nó còn hỗ trợ load ảnh noscript cho những ai đang sử dụng các thế hệ trình duyệt cũ không hỗ trợ mã script.

Hiệu ứng lazy load spinner mặc định khá đẹp, tạo cho người đọc cảm giác thoải mái hơn khi được biết rằng mình đang sắp được đón nhận điều gì đó mới mẻ phía trước.

4. Hỗ trợ tốt các trang Accelerated Mobile Pages (AMP)

Gọi là hỗ trợ tốt cho oai thôi chứ bản chất là nó tự động tắt bỏ lazy load ở các trang AMP, tránh gặp phải tình trạng không hiển thị được hình ảnh gốc.

Thực tế, bản thân AMP đã bao gồm cả công nghệ lazy load rồi nên việc tắt ở đây là hoàn toàn hợp lí. Tuy nhiên, mình đã thử qua một số plugin khác nhưng quả đáng tội, hiện tại chỉ mới có mỗi a3LL làm được điều này.

5. Kết luận

Giống như việc tạo cache và bật async javaScript cho WordPress, thêm lazy load cũng là 1 trong những ưu tiên hàng đầu cần phải làm trong “công cuộc tăng tốc tải trang, cải thiện trải nghiệm người dùng”. Bạn đã thấy rõ những hiệu quả mà lazyload mang lại? Vậy còn chần chờ gì nữa mà không thử luôn ngay hôm nay. 🙂





Bình luận

avatar