Analyse du chargement paresseux<\/h2><\/span><\/div><\/div><\/div>Cet aper\u00e7u commence par un tweet de Jonattan Moore qui partage avec la communaut\u00e9 Seo comment scanner des images dans Lazy Loading en utilisant XPath de Screaming Frog.<\/p>\n
<\/div>\n<\/div>![\"Lazy](\"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>Chargement paresseux des images<\/h3><\/span><\/div><\/div><\/div>Commen\u00e7ons par comprendre ce qu’est le Lazy Loading afin d’appr\u00e9cier pleinement le travail de Jonathan.<\/p>\n
Vous savez, lorsque vous naviguez sur une page web et que de nouvelles images apparaissent au fur et \u00e0 mesure que vous d\u00e9filez vers le bas ?<\/p>\n
Cette fonctionnalit\u00e9 est appel\u00e9e \u00ab\u00a0Lazy Loading\u00a0\u00bb et correspond \u00e0 un chargement \u00ab\u00a0\u00e0 la demande\u00a0\u00bb qui n’a lieu que lorsque la navigation de l’utilisateur le demande. Elle est utilis\u00e9e pour tous les \u00e9l\u00e9ments qui affecteraient les performances de la page s’ils \u00e9taient trait\u00e9s en premier lieu avec le reste des \u00e9l\u00e9ments dans le fil d’ex\u00e9cution principal (cela affecterait \u00e9galement le Core Web Vitals).<\/p>\n
La vitesse de chargement \u00e9tant l’un des piliers du classement dans les moteurs de recherche, cette strat\u00e9gie qui offre une meilleure exp\u00e9rience \u00e0 l’utilisateur doit \u00eatre absolument prise en consid\u00e9ration.<\/p>\n<\/div>
<\/div><\/div><\/span>Lazy Loading et Google<\/h3><\/span><\/div><\/div><\/div>Cette strat\u00e9gie est donc conseill\u00e9e pour tous les sites web afin d’am\u00e9liorer l’exp\u00e9rience utilisateur des internautes, mais que pense Leader Maximo Google de cette mise en \u0153uvre ?<\/p>\n
Google est d’accord avec cette mesure, mais recommande d’\u00eatre tr\u00e8s prudent dans la mise en \u0153uvre afin de ne pas emp\u00eacher le robot d’explorer les ressources charg\u00e9es via le \u00ab\u00a0Lazy Loading\u00a0\u00bb, faute de quoi il pourrait ne pas les indexer.<\/p>\n
En r\u00e9sum\u00e9, le moteur de recherche approuve cette technique mais demande \u00e0 s’assurer qu’il peut voir toutes les ressources \u00e0 \u00e9valuer dans l’indexation. Pour mieux comprendre ce que demande Google, je vous invite \u00e0 lire son guide d\u00e9di\u00e9 : Assurez-vous que Google peut voir le contenu charg\u00e9 paresseusement<\/a>.<\/p>\nLes aspects que tout d\u00e9veloppeur doit prendre en compte sont essentiellement au nombre de trois :<\/p>\n
\n- Charger le contenu lorsqu’il est visible dans la fen\u00eatre de visualisation<\/strong>: pour permettre \u00e0 Google Bot d’effectuer un balayage complet de la page, assurez-vous que le chargement paresseux charge tout le contenu lorsqu’il est visible dans la fen\u00eatre de visualisation \u00e0 l’aide de l’API IntersectionObserver et d’un polyfill.<\/li>\n
- Dans le cas d’un\u00ab\u00a0d\u00e9filement infini<\/strong>\u00ab\u00a0, prendre en charge le chargement \u00ab\u00a0pagin\u00e9\u00a0\u00bb.<\/li>\n
- Testez le bon fonctionnement du Lazy Loading<\/strong>: vous pouvez utiliser un script tel que Puppeteer, une biblioth\u00e8que Node.js directement en local pour v\u00e9rifier que les captures d’\u00e9cran g\u00e9n\u00e9r\u00e9es par le script montrent bien tout le contenu de la page.<\/li>\n<\/ul>\n
*Source : https:\/\/blog.tagliaerbe.com\/lazy-loading\/<\/p>\n<\/div>
<\/div><\/div><\/span>Audit du chargement paresseux<\/h3><\/span><\/div><\/div><\/div>Une fois que nous avons compris les lignes g\u00e9n\u00e9rales relatives au Lazy Loading des images, nous profitons de la fonction Custom Extraction<\/strong> de Screaming Frog<\/a> pour faire un audit de l’ensemble des images d’une page et de celles qui ne sont charg\u00e9es que par le biais du chargement \u00e0 la demande.<\/p>\nPour en savoir plus sur la fonction d’extraction personnalis\u00e9e de Seo Spider, cliquez ici.<\/p>\n
Vous trouverez ci-dessous les chemins XPath partag\u00e9s par Jonathan Moore pour l’extraction personnalis\u00e9e.<\/p>\n<\/div>
Cet aper\u00e7u commence par un tweet de Jonattan Moore qui partage avec la communaut\u00e9 Seo comment scanner des images dans Lazy Loading en utilisant XPath de Screaming Frog.<\/p>\n
<\/span><\/div>Chargement paresseux des images<\/h3><\/span><\/div><\/div><\/div>Commen\u00e7ons par comprendre ce qu’est le Lazy Loading afin d’appr\u00e9cier pleinement le travail de Jonathan.<\/p>\n
Vous savez, lorsque vous naviguez sur une page web et que de nouvelles images apparaissent au fur et \u00e0 mesure que vous d\u00e9filez vers le bas ?<\/p>\n
Cette fonctionnalit\u00e9 est appel\u00e9e \u00ab\u00a0Lazy Loading\u00a0\u00bb et correspond \u00e0 un chargement \u00ab\u00a0\u00e0 la demande\u00a0\u00bb qui n’a lieu que lorsque la navigation de l’utilisateur le demande. Elle est utilis\u00e9e pour tous les \u00e9l\u00e9ments qui affecteraient les performances de la page s’ils \u00e9taient trait\u00e9s en premier lieu avec le reste des \u00e9l\u00e9ments dans le fil d’ex\u00e9cution principal (cela affecterait \u00e9galement le Core Web Vitals).<\/p>\n
La vitesse de chargement \u00e9tant l’un des piliers du classement dans les moteurs de recherche, cette strat\u00e9gie qui offre une meilleure exp\u00e9rience \u00e0 l’utilisateur doit \u00eatre absolument prise en consid\u00e9ration.<\/p>\n<\/div>
<\/div><\/div><\/span>Lazy Loading et Google<\/h3><\/span><\/div><\/div><\/div>Cette strat\u00e9gie est donc conseill\u00e9e pour tous les sites web afin d’am\u00e9liorer l’exp\u00e9rience utilisateur des internautes, mais que pense Leader Maximo Google de cette mise en \u0153uvre ?<\/p>\n
Google est d’accord avec cette mesure, mais recommande d’\u00eatre tr\u00e8s prudent dans la mise en \u0153uvre afin de ne pas emp\u00eacher le robot d’explorer les ressources charg\u00e9es via le \u00ab\u00a0Lazy Loading\u00a0\u00bb, faute de quoi il pourrait ne pas les indexer.<\/p>\n
En r\u00e9sum\u00e9, le moteur de recherche approuve cette technique mais demande \u00e0 s’assurer qu’il peut voir toutes les ressources \u00e0 \u00e9valuer dans l’indexation. Pour mieux comprendre ce que demande Google, je vous invite \u00e0 lire son guide d\u00e9di\u00e9 : Assurez-vous que Google peut voir le contenu charg\u00e9 paresseusement<\/a>.<\/p>\nLes aspects que tout d\u00e9veloppeur doit prendre en compte sont essentiellement au nombre de trois :<\/p>\n
\n- Charger le contenu lorsqu’il est visible dans la fen\u00eatre de visualisation<\/strong>: pour permettre \u00e0 Google Bot d’effectuer un balayage complet de la page, assurez-vous que le chargement paresseux charge tout le contenu lorsqu’il est visible dans la fen\u00eatre de visualisation \u00e0 l’aide de l’API IntersectionObserver et d’un polyfill.<\/li>\n
- Dans le cas d’un\u00ab\u00a0d\u00e9filement infini<\/strong>\u00ab\u00a0, prendre en charge le chargement \u00ab\u00a0pagin\u00e9\u00a0\u00bb.<\/li>\n
- Testez le bon fonctionnement du Lazy Loading<\/strong>: vous pouvez utiliser un script tel que Puppeteer, une biblioth\u00e8que Node.js directement en local pour v\u00e9rifier que les captures d’\u00e9cran g\u00e9n\u00e9r\u00e9es par le script montrent bien tout le contenu de la page.<\/li>\n<\/ul>\n
*Source : https:\/\/blog.tagliaerbe.com\/lazy-loading\/<\/p>\n<\/div>
<\/div><\/div><\/span>Audit du chargement paresseux<\/h3><\/span><\/div><\/div><\/div>Une fois que nous avons compris les lignes g\u00e9n\u00e9rales relatives au Lazy Loading des images, nous profitons de la fonction Custom Extraction<\/strong> de Screaming Frog<\/a> pour faire un audit de l’ensemble des images d’une page et de celles qui ne sont charg\u00e9es que par le biais du chargement \u00e0 la demande.<\/p>\nPour en savoir plus sur la fonction d’extraction personnalis\u00e9e de Seo Spider, cliquez ici.<\/p>\n
Vous trouverez ci-dessous les chemins XPath partag\u00e9s par Jonathan Moore pour l’extraction personnalis\u00e9e.<\/p>\n<\/div>
Commen\u00e7ons par comprendre ce qu’est le Lazy Loading afin d’appr\u00e9cier pleinement le travail de Jonathan.<\/p>\n
Vous savez, lorsque vous naviguez sur une page web et que de nouvelles images apparaissent au fur et \u00e0 mesure que vous d\u00e9filez vers le bas ?<\/p>\n
Cette fonctionnalit\u00e9 est appel\u00e9e \u00ab\u00a0Lazy Loading\u00a0\u00bb et correspond \u00e0 un chargement \u00ab\u00a0\u00e0 la demande\u00a0\u00bb qui n’a lieu que lorsque la navigation de l’utilisateur le demande. Elle est utilis\u00e9e pour tous les \u00e9l\u00e9ments qui affecteraient les performances de la page s’ils \u00e9taient trait\u00e9s en premier lieu avec le reste des \u00e9l\u00e9ments dans le fil d’ex\u00e9cution principal (cela affecterait \u00e9galement le Core Web Vitals).<\/p>\n
La vitesse de chargement \u00e9tant l’un des piliers du classement dans les moteurs de recherche, cette strat\u00e9gie qui offre une meilleure exp\u00e9rience \u00e0 l’utilisateur doit \u00eatre absolument prise en consid\u00e9ration.<\/p>\n<\/div>
Lazy Loading et Google<\/h3><\/span><\/div><\/div><\/div>Cette strat\u00e9gie est donc conseill\u00e9e pour tous les sites web afin d’am\u00e9liorer l’exp\u00e9rience utilisateur des internautes, mais que pense Leader Maximo Google de cette mise en \u0153uvre ?<\/p>\n
Google est d’accord avec cette mesure, mais recommande d’\u00eatre tr\u00e8s prudent dans la mise en \u0153uvre afin de ne pas emp\u00eacher le robot d’explorer les ressources charg\u00e9es via le \u00ab\u00a0Lazy Loading\u00a0\u00bb, faute de quoi il pourrait ne pas les indexer.<\/p>\n
En r\u00e9sum\u00e9, le moteur de recherche approuve cette technique mais demande \u00e0 s’assurer qu’il peut voir toutes les ressources \u00e0 \u00e9valuer dans l’indexation. Pour mieux comprendre ce que demande Google, je vous invite \u00e0 lire son guide d\u00e9di\u00e9 : Assurez-vous que Google peut voir le contenu charg\u00e9 paresseusement<\/a>.<\/p>\nLes aspects que tout d\u00e9veloppeur doit prendre en compte sont essentiellement au nombre de trois :<\/p>\n
\n- Charger le contenu lorsqu’il est visible dans la fen\u00eatre de visualisation<\/strong>: pour permettre \u00e0 Google Bot d’effectuer un balayage complet de la page, assurez-vous que le chargement paresseux charge tout le contenu lorsqu’il est visible dans la fen\u00eatre de visualisation \u00e0 l’aide de l’API IntersectionObserver et d’un polyfill.<\/li>\n
- Dans le cas d’un\u00ab\u00a0d\u00e9filement infini<\/strong>\u00ab\u00a0, prendre en charge le chargement \u00ab\u00a0pagin\u00e9\u00a0\u00bb.<\/li>\n
- Testez le bon fonctionnement du Lazy Loading<\/strong>: vous pouvez utiliser un script tel que Puppeteer, une biblioth\u00e8que Node.js directement en local pour v\u00e9rifier que les captures d’\u00e9cran g\u00e9n\u00e9r\u00e9es par le script montrent bien tout le contenu de la page.<\/li>\n<\/ul>\n
*Source : https:\/\/blog.tagliaerbe.com\/lazy-loading\/<\/p>\n<\/div>
<\/div><\/div><\/span>Audit du chargement paresseux<\/h3><\/span><\/div><\/div><\/div>Une fois que nous avons compris les lignes g\u00e9n\u00e9rales relatives au Lazy Loading des images, nous profitons de la fonction Custom Extraction<\/strong> de Screaming Frog<\/a> pour faire un audit de l’ensemble des images d’une page et de celles qui ne sont charg\u00e9es que par le biais du chargement \u00e0 la demande.<\/p>\nPour en savoir plus sur la fonction d’extraction personnalis\u00e9e de Seo Spider, cliquez ici.<\/p>\n
Vous trouverez ci-dessous les chemins XPath partag\u00e9s par Jonathan Moore pour l’extraction personnalis\u00e9e.<\/p>\n<\/div>
Cette strat\u00e9gie est donc conseill\u00e9e pour tous les sites web afin d’am\u00e9liorer l’exp\u00e9rience utilisateur des internautes, mais que pense Leader Maximo Google de cette mise en \u0153uvre ?<\/p>\n
Google est d’accord avec cette mesure, mais recommande d’\u00eatre tr\u00e8s prudent dans la mise en \u0153uvre afin de ne pas emp\u00eacher le robot d’explorer les ressources charg\u00e9es via le \u00ab\u00a0Lazy Loading\u00a0\u00bb, faute de quoi il pourrait ne pas les indexer.<\/p>\n
En r\u00e9sum\u00e9, le moteur de recherche approuve cette technique mais demande \u00e0 s’assurer qu’il peut voir toutes les ressources \u00e0 \u00e9valuer dans l’indexation. Pour mieux comprendre ce que demande Google, je vous invite \u00e0 lire son guide d\u00e9di\u00e9 : Assurez-vous que Google peut voir le contenu charg\u00e9 paresseusement<\/a>.<\/p>\n Les aspects que tout d\u00e9veloppeur doit prendre en compte sont essentiellement au nombre de trois :<\/p>\n *Source : https:\/\/blog.tagliaerbe.com\/lazy-loading\/<\/p>\n<\/div> Une fois que nous avons compris les lignes g\u00e9n\u00e9rales relatives au Lazy Loading des images, nous profitons de la fonction Custom Extraction<\/strong> de Screaming Frog<\/a> pour faire un audit de l’ensemble des images d’une page et de celles qui ne sont charg\u00e9es que par le biais du chargement \u00e0 la demande.<\/p>\n Pour en savoir plus sur la fonction d’extraction personnalis\u00e9e de Seo Spider, cliquez ici.<\/p>\n Vous trouverez ci-dessous les chemins XPath partag\u00e9s par Jonathan Moore pour l’extraction personnalis\u00e9e.<\/p>\n<\/div>\n
Audit du chargement paresseux<\/h3><\/span>
![](\"http:\/\/screamingfrog.club\/wp-content\/uploads\/2024\/04\/custom-extraction-lazy-loading-immagini-1068x374-1.png\")
<\/a><\/span><\/div>