A partir de mayo de junio de 2021, Core Web Vitals se convertirá en un factor de clasificación muy importante, anunció Google en febrero de este año.
¿En qué se diferencia Core Web Vitals de las actualizaciones de Google?
Básicamente, Core Web Vitals analiza la experiencia de usuario de los visitantes de su sitio. Dicho esto, el rendimiento de su sitio web debe ser bastante bueno, pero también debe ofrecer a los visitantes de su sitio una mejor experiencia. Algunas señales importantes (que ya están aquí desde hace unos años) son:
- Navegación segura
- Compatibilidad con dispositivos móviles
- Seguridad HTTPS
- Directrices intersticiales intrusivas
Core Web Vitals mayo de 2021
Lo primero que debe implementar cuando desee mejorar la puntuación de Core Web Vitals
1. Navegación segura : la seguridad de los visitantes de su sitio web ( y de los clientes potenciales ) debe ser la principal preocupación. Si está utilizando WordPress CMS, mantenga su sitio protegido siguiendo estas sencillas reglas:
- Nunca instale complementos y temas anulados: en el 99,999% de los casos, se insertará un malware allí y no solo su sitio sino también las computadoras de sus visitantes (*y su información personal) pueden estar en peligro.
- Mantenga actualizados los archivos principales: WordPress proporciona actualizaciones periódicas y gratuitas. Por supuesto, es mejor esperar unas semanas hasta instalar la última versión de WordPress, para evitar posibles conflictos con los complementos o temas instalados , pero nunca debes esperar mucho tiempo para hacerlo. También debes actualizar los complementos y el tema con la última configuración. No lo olvides: ¡antes de actualizar, haz una copia de seguridad!
- Preste atención a los complementos y temas gratuitos que instalará: no es ningún secreto que algunos complementos o temas gratuitos venderán los datos de sus visitantes. Vea aquí un caso en el que un complemento popular hace este tipo de trabajo desagradable.
2. Sitio web compatible con dispositivos móviles : desde la actualización de Google del 21 de abril de 2015, su sitio web DEBE ser compatible con dispositivos móviles. Hoy en día, la mayoría de los usuarios de WW navegan por Internet a través de sus dispositivos móviles. Google presta especial atención a cómo se muestran los datos de su sitio web en los dispositivos móviles de sus visitantes. Si el sitio web no es compatible con dispositivos móviles, Google penalizará su sitio web.
Hace unos años era bastante fácil hacer que un sitio web fuera compatible con dispositivos móviles o crear una versión móvil del mismo, incluso con imágenes o archivos sin comprimir. Pero ahora, no solo el sitio web debe cargarse en los teléfonos inteligentes ( trabajo fácil para un teléfono inteligente normal en 2021 ), sino que también debe proporcionar una versión minimizada/comprimida del contenido para ahorrar ancho de banda y tiempo.
Leer más: Preguntas frecuentes sobre la actualización compatible con dispositivos móviles del 21 de abril
3. Certificado HTTPS : en 2021, podrá obtener un certificado SSL gratuito para su sitio web con un servicio como Let's Encrypt. Si no está seguro de cómo hacerlo, pregúntele a su proveedor de alojamiento ( lo más probable es que el SSL se instale automáticamente, por lo que no se requiere trabajo adicional ).
Además, no olvide configurar los encabezados HTTP. Muchos desarrolladores se olvidan de ellos o ni siquiera los conocen. Solo asegúrate de haberlos configurado.
4. Intersticial intrusivo : como mencioné en el segundo punto anterior, su sitio debe proporcionar una versión minimizada/comprimida del contenido. Además, su sitio web debe evitar mostrar contenido innecesario al usuario. El anuncio emergente es el mejor ejemplo. Si John Doe está buscando x información en su sitio web y le muestra una ventana emergente con un anuncio no relacionado ( o incluso relacionado ), pero cubre la información esencial que está buscando, esto puede arruinar la experiencia de usuario del Sr. Doe.
¿Cómo se recopilan los Core Web Vitals?
Core Web Vitals se miden en datos de campo, en lugar de datos de laboratorio, porque los datos de campo tienden a ser más exactos y precisos. ¿Por qué? Porque los usuarios reales (los visitantes de tu web) medirán los datos a través de sus dispositivos (móviles, tablets, portátiles, ordenadores). Por ejemplo, Google recopila estos datos a través del Informe de experiencia del usuario de Chrome. Y hay alrededor del 63,63% (según Browser Market Share Worldwide) usuarios de Google Chrome (incluyéndome a mí y muy posiblemente a usted también).
Dicho esto, incluso si no tienes tu propio sitio web, puedes contribuir a Core Web Vitals si:
- utilizar Google Chrome
- sincroniza el historial de tu navegador con tu cuenta de Google
- no tengo una frase de contraseña de sincronización
- y tener habilitados los informes de estadísticas de uso
estás contribuyendo al conjunto de datos de Google.
Core Web Vitals e impacto en la puntuación del sitio
Echemos un vistazo a qué son Core Web Vitals y el impacto que tienen en el rendimiento de su WordPress.
Core Web Vitals se introdujeron en mayo de 2020 y su alcance principal es medir cómo los usuarios experimentan la velocidad, la capacidad de respuesta y la estructura visual del sitio de una página.
Para ser considerada Core Web Vital, una métrica debe:
- estar centrado en el usuario
- medirse en el dispositivo de un usuario real
- no se superpone con otros Core Web Vitals
Definición de Core Web Vitals + algunos consejos de optimización de CWV:
1. Pintura con contenido más grande (LCP)
El tiempo que tarda en cargarse el contenido principal de una página. Una medición LCP ideal es de 2,5 segundos o más rápido.
El valor LCP debe reflejar el tiempo de carga percibido de su sitio web hasta la primera interacción posible e incluye el lapso de tiempo desde la llamada hasta la carga del contenido más grande en su página.
Sin embargo, este valor no debe confundirse con el tiempo de carga completa.
La página cargada sólo puede cargarse completamente unos segundos después debido a los scripts y la integración de recursos externos.
Un elemento típico para el contenido más grande podría ser, por ejemplo, un vídeo, una imagen o un bloque de texto.
¿Cómo puedo optimizar el valor de pintura con contenido más grande?
Como se mencionó anteriormente, el elemento más grande del sitio web puede ser una imagen o un video. Es fácil comenzar aquí para optimizar esto. Este valor se puede mejorar enormemente comprimiendo sus imágenes y videos en consecuencia.
Básicamente, debes cargar e integrar tus medios en un tamaño correctamente escalado de antemano para lograr buenos resultados.
Técnicas como LazyLoad o la reducción de archivos CSS y Javascript que bloquean el procesamiento también pueden ser de gran ayuda para mejorar el valor.
Se estima una media de 2,5 segundos para un buen valor de LCP.
2. Retraso de la primera entrada (FID)
El tiempo que tarda una página en volverse interactiva. Una medición ideal es inferior a 100 ms.
El primer retraso de entrada describe el valor hasta la primera interacción posible por parte del usuario. Algunos deberían saber que un sitio web se carga ópticamente, pero una entrada en un formulario o un clic en un botón sólo funcionan con un poco de retraso.
Sin embargo, el primer retraso de entrada no se refiere a la capacidad de desplazamiento de la página y solo incluye actividades como entradas de formularios o clics en botones.
Sin embargo, este valor de FID sólo se puede comparar y medir con los datos de usuario recopilados (datos de campo) que Google ha recopilado de muchos usuarios. Como alternativa existe el valor TBT, que muestra el tiempo entre la primera pintura con contenido y el tiempo para interactuar. Por lo tanto, esto también puede utilizarse como alternativa para una optimización sin problemas.
Como guía para un buen valor FID/TBT, se pueden utilizar menos de 100 ms para la optimización. Todo lo que supere los 300 ms se considera malo.
¿Cómo puedo optimizar el valor de retardo de la primera entrada/TBT?
Un valor FID elevado también puede deberse a diferentes motivos.
En el caso de un sitio de WordPress, es probable que el aumento de FID provenga de complementos instalados que agregan código al encabezado del sitio web. Incluso si estos elementos en el encabezado vuelven a realizar llamadas externas a Javascript, llevan el valor considerablemente al área mala.
Por lo tanto, en cada instalación debe prestar atención a cómo han cambiado posteriormente los valores correspondientes. Entonces también es posible intercambiar los complementos deseados por otras alternativas de complementos.
3. Cambio de diseño acumulativo (CLS)
La cantidad de cambios inesperados en el diseño del contenido visual de la página. Una medida ideal es inferior a 0,1.
En muchas páginas se nota que ciertos elementos de diseño, como las máscaras de navegación o de búsqueda, cambian de posición de forma repentina e inesperada durante la carga. Por lo tanto, el valor del cambio de diseño acumulativo muestra la estabilidad visual al crear su sitio web.
Este comportamiento se califica como mala experiencia de usuario (UX) y reduce esta calificación.
Un valor por debajo de 0,1 se considera un buen CLS, entre 0,1 y 0,25 ya debería considerar la optimización y a partir de 0,25 está disponible un valor CLS deficiente.
¿Cómo puedo optimizar el cambio de diseño acumulativo?
Hay varias formas diferentes en las que se puede provocar un cambio de diseño, pero cada vez que un elemento visible cambia su posición inicial en la ventana gráfica, se marca como inestable.
Esto puede deberse, por ejemplo, a que los recursos se cargan lentamente, lo que significa que los elementos de diseño individuales se muestran más rápido que otros.
La falta de atributos de ancho y alto para los elementos también puede influir fuertemente en este valor. Si la información es correcta, el navegador ya tiene todos los valores correctos y sabe durante la carga qué espacio se proporciona para el elemento. Básicamente, esto se puede aplicar a todos los medios, pancartas u otros elementos incrustados.
Incluso las fuentes web cargadas externamente pueden hacer que el diseño se desplace cuando se configuran y son posibles fuentes de problemas.
Según John Mueller: "Estas señales miden cómo los usuarios perciben la experiencia de interactuar con una página web y contribuyen a nuestro trabajo continuo para garantizar que las personas obtengan las experiencias más útiles y agradables de la web".
Elementos vitales web básicos y SEO
Dónde y cómo probar su sitio para Core Web Vitals
En mayo de 2020, John Mu tuiteó : “Hay un montón de información sobre ellos a partir de https://web.dev/vitals/; ahí es donde tiendo a ir. LCP es similar a las velocidades de carga de páginas que probablemente hayas visto, pero intenta determinar cuándo están visibles los elementos principales, que es lo que les importa a los usuarios".
Para probar si su sitio está optimizado para Core Web Vitals, pruebe estos sitios web:
Estadísticas de PageSpeed de Google
Puede saber cuánto se ha ajustado el PageSpeed Score de GTmetrix cuando ingresa su URL en la herramienta PageSpeed Insights de Google. No es raro que el evaluador vea aquí una puntuación completamente diferente. Después de las últimas actualizaciones, esto difiere significativamente de GTmetrix y Pingdom y normalmente conduce a un peor resultado. Pero de todos modos no deberías prestar demasiada atención a la puntuación, independientemente de qué herramienta sea, y concentrarte mucho más en las recomendaciones de optimización de WordPress .
Las herramientas de prueba de velocidad del sitio proporcionadas por Google son:
- Informe Core Web Vitals a través de la consola de Herramientas para webmasters de Google.
- desarrollo web
- Información de PageSpeed
Al utilizar las herramientas de prueba mencionadas anteriormente, obtendrá una visión clara sobre el rendimiento de su sitio web y si está optimizado para Core Web Vitals.
GTmetrix
Una de las herramientas más populares para analizar el rendimiento de un sitio web es GTmetrix.com . La herramienta web convence por su agradable interfaz y ofrece más explicaciones y recomendaciones de optimización para cada punto de control. Al mover el mouse sobre las flechas pequeñas al lado de las cifras clave, obtendrá como guía el valor promedio de todos los sitios web probados. Aunque la herramienta utiliza 7 ubicaciones de servidores diferentes, lamentablemente no es posible cambiarlas.
Prueba de página web
La herramienta WebPageTest no es realmente fácil de usar, pero ofrece algunas funciones adicionales para probar el rendimiento de un sitio web. Esto incluye bloqueo de contenido, comparación de primera llamada/llamada repetida, prueba HTTP/2, etc. La herramienta web también puntúa con la selección del servidor: los evaluadores pueden elegir entre 50 ubicaciones diferentes.
pingdom
Otra herramienta web muy popular para probar la velocidad de un sitio web es Pingdom . Al igual que GTmetrix, enumera todos los recursos en un gráfico en cascada, pero con opciones de filtro adicionales. Una gran ventaja de esta herramienta es la elección de diferentes ubicaciones de servidores. Por ejemplo, al seleccionar “Europa – Alemania – Frankfurt” para los sitios web alemanes, los tiempos de carga se acercan más a la realidad.
A diferencia de GTmetrix, Pingdom lamentablemente no es compatible con el protocolo HTTP/2.
Cómo mejorar los Core Web Vitals de su sitio
- Asegúrese de haber implementado estas configuraciones en su sitio web: Vaya aquí
- Invierta algo de dinero extra en un mejor hosting. Si utiliza algunos proveedores de hosting baratos (la mayoría de ellos, bajo EIG), debería pensar en un cambio.
- Instale un tema de WordPress sólido (pero ligero).
- En 2019 publiqué un artículo completo sobre cómo acelerar su sitio de WordPress: Optimización de la velocidad de WordPress 2019 – Aumente el rendimiento de su WordPress con unos simples ajustes – *Haga una copia de seguridad antes de realizar cualquier cambio*
- Presta atención al tamaño de las imágenes y configúralas con los tamaños correctos. Además, intenta comprimirlos.
- Elimine los complementos no utilizados.
Consejos adicionales para optimizar el rendimiento del servidor de WordPress :
El servidor en el que se encuentran los recursos del sitio web juega un papel crucial cuando se trata de lograr una buena puntuación con web.dev y otras herramientas de prueba que reflejen tiempos de carga rápidos de su propio sitio web.
http/2
Con el protocolo HTTP/2, en comparación con HTTP1.1, el servidor puede procesar varias solicitudes al mismo tiempo. En el marco de sus medidas de optimización, puede incluso prescindir de combinar los archivos Javascript y CSS con este protocolo. Puede descubrir por qué aún puede tener sentido combinar los archivos con un protocolo HTTP/2 a continuación en el artículo.
Otra ventaja del protocolo HTTP/2 es que los archivos se precargan antes de que el usuario los solicite. La consecuencia de esto es una capacidad de respuesta más rápida del servidor.
Tiempo hasta el primer byte (TTFB)
El tiempo hasta el primer byte describe el tiempo que transcurre antes de que el primer byte se haya transmitido desde el servidor al cliente ( navegador ). Con algunos hosting baratos, este tiempo puede ser de más de 2 segundos. Esto significa que, no importa los esfuerzos que pongas en la optimización del rendimiento, el tiempo de carga de tu sitio web nunca será superior a 2 segundos. Definitivamente deberías evitar este cuello de botella eligiendo el proveedor de alojamiento adecuado.
Con la herramienta bytecheck , puedes probar cuánto tiempo tarda el primer byte de tu sitio web en llegar al navegador.
PHP versión 7.4 y superior
Con la versión PHP 7.4 y superior ( la última versión de PHP es 8, pero personalmente la considero inestable aún ), se pueden procesar el doble de solicitudes por segundo en comparación con la versión anterior (5.6).
Además, la versión 5.6 de PHP ya no es compatible activamente desde diciembre de 2018, PHP 7.4 también alcanzó el EOL desde junio de 2020. Por lo tanto, siempre debes usar la versión actual de PHP, no solo por razones de rendimiento.
Si su tema de WordPress no es compatible con la nueva versión, debe comunicarse con el desarrollador del tema o incluso considerar rediseñar su sitio web con un nuevo tema.
