An\u00e1lisis de \u00abLazy Loading\u00bb<\/h2><\/span><\/div><\/div><\/div>Esta visi\u00f3n comienza con un tweet de Jonattan Moore que comparte con la comunidad Seo c\u00f3mo escanear im\u00e1genes en Lazy Loading utilizando 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>Lazy Loading de im\u00e1genes<\/h3><\/span><\/div><\/div><\/div>Empecemos por entender qu\u00e9 es la Carga Perezosa para poder apreciar plenamente el trabajo de Jonathan.<\/p>\n
\u00bfSabes cuando navegas por una p\u00e1gina web y, a medida que te desplazas hacia abajo, van apareciendo nuevas im\u00e1genes?<\/p>\n
Esta caracter\u00edstica se denomina \u00abCarga perezosa\u00bb y corresponde a una carga \u00abbajo demanda\u00bb que s\u00f3lo tiene lugar cuando lo solicita la navegaci\u00f3n del usuario y se utiliza para todos aquellos elementos que afectar\u00edan al rendimiento de la p\u00e1gina si se trataran en primera instancia con el resto de elementos en el hilo principal (tambi\u00e9n afectar\u00eda al Core Web Vitals).<\/p>\n
Dado que la velocidad de carga es uno de los pilares del posicionamiento en buscadores, esta estrategia que ofrece una mejor experiencia al usuario debe tenerse muy en cuenta.<\/p>\n<\/div>
<\/div><\/div><\/span>Lazy Loading y Google<\/h3><\/span><\/div><\/div><\/div>As\u00ed que, partiendo de las premisas, esta estrategia es recomendable para todos los sitios web con el fin de mejorar la experiencia de usuario de los navegantes, pero \u00bfqu\u00e9 opina el L\u00edder M\u00e1ximo Google de esta implementaci\u00f3n?<\/p>\n
Google est\u00e1 de acuerdo con esto, pero advierte que hay que tener mucho cuidado en la implementaci\u00f3n para no impedir que el bot rastree los recursos cargados mediante \u00abCarga Lenta\u00bb, de lo contrario podr\u00eda no indexarlos.<\/p>\n
En resumen, el motor de b\u00fasqueda aprueba esta t\u00e9cnica, pero pide asegurarse de que puede ver todos los recursos que se van a evaluar en la indexaci\u00f3n. Para entender mejor lo que pide Google, te invito a leer su gu\u00eda dedicada: Aseg\u00farate de que Google puede ver el contenido cargado de forma perezosa<\/a>.<\/p>\nLos aspectos que todo desarrollador debe tener en cuenta son esencialmente tres:<\/p>\n
\n- Carga el contenido cuando<\/strong> sea visible en la ventana gr\u00e1fica: para permitir que el robot de Google rastree completamente la p\u00e1gina, aseg\u00farate de que la carga diferida cargue todo el contenido siempre que sea visible en la ventana gr\u00e1fica mediante la API IntersectionObserver y un polyfill.<\/li>\n
- En el caso de\u00abDesplazamiento infinito<\/strong>\u00ab, admite la carga \u00abPaginada\u00bb.<\/li>\n
- Prueba el correcto funcionamiento de Lazy Loading<\/strong>: puedes utilizar un script como Puppeteer, una librer\u00eda Node.js directamente local para verificar que las capturas de pantalla generadas por el script muestran todo el contenido de la p\u00e1gina.<\/li>\n<\/ul>\n
*fuente:https:\/\/blog.tagliaerbe.com\/lazy-loading\/<\/p>\n<\/div>
<\/div><\/div><\/span>Auditor\u00eda de carga perezosa<\/h3><\/span><\/div><\/div><\/div>Una vez que hemos comprendido las l\u00edneas generales relativas a la Carga Lenta de im\u00e1genes, aprovechamos la funci\u00f3n de Extracci\u00f3n Personalizada<\/strong> de Screaming Frog<\/a> para hacer una auditor\u00eda del total de im\u00e1genes de una p\u00e1gina y de las que s\u00f3lo se cargan mediante carga bajo demanda.<\/p>\nM\u00e1s informaci\u00f3n sobre la funci\u00f3n de Extracci\u00f3n Personalizada de Seo Spider aqu\u00ed.<\/p>\n
A continuaci\u00f3n se muestran las rutas XPath compartidas por Jonathan Moore para la Extracci\u00f3n Personalizada.<\/p>\n<\/div>
Esta visi\u00f3n comienza con un tweet de Jonattan Moore que comparte con la comunidad Seo c\u00f3mo escanear im\u00e1genes en Lazy Loading utilizando XPath de Screaming Frog.<\/p>\n
<\/span><\/div>Lazy Loading de im\u00e1genes<\/h3><\/span><\/div><\/div><\/div>Empecemos por entender qu\u00e9 es la Carga Perezosa para poder apreciar plenamente el trabajo de Jonathan.<\/p>\n
\u00bfSabes cuando navegas por una p\u00e1gina web y, a medida que te desplazas hacia abajo, van apareciendo nuevas im\u00e1genes?<\/p>\n
Esta caracter\u00edstica se denomina \u00abCarga perezosa\u00bb y corresponde a una carga \u00abbajo demanda\u00bb que s\u00f3lo tiene lugar cuando lo solicita la navegaci\u00f3n del usuario y se utiliza para todos aquellos elementos que afectar\u00edan al rendimiento de la p\u00e1gina si se trataran en primera instancia con el resto de elementos en el hilo principal (tambi\u00e9n afectar\u00eda al Core Web Vitals).<\/p>\n
Dado que la velocidad de carga es uno de los pilares del posicionamiento en buscadores, esta estrategia que ofrece una mejor experiencia al usuario debe tenerse muy en cuenta.<\/p>\n<\/div>
<\/div><\/div><\/span>Lazy Loading y Google<\/h3><\/span><\/div><\/div><\/div>As\u00ed que, partiendo de las premisas, esta estrategia es recomendable para todos los sitios web con el fin de mejorar la experiencia de usuario de los navegantes, pero \u00bfqu\u00e9 opina el L\u00edder M\u00e1ximo Google de esta implementaci\u00f3n?<\/p>\n
Google est\u00e1 de acuerdo con esto, pero advierte que hay que tener mucho cuidado en la implementaci\u00f3n para no impedir que el bot rastree los recursos cargados mediante \u00abCarga Lenta\u00bb, de lo contrario podr\u00eda no indexarlos.<\/p>\n
En resumen, el motor de b\u00fasqueda aprueba esta t\u00e9cnica, pero pide asegurarse de que puede ver todos los recursos que se van a evaluar en la indexaci\u00f3n. Para entender mejor lo que pide Google, te invito a leer su gu\u00eda dedicada: Aseg\u00farate de que Google puede ver el contenido cargado de forma perezosa<\/a>.<\/p>\nLos aspectos que todo desarrollador debe tener en cuenta son esencialmente tres:<\/p>\n
\n- Carga el contenido cuando<\/strong> sea visible en la ventana gr\u00e1fica: para permitir que el robot de Google rastree completamente la p\u00e1gina, aseg\u00farate de que la carga diferida cargue todo el contenido siempre que sea visible en la ventana gr\u00e1fica mediante la API IntersectionObserver y un polyfill.<\/li>\n
- En el caso de\u00abDesplazamiento infinito<\/strong>\u00ab, admite la carga \u00abPaginada\u00bb.<\/li>\n
- Prueba el correcto funcionamiento de Lazy Loading<\/strong>: puedes utilizar un script como Puppeteer, una librer\u00eda Node.js directamente local para verificar que las capturas de pantalla generadas por el script muestran todo el contenido de la p\u00e1gina.<\/li>\n<\/ul>\n
*fuente:https:\/\/blog.tagliaerbe.com\/lazy-loading\/<\/p>\n<\/div>
<\/div><\/div><\/span>Auditor\u00eda de carga perezosa<\/h3><\/span><\/div><\/div><\/div>Una vez que hemos comprendido las l\u00edneas generales relativas a la Carga Lenta de im\u00e1genes, aprovechamos la funci\u00f3n de Extracci\u00f3n Personalizada<\/strong> de Screaming Frog<\/a> para hacer una auditor\u00eda del total de im\u00e1genes de una p\u00e1gina y de las que s\u00f3lo se cargan mediante carga bajo demanda.<\/p>\nM\u00e1s informaci\u00f3n sobre la funci\u00f3n de Extracci\u00f3n Personalizada de Seo Spider aqu\u00ed.<\/p>\n
A continuaci\u00f3n se muestran las rutas XPath compartidas por Jonathan Moore para la Extracci\u00f3n Personalizada.<\/p>\n<\/div>
Empecemos por entender qu\u00e9 es la Carga Perezosa para poder apreciar plenamente el trabajo de Jonathan.<\/p>\n
\u00bfSabes cuando navegas por una p\u00e1gina web y, a medida que te desplazas hacia abajo, van apareciendo nuevas im\u00e1genes?<\/p>\n
Esta caracter\u00edstica se denomina \u00abCarga perezosa\u00bb y corresponde a una carga \u00abbajo demanda\u00bb que s\u00f3lo tiene lugar cuando lo solicita la navegaci\u00f3n del usuario y se utiliza para todos aquellos elementos que afectar\u00edan al rendimiento de la p\u00e1gina si se trataran en primera instancia con el resto de elementos en el hilo principal (tambi\u00e9n afectar\u00eda al Core Web Vitals).<\/p>\n
Dado que la velocidad de carga es uno de los pilares del posicionamiento en buscadores, esta estrategia que ofrece una mejor experiencia al usuario debe tenerse muy en cuenta.<\/p>\n<\/div>
Lazy Loading y Google<\/h3><\/span><\/div><\/div><\/div>As\u00ed que, partiendo de las premisas, esta estrategia es recomendable para todos los sitios web con el fin de mejorar la experiencia de usuario de los navegantes, pero \u00bfqu\u00e9 opina el L\u00edder M\u00e1ximo Google de esta implementaci\u00f3n?<\/p>\n
Google est\u00e1 de acuerdo con esto, pero advierte que hay que tener mucho cuidado en la implementaci\u00f3n para no impedir que el bot rastree los recursos cargados mediante \u00abCarga Lenta\u00bb, de lo contrario podr\u00eda no indexarlos.<\/p>\n
En resumen, el motor de b\u00fasqueda aprueba esta t\u00e9cnica, pero pide asegurarse de que puede ver todos los recursos que se van a evaluar en la indexaci\u00f3n. Para entender mejor lo que pide Google, te invito a leer su gu\u00eda dedicada: Aseg\u00farate de que Google puede ver el contenido cargado de forma perezosa<\/a>.<\/p>\nLos aspectos que todo desarrollador debe tener en cuenta son esencialmente tres:<\/p>\n
\n- Carga el contenido cuando<\/strong> sea visible en la ventana gr\u00e1fica: para permitir que el robot de Google rastree completamente la p\u00e1gina, aseg\u00farate de que la carga diferida cargue todo el contenido siempre que sea visible en la ventana gr\u00e1fica mediante la API IntersectionObserver y un polyfill.<\/li>\n
- En el caso de\u00abDesplazamiento infinito<\/strong>\u00ab, admite la carga \u00abPaginada\u00bb.<\/li>\n
- Prueba el correcto funcionamiento de Lazy Loading<\/strong>: puedes utilizar un script como Puppeteer, una librer\u00eda Node.js directamente local para verificar que las capturas de pantalla generadas por el script muestran todo el contenido de la p\u00e1gina.<\/li>\n<\/ul>\n
*fuente:https:\/\/blog.tagliaerbe.com\/lazy-loading\/<\/p>\n<\/div>
<\/div><\/div><\/span>Auditor\u00eda de carga perezosa<\/h3><\/span><\/div><\/div><\/div>Una vez que hemos comprendido las l\u00edneas generales relativas a la Carga Lenta de im\u00e1genes, aprovechamos la funci\u00f3n de Extracci\u00f3n Personalizada<\/strong> de Screaming Frog<\/a> para hacer una auditor\u00eda del total de im\u00e1genes de una p\u00e1gina y de las que s\u00f3lo se cargan mediante carga bajo demanda.<\/p>\nM\u00e1s informaci\u00f3n sobre la funci\u00f3n de Extracci\u00f3n Personalizada de Seo Spider aqu\u00ed.<\/p>\n
A continuaci\u00f3n se muestran las rutas XPath compartidas por Jonathan Moore para la Extracci\u00f3n Personalizada.<\/p>\n<\/div>
As\u00ed que, partiendo de las premisas, esta estrategia es recomendable para todos los sitios web con el fin de mejorar la experiencia de usuario de los navegantes, pero \u00bfqu\u00e9 opina el L\u00edder M\u00e1ximo Google de esta implementaci\u00f3n?<\/p>\n
Google est\u00e1 de acuerdo con esto, pero advierte que hay que tener mucho cuidado en la implementaci\u00f3n para no impedir que el bot rastree los recursos cargados mediante \u00abCarga Lenta\u00bb, de lo contrario podr\u00eda no indexarlos.<\/p>\n
En resumen, el motor de b\u00fasqueda aprueba esta t\u00e9cnica, pero pide asegurarse de que puede ver todos los recursos que se van a evaluar en la indexaci\u00f3n. Para entender mejor lo que pide Google, te invito a leer su gu\u00eda dedicada: Aseg\u00farate de que Google puede ver el contenido cargado de forma perezosa<\/a>.<\/p>\n Los aspectos que todo desarrollador debe tener en cuenta son esencialmente tres:<\/p>\n *fuente:https:\/\/blog.tagliaerbe.com\/lazy-loading\/<\/p>\n<\/div> Una vez que hemos comprendido las l\u00edneas generales relativas a la Carga Lenta de im\u00e1genes, aprovechamos la funci\u00f3n de Extracci\u00f3n Personalizada<\/strong> de Screaming Frog<\/a> para hacer una auditor\u00eda del total de im\u00e1genes de una p\u00e1gina y de las que s\u00f3lo se cargan mediante carga bajo demanda.<\/p>\n M\u00e1s informaci\u00f3n sobre la funci\u00f3n de Extracci\u00f3n Personalizada de Seo Spider aqu\u00ed.<\/p>\n A continuaci\u00f3n se muestran las rutas XPath compartidas por Jonathan Moore para la Extracci\u00f3n Personalizada.<\/p>\n<\/div>\n
Auditor\u00eda de carga perezosa<\/h3><\/span>
![](\"http:\/\/screamingfrog.club\/wp-content\/uploads\/2024\/04\/custom-extraction-lazy-loading-immagini-1068x374-1.png\")
<\/a><\/span><\/div>