Lazy Loading Analysis<\/h2><\/span><\/div><\/div><\/div>This insight starts with a tweet from Jonattan Moore who shares with the Seo community how to crawl images in Lazy Loading using XPath from Screaming Frog.<\/p>\n
<\/div>\n<\/div>![](\"http:\/\/screamingfrog.club\/wp-content\/uploads\/2024\/04\/tweet-xpath-lazy-loading-696x495-1.png\" "\\"tweet-xpath-lazy-loading-696×495\\"")
<\/span><\/div><\/div><\/div><\/span>Lazy Loading of Images<\/h3><\/span><\/div><\/div><\/div>Let us begin by understanding what Lazy Loading is in order to fully appreciate Jonathan’s work.<\/p>\n
You know when you’re browsing a web page and as you scroll down new images keep popping up?<\/p>\n
This feature is called “Lazy Loading” and corresponds to an “on-demand” loading that is executed only when requested by the user’s navigation and is used for all those elements that would affect the performance of the page if run in the first instance with the rest of the elements in the main thread (it would also affect the Core Web Vitals).<\/p>\n
Since loading speed is one of the pillars in Search Engine Ranking attribution this strategy that provides a better user browsing experience is to be taken into absolute consideration.<\/p>\n<\/div>
<\/div><\/div><\/span>Lazy Loading and Google<\/h3><\/span><\/div><\/div><\/div>So, based on the premise, this strategy is advisable for all websites to improve the user experience for surfers, but what does Leader Maximo Google think about this implementation?<\/p>\n
Google indulges this choice but warns to be very careful in the implementation so as not to prevent the Bot from crawling the resources uploaded via “Lazy Loading” otherwise it may not index them.<\/p>\n
In summary, the Search Engine approves of this technique but asks to make sure that he can see all the resources to be evaluated in indexing. To better understand what Google is asking for, I encourage you to read its dedicated guide: Make sure Google can see lazy-loaded content<\/a>.<\/p>\nThe aspects that every developer must consider are essentially 3:<\/p>\n
\n- Load content when it is visible in the viewport<\/strong>: to allow the Google Bot a complete crawl of the page make sure that lazy loading loads all content whenever it is visible in the “viewport” using the IntersectionObserver API and a polyfill.<\/li>\n
- In case of “Infinite Scroll<\/strong>” put a “Paginated” upload in support.<\/li>\n
- Test the proper functioning of Lazy Loading<\/strong>: you can use a script such as Puppeteer, a Node.js library directly locally to verify that the screenshots that have been generated by the script show all the content on the page.<\/li>\n<\/ul>\n
*source:https:\/\/blog.tagliaerbe.com\/lazy-loading\/<\/p>\n<\/div>
<\/div><\/div><\/span>Lazy Loading Audit<\/h3><\/span><\/div><\/div><\/div>Once we understand the general outlines related to Lazy Loading of images we take advantage of Screaming Frog<\/a> ‘s Custom Extraction<\/strong> feature to do an audit of a page’s overall images and those loaded only via on-demand loading.<\/p>\nLearn more about Seo Spider’s Custom Extraction feature here.<\/p>\n
Below are the XPath paths shared by Jonathan Moore for Custom Extraction.<\/p>\n<\/div>
This insight starts with a tweet from Jonattan Moore who shares with the Seo community how to crawl images in Lazy Loading using XPath from Screaming Frog.<\/p>\n
<\/span><\/div>Lazy Loading of Images<\/h3><\/span><\/div><\/div><\/div>Let us begin by understanding what Lazy Loading is in order to fully appreciate Jonathan’s work.<\/p>\n
You know when you’re browsing a web page and as you scroll down new images keep popping up?<\/p>\n
This feature is called “Lazy Loading” and corresponds to an “on-demand” loading that is executed only when requested by the user’s navigation and is used for all those elements that would affect the performance of the page if run in the first instance with the rest of the elements in the main thread (it would also affect the Core Web Vitals).<\/p>\n
Since loading speed is one of the pillars in Search Engine Ranking attribution this strategy that provides a better user browsing experience is to be taken into absolute consideration.<\/p>\n<\/div>
<\/div><\/div><\/span>Lazy Loading and Google<\/h3><\/span><\/div><\/div><\/div>So, based on the premise, this strategy is advisable for all websites to improve the user experience for surfers, but what does Leader Maximo Google think about this implementation?<\/p>\n
Google indulges this choice but warns to be very careful in the implementation so as not to prevent the Bot from crawling the resources uploaded via “Lazy Loading” otherwise it may not index them.<\/p>\n
In summary, the Search Engine approves of this technique but asks to make sure that he can see all the resources to be evaluated in indexing. To better understand what Google is asking for, I encourage you to read its dedicated guide: Make sure Google can see lazy-loaded content<\/a>.<\/p>\nThe aspects that every developer must consider are essentially 3:<\/p>\n
\n- Load content when it is visible in the viewport<\/strong>: to allow the Google Bot a complete crawl of the page make sure that lazy loading loads all content whenever it is visible in the “viewport” using the IntersectionObserver API and a polyfill.<\/li>\n
- In case of “Infinite Scroll<\/strong>” put a “Paginated” upload in support.<\/li>\n
- Test the proper functioning of Lazy Loading<\/strong>: you can use a script such as Puppeteer, a Node.js library directly locally to verify that the screenshots that have been generated by the script show all the content on the page.<\/li>\n<\/ul>\n
*source:https:\/\/blog.tagliaerbe.com\/lazy-loading\/<\/p>\n<\/div>
<\/div><\/div><\/span>Lazy Loading Audit<\/h3><\/span><\/div><\/div><\/div>Once we understand the general outlines related to Lazy Loading of images we take advantage of Screaming Frog<\/a> ‘s Custom Extraction<\/strong> feature to do an audit of a page’s overall images and those loaded only via on-demand loading.<\/p>\nLearn more about Seo Spider’s Custom Extraction feature here.<\/p>\n
Below are the XPath paths shared by Jonathan Moore for Custom Extraction.<\/p>\n<\/div>
Let us begin by understanding what Lazy Loading is in order to fully appreciate Jonathan’s work.<\/p>\n
You know when you’re browsing a web page and as you scroll down new images keep popping up?<\/p>\n
This feature is called “Lazy Loading” and corresponds to an “on-demand” loading that is executed only when requested by the user’s navigation and is used for all those elements that would affect the performance of the page if run in the first instance with the rest of the elements in the main thread (it would also affect the Core Web Vitals).<\/p>\n
Since loading speed is one of the pillars in Search Engine Ranking attribution this strategy that provides a better user browsing experience is to be taken into absolute consideration.<\/p>\n<\/div>
Lazy Loading and Google<\/h3><\/span><\/div><\/div><\/div>So, based on the premise, this strategy is advisable for all websites to improve the user experience for surfers, but what does Leader Maximo Google think about this implementation?<\/p>\n
Google indulges this choice but warns to be very careful in the implementation so as not to prevent the Bot from crawling the resources uploaded via “Lazy Loading” otherwise it may not index them.<\/p>\n
In summary, the Search Engine approves of this technique but asks to make sure that he can see all the resources to be evaluated in indexing. To better understand what Google is asking for, I encourage you to read its dedicated guide: Make sure Google can see lazy-loaded content<\/a>.<\/p>\nThe aspects that every developer must consider are essentially 3:<\/p>\n
\n- Load content when it is visible in the viewport<\/strong>: to allow the Google Bot a complete crawl of the page make sure that lazy loading loads all content whenever it is visible in the “viewport” using the IntersectionObserver API and a polyfill.<\/li>\n
- In case of “Infinite Scroll<\/strong>” put a “Paginated” upload in support.<\/li>\n
- Test the proper functioning of Lazy Loading<\/strong>: you can use a script such as Puppeteer, a Node.js library directly locally to verify that the screenshots that have been generated by the script show all the content on the page.<\/li>\n<\/ul>\n
*source:https:\/\/blog.tagliaerbe.com\/lazy-loading\/<\/p>\n<\/div>
<\/div><\/div><\/span>Lazy Loading Audit<\/h3><\/span><\/div><\/div><\/div>Once we understand the general outlines related to Lazy Loading of images we take advantage of Screaming Frog<\/a> ‘s Custom Extraction<\/strong> feature to do an audit of a page’s overall images and those loaded only via on-demand loading.<\/p>\nLearn more about Seo Spider’s Custom Extraction feature here.<\/p>\n
Below are the XPath paths shared by Jonathan Moore for Custom Extraction.<\/p>\n<\/div>
So, based on the premise, this strategy is advisable for all websites to improve the user experience for surfers, but what does Leader Maximo Google think about this implementation?<\/p>\n
Google indulges this choice but warns to be very careful in the implementation so as not to prevent the Bot from crawling the resources uploaded via “Lazy Loading” otherwise it may not index them.<\/p>\n
In summary, the Search Engine approves of this technique but asks to make sure that he can see all the resources to be evaluated in indexing. To better understand what Google is asking for, I encourage you to read its dedicated guide: Make sure Google can see lazy-loaded content<\/a>.<\/p>\n The aspects that every developer must consider are essentially 3:<\/p>\n *source:https:\/\/blog.tagliaerbe.com\/lazy-loading\/<\/p>\n<\/div> Once we understand the general outlines related to Lazy Loading of images we take advantage of Screaming Frog<\/a> ‘s Custom Extraction<\/strong> feature to do an audit of a page’s overall images and those loaded only via on-demand loading.<\/p>\n Learn more about Seo Spider’s Custom Extraction feature here.<\/p>\n Below are the XPath paths shared by Jonathan Moore for Custom Extraction.<\/p>\n<\/div>\n
Lazy Loading Audit<\/h3><\/span>
![](\"http:\/\/screamingfrog.club\/wp-content\/uploads\/2024\/04\/custom-extraction-lazy-loading-immagini-1068x374-1.png\")
<\/a><\/span><\/div>