WordPress vô hiệu hóa tải lười biếng cho một hình ảnh

Lazy loading là một trong những kỹ thuật tối ưu hóa web được sử dụng nhiều nhất cho WPO và cải thiện các chỉ số web cốt lõi, và trên thực tế, một trong những kỹ thuật có ý nghĩa nhất

Về cơ bản, nó không tải bất kỳ hình ảnh, khung nội tuyến, video nào, trong khi người dùng không điều hướng đến vị trí của nó, tải dần dần khi khách truy cập cuộn xuống trang

Điều này có nghĩa là trình duyệt không phải tải xuống các tài nguyên có thể không cần thiết để hiển thị, do đó cải thiện thời gian tải và tiết kiệm tài nguyên của trình duyệt, thiết bị và thậm chí cả máy chủ

Đó là một kỹ thuật tuyệt vời, trong trường hợp bạn không biết, WordPress đã tích hợp theo mặc định, nguyên bản

Mục lục

Tại sao tôi nên tắt tải chậm nếu nó quá tuyệt?

Chà, hóa ra có những lúc bạn muốn kiểm soát, hoặc thậm chí vô hiệu hóa, tải chậm phương tiện, của một số phương tiện hoặc một số phương tiện trên một số trang, trong một số tình huống, v.v.

Ngoài ra, đôi khi bạn cũng sẽ thấy rằng Google PageSpeed ​​​​sẽ hiển thị cho bạn các lỗi ảnh hưởng đến hình ảnh LCP trong lần đầu tiên (trong màn hình đầu tiên) với tải chậm, điều này được giải quyết bằng cách xóa thuộc tính tải chậm

Tại sao cái này rất?

Đây là những gì chúng ta sẽ học hôm nay, cách kiểm soát có chọn lọc lazy loading

Ghi chú. Trừ khi có quy định khác, tất cả các mã PHP mà tôi sắp chia sẻ tốt nhất nên được thêm vào một plugin tùy chỉnh hoặc, nếu không, thì vào các chức năng. tệp php của chủ đề con đang hoạt động

Vô hiệu hóa WordPress lazy loading

Điều đầu tiên, không có gì chọn lọc, nhưng bạn nên biết, là bạn có thể vô hiệu hóa hoàn toàn tính năng lazy loading của WordPress

Mặc dù có vẻ như nó không liên quan gì đến mục đích của hướng dẫn này nhưng nó hoàn toàn hợp lý, bởi vì đôi khi, tốt hơn là nên kích hoạt và quản lý tải bị hoãn lại bằng plugin và đây là bước đầu tiên – nếu plugin không thực hiện được

Mã là cái này

/* Disable native lazy loading WP */
add_filter( 'wp_lazy_loading_enabled', '__return_false' );
Code language: JavaScript (javascript)

Nếu muốn, bạn cũng có thể vô hiệu hóa nó bằng các plugin như cái này hoặc cái này

Vô hiệu hóa lazy loading theo ID và kích thước

Bắt đầu tùy chỉnh có chọn lọc tải bị trì hoãn, cách tiếp cận đầu tiên sẽ là vô hiệu hóa tải chậm đối với một số phương tiện nhất định (hình ảnh, v.v. ) bằng cách cho biết ID và kích thước của chúng

Mã sẽ giống như ví dụ này

/* Disable lazy loading by image ID and size */
function wphelp_no_lazy_load_id( $value, $image, $context ) {
if ( 'the_content' === $context ) {
$image_url = wp_get_attachment_image_url( 4532, 'large' ); // Change the ID and size
if ( false !== strpos( $image, ' src="' . $image_url . '"' )) {
return false;
}
}
return $value;
}
add_filter( 'wp_img_tag_add_loading_attr', 'wphelp_no_lazy_load_id', 10, 3 );
Code language: PHP (php)

Trong trường hợp này, chúng tôi hủy kích hoạt hình ảnh có ID

/* Disable lazy loading by image ID and size */
function wphelp_no_lazy_load_id( $value, $image, $context ) {
if ( 'the_content' === $context ) {
$image_url = wp_get_attachment_image_url( 4532, 'large' ); // Change the ID and size
if ( false !== strpos( $image, ' src="' . $image_url . '"' )) {
return false;
}
}
return $value;
}
add_filter( 'wp_img_tag_add_loading_attr', 'wphelp_no_lazy_load_id', 10, 3 );
Code language: PHP (php)

/* Disable lazy loading by image ID and size */
function wphelp_no_lazy_load_id( $value, $image, $context ) {
if ( 'the_content' === $context ) {
$image_url = wp_get_attachment_image_url( 4532, 'large' ); // Change the ID and size
if ( false !== strpos( $image, ' src="' . $image_url . '"' )) {
return false;
}
}
return $value;
}
add_filter( 'wp_img_tag_add_loading_attr', 'wphelp_no_lazy_load_id', 10, 3 );
Code language: PHP (php)

Vô hiệu hóa tải chậm trên hình ảnh đầu tiên

Xem xét những gì tôi đã đề cập ở phần đầu của hướng dẫn này, sự cố do Google PageSpeed ​​phát hiện liên quan đến tải chậm trong số liệu LCP, một cách để giải quyết vấn đề đó là vô hiệu hóa tải chậm trên hình ảnh đầu tiên của trang được truy cập

Đây có thể là hình ảnh của băng chuyền, hình ảnh nổi bật của bài đăng hoặc trang hoặc đơn giản là hình ảnh đầu tiên của nội dung

Có một số cách để thực hiện việc này, tùy thuộc vào cách bạn đã bật chế độ tải chậm…

Không có plugin

Nếu bạn không sử dụng plugin hoặc bạn muốn có mã để vô hiệu hóa lười tải hình ảnh đầu tiên trong WordPress, bạn có thể sử dụng mã này

/* Remove lazy load first image */
function add_responsive_class($content){
if ( is_single() || is_page() || is_front_page() || is_home() ) {
$content = mb_convert_encoding($content, 'HTML-ENTITIES', "UTF-8");
$document = new DOMDocument();
libxml_use_internal_errors(true);
$document->loadHTML(utf8_decode($content));
$imgs = $document->getElementsByTagName('img');
$img = $imgs[0];
if ($imgs[0] == 1) { // Check first if it is the first image
$img->removeAttribute( 'loading' );
$html = $document->saveHTML();
return $html;
}
else {
return $content;
}
}
else {
return $content;
}
}
add_filter ('the_content', 'add_responsive_class');
Code language: PHP (php)

Với Tự động tối ưu hóa

Nếu bạn sử dụng tính năng lazy loading của plugin này, bạn sẽ phải thêm mã này để hủy kích hoạt nó từ hình ảnh đầu tiên của trang, bất kể nó là gì

/* Disable lazy load with Autopimize of the first image */ 
add_filter( 'eio_lazy_fold', function( $count ) {
return 1;
});
Code language: PHP (php)

Nếu vì lý do nào đó, nó không hoạt động, có thể hình ảnh đầu tiên không phải là hình ảnh nội dung, mà là biểu tượng tiêu đề chẳng hạn, trong trường hợp đó, bạn có thể thử thay đổi

/* Disable lazy loading by image ID and size */
function wphelp_no_lazy_load_id( $value, $image, $context ) {
if ( 'the_content' === $context ) {
$image_url = wp_get_attachment_image_url( 4532, 'large' ); // Change the ID and size
if ( false !== strpos( $image, ' src="' . $image_url . '"' )) {
return false;
}
}
return $value;
}
add_filter( 'wp_img_tag_add_loading_attr', 'wphelp_no_lazy_load_id', 10, 3 );
Code language: PHP (php)

/* Disable lazy loading by image ID and size */
function wphelp_no_lazy_load_id( $value, $image, $context ) {
if ( 'the_content' === $context ) {
$image_url = wp_get_attachment_image_url( 4532, 'large' ); // Change the ID and size
if ( false !== strpos( $image, ' src="' . $image_url . '"' )) {
return false;
}
}
return $value;
}
add_filter( 'wp_img_tag_add_loading_attr', 'wphelp_no_lazy_load_id', 10, 3 );
Code language: PHP (php)

Một phương pháp khác được cung cấp bởi các nhà phát triển plugin là với mã khác này

Một lần nữa, bạn có thể thay đổi số lượng hình ảnh bằng cách thay đổi

/* Disable lazy loading by image ID and size */
function wphelp_no_lazy_load_id( $value, $image, $context ) {
if ( 'the_content' === $context ) {
$image_url = wp_get_attachment_image_url( 4532, 'large' ); // Change the ID and size
if ( false !== strpos( $image, ' src="' . $image_url . '"' )) {
return false;
}
}
return $value;
}
add_filter( 'wp_img_tag_add_loading_attr', 'wphelp_no_lazy_load_id', 10, 3 );
Code language: PHP (php)

/* Remove lazy load first image */
function add_responsive_class($content){
if ( is_single() || is_page() || is_front_page() || is_home() ) {
$content = mb_convert_encoding($content, 'HTML-ENTITIES', "UTF-8");
$document = new DOMDocument();
libxml_use_internal_errors(true);
$document->loadHTML(utf8_decode($content));
$imgs = $document->getElementsByTagName('img');
$img = $imgs[0];
if ($imgs[0] == 1) { // Check first if it is the first image
$img->removeAttribute( 'loading' );
$html = $document->saveHTML();
return $html;
}
else {
return $content;
}
}
else {
return $content;
}
}
add_filter ('the_content', 'add_responsive_class');
Code language: PHP (php)

/* Remove lazy load first image */
function add_responsive_class($content){
if ( is_single() || is_page() || is_front_page() || is_home() ) {
$content = mb_convert_encoding($content, 'HTML-ENTITIES', "UTF-8");
$document = new DOMDocument();
libxml_use_internal_errors(true);
$document->loadHTML(utf8_decode($content));
$imgs = $document->getElementsByTagName('img');
$img = $imgs[0];
if ($imgs[0] == 1) { // Check first if it is the first image
$img->removeAttribute( 'loading' );
$html = $document->saveHTML();
return $html;
}
else {
return $content;
}
}
else {
return $content;
}
}
add_filter ('the_content', 'add_responsive_class');
Code language: PHP (php)

Và cuối cùng, nếu muốn, bạn có thể làm điều đó từ chính giao diện plugin, cho biết số lượng hình ảnh bạn muốn loại trừ

Với tên lửa WP

Nếu bạn sử dụng plugin WP Rocket tuyệt vời, khả năng sẽ mở rộng và rất nhiều

Tuy nhiên, hiện tại, đây là mã để vô hiệu hóa hình ảnh đầu tiên nếu bạn sử dụng tính năng lazy loading của WP Rocket

/* Disable lazy loading by image ID and size */
function wphelp_no_lazy_load_id( $value, $image, $context ) {
if ( 'the_content' === $context ) {
$image_url = wp_get_attachment_image_url( 4532, 'large' ); // Change the ID and size
if ( false !== strpos( $image, ' src="' . $image_url . '"' )) {
return false;
}
}
return $value;
}
add_filter( 'wp_img_tag_add_loading_attr', 'wphelp_no_lazy_load_id', 10, 3 );
Code language: PHP (php)

Nếu bạn không muốn làm điều đó với mã, WP Rocket cung cấp các cách khác để loại trừ hình ảnh đầu tiên hoặc bất kỳ hình ảnh nào cho vấn đề đó. Mẹo nhỏ là thêm mã định danh CSS của hình ảnh vào hộp loại trừ trong cài đặt LazyLoad của plugin

Trong hộp, bạn có thể bao gồm lớp CSS, tên tệp của hình ảnh hoặc khung nội tuyến, tùy theo sở thích của bạn. Nếu bạn chọn áp dụng loại trừ cho một lớp CSS, bạn có thể xác định nó bằng cách nhấp chuột phải và kiểm tra nó trong trình duyệt để hiển thị nó trong các công cụ dành cho nhà phát triển của trình duyệt

Hộp loại trừ này sẽ không chỉ hữu ích để vô hiệu hóa tải chậm hình ảnh đầu tiên của bài đăng hoặc trang, mà thông qua loại trừ theo lớp CSS, bạn có thể áp dụng tải chậm có chọn lọc cho nhiều phương tiện hơn, bất kể chúng ở đâu

Với Trình tối ưu hóa SG

Ngoài ra với plugin tối ưu hóa của SiteGround, SG Optimizer, bạn có thể loại trừ hình ảnh đầu tiên hoặc bất cứ thứ gì khỏi quá trình tải bị trì hoãn. Một lần nữa, bạn có thể làm điều này theo 2 cách

Một mặt, bằng cách thêm lớp CSS vào hộp loại trừ của quá trình tải bị trì hoãn

Hoặc, nếu bạn thích, với một mã như thế này

/* Disable lazy loading by image ID and size */
function wphelp_no_lazy_load_id( $value, $image, $context ) {
if ( 'the_content' === $context ) {
$image_url = wp_get_attachment_image_url( 4532, 'large' ); // Change the ID and size
if ( false !== strpos( $image, ' src="' . $image_url . '"' )) {
return false;
}
}
return $value;
}
add_filter( 'wp_img_tag_add_loading_attr', 'wphelp_no_lazy_load_id', 10, 3 );
Code language: PHP (php)

Chỉ cần thay thế tên của các lớp ví dụ (

/* Remove lazy load first image */
function add_responsive_class($content){
if ( is_single() || is_page() || is_front_page() || is_home() ) {
$content = mb_convert_encoding($content, 'HTML-ENTITIES', "UTF-8");
$document = new DOMDocument();
libxml_use_internal_errors(true);
$document->loadHTML(utf8_decode($content));
$imgs = $document->getElementsByTagName('img');
$img = $imgs[0];
if ($imgs[0] == 1) { // Check first if it is the first image
$img->removeAttribute( 'loading' );
$html = $document->saveHTML();
return $html;
}
else {
return $content;
}
}
else {
return $content;
}
}
add_filter ('the_content', 'add_responsive_class');
Code language: PHP (php)

Vô hiệu hóa lazy loading trong các phần khác

Xem xét trường hợp cụ thể của việc vô hiệu hóa tính năng tải chậm trong hình ảnh đầu tiên, điều quan trọng là để tránh lỗi khi đọc LCP của các chỉ số web chính, hãy xem cách tắt tính năng tải bị trì hoãn trên các tài nguyên khác

Với tên lửa WP

Plugin này, như thường lệ, cho phép tất cả các loại hoạt động, chẳng hạn như loại trừ bất kỳ phương tiện nào bằng cách thêm vào hộp loại trừ lười tải lớp CSS của nó hoặc thậm chí tên của tệp, thực sự đơn giản

Vô hiệu hóa tải lười biếng trên các mục cụ thể

Bạn có muốn tắt tính năng tải lười biếng trên các bài đăng hoặc trang cụ thể không, không có nhiều bí ẩn. Với WP Rocket, bạn sẽ tìm thấy trong hộp cài đặt trình chỉnh sửa để bật hoặc tắt bất kỳ tối ưu hóa chung nào

Tuy nhiên, nếu bạn thích sử dụng mã hơn thì cũng có thể, đây là một số…

Vô hiệu hóa tải chậm trên hình ảnh nổi bật

Một mã rất thực tế sẽ là vô hiệu hóa tải chậm trên các hình ảnh nổi bật, như thế này

/* Disable lazy loading by image ID and size */
function wphelp_no_lazy_load_id( $value, $image, $context ) {
if ( 'the_content' === $context ) {
$image_url = wp_get_attachment_image_url( 4532, 'large' ); // Change the ID and size
if ( false !== strpos( $image, ' src="' . $image_url . '"' )) {
return false;
}
}
return $value;
}
add_filter( 'wp_img_tag_add_loading_attr', 'wphelp_no_lazy_load_id', 10, 3 );
Code language: PHP (php)

Vô hiệu hóa tải lười biếng trên các mục riêng lẻ

Với mã này, bạn sẽ vô hiệu hóa tải chậm trên các bài đăng, nhưng nó vẫn được duy trì trên các trang và trong kho lưu trữ blog

/* Disable lazy loading by image ID and size */
function wphelp_no_lazy_load_id( $value, $image, $context ) {
if ( 'the_content' === $context ) {
$image_url = wp_get_attachment_image_url( 4532, 'large' ); // Change the ID and size
if ( false !== strpos( $image, ' src="' . $image_url . '"' )) {
return false;
}
}
return $value;
}
add_filter( 'wp_img_tag_add_loading_attr', 'wphelp_no_lazy_load_id', 10, 3 );
Code language: PHP (php)

Vô hiệu hóa tải lười biếng trên tất cả các mục

Với mã này, bạn vô hiệu hóa việc tải chậm trên các mục nhưng không phải trên các trang

/* Disable lazy loading by image ID and size */
function wphelp_no_lazy_load_id( $value, $image, $context ) {
if ( 'the_content' === $context ) {
$image_url = wp_get_attachment_image_url( 4532, 'large' ); // Change the ID and size
if ( false !== strpos( $image, ' src="' . $image_url . '"' )) {
return false;
}
}
return $value;
}
add_filter( 'wp_img_tag_add_loading_attr', 'wphelp_no_lazy_load_id', 10, 3 );
Code language: PHP (php)

Vô hiệu hóa lazy load trên trang blog

Nếu bạn không muốn tải chậm trong kho lưu trữ bài đăng, trong blog, mã này là mã này

/* Disable lazy loading by image ID and size */
function wphelp_no_lazy_load_id( $value, $image, $context ) {
if ( 'the_content' === $context ) {
$image_url = wp_get_attachment_image_url( 4532, 'large' ); // Change the ID and size
if ( false !== strpos( $image, ' src="' . $image_url . '"' )) {
return false;
}
}
return $value;
}
add_filter( 'wp_img_tag_add_loading_attr', 'wphelp_no_lazy_load_id', 10, 3 );
Code language: PHP (php)

Vô hiệu hóa tải chậm trên trang đầu

Với mã khác này, bạn vô hiệu hóa tải chậm trên trang chủ của trang web của mình

/* Disable lazy loading by image ID and size */
function wphelp_no_lazy_load_id( $value, $image, $context ) {
if ( 'the_content' === $context ) {
$image_url = wp_get_attachment_image_url( 4532, 'large' ); // Change the ID and size
if ( false !== strpos( $image, ' src="' . $image_url . '"' )) {
return false;
}
}
return $value;
}
add_filter( 'wp_img_tag_add_loading_attr', 'wphelp_no_lazy_load_id', 10, 3 );
Code language: PHP (php)

Vô hiệu hóa tải lười biếng theo tên tệp

Bạn có một số hình ảnh có tên tương tự mà bạn muốn loại trừ khỏi quá trình tải lên bị trì hoãn không?

/* Disable lazy loading by image ID and size */
function wphelp_no_lazy_load_id( $value, $image, $context ) {
if ( 'the_content' === $context ) {
$image_url = wp_get_attachment_image_url( 4532, 'large' ); // Change the ID and size
if ( false !== strpos( $image, ' src="' . $image_url . '"' )) {
return false;
}
}
return $value;
}
add_filter( 'wp_img_tag_add_loading_attr', 'wphelp_no_lazy_load_id', 10, 3 );
Code language: PHP (php)

Vô hiệu hóa tải lười biếng theo nguồn hình ảnh

Ví dụ, một cách sử dụng thú vị là có thể loại trừ hình ảnh khỏi tải bị trì hoãn dựa trên miền nguồn

/* Disable lazy loading by image ID and size */
function wphelp_no_lazy_load_id( $value, $image, $context ) {
if ( 'the_content' === $context ) {
$image_url = wp_get_attachment_image_url( 4532, 'large' ); // Change the ID and size
if ( false !== strpos( $image, ' src="' . $image_url . '"' )) {
return false;
}
}
return $value;
}
add_filter( 'wp_img_tag_add_loading_attr', 'wphelp_no_lazy_load_id', 10, 3 );
Code language: PHP (php)

Trong ví dụ trên, chúng tôi loại trừ khỏi tải chậm bất kỳ hình ảnh nào được cung cấp từ miền

/* Remove lazy load first image */
function add_responsive_class($content){
if ( is_single() || is_page() || is_front_page() || is_home() ) {
$content = mb_convert_encoding($content, 'HTML-ENTITIES', "UTF-8");
$document = new DOMDocument();
libxml_use_internal_errors(true);
$document->loadHTML(utf8_decode($content));
$imgs = $document->getElementsByTagName('img');
$img = $imgs[0];
if ($imgs[0] == 1) { // Check first if it is the first image
$img->removeAttribute( 'loading' );
$html = $document->saveHTML();
return $html;
}
else {
return $content;
}
}
else {
return $content;
}
}
add_filter ('the_content', 'add_responsive_class');
Code language: PHP (php)

Vô hiệu hóa tải lười biếng cho gravatars

Nếu bạn không muốn tải chậm trong Gravatar. com avatar mã để thêm sẽ là thế này

/* Disable lazy loading by image ID and size */
function wphelp_no_lazy_load_id( $value, $image, $context ) {
if ( 'the_content' === $context ) {
$image_url = wp_get_attachment_image_url( 4532, 'large' ); // Change the ID and size
if ( false !== strpos( $image, ' src="' . $image_url . '"' )) {
return false;
}
}
return $value;
}
add_filter( 'wp_img_tag_add_loading_attr', 'wphelp_no_lazy_load_id', 10, 3 );
Code language: PHP (php)

Vô hiệu hóa tải lười biếng trong các lớp CSS bằng mã

Cuối cùng, nếu bạn thích một đoạn mã để vô hiệu hóa quá trình tải bị trì hoãn trong một số lớp CSS nhất định, mã sẽ trông như thế này

/* Disable lazy loading by image ID and size */
function wphelp_no_lazy_load_id( $value, $image, $context ) {
if ( 'the_content' === $context ) {
$image_url = wp_get_attachment_image_url( 4532, 'large' ); // Change the ID and size
if ( false !== strpos( $image, ' src="' . $image_url . '"' )) {
return false;
}
}
return $value;
}
add_filter( 'wp_img_tag_add_loading_attr', 'wphelp_no_lazy_load_id', 10, 3 );
Code language: PHP (php)

Với Tự động tối ưu hóa

Trong plugin Tự động tối ưu hóa, chúng tôi sẽ tìm thấy một hộp loại trừ, trong đó như với WP Rocket, chúng tôi có thể bao gồm các lớp CSS hoặc tên tệp. Đơn giản và hiệu quả

Với Trình tối ưu hóa SG

Tôi kết thúc với SG Optimizer vì đây là plugin mà tôi tin rằng cung cấp giải pháp tốt nhất để kích hoạt/hủy kích hoạt có chọn lọc tải bị hoãn lại, vì nó hoàn toàn không bắt buộc, bằng các bộ chọn đơn giản

WordPress có lười tải hình ảnh không?

Tại sao hình ảnh tải chậm?

Bạn có nên lười tải hình ảnh trong màn hình đầu tiên không?

Là lười tải cần thiết?