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)6 ở kích thước lớ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)7)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)8 thà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)92 để tắt tính năng tải chậm trên hình ảnh đầu tiênMộ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
________số 8Mộ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)8 thành/* 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)1 cho hai hình ảnh đầu tiê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)2 cho ba hình ảnh đầu tiên, v.v.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)2Nế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)3Chỉ 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)3) bằng những tên bạn muốn loại trừ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)5Vô 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)6Vô 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)7Vô 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)0Vô 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)1Vô 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)2Vô 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)3Trong 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)4, hình ảnh thường được Jetpack sử dụng để cung cấp hình ảnh từ CDN của nó hoặc hình thu nhỏ của các bài đăng liên quanVô 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)4Vô 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)5Vớ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