Support » Plugin: Autoptimize » disable lazy load image for the first image above the fold
disable lazy load image for the first image above the fold
-
Hi
how can i disable lazy load image for image above the fold.(If it is not possible, remove
lazy load tag from first image can help)almost all lazy load plugin make LCP issue in google speed.
best regards
-
AO does not “know” what is above the fold and what is not, as that is only known in the browser, not on the server, but you can always use the comma-separated “lazyload exclude” field to list exclusions. Additionally you can also add the
skip-lazy
class to any image you wish to exclude from being lazyloaded (and that will work in most lazyload plugins).hope this helps,
frankThank you for your immediate response.
Can you guide me how I can add skip-lazy to first img in page(all page/cat/tag/post)found this for another plugin :
/** * Disable lazyloading from first blog image */ function add_responsive_class($content){ if ( is_single() ) { $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 if the post has images first $img->setAttribute('class','alignnone size-full remove-lazy'); $html = $document->saveHTML(); return $html; } else { return $content; } } else { return $content; } } add_filter ('the_content', 'add_responsive_class'); function rocket_lazyload_exclude_class( $attributes ) { $attributes[] = 'class="alignnone size-full remove-lazy"'; return $attributes; } add_filter( 'rocket_lazyload_excluded_attributes', 'rocket_lazyload_exclude_class' );
hmm, your first image is likely your logo, which you can exclude manually as the filename is the same for all pages? ๐
the method does have some merit, but however smart we try to make it, it will never *really* know what not to lazyload, as server-side we don’t know in which browser what images will be above the fold.
if I have some time in the next couple of days (I don’t now) I’ll try to write a similar code snippet that hooks into Autoptimize ๐
I look forward to it๐๐
I added the base logic for not lazyloading the X first images in AO core, see https://github.com/futtta/autoptimize/commit/a691dcd87502d88811f810bec2b54be26ac768a3
With that (rather small) change not lazyloading the first 5 images is as easy as adding this code snippet;
add_filter( 'autoptimize_filter_imgopt_lazyload_from_nth', function(){return 5;});
I might, at a later point, even add this as an option on the settings page.
If you want to try this out now (I hope you do), then you can download AO Beta 2.8 from https://github.com/futtta/autoptimize/archive/beta.zip (be sure to disable the current version before enabling the beta) and let me know if this works for you?
I installed the plugin and it worked fine.๐ I will also be waiting for the cache feature to be added in future versions๐
-
This reply was modified 2 months, 3 weeks ago by
p47ri0t.
cache feature?
https://wordpress.org/support/topic/the-best-cache-plugin-for-wordpress-2/
“AO does not do page caching (yet), but I guess youโre aware of that:)”
I have not forgotten even though a year has passed ๐๐
-
This reply was modified 2 months, 3 weeks ago by
- You must be logged in to reply to this topic.