Categories
Core Web Vitals

¿Cuál es la pintura contenta más grande: una explicación fácil?

La pintura contenta más grande (LCP) es una métrica de experiencia de usuario que se convirtió en un factor de clasificación en 2021.

Esta guía explica qué es el LCP y cómo lograr las mejores puntuaciones.

Qué ¿Es la pintura contenta más grande?

LCP es una medida de cuánto tiempo lleva el contenido principal de una página que se descarga y esté listo para interactuar con.

Lo que se mide es la imagen más grande o bloque de contexto dentro de la ventana de usuario. Cualquier cosa que se extiende más allá de la pantalla no cuenta.

Los elementos típicos medidos son imágenes, imágenes de carteles de video, imágenes de fondo y elementos de texto de nivel de bloque, como etiquetas de párrafos.

¿Por qué se mide LCP?

LCP se eligió como una métrica clave para la puntuación de los vitales web del núcleo porque mide con precisión la rapidez con que una página web puedeser utilizado.

Además, es fácil de medir y optimizar para.

Elementos de nivel de bloque utilizados para calcular el puntaje LCP

elementos de nivel de bloques utilizados para calcular el El puntaje de pintura contento más grande puede ser el

y

elementos, así como el encabezado, div, elementos de forma.

AnuncioContinue Lectura a continuación

Se pueden usar cualquier elemento HTML de nivel de bloque que contenga elementos de texto, Mientras sea el más grande.

No se utilizan todos los elementos. Por ejemplo, los elementos SVG y video no se utilizan actualmente para calcular la pintura con contenga más grande.

LCP es una métrica fácil de entender porque todo lo que tiene que hacer es ver su página web y determinar cuál es el bloque de texto más grande o la imagen es y luego lo optimiza haciéndolo más pequeño o quitando cualquierLo que le impediría descargar rápidamente. Debido a que Google incluye la mayoría de los sitios en el

Primer índice móvil

, es mejor optimizar la ventana móvil primero, luego el escritorio.

El retraso de los elementos grandes podría no ayudar

a veces, una página web se procesará en partes. Una imagen de gran tamaño podría tardar más en descargarse que el elemento de nivel de bloques de texto más grande.

Lo que sucede, en este caso, es que una actuación está registrada para el nivel de bloques de texto más grande. elemento.

, pero cuando la imagen destacada en la parte superior de la pantalla se carga, si ese elemento toma más de la pantalla del usuario (su ventana electrónica), entonces se informará otro objeto

de rendimiento

. esa imagen.

advertisementcontinue leyendo a continuación

Las imágenes pueden ser tRicky para las puntuaciones LCP

Publishers web Sube comúnmente

imágenes

a su tamaño original y luego use HTML o CSS para cambiar el tamaño de la imagen para mostrar a un tamaño más pequeño.

El original El tamaño es lo que Google se refiere a como el tamaño “intrínseco” de la imagen.

Si un editor carga una imagen de 2048 píxeles de ancho y 1152 píxeles de altura, que 2048 x 1152 altura y ancho se consideran la “intrínseca “Tamaño.

Ahora, si el editor cambia el tamaño de la imagen de 2048 x 1152 píxeles a 640 x 360 píxeles, la imagen del tamaño de 640 × 360 se llama tamaño visible.

A los efectos del calculador. El tamaño de la imagen, Google usa el tamaño más pequeño entre las imágenes de tamaño intrínsecas y visibles.

Nota Acerca de los tamaños de imágenes

Es posible lograr un alto contenido más grande.l Puntaje de pintura con una gran imagen de tamaño intrínseco que se redimensiona con HTML o CSS para ser más pequeños.

Pero es una práctica mejor para hacer que el tamaño intrínseco de la imagen coincida con el tamaño visible.

La imagen descargará más rápido y su puntaje de pintura con contento más grande subirá. Cómo se desempeñan las imágenes de asas de LCP de otro dominio

Las imágenes que se sirven de otro dominio, como de un CDN, generalmente no se cuentan En el mayor cálculo de pintura contento.

Los editores que desean tener esos recursos formar parte de la necesidad de establecer lo que se llama un encabezado de Origen-Permiso de tiempo.

Agregando este encabezado a su El sitio puede ser complicado porque si usa un comodín (*) en la configuración, podría abrir su sitio hasta los eventos de piratería.

para hacerCorrectamente, tendría que agregar un dominio que sea específico de la Crawler de Google para que lo incluya para que pueda ver la información de tiempo de su

CDN

.

Por lo tanto, en este punto, los recursos (Al igual que las imágenes) que se cargan de otro dominio (como de un CDN) no se contarán como parte del cálculo del LCP. Cuidado con estos marcadores “Gotchas” todos los elementos que están en La pantalla del usuario (la ventana gráfica) se utiliza para calcular LCP. Eso significa que las imágenes que se hacen fuera de la pantalla y luego se desplazan a la distribución una vez que se prestan, pueden no contar como parte de la puntuación de pintura contenta más grande.

AnuncioContinue leyendo a continuación

en el extremo opuesto, elementos que comienzan En la ventana Compartimiento de usuario y luego se alejó de la pantalla, se puede contar como parte de THE Cálculo de LCP.

Cómo obtener el puntaje LCP

Hay dos tipos de herramientas de puntuación. El primero se llama

Herramientas de campo,

y la segunda se denominan

Herramientas de laboratorio

.

Las herramientas de campo son medidas reales de un sitio.

Las herramientas de laboratorio proporcionan un puntaje virtual basado en un rastreo simulado utilizando algoritmos que se aproximan a las condiciones de Internet que un usuario típico en un teléfono móvil puede encontrar.

Cómo optimizar la pintura más grande

Hay tres Áreas principales para optimizar (más una más para los marcos de JavaScript):

Servidores lentos. Bloqueo lento. JavaScript y CSS.SSSSLOW Tiempos de carga de recursos.

Un servidor lento puede ser un problema con los niveles de DDOS de piratería y tráfico de raspadores en un host compartido o VPS. Puede encontrar alivio instalando un

Plugin de WordPress

como WordFence Para averiguar si está experimentando un ataque masivo y luego bloquee.

AnunciCementContinue Lectura a continuación

Otros problemas podrían ser la mala configuración de un servidor o VPS dedicados. Un problema típico puede ser la cantidad de memoria asignada a PHP.

Otro problema podría ser un software desactualizado como una versión anterior de PHP o un software CMS que está desactualizado.

El peor escenario es un Servidor compartido con múltiples usuarios que están desacelerando su caja. En ese caso, pasar a un host mejor es la respuesta.

Normalmente, aplicando correcciones, como agregar almacenamiento en caché, optimizar las imágenes, la fijación de CSS de bloqueo de procesamiento y JavaScript, y la precaución de ciertos activos puede ayudar.

Google tiene una punta limpia para tratar con CSS que no es esencial para la representaciónLo que el usuario ve:

“Retire cualquier CSS no utilizado en su totalidad o muévelo a otra hoja de estilo si se usa en una página separada de su sitio. Para cualquier CSS no es necesario para la representación inicial , use LoadCSS para cargar archivos de forma asíncrona, lo que aprovecha rel = “precarga” y en la carga.

Herramientas de campo para la puntuación LCP

Listas de Google Tres herramientas de campo: AnunciCementContinue Reading a continuación PageSpeed ​​Insights . Consola de búsqueda (Informe de Vitales Web Core).

Informe de experiencia de usuario de Chrome

.

El último Un informe de experiencia de usuario de Chrome: requiere una cuenta de Google y un proyecto de Google Cloud. Los dos primeros son más sencillos.

Herramientas de laboratorio para la puntuación LCP Las mediciones de laboratorio son puntuaciones simuladas.

Google recomienda el seguimientog Herramientas: Chrome DevTools

.

Faro . webpagetest.org

.


Las dos primeras herramientas son proporcionadas por Google. La tercera herramienta es proporcionada por un tercero. Citas

Cómo optimizar para LCP ¿Qué es LCP? Ataques de tiempo y el encabezado de tiempo-Permitir-Origen advertisementContinue Lectura a continuación Crédito de la imagen destacado: Paulo Bibitá

Leave a Reply

Your email address will not be published. Required fields are marked *