Cómo revisar la velocidad de un blog: LCP, INP y CLS

Para comprobar el rendimiento del blog, analice una URL pública en PageSpeed Insights, compare el móvil y el escritorio, y utilice LCP, INP y CLS para evaluar la carga, la capacidad de respuesta y la estabilidad del diseño. Separar datos de uso real de diagnósticos de laboratorio, luego abordar la causa detrás de una métrica deficiente en lugar de centrarse en una sola puntuación de rendimiento.

¿Qué son LCP, INP y CLS?

Core Web Vitals son las medidas centrales de Google de la experiencia del usuario web. El conjunto actual incluye las tres métricas siguientes. Los valores inferiores son mejores para los tres, pero miden diferentes cosas y usan diferentes unidades.

La guía de Google sobre Web Vitals utiliza el percentil 75, evaluado por separado para móvil y escritorio. Esto mira más allá de la visita simple más rápida hacia la experiencia una parte sustancial de los visitantes reciben.

Un post puede aparecer rápidamente pero responder lentamente cuando alguien abre su menú. Otro podría responder bien pero empujar el artículo hacia abajo cuando llega un anuncio. Identificar qué experiencia es pobre antes de comprimir imágenes repetidamente para resolver un problema de “velocidad” indefinido.

Ejecute una prueba en PageSpeed Insights

1. Elija una URL de artículo que se abre sin iniciar sesión. Excluya las direcciones de editor y vista previa.
2. Introduzca la dirección en PageSpeed Insights y ejecutar el análisis.
3. En el resultado móvil, lea la experiencia de usuario real separadamente del diagnóstico de rendimiento.
4. Comprueba el escritorio también. Grabar la URL, la fecha, la categoría de dispositivo, las métricas deficientes y los principales hallazgos.

Seleccione páginas representativas, además del artículo más reciente: una de texto, otra con muchas imágenes y otra con tablas o código, según los formatos del blog. Así podrá distinguir los problemas de la plantilla de los de un contenido concreto.

Comprueba si la URL analizada difiere de la que entraste. Si una redireccion envía la prueba a otro lugar, utilice ese mismo destino final en comparaciones posteriores. Los registros consistentes son útiles para juzgar los cambios, en lugar de hacer que la puntuación se vea mejor.

Diferencie los datos reales de la puntuación de laboratorio

Los datos de usuario real provienen del Informe de experiencia de usuario de Chrome, o CrUX, durante los 28 días anteriores. Con muestras insuficientes, el resultado puede mostrar datos de nivel de origen o no datos de campo. Los diagnósticos de laboratorio usan Lighthouse en un entorno simulado. El documentación de PageSpeed Insights explica la distinción.

Una puntuación de rendimiento de 90 y un pase de Web Vitals Core de usuario real son diferentes evaluaciones. Compruebe si los datos de campo representan la URL específica o todo el origen. Los datos perdidos no son un certificado de buen rendimiento ni una prueba de un problema.

Por ejemplo, reemplazar una imagen podría mejorar un resultado de laboratorio inmediatamente, mientras que el período de rodadura de datos de campo todavía incluye visitas desde antes del cambio. Primero verifique que el reemplazo carga correctamente y que pruebas comparables muestran signos de mejora. Revise la tendencia de los usuarios reales con el tiempo por separado.

LCP deficiente: localizar qué retrasa el contenido principal

Comience identificando el elemento reportado como el contenido más grande. Puede ser la imagen superior del artículo, un gran bloque de texto o algo más. No aplique la misma configuración de imagen en todas partes sin comprobar el elemento real.

• Si es una imagen, compare sus dimensiones entregadas con su tamaño mostrado.
• Utilice las dimensiones adecuadas, la compresión y el formato al comprobar el detalle necesario y la claridad de texto.
• Compruebe si la imagen principal de la primera pantalla utiliza carga diferida. Un ajuste útil para imágenes situadas más abajo puede retrasar la imagen principal.
• Si el diagnóstico identifica la respuesta del servidor o los recursos de bloqueo de renderizado, investigue esas causas también.

El Guía de optimización LCP separa demoras en descubrir, transferir y mostrar contenido. Si un cambio de formato es adecuado, véase cómo convertir imágenes a WebP. Si los visitantes todavía reciben el archivo antiguo después, compruebe el caché y el recurso realmente solicitado.

INP deficiente: revisar qué ocurre tras la interacción

INP mide la respuesta hasta la siguiente actualización visual tras una interacción. Las tareas largas de JavaScript pueden ocupar el hilo principal del navegador y retrasar la respuesta a la entrada. La Guía de optimización INP examina la demora de entrada, el procesamiento de eventos y la demora de presentación.

Reproduzca acciones habituales en el móvil: abrir el menú, buscar y seguir un enlace del índice. Anote cuál se retrasa y revise los plugins duplicados o innecesarios, widgets y scripts externos que se ejecutan en esa página.

Evite desactivar muchos plugins a la vez. Prepare un entorno de copia de seguridad o prueba y haga un cambio a la vez para que pueda identificar su efecto. Si permite retrasar la ejecución de JavaScript, compruebe que los menús, controles de búsqueda y consentimiento todavía funcionan, junto con la comprobación de la puntuación.

CLS deficiente: reservar espacio para el contenido

Imágenes tardías, anuncios e incrustaciones pueden empujar el artículo o un enlace que alguien está a punto de tocar. El Guía de optimización CLS destaca las dimensiones de la imagen y el espacio de reserva para el contenido de carga tardía.

• Indique en las imágenes los atributos width y height o una relación de aspecto reservada adecuada.
• Reserve espacio suficiente para anuncios y vídeos incrustados en cada tamaño de pantalla.
• Compruebe que un espacio publicitario sin rellenar no se contrae de repente y provoca otro desplazamiento.
• Observe si el texto o los botones se mueven al cargar fuentes o banners.

Reducir el espacio vacío y mantener el diseño estable puede requerir un compromiso. No asuma una altura de anuncio de escritorio es adecuado para el móvil. Abrir artículos reales e inspeccionar el movimiento cerca de la parte superior, media y inferior de la pantalla.

Vuelva a comprobarlo en condiciones comparables

1. Guardar la configuración original, archivos y resultados de prueba.
2. Elija una causa importante y haga un cambio específico.
3. Refresque los caches pertinentes y verifique el recurso cambiado en la página pública.
4. Repita la prueba con la misma URL y categoría de dispositivo, y compruebe menús, imágenes, anuncios y diseño.
5. Si la funcionalidad se rompe u otras métricas empeoran, restaurar el cambio y reducir la causa de nuevo.

No concluya que funciona por una pequeña diferencia en una sola ejecución. Compare los registros y los problemas recurrentes antes del siguiente cambio. Subir la puntuación a costa de romper funciones necesarias para el lector no es una mejora útil.