Hướng dẫn thêm Lazy Load cho Ảnh và Video trong WordPress (dùng plugin)

Hình ảnh và video đóng góp một phần không nhỏ trong việc giúp cho website của bạn không chỉ đẹp mà còn phong phú nội dung hơn. Tuy nhiên, hầu hết chúng đều có dung lượng khá lớn, chiếm một phần không nhỏ trong dung lượng website.

Theo báo cáo của httparchive.com, dung lượng ảnh thường chiếm khoảng 45% và video chiếm khoảng 25% dung lượng một website. Chúng vẫn chắc chắn sẽ làm chậm lại tốc độ tải website của bạn dù đã được tối ưu dung lượng. Để cải thiện việc đó, kỹ thuật Lazy Load ra đời giúp bạn cải thiện cảm giác về tốc độ tải trang.

Lazy Load là gì?

Thông thường, khi một người dùng truy cập vào một trang web, trình duyệt sẽ tải toàn bộ trang web, sau đó hiển thị đồng thời toàn bộ nội dung trang lên màn hình. Tuy nhiên, việc chờ để tải toàn bộ nội dung trang sẽ khá mất thời gian nếu trang đó có chứa nhiều hình ảnh và video.

Lazy load sẽ giúp trình duyệt tải từng phần của trang, và hiển thị từng phần, lần lượt khi người dùng cuộn chuột xuống. Tức là phần nào ở trên (người dùng sẽ thấy trước) thì tải trước và hiển thị trước, và phần nào ở dưới thì sẽ tải và hiển thị sau. Việc này sẽ giúp người dùng có cảm giác trang được tải nhanh hơn.

Về mặt kỹ thuật, thực tế kỹ thuật lazy load này là một loạt các thao tác như sau:

  1. Yêu cầu trình duyệt KHÔNG download toàn bộ ảnh/video ngay từ đầu: bằng cách thay toàn bộ hàm src bằng data-src ở tất cả các thẻ <img>.
  2. Khi người dùng cuộn chuột đến khu vực chứa ảnh/video đó, thì mới cho phép trình duyệt tải ảnh: bằng cách thì sử dụng một thư viện JavaScript để đổi ngược data-src thành src.

Việc làm này nghe thì đơn giản, nhưng nếu bạn làm thủ công bằng code thì bạn sẽ phải lục tìm trong tất cả các file php các đoạn code có chứa chữ src để đổi nó thành data-src. Có một vấn đề là mỗi một ảnh hoặc một video trên website của bạn sẽ sinh một đoạn code src. Vì vậy, nếu website của bạn có rất nhiều ảnh/video, thì việc làm thủ công này sẽ rất mất thời gian, dễ nhầm lẫn và có thể bạn sẽ bỏ sót đâu đó.

Vậy làm thế nào để thêm hiệu ứng Lazy Load lên website WordPress của bạn một cách hiệu quả?

Cách thêm hiệu ứng Lazy Load vào WordPress

Như mình đã nói ở trên, việc chỉnh sửa code thủ công khá bất tiện và bất khả thi nếu website của bạn có quá nhiều hình ảnh và video. Vậy nên bạn cần một cách khác tối ưu hơn.

Có hai cách: (1) bạn dùng một đoạn code để tự động thay toàn bộ các đoạn mã src thành data-src và tự động đổi lại khi cần, (2) dùng một plugin.

Thực tế là hai cách này là một. Plugin thực ra cũng là một công cụ có chức năng y hệt như đoạn code tự động ở cách thứ nhất mà thôi. Nhưng nếu bạn là người không rành về code, thì dùng plugin vẫn tốt hơn cả.

Mình cũng bật mí với bạn là các coder cũng chuộng dùng plugin để thêm Lazy Load. Chứng tỏ rằng việc dùng plugin có nhiều lợi hơn là việc dùng code. Nhóm chúng mình thì thường hay sử dụng plugin Lazy Load by WP Rocket nên mình sẽ hướng dẫn các bạn cách thao tác với plugin này nhé.

Bước 1: Tải và kích hoạt plugin

Đây là một plugin miễn phí. Bạn có thể tải và cài đặt nó trực tiếp từ admin dashboard hoặc org.

Bước 2: Thiết lập cho plugin

Sau khi cài đặt và kích hoạt plugin Lazy Load by WP Rocket, bạn tìm đến menu Settings > Lazy Load như ảnh dưới đây nhé.

Thiết lập cho plugin Lazy Load

Ở đây bạn sẽ thấy có 3 ô là Images, Iframes & Videos, Replace Youtube videos by thumbnail đang để trống. Bạn tick vào cả 3 ô này nhé.

Cuối cùng, kéo xuống và nhấn Save Changes là xong.

Đến đây là bạn đã hoàn thành việc thêm Lazy Load cho ảnh và video trên website WordPress của bạn rồi đó. Khá đơn giản khi dùng plugin nhỉ.

Lời cuối

Các bạn lưu ý là có khá nhiều plugin miễn phí giúp bạn thêm hiệu ứng lazy load vào website. Bạn cân nhắc lựa chọn dựa trên số người sử dụng và đánh giá trên WordPress.org để chọn cho mình một plugin phù hợp nhé.

Ngoài ra, ngoài hình ảnh vào video, có một số nội dung khác trên website bạn cũng có thể thêm lazy load như phần comment, CSS, … tùy vào nhu cầu bạn có thể lựa chọn thêm để tối ưu thêm tốc độ tải website của bạn. Và hầu hết các thao tác này đều có plugin miễn phí hỗ trợ. Mình khuyến khích các bạn nên dùng plugin thay vì code như đã giải thích ở trên nha.

Để lại bình luận

Email của bạn sẽ không được hiển thị công khai. Các trường bắt buộc được đánh dấu *