WPIntell

Source evidence

Speed up image loading

Lazy Loader · support · 2021-05-13T07:41:00+00:00

complaintsentiment
mediumseverity
0.86relevance
3replies
Evidence linked to opportunitycommercial context

Proof Health

Open evidence

Commercial opportunities need traceable source links before they are treated as build-worthy.

6 / 35 rows with source links

17.1% of this page's analysis has direct source links.

0 build-decision rows missing links

0 rows here require auditable proof before promotion.

29 rows with no attached evidence

0 rows have source counts but still need direct links.

Conversation

support
essaund unresolved
Hello, Thanks for such a great plugin. It works perfect. However, I do feel like images on a visible window during page load slightly delay to load. Is there a custom value that you can give me to speed this up? Regards Hi @essaund , one way would be to manually add the class skip-lazy to the images that are visible on page load, to exclude them from lazy loading. Or you could use this snippet of code ( https://gist.github.com/florianbrinkmann/abdf929694a72e75c33d7a4254301f42 ) to automatically add the skip-lazy class to the first image in the post. If you want to add it to more than the first, you can increase the 1 in line 50: https://gist.github.com/florianbrinkmann/abdf929694a72e75c33d7a4254301f42#file-functions-php-L50 Hope that helps. Best, Florian Hello Thanks for your reply. Now, my intention is to keep lazyload intact on these images but speed up loading. If I exclude them from lazyload then Google’s core web vitals will point them out as elements that need to have lazyload. Is that possible? Like the lag is a downside a bit. Like all elements on the page have loaded then the images appear later. This happens in split seconds an easy to miss for someone not concerned about user experience. Hi, you could use the snippet from above to add a class like no-transition to the first image(s) and use the following CSS to remove the transition after the image is loaded that comes with Lazy Loader: .lazyloaded.no-transition { transition: none; } That should make them appear faster. Best, Florian

Comments

3 shown
Florian Brinkmann 2021-05-14T06:41:00+00:00

Hi @essaund , one way would be to manually add the class skip-lazy to the images that are visible on page load, to exclude them from lazy loading. Or you could use this snippet of code ( https://gist.github.com/florianbrinkmann/abdf929694a72e75c33d7a4254301f42 ) to automatically add the skip-lazy class to the first image in the post. If you want to add it to more than the first, you can increase the 1 in line 50: https://gist.github.com/florianbrinkmann/abdf929694a72e75c33d7a4254301f42#file-functions-php-L50 Hope that helps. Best, Florian

essaund 2021-05-14T08:33:00+00:00

Hello Thanks for your reply. Now, my intention is to keep lazyload intact on these images but speed up loading. If I exclude them from lazyload then Google’s core web vitals will point them out as elements that need to have lazyload. Is that possible? Like the lag is a downside a bit. Like all elements on the page have loaded then the images appear later. This happens in split seconds an easy to miss for someone not concerned about user experience.

Florian Brinkmann 2021-05-14T09:50:00+00:00

Hi, you could use the snippet from above to add a class like no-transition to the first image(s) and use the following CSS to remove the transition after the image is loaded that comes with Lazy Loader: .lazyloaded.no-transition { transition: none; } That should make them appear faster. Best, Florian