Vô hiệu hóa lazy load đúng cách trong WordPress

Giới thiệu về Lazy Load trong WordPress

Lazy Load, hay còn gọi là tải chậm, là một kỹ thuật tối ưu hóa hiệu suất website bằng cách chỉ tải hình ảnh và các tài nguyên media khác khi chúng sắp xuất hiện trong khung nhìn (viewport) của người dùng. Điều này có nghĩa là khi người dùng truy cập trang web, trình duyệt chỉ tải những hình ảnh nằm ngay trên màn hình. Các hình ảnh ở phía dưới trang, hoặc trong các khu vực chưa được cuộn đến, sẽ không được tải cho đến khi người dùng cuộn chuột xuống và chúng sắp hiển thị. Lazy Load giúp giảm thời gian tải trang ban đầu, cải thiện trải nghiệm người dùng và tiết kiệm băng thông.

WordPress đã tích hợp sẵn tính năng Lazy Load cho hình ảnh từ phiên bản 5.5, giúp việc tối ưu hóa trở nên dễ dàng hơn cho người dùng. Tuy nhiên, trong một số trường hợp, việc kích hoạt Lazy Load mặc định có thể gây ra các vấn đề không mong muốn, đặc biệt là khi trang web sử dụng các plugin hoặc theme không tương thích. Khi đó, bạn cần phải vô hiệu hóa Lazy Load một cách chính xác để đảm bảo website hoạt động trơn tru.

Tại sao cần Vô hiệu hóa Lazy Load?

Mặc dù Lazy Load thường mang lại lợi ích, nhưng cũng có những tình huống bạn cần phải vô hiệu hóa nó:

Hình ảnh quan trọng không hiển thị đúng cách: Một số hình ảnh quan trọng (ví dụ: logo, banner chính) có thể không hiển thị ngay khi trang web tải, gây ảnh hưởng đến trải nghiệm người dùng. Điều này thường xảy ra khi Lazy Load được áp dụng quá mức hoặc cấu hình không chính xác.
Xung đột với Plugin hoặc Theme: Một số plugin hoặc theme có thể sử dụng các kỹ thuật Lazy Load riêng, gây xung đột với tính năng Lazy Load mặc định của WordPress. Điều này có thể dẫn đến việc hình ảnh không được tải hoặc hiển thị sai lệch.
Ảnh hưởng đến SEO: Trong một số trường hợp hiếm hoi, việc Lazy Load không được cấu hình đúng cách có thể ảnh hưởng đến việc thu thập dữ liệu của các công cụ tìm kiếm, đặc biệt là đối với các hình ảnh quan trọng.
Vấn đề tương thích với một số trình duyệt cũ: Mặc dù Lazy Load hiện nay đã được hỗ trợ rộng rãi, nhưng vẫn có thể gặp vấn đề với một số trình duyệt cũ, khiến hình ảnh không hiển thị.

Các Phương pháp Vô hiệu hóa Lazy Load

Có nhiều cách để vô hiệu hóa Lazy Load trong WordPress. Tùy thuộc vào nguyên nhân và mức độ cần thiết, bạn có thể chọn một trong các phương pháp sau:

1. Sử dụng Plugin

Đây là phương pháp đơn giản và được khuyến khích cho người dùng không có nhiều kinh nghiệm về code. Có nhiều plugin miễn phí và trả phí cho phép bạn dễ dàng vô hiệu hóa Lazy Load.

Một số plugin phổ biến:

Disable Lazy Load: Plugin đơn giản và nhẹ, chỉ có một chức năng duy nhất là vô hiệu hóa Lazy Load mặc định của WordPress.
Autoptimize: Plugin tối ưu hóa toàn diện, có tùy chọn để vô hiệu hóa Lazy Load, cùng với nhiều tính năng khác như nén CSS, JS, và tối ưu hóa hình ảnh.
WP Rocket: Plugin cache mạnh mẽ, cũng cung cấp tính năng quản lý Lazy Load và cho phép bạn loại trừ một số hình ảnh cụ thể khỏi việc tải chậm.

Hướng dẫn sử dụng plugin:

Cài đặt và kích hoạt plugin bạn chọn.
Tìm đến phần cài đặt của plugin (thường nằm trong mục “Cài đặt” hoặc “Công cụ” trong bảng điều khiển WordPress).
Tìm tùy chọn liên quan đến Lazy Load (thường có tên như “Disable Lazy Load,” “Remove Lazy Loading,” hoặc tương tự).
Kích hoạt tùy chọn để vô hiệu hóa Lazy Load.
Lưu các thay đổi.
Xóa cache (nếu bạn sử dụng plugin cache) và kiểm tra trang web để đảm bảo Lazy Load đã được vô hiệu hóa.

2. Sử dụng Code Snippet (thêm vào functions.php)

Phương pháp này phù hợp cho người dùng có kiến thức về code hoặc muốn có quyền kiểm soát cao hơn. Bạn có thể thêm đoạn code vào file `functions.php` của theme đang sử dụng hoặc sử dụng plugin Code Snippets.

Code Snippet để vô hiệu hóa Lazy Load hoàn toàn:


  function disable_lazy_load( $content ) {
    $content = str_replace( 'loading="lazy"', '', $content );
    return $content;
  }
  add_filter( 'the_content', 'disable_lazy_load' );
  add_filter( 'post_thumbnail_html', 'disable_lazy_load' );
  add_filter( 'get_avatar', 'disable_lazy_load' );

Giải thích code:

Hàm `disable_lazy_load()` nhận nội dung HTML làm đầu vào.
Hàm `str_replace()` tìm tất cả các chuỗi `loading=”lazy”` trong nội dung và thay thế chúng bằng chuỗi rỗng.
Các filter `the_content`, `post_thumbnail_html`, và `get_avatar` được sử dụng để áp dụng hàm `disable_lazy_load()` cho nội dung bài viết, hình ảnh thu nhỏ và ảnh đại diện.

Cách thêm code vào `functions.php`:

Truy cập vào bảng điều khiển WordPress.
Di chuyển đến “Giao diện” -> “Theme File Editor” (hoặc “Theme Editor”).
Tìm file `functions.php` của theme đang sử dụng.
Sao chép đoạn code trên và dán vào cuối file `functions.php`.
Nhấn nút “Update File”.

Lưu ý quan trọng: Trước khi chỉnh sửa file `functions.php`, hãy sao lưu nó trước. Nếu có lỗi trong code, trang web của bạn có thể bị sập. Sử dụng plugin Code Snippets là một lựa chọn an toàn hơn vì nó cho phép bạn thêm và quản lý các đoạn code mà không cần chỉnh sửa trực tiếp file `functions.php`.

3. Vô hiệu hóa Lazy Load cho Hình ảnh Cụ thể

Trong một số trường hợp, bạn chỉ muốn vô hiệu hóa Lazy Load cho một số hình ảnh cụ thể, ví dụ như logo hoặc banner chính. Bạn có thể làm điều này bằng cách thêm thuộc tính `loading=”eager”` vào thẻ `` của hình ảnh đó.

Ví dụ:

<img src="logo.png" alt="Logo của công ty" loading="eager">

Cách thực hiện:

Tìm đến vị trí của hình ảnh mà bạn muốn vô hiệu hóa Lazy Load.
Chỉnh sửa HTML của hình ảnh đó và thêm thuộc tính `loading=”eager”` vào thẻ ``.
Lưu các thay đổi.

Phương pháp này thường được sử dụng khi bạn muốn đảm bảo rằng một số hình ảnh quan trọng sẽ luôn được tải ngay lập tức, bất kể Lazy Load có được kích hoạt hay không.

Kiểm tra và Đảm bảo Vô hiệu hóa thành công

Sau khi áp dụng một trong các phương pháp trên, bạn cần kiểm tra để đảm bảo rằng Lazy Load đã được vô hiệu hóa thành công. Bạn có thể sử dụng các công cụ sau:

Công cụ Developer Tools của trình duyệt: Mở công cụ Developer Tools (thường bằng cách nhấn F12) và chuyển đến tab “Network”. Tải lại trang web và quan sát các request hình ảnh. Nếu Lazy Load đã được vô hiệu hóa, tất cả các hình ảnh sẽ được tải ngay lập tức, thay vì chỉ tải những hình ảnh trong khung nhìn.
Kiểm tra bằng tay: Cuộn xuống cuối trang web và xem tất cả các hình ảnh đã được tải chưa. Nếu Lazy Load vẫn còn hoạt động, bạn sẽ thấy các hình ảnh ở phía dưới trang chỉ được tải khi bạn cuộn đến gần chúng.
Sử dụng các công cụ kiểm tra tốc độ website: Các công cụ như Google PageSpeed Insights hoặc GTmetrix cũng có thể giúp bạn xác định xem Lazy Load có đang hoạt động hay không.

Kết luận

Vô hiệu hóa Lazy Load trong WordPress là một việc cần thiết trong một số trường hợp nhất định. Bằng cách hiểu rõ các lý do và phương pháp khác nhau, bạn có thể chọn cách phù hợp nhất với nhu cầu của mình để đảm bảo trang web hoạt động trơn tru và mang lại trải nghiệm tốt nhất cho người dùng.

Hãy luôn nhớ kiểm tra kỹ lưỡng sau khi thực hiện bất kỳ thay đổi nào để đảm bảo rằng mọi thứ hoạt động như mong đợi. Việc sao lưu website thường xuyên cũng là một thói quen tốt để tránh mất dữ liệu trong trường hợp có sự cố xảy ra.

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