¿Ha oído hablar de este nuevo proyecto de Google Core Web Vitals pero no está seguro de cómo se conecta a su sitio de WordPress? ¿O tal vez no tiene idea de qué es el proyecto Core Web Vitals y por qué es importante para WordPress?
De cualquier manera, esta publicación cubrirá todo lo que necesita saber sobre Google Core Web Vitals y WordPress. Te diré cuáles son, cómo probarlos y cómo mejorar los puntajes de tu sitio para crear una mejor experiencia de usuario y tal vez incluso mejorar tu ranking de búsqueda en 2021 y más allá.
- 1. ¿Qué son los Google Core Web Vitals?
- 2. ¿Afectan los Google Core Web Vitals webs a la optimización de motores de búsqueda (SEO)?
- 3. Explicación de los elementos fundamentales de la web y cómo probarlos
- 4. Cómo mejorar los elementos básicos de la web en WordPress
- 5. Comience a optimizar los elementos básicos de la web en WordPress hoy
¿Qué son los Google Core Web Vitals?
Core Web Vitals es una nueva iniciativa de Google diseñada para mejorar la experiencia del usuario en la web. En lugar de centrarse en métricas genéricas como cuánto tiempo tarda en cargar todo su sitio web, Core Web Vitals se centra más en cómo el rendimiento de su sitio se conecta con la experiencia del usuario.
Por ejemplo, ¿cuánto tiempo se tarda en cargar el contenido más importante de su sitio? El tiempo que tarda todo su sitio en cargar no es necesariamente la métrica más importante para la experiencia del usuario . En cambio, a la mayoría de los usuarios les importa qué tan pronto pueden comenzar a consumir su contenido, que es parte de lo que las métricas de Core Web Vitals intentan medir.
Actualmente, hay tres métricas diferentes que se incluyen en Core Web Vitals ( algunas de las cuales ya han sido promocionadas por Google con diferentes marcas ). Cubriré cada métrica con más detalle a continuación, pero aquí hay un resumen rápido de lo que son:
- Pintura de contenido más grande (LCP) : cuánto tiempo tarda en cargarse el contenido más significativo de su sitio. Por lo general, esta será la sección principal de su sitio o la imagen destacada. Más sobre cómo encontrar cuál es su elemento LCP más adelante .
- Cambio de diseño acumulativo (CLS) : cuánto “cambia” el contenido de su sitio a medida que se carga (lo que es malo para la experiencia del usuario). Por ejemplo, si tiene anuncios de carga tardía que “empujan” su contenido hacia abajo después de que su contenido ya se haya cargado, eso es un cambio de diseño.
- Retraso de la primera entrada (FID) : el tiempo entre el momento en que un usuario interactúa con algo en su página (por ejemplo, hacer clic en un botón) y cuando su navegador puede comenzar a procesar ese evento.
Como puede ver, el “tiempo de carga” no es una de las métricas que Google ha decidido incluir.
¿Porqué es eso? Una vez más, a Google le preocupa más cómo se conecta el rendimiento de su sitio con la experiencia del usuario. Y el equipo de Google cree que estas métricas son una gran parte de lo que captura las partes de la “experiencia del usuario” del rendimiento web.
¿Afectan los Google Core Web Vitals webs a la optimización de motores de búsqueda (SEO)?
Sí, lo harán … pero no lo hacen del todo todavía – al menos a partir del momento que estoy escribiendo este post en noviembre de 2020. Es decir, Core Web vitales no son actualmente un factor de clasificación de SEO, pero Google ha declarado públicamente sus planes de comience a usar Core Web Vitals para SEO en algún momento de 2021.
Google también ha dicho que Core Web Vitals afectará tanto a los resultados móviles como a los de escritorio, así como si su sitio aparece o no en Top Stories. Anteriormente, su sitio necesitaba usar AMP para aparecer en Top Stories. Ese ya no será el caso cuando Google implemente el cambio, pero su sitio deberá cumplir con ciertos puntajes mínimos de Google Core Web Vitals para aparecer en Top Stories.
Básicamente, tiene algo de tiempo para ajustar su sitio a Core Web Vitals, pero no es algo que pueda ignorar porque eventualmente tendrá un impacto real en el rendimiento de búsqueda de su sitio, especialmente si está tratando de que su contenido aparezca en Top Cuentos.
Explicación de los elementos fundamentales de la web y cómo probarlos
Ahora, entremos en una explicación más profunda de las tres métricas de Core Web Vitals y cómo puede probar su sitio con ellas. Comenzaré compartiendo dónde probar su sitio antes de entrar en las métricas. Esto es importante porque la herramienta de prueba se vincula directamente con la comprensión de las métricas. Por ejemplo, para descubrir cuál es el elemento “Pintura con contenido más grande” de su sitio, debe utilizar la herramienta de prueba.
Cómo probar Core Web Vitals en WordPress
La forma más sencilla de probar su sitio con Core Web Vitals es a través de Google PageSpeed Insights , que proporciona datos sobre las tres métricas.
Otras herramientas de prueba de velocidad también han comenzado a incorporar Core Web Vitals en sus resultados. Actualmente, WebPageTest también admite Core Web Vitals y los planes de GTmetrix para agregar soporte pronto. Otras herramientas de prueba de velocidad también pueden agregar soporte en el futuro.
En PageSpeed Insights, todo lo que debe hacer es ingresar la URL de su sitio y verá las métricas de Core Web Vitals tanto en los datos de campo ( si su sitio tiene suficientes datos ) como en los datos de laboratorio . Las métricas de Core Web Vitals están marcadas con una bandera azul.
Para sitios con menor tráfico, es posible que solo tenga datos de laboratorio para LCP y CLS porque Google no tiene suficientes datos de visitantes reales. ¡Eso está totalmente bien! Sin embargo, solo verá los tiempos de FID si su sitio tiene suficientes datos de campo.
Otra nota importante es que debe verificar los resultados tanto para dispositivos móviles como para computadoras de escritorio, ya que sus métricas de Core Web Vitals serán diferentes entre las dos:
Si usa Google Search Console, también puede ver un informe de Google Core Web Vitals en todo el sitio que lo ayuda a detectar rápidamente problemas en todo el sitio:
Esto es más útil más adelante cuando intente diagnosticar problemas con su sitio en su totalidad.
Ahora, repasemos lo que significan las tres métricas.
Explicando la pintura con contenido más grande (LCP)
La pintura de contenido más grande (LCP) mide cuándo se ha cargado el contenido principal de una página, lo que según Google es lo que afecta la rapidez con que los visitantes perciben que se carga su sitio.
LCP es muy similar a otra métrica: First Contentful Paint (FCP) . La diferencia clave es que LCP se enfoca en cuando se carga el contenido “principal”, mientras que FCP se enfoca en cuando se carga el “primer” contenido (que podría ser una pantalla de presentación o un indicador de carga).
El “elemento” de LCP será diferente para cada sitio y también será diferente entre las versiones móviles y de escritorio de su sitio. A veces, el elemento LCP podría ser una imagen, mientras que otras veces podría ser solo texto.
Para descubrir el elemento de pintura con contenido más grande de su sitio, puede utilizar PageSpeed Insights. Desplácese hacia abajo hasta la sección Diagnóstico y expanda la pestaña del elemento Pintura con contenido más grande . Allí, Google mostrará el HTML del elemento que está utilizando para medir LCP.
Por ejemplo, en la versión de escritorio de la página de inicio de WordPress.org, el elemento LCP es una imagen:
Sin embargo, en la versión móvil del sitio, el elemento LCP es el texto del subtítulo:
Básicamente, LCP solo mide cuánto tiempo tardan estos elementos en ser visibles para sus visitantes.
Entonces, ¿cuál es un buen momento de LCP? Así es como Google define las cosas:
- Bueno : menos de 2,5 segundos
- Necesita mejorar : entre 2,5 segundos y 4,0 segundos
- Deficiente : más de 4.0 segundos
Explicación del cambio de diseño acumulativo (CLS)
El cambio de diseño acumulativo (CLS) se ocupa de cómo se carga su sitio y si su contenido se “mueve” o no a medida que se carga contenido nuevo.
Por ejemplo, ¿alguna vez ha estado en un sitio web de noticias donde el contenido del artículo cambiaba constantemente a medida que el sitio cargaba anuncios? Eso es CLS.
O bien, podría ser una situación aún más frustrante en la que el contenido de carga tardía haga que un botón cambie y haga que el visitante haga clic accidentalmente en el botón incorrecto.
Probablemente no necesites que te diga que esto es muy molesto para los visitantes – demasiado cambio de diseño y tus visitantes van a tener una experiencia realmente pobre.
Para medir su CLS puntuación, se puede utilizar tanto en el Datos de laboratorio y datos de campo en PageSpeed Insights. Así es como Google define las diferentes puntuaciones:
- Bueno – Menos de 0,1
- Necesita mejorar : entre 0,1 y 0,25
- Deficiente : más de 0,25
Si va a la sección Evitar grandes cambios de diseño en el área Diagnóstico de PageSpeed Insights, también puede ver los elementos individuales en su sitio que están “cambiando” y afectando su puntuación:
Explicación del retardo de la primera entrada (FID)
El retraso de la primera entrada (FID) es probablemente la métrica más complicada de entender (y optimizar).
Básicamente, se trata del tiempo que tarda su sitio en volverse interactivo después de que un usuario hace clic en un enlace / botón o interactúa con un control impulsado por JavaScript. Por ejemplo, si alguien hace clic en un botón para expandir una sección de acordeón, ¿cuánto tiempo le toma a su sitio responder a eso?
FID se ve muy afectado por JavaScript. Por ejemplo, si el teléfono de un visitante móvil está ocupado procesando un archivo JavaScript grande de su sitio, es posible que no sea interactivo si un usuario intenta hacer clic en un elemento.
Así es como Google define los tiempos de FID:
- Bueno – Menos de 100 ms
- Necesita mejorar : entre 100 ms y 300 ms
- Deficiente : más de 300 ms
A diferencia de LCP y CLS, FID se basa en datos reales del usuario, por lo que no puede probarlo fácilmente “en el laboratorio”, por así decirlo. Por eso, solo verá los tiempos de FID en la sección Datos de campo de PageSpeed Insights. Desafortunadamente, si su sitio no tiene suficientes datos para completar la sección Datos de campo, no hay una manera fácil de medir los tiempos de FID de su sitio.
Cómo mejorar los elementos básicos de la web en WordPress
Ahora, para la pregunta importante: si actualmente no cumple con las recomendaciones de Google para las tres métricas de Google Core Web Vitals, ¿cómo puede optimizar su sitio de WordPress para mejorar sus puntajes?
Bueno, las estrategias son ligeramente diferentes para cada métrica. Pero, en general , la mayoría de las optimizaciones solo implican implementar las mejores prácticas de rendimiento de WordPress, aunque con algunos puntos de énfasis.
Cómo mejorar la pintura con contenido más grande en WordPress
La optimización para la pintura con contenido más grande es la métrica más sencilla, ya que se trata de las mejores prácticas de rendimiento de WordPress:
- Elija un alojamiento rápido : el alojamiento afecta la capacidad de respuesta del servidor, lo que juega un papel importante en LCP.
- Configurar el almacenamiento en caché de la página – caché de página también acelera la rapidez con la que su servidor puede responder. WP Rocket lo habilita automáticamente.
- Optimice sus imágenes : muchas veces, su elemento LCP será una imagen, por lo que optimizando tus imágenes acelerará su tiempo. Puedes usar Imagina para optimizar automáticamente las imágenes de WordPress.
- Optimice su código : si carga CSS o JavaScript innecesarios antes de su contenido principal, ralentizará su tiempo. Puedes arreglar esto por eliminar JavaScript que bloquea el renderizado y insertar CSS crítico. Puede configurar estas optimizaciones en la pestaña Optimización de archivos en WP Rocket.
- Usar compresión a nivel de servidor – usando Gzip o Brotli La compresión reducirá el tamaño del archivo de su sitio, lo que acelera LCP. Cohete WP habilita automáticamente la compresión Gzip.
- Use la preconexión para recursos importantes ; la preconexión le permite establecer conexiones importantes de terceros con anticipación.
- Utilice una red de entrega de contenido (CDN) para audiencias globales : si tiene una audiencia global, una CDN puede acelerar el tiempo de LCP para los visitantes de todo el mundo.
Para la forma más fácil de implementar la mayoría de estas mejores prácticas, puede utilizar WP Rocket . WP Rocket aplicará automáticamente el almacenamiento en caché de la página y la compresión a nivel de servidor tan pronto como lo active, y también incluye otras funciones para ayudarlo a optimizar el código y el rendimiento de su sitio, todo lo cual mejora su tiempo de LCP.
Cómo mejorar el cambio de diseño acumulativo en WordPress
La optimización para el cambio de diseño acumulativo es un poco más técnica porque se ocupa más del código de su sitio.
Algunos de los problemas y soluciones más comunes son:
- Imágenes sin dimensiones : si agrega imágenes a través del editor de WordPress, WordPress automáticamente agrega dimensiones por usted. Sin embargo, asegúrese de agregar dimensiones si está agregando imágenes manualmente en cualquier lugar utilizando su propio código.
- Anuncios, incrustaciones e iframes sin dimensiones : al igual que con las imágenes, cargar elementos incrustados sin dimensiones también puede causar problemas. Asegurate que siempre especifique tamaños al usar estas incrustaciones. O, si coloca anuncios, asegúrese de Espacio de “reserva” para cada anuncio.
- Fuentes web (FOIT / FOUT) : si está utilizando fuentes web personalizadas, una fuente de carga tardía puede causar problemas como Destello de texto invisible (FOIT) o Destello de texto sin estilo (FOUT).
- Contenido inyectado : no inyecte dinámicamente ningún contenido por encima del contenido existente a menos que sea en respuesta a la acción de un usuario.
Cómo mejorar el retraso de la primera entrada en WordPress
Finalmente, la optimización para el retardo de la primera entrada es la más complicada porque se ocupa completamente del código. Específicamente, querrá limitar la ejecución pesada de JavaScript para que el navegador aún pueda responder rápidamente a las interacciones del usuario.
Debe comenzar eliminando JavaScript innecesario si es posible. Si aún tiene tareas grandes que debes realizar, puede dividirlas en más pequeñas o usar algo como trabajador web. Google tiene una buena explicación sobre las partes más técnicas de la optimización de FID.
Nuevamente, esto es difícil de hacer si no eres un desarrollador. Entonces, si no eres un usuario técnico, es posible que debas contratar a un desarrollador para que te ayude a mejorar tus tiempos. Una tarea que los usuarios no técnicos aún pueden realizar sería eliminar los complementos de JavaScript pesados (y reemplazarlos con una alternativa más liviana si la función aún es necesaria).
Comience a optimizar los elementos básicos de la web en WordPress hoy
Core Web Vitals es el nuevo impulso de Google para dar forma a la web y mejorar la experiencia del usuario en los sitios web.
Si bien Core Web Vitals no es actualmente un factor de clasificación de SEO a partir de noviembre de 2020, Google los agregará como un factor de clasificación en algún momento de 2021, por lo que querrá comenzar a preparar su sitio con anticipación.
Para probar los tiempos / puntuaciones de Core Web Vitals de su sitio, puede usar PageSpeed Insights o el informe Google Core Web Vitals en Google Search Console.
