Actualizaciones de PageSpeed Insights a Lighthouse 8.4. Una nueva auditoría diagnostica un problema generalizado de pintura con contenido más grande
PageSpeed Insights ahora usa Lighthouse 8.4.0, que presenta dos auditorías completamente nuevas. La adición más importante ayuda a los editores a diagnosticar un problema generalizado que afecta negativamente a la métrica de pintura con contenido más grande.. Esta nueva auditoría ayudará a los editores a lograr mejores puntajes de Largest Contentful Paint (LCP).
Pintura con contenido más grande
Ha habido un problema desde hace mucho tiempo con Largest Contentful Paint (LCP) que la versión más reciente de Lighthouse, 8.4.0, ayudará a diagnosticar.
Se descubrió que la carga diferida de imágenes era un buen enfoque para hacer que la parte principal del contenido fuera visible e interactiva en un dispositivo móvil más rápido.
Antes de la carga diferida, las imágenes que estaban debajo del pliegue (no visibles en la ventana gráfica del navegador) se descargaban en segundo plano.
Eso tuvo el efecto de ralentizar la visibilidad y la interactividad del contenido que estaba en la ventana gráfica del visitante del sitio.
Cuando las imágenes que están fuera de la ventana gráfica móvil se cargan en segundo plano, en realidad ralentizan la representación de la parte visible de la página web.
Al agregar el atributo Lazy Load HTML a las imágenes, el navegador sabrá que no debe descargar las imágenes (que están fuera de la ventana gráfica) hasta más tarde.
Esto tiene el efecto de aumentar la velocidad de la página.
Pero la carga diferida de elementos que se encuentran en la ventana gráfica de pintura con contenido más grande tiene un efecto negativo y esta es una de las cosas que aborda Lighthouse 8.4.0.
Impacto negativo de Lazy Loading All Images
WordPress 5.4 introdujo la carga diferida nativa de imágenes. Antes de implementar el cambio, los desarrolladores probaron las mejoras de velocidad y descubrieron que agregar el atributo HTML de carga diferida a todas las imágenes resultó en una ganancia de velocidad.
Sin embargo, esa fue una implementación imperfecta del atributo de carga diferida porque WordPress ahora estaba agregando el atributo de carga diferida a la imagen destacada, que es un elemento que generalmente está en la ventana de visualización de un visitante del sitio cuando visita una página web.
Eso agregó un impacto negativo a la métrica de pintura con contenido más grande (LCP) e introdujo una experiencia de usuario ligeramente negativa.
Las ganancias de agregar carga diferida superaron las pérdidas del golpe a la métrica LCP, por lo que WordPress procedió con esto.
Sin embargo, Google notó que después de la implementación de la carga diferida en el núcleo de WordPress, las puntuaciones de Lowest Contentful Paint (LCP) comenzaron a disminuir un poco.
En un artículo que Google publicó en Web.dev sobre el efecto en el rendimiento de demasiada carga diferida, investigaron los datos de sitios web reales y descubrieron que los sitios con demasiada carga diferida sufrían puntajes LCP bajos. Google published on Web.dev
Descubrieron que las implementaciones agresivas de carga diferida eran la razón y se enteraron de que se trataba de un problema específico de los sitios de WordPress.
Google confirmó que las puntuaciones de WordPress para LCP estaban cayendo.
Los autores concluyeron:
“…the lazy-loading technique used by WordPress very clearly helps reduce image bytes but at the cost of a delayed LCP.”
«… la técnica de carga diferida utilizada por WordPress claramente ayuda a reducir los bytes de imagen, pero a costa de un LCP retrasado».
Lighthouse 8.4.0 agrega LCP Lazy Load Audit
Es posible que los editores hayan visto caer sus puntajes de pintura con contenido más grande (LCP) y no entiendan por qué estaban empeorando. Lighthouse 8.4.0 resuelve este problema al agregar una auditoría específica para diagnosticar este problema.
Todas las imágenes en la vista de pintura con contenido más grande, la parte de la página web que un visitante ve primero, no deben cargarse de forma diferida.
Lighthouse 8.4.0 detectará si hay algún elemento en la ventana gráfica de LCP que tenga carga diferida.
Una página de Chrome Developer describe cómo funciona Lighthouse 8.4.0: Chrome Developer page
“Lighthouse will now detect if the Largest Contentful Paint (LCP) element was a lazy-loaded image and recommend removing the loading attribute from it.”
The official Lighthouse 8.4.0 developer page describes the new functionality:
“Detect when the LCP element is lazy-loaded. Above-the-fold images that are lazily loaded render later in the page lifecycle, which can delay the largest contentful paint.”
«Lighthouse ahora detectará si el elemento de pintura con contenido más grande (LCP) era una imagen con carga diferida y recomendará eliminar el atributo de carga».
La página oficial para desarrolladores de Lighthouse 8.4.0 describe la nueva funcionalidad:
«Detectar cuando el elemento LCP está cargado de forma diferida. Las imágenes de la mitad superior de la página que se cargan con pereza se procesan más adelante en el ciclo de vida de la página, lo que puede retrasar la pintura más grande y con contenido”.
Relacionado: Una guía técnica de SEO para las métricas de rendimiento de Lighthouse
Nueva auditoría de ventana gráfica móvil
Lighthouse 8.4.0 también agregará una nueva auditoría que detecta si no hay una metaetiqueta de ventana gráfica móvil en la sección principal.
Esto es importante porque si no se agrega esta metaetiqueta, puede resultar en una puntuación más baja de Retraso en la primera entrada.
La documentación explica la importancia de esta nueva auditoría:
“In a recent study of data from the HTTP Archive, over half of the sites that received a score of 90 or higher in Lighthouse, but failed at least one Core Web Vital, did not have a mobile viewport set and were failing FID. As a result, the Lighthouse performance section will now recommend adding a viewport like the following if none is found:
<meta name="viewport" content="width=device-width">"
“En un estudio reciente de datos de HTTP Archive, más de la mitad de los sitios que recibieron una puntuación de 90 o más en Lighthouse, pero reprobaron al menos un Core Web Vital, no tenían una vista móvil configurada y estaban reprobando FID.. Como resultado, la sección de rendimiento de Lighthouse ahora recomendará agregar una ventana gráfica como la siguiente si no se encuentra ninguna:
<meta name="viewport" content="width=device-width">"
Faro 8.4.0 está en vivo
Lighthouse 8.4.0 ya está disponible en PageSpeed Insights y activará la nueva advertencia de LCP si encuentra un elemento con carga diferida en la ventana gráfica de pintura con contenido más grande.
Chrome Dev Tools incluirá Lighthouse 8.4.0 en Chrome 95, cuyo lanzamiento está programado para el 19 de octubre de 2021.
Citas
Lea la página de desarrolladores de Chrome para Lighthouse 8.4.0
Novedades en Lighthouse 8.4 What’s new in Lighthouse 8.4
Los efectos de rendimiento de demasiada carga diferida The Performance Effects of Too Much Lazy-Loading
Página de GitHub de Lighthouse v8.4 Lighthouse v8.4 GitHub Page
Leer el articulo original en Search Engine Journal.
