0Largest Contentful Paint (L) es una de las tres métricas de Core Web Vitals y representa la rapidez con la que se carga el contenido principal de una página web. Específicamente, L mide el tiempo desde que el inicia la carga de la página hasta que la imagen o el bloque de texto más grandes se muestran en la ventana gráfica.
¿Es su elemento L una imagen?
Si es así, asegurese de estar usando fetchpriority="high" para acelerarlo. ¡Esto tambien es cierto si lo esta cargando previamente!
Optimizar la prioridad que se le da al recurso
Incluso si el recurso L se puede detectar a partir del marcado HTML, es posible que aún no comience a cargarse tan pronto como el primer recurso. Esto puede suceder si la heurística de prioridad del explorador de precarga del navegador no reconoce que el recurso es importante o si determina que otros recursos son más importantes.
Por ejemplo, puede retrasar su imagen L a través de HTML si configura su elemento <img> con loading="lazy". El uso de la carga diferida significa que el recurso no se cargará hasta que el diseño confirme que la imagen está en la ventana gráfica y, por lo tanto, puede comenzar a cargarse más tarde de lo que lo haría de otra manera.
Nota: Nunca realice una carga diferida de su imagen L, ya que eso siempre conducirá a un retraso innecesario en la carga de recursos y tendrá un impacto negativo en L.
Incluso sin la carga diferida, los navegadores no cargan inicialmente las imágenes con la prioridad más alta, ya que no son recursos que bloquean el procesamiento. Puede indicarle al navegador qué recursos son más importantes a través del atributo fetchpriority de los recursos que podrían beneficiarse de una mayor prioridad:
<img fetchpriority="high" src="/s/logo.webp">Es una buena idea configurar un elemento <img> con fetchpriority="high" si cree que es probable que sea el elemento L de su página, pero limite esto a solo una o dos imágenes (según los tamaños comunes de ventana gráfica de escritorio y móvil), de lo contrario, la señal no tendrá sentido. También puede reducir la prioridad de las imágenes que pueden estar al principio de la respuesta del documento, pero que no son visibles debido al estilo, como las imágenes en las diapositivas del carrusel que no son visibles al inicio:
<img fetchpriority="low" src="/s/logo.webp">Dejar de priorizar ciertos recursos puede brindar más ancho de banda a los recursos que más lo necesitan, pero tenga cuidado. Compruebe siempre la prioridad de los recursos en DevTools y pruebe los cambios con herramientas de laboratorio y de campo.
Una vez que haya optimizado la prioridad de su recurso L y el tiempo de descubrimiento, su cascada de red debería verse así (con el recurso L comenzando al mismo tiempo que el primer recurso):
Importante: Otra razón por la que su recurso L puede no comenzar a cargarse lo antes posible, incluso cuando se puede detectar desde la fuente HTML, es si está alojado en un origen diferente, ya que estas solicitudes requieren que el navegador se conecte a ese origen antes de que el recurso pueda comenzar a cargarse. Cuando sea posible, es una buena idea hospedar recursos críticos en el mismo origen que su recurso de documento HTML porque esos recursos pueden ahorrar tiempo al reutilizar la conexión existente.
Web.dev es el recurso para desarrolladores de todos los orígenes para aprender, crear y desarrollar en la web. Si quieres aprender mas sobre como optimizar el L. Una guía paso a paso sobre cómo desglosar L e identificar áreas clave para mejorar.
Comentarios