Core Web Vitals are three numbers Google uses to describe how a page feels to a real visitor: how fast the main content appears, how quickly the page reacts to a tap, and how much the layout jumps around. They are part of Google’s page experience signals, and more importantly they track the moments when visitors give up. Here is what each one measures on a WordPress site and where to look first when it is red.
Las tres métricas y sus objetivos
- LCP (Pintura con contenido más grande):el tiempo hasta que se dibuje la imagen o bloque de texto más grande en la ventana gráfica. Bueno es 2,5 segundos o menos.
- INP (Interacción con la siguiente pintura):cuánto tiempo tarda la página en responder visualmente después de un clic, toque o pulsación de tecla, durante toda la visita. Lo bueno es 200 milisegundos o menos. INP reemplazó al First Input Delay como Core Web Vital en marzo de 2024.
- CLS (Cambio de diseño acumulativo):cuánto contenido visible se mueve inesperadamente. Bueno es 0,1 o menos.
Google juzga una página según el percentil 75 de visitas reales, divididas por dispositivos móviles y computadoras de escritorio. Una computadora portátil rápida con Wi-Fi de oficina dice poco; el número que cuenta proviene de teléfonos normales con conexiones normales. Las definiciones y los umbrales provienen de la descripción general de Web Vitals deweb.dev.
Mida antes de cambiar nada
Ejecute sus páginas clave a través dePageSpeed Insights. La sección superior muestra datos de campo de los usuarios de Chrome si su sitio tiene suficiente tráfico; La sección de laboratorio a continuación es una carga simulada única. Corrija lo que muestran los datos de campo y utilice el informe de laboratorio para encontrar la causa. El informe Core Web Vitals de Search Console agrupa URL similares, por lo que una corrección de plantilla puede borrar cientos de páginas.
Mejora del LCP
En la mayoría de los sitios de WordPress, el elemento LCP es la imagen principal o la imagen destacada de una publicación. Las causas habituales de un LCP lento son una respuesta lenta del servidor, una imagen grande y una imagen que el navegador descubre tarde.
- Sirve la imagen principal en WebP o AVIF en el tamaño en que se muestra, no en la carga original.
- Nunca cargue la imagen en la mitad superior de la página de forma diferida. WordPress agrega
fetchpriority="high"a la primera imagen grande; verifique que su tema o complemento no lo esté deshaciendo. - Utilice el almacenamiento en caché de la página para que el HTML llegue rápidamente. Una página almacenada en caché en un hosting decente debería empezar a llegar en menos de un segundo.
- Cargue fuentes web con
font-display: intercambiey precargue solo uno o dos archivos que la primera pantalla necesita.
La guíaOptimize LCPdivide la métrica en cuatro partes, lo que ayuda cuando la solución no es obvia.
Mejorando INP
INP trata sobre JavaScript. Cuando el hilo principal está ocupado ejecutando scripts, hay que esperar un toque. Los culpables más comunes son los controles deslizantes, los widgets de chat, las etiquetas de seguimiento y los creadores de páginas que envían grandes paquetes.
- Elimina los complementos que ya no utilizas y comprueba qué carga cada uno de los restantes en el front-end.
- Retrasa scripts de terceros que no son necesarios para la primera interacción, como widgets de chat y mapas de calor.
- Mantenga breves los controladores de eventos. El trabajo pesado después de un clic debe dividirse o retirarse del hilo principal.
Mejora de CLS
El cambio de diseño ocurre cuando aparece algo y empuja el contenido hacia abajo. Las imágenes sin dimensiones, las fuentes que se cargan tarde y cambian el tamaño del texto, los banners de cookies insertados sobre el contenido y los anuncios sin espacio reservado causan la mayor parte.
- Dale a cada imagen y video un ancho y alto, o una relación de aspecto
en CSS. - Muestra pancartas como superposiciones en la parte inferior de la pantalla en lugar de empujar la página hacia abajo.
- Anima con
transformayopacidad, que no mueven el diseño.
La velocidad también es limpieza de SEO
Las páginas rápidas no rescatan el contenido débil y el buen contenido en una página lenta pierde visitantes antes de que lo lean. Trate Core Web Vitals como parte de la misma rutina que los títulos, mapas de sitio y enlaces internos. Nuestra lista de verificación de SEO de WordPresscubre el resto de esa rutina.
Dónde ayuda FluxWP
Flux Speed muestra solicitudes lentas y consultas intensas desde el interior del administrador, para que pueda ver qué complemento o página está costando tiempo. Debido a que los complementos de FluxWP comparten un administrador y un sistema de diseño, un sitio que utiliza formularios, una bandeja de entrada del equipo y análisis carga un conjunto de activos en lugar de tres. Si el cuello de botella es el servidor, nuestros planes de alojamiento administradoestán configurados con almacenamiento en caché y optimizados para WooCommerce.
