Lazy load ảnh WordPress 2 cách

Lazy Load Ảnh trong WordPress: Tối Ưu Hiệu Suất Website

Trong thế giới web hiện đại, tốc độ tải trang là yếu tố then chốt ảnh hưởng đến trải nghiệm người dùng (UX) và thứ hạng SEO. Ảnh, dù mang lại sự hấp dẫn trực quan, lại thường là nguyên nhân chính gây chậm trễ thời gian tải trang. Lazy load ảnh, hay tải chậm ảnh, là một kỹ thuật giúp trì hoãn việc tải ảnh cho đến khi chúng thực sự cần thiết, tức là khi người dùng cuộn trang xuống gần vị trí của ảnh.

Bài viết này sẽ đi sâu vào lazy load ảnh trong WordPress, khám phá lợi ích và hướng dẫn bạn cách triển khai nó bằng hai phương pháp hiệu quả.

Lợi Ích của Lazy Load Ảnh

Lazy load ảnh mang lại nhiều lợi ích thiết thực cho website WordPress của bạn:

Tăng tốc độ tải trang: Chỉ tải những ảnh hiển thị trên màn hình, giảm dung lượng dữ liệu cần tải ban đầu.
Cải thiện trải nghiệm người dùng: Trang web tải nhanh hơn, mang lại trải nghiệm duyệt web mượt mà hơn cho người dùng.
Giảm băng thông: Tiết kiệm băng thông cho cả người dùng và máy chủ, đặc biệt quan trọng đối với người dùng di động và các gói hosting giới hạn.
Tối ưu SEO: Tốc độ tải trang là một yếu tố quan trọng trong thuật toán xếp hạng của Google.
Cải thiện Core Web Vitals: Lazy load ảnh giúp cải thiện các chỉ số Core Web Vitals, bao gồm Largest Contentful Paint (LCP) và First Input Delay (FID).

Cách 1: Sử Dụng Plugin WordPress để Lazy Load Ảnh

Đây là phương pháp đơn giản và phổ biến nhất để triển khai lazy load ảnh trong WordPress, phù hợp với người dùng không có nhiều kiến thức về lập trình.

Các Plugin Lazy Load Phổ Biến

Có rất nhiều plugin lazy load ảnh miễn phí và trả phí có sẵn trên WordPress.org. Dưới đây là một vài lựa chọn được đánh giá cao:

Smush: Plugin tối ưu hóa hình ảnh toàn diện với tính năng lazy load mạnh mẽ.
Lazy Load by WP Rocket: Một plugin đơn giản và hiệu quả, được phát triển bởi đội ngũ WP Rocket.
Optimole: Plugin tối ưu hóa hình ảnh dựa trên đám mây, cung cấp lazy load, nén ảnh và CDN.
a3 Lazy Load: Plugin miễn phí dễ sử dụng với nhiều tùy chọn tùy chỉnh.
Autoptimize: Plugin tối ưu hóa website toàn diện, bao gồm cả lazy load ảnh.

Hướng Dẫn Cài Đặt và Sử Dụng Plugin

Quy trình cài đặt và kích hoạt plugin lazy load tương tự như các plugin WordPress khác:

Đăng nhập vào trang quản trị WordPress của bạn.
Đi đến mục Plugins > Add New.
Tìm kiếm plugin bạn muốn sử dụng (ví dụ: “Smush” hoặc “Lazy Load by WP Rocket”).
Nhấp vào nút Install Now.
Sau khi cài đặt xong, nhấp vào nút Activate.

Sau khi kích hoạt, plugin thường sẽ tự động bật tính năng lazy load. Tuy nhiên, bạn nên kiểm tra cài đặt của plugin để đảm bảo tính năng này đã được kích hoạt và cấu hình theo nhu cầu của bạn. Ví dụ, với Smush, bạn cần vào Smush > Lazy Load và bật tùy chọn “Activate Lazy Load”.

Cấu Hình Plugin Lazy Load

Hầu hết các plugin lazy load cung cấp các tùy chọn cấu hình cho phép bạn tùy chỉnh hành vi của tính năng này. Các tùy chọn phổ biến bao gồm:

Placeholder: Chọn hình ảnh placeholder hiển thị trong khi ảnh đang tải.
Threshold: Khoảng cách (tính bằng pixel) từ dưới màn hình mà ảnh sẽ bắt đầu tải.
Effect: Chọn hiệu ứng chuyển tiếp khi ảnh được tải (ví dụ: fade-in).
Exclude: Loại trừ các ảnh cụ thể khỏi việc lazy load (ví dụ: logo website).
Apply to: Chọn loại ảnh áp dụng lazy load (ví dụ: ảnh trong nội dung bài viết, ảnh thumbnail).

Cách 2: Triển Khai Lazy Load Ảnh bằng Code

Phương pháp này đòi hỏi kiến thức về HTML, CSS và JavaScript, nhưng mang lại sự linh hoạt và kiểm soát cao hơn. Bạn có thể tùy chỉnh hoàn toàn hành vi của lazy load để phù hợp với thiết kế và chức năng của website.

Sử Dụng Thuộc Tính `loading=”lazy”` của HTML5

HTML5 đã giới thiệu thuộc tính `loading=”lazy”` cho các thẻ `` và “. Trình duyệt sẽ tự động xử lý việc lazy load ảnh và iframe mà không cần đến JavaScript.

Để sử dụng thuộc tính này, bạn chỉ cần thêm `loading=”lazy”` vào thẻ `` của bạn:

<img src="your-image.jpg" alt="Ảnh của bạn" loading="lazy">

Tuy nhiên, không phải trình duyệt nào cũng hỗ trợ thuộc tính này hoàn toàn. Vì vậy, bạn nên sử dụng một polyfill để đảm bảo tính tương thích trên các trình duyệt cũ.

Sử Dụng JavaScript để Triển Khai Lazy Load

Bạn có thể sử dụng JavaScript để triển khai lazy load một cách tùy chỉnh. Dưới đây là một ví dụ đơn giản sử dụng Intersection Observer API:


<script>
  document.addEventListener("DOMContentLoaded", function() {
    var lazyImages = [].slice.call(document.querySelectorAll("img.lazy"));

    if ("IntersectionObserver" in window) {
      let lazyImageObserver = new IntersectionObserver(function(entries, observer) {
        entries.forEach(function(entry) {
          if (entry.isIntersecting) {
            let lazyImage = entry.target;
            lazyImage.src = lazyImage.dataset.src;
            lazyImage.classList.remove("lazy");
            lazyImageObserver.unobserve(lazyImage);
          }
        });
      });

      lazyImages.forEach(function(lazyImage) {
        lazyImageObserver.observe(lazyImage);
      });
    } else {
      // Fallback cho các trình duyệt không hỗ trợ Intersection Observer
      // Bạn có thể sử dụng một thư viện lazy load khác ở đây
      lazyImages.forEach(function(lazyImage) {
        lazyImage.src = lazyImage.dataset.src;
      });
    }
  });
</script>

Giải thích đoạn code:

Đoạn code này tìm tất cả các thẻ `` có class “lazy”.
Nếu trình duyệt hỗ trợ Intersection Observer API, nó sẽ sử dụng API này để theo dõi khi ảnh xuất hiện trên màn hình.
Khi một ảnh xuất hiện trên màn hình, nó sẽ thay thế thuộc tính `src` bằng giá trị của thuộc tính `data-src`.
Nếu trình duyệt không hỗ trợ Intersection Observer API, nó sẽ đơn giản thay thế thuộc tính `src` bằng giá trị của thuộc tính `data-src` cho tất cả các ảnh.

Cách sử dụng:

Thêm class “lazy” vào tất cả các thẻ `` bạn muốn lazy load.
Thay thế thuộc tính `src` bằng thuộc tính `data-src`.
Thêm đoạn code JavaScript vào footer của website của bạn (trước thẻ `</body>`).

Ví dụ:

<img class="lazy" data-src="your-image.jpg" alt="Ảnh của bạn">

Lựa Chọn Phương Pháp Lazy Load Phù Hợp

Việc lựa chọn phương pháp lazy load phù hợp phụ thuộc vào trình độ kỹ thuật và yêu cầu cụ thể của bạn.

Sử dụng plugin:

Ưu điểm: Dễ dàng cài đặt và sử dụng, không yêu cầu kiến thức về lập trình.
Nhược điểm: Có thể ảnh hưởng đến hiệu suất website nếu chọn plugin kém chất lượng, ít tùy chỉnh.
Phù hợp với: Người dùng không có nhiều kinh nghiệm về lập trình, muốn triển khai lazy load nhanh chóng và dễ dàng.

Sử dụng code:

Ưu điểm: Linh hoạt, kiểm soát cao, tối ưu hóa hiệu suất tốt hơn.
Nhược điểm: Yêu cầu kiến thức về lập trình, tốn nhiều thời gian và công sức hơn.
Phù hợp với: Người dùng có kinh nghiệm về lập trình, muốn tùy chỉnh hành vi của lazy load một cách chi tiết.

Kết Luận

Lazy load ảnh là một kỹ thuật đơn giản nhưng hiệu quả giúp cải thiện tốc độ tải trang và trải nghiệm người dùng cho website WordPress của bạn. Bằng cách sử dụng plugin hoặc viết code tùy chỉnh, bạn có thể dễ dàng triển khai lazy load và tận hưởng những lợi ích mà nó mang lại. Hãy thử nghiệm các phương pháp khác nhau và chọn phương pháp phù hợp nhất với nhu cầu và trình độ của bạn.

#ezw_tco-2 .ez-toc-widget-container ul.ez-toc-list li.active::before { background-color: #ededed; } aa