Thêm hiệu ứng Lazy Load ảnh vào WordPress (không dùng plugin)



Có thể bạn chưa biết: Ảnh là một trong những thành phần nặng nhất trên các trang web thời hiện đại. Việc thiếu đi phần hình ảnh sẽ làm nội dung trang web trở nên nhàm chán hơn, không hấp dẫn người đọc vào xem. Tuy nhiên, chính vì nó là một trong những thành phần nặng nhất nên dù ít hay nhiều cũng sẽ ảnh hưởng không nhỏ đến tốc độ tải trang của bạn. Với những trang web chỉ toàn hình là hình mà lại còn full HD không che nữa thì việc không bật Lazy Load nhiều lúc sẽ khiến cho khách truy cập bị đơ hình trong vài giây vì độ “bom tấn” của ảnh.

Vậy Lazy Load là gì?

Như tên gọi của nó thôi. Nó là một cách khiến cho trình duyệt web lười load ảnh, load ảnh 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, tăng tốc load trang, nâng cao trải nghiệm người dùng.

Làm sao để bật Lazy Load?

Hiện tại, có vô số plugin trên WordPress có thể làm tốt nhiệm vụ này. Tuy nhiên, trong bài viết hôm nay, mình sẽ giới thiệu cho các bạn một cách để thêm Lazy load vào WordPress mà không cần sử dụng đến plugin.



Rất đơn giản, các bạn mục chỉnh sửa (Editor) của giao diện (Appearance), thêm đoạn code bên dưới đây vào cuối tệp functions.php.

function bat_lazyload_hinh_anh($content) {
return preg_replace_callback('/(<\s*img[^>]+)(src\s*=\s*"[^"]+")([^>]+>)/i', 'thay_the_anh_lazyload', $content);
}
add_filter('the_content', 'bat_lazyload_hinh_anh');
add_filter('post_thumbnail_html', 'bat_lazyload_hinh_anh');

function thay_the_anh_lazyload($img_match) {
$img_replace = $img_match[1] . 'src=data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw== data-src' . substr($img_match[2], 3) . $img_match[3];
$img_replace .= '<noscript>' . $img_match[0] . '</noscript>';
return $img_replace;
}

function them_lazyloadxt_footer() {
echo '<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/jquery.lazyloadxt/1.1.0/jquery.lazyloadxt.extra.min.js"></script>';
}
add_action('wp_footer', 'them_lazyloadxt_footer');

P/s: Nếu theme bạn đang dùng có bật sẵn jquery rồi thì xóa bỏ đoạn màu xanh nhé!

Trong đoạn code trên, mình sử dụng thư viện Lazy load có tên là Lazyload XT. Nhìn chung mình thấy nó khá mạnh và dễ sử dụng nên mình đưa vào để giới thiệu. Ngoài ra, đã có nhiều bạn nói với mình việc bật Lazy load làm cho Google bot không index được ảnh. Nhưng mình đã chèn thêm đoạn <noscript>ảnh gốc</noscript> ở trên rồi nhé nên bạn cứ yên tâm là các con bot chắc chắn sẽ index ảnh cho bạn.

Còn dưới đây mình sẽ demo thử 1 trang tràn trề hình ảnh (có bật Lazy load). Bạn hãy kiểm tra xem mình nói có đúng không nhé. 🙂

Demo: https://toiyeuwp.com/wp-content/uploads/images-lazy-loading-stress-test.html





1
Bình luận

avatar
WordPress
Guest
WordPress

Dùng cái này tăng tối độ tải trang hay sao bạn?