Tabla de Contenidos
Hay una nueva serie de métricas rodando por la web: Core Web Vitals. Anteriormente conocido como Google Search Console, Web Vitals, son un nuevo conjunto de métricas de rendimiento que ayudan a resaltar varios aspectos del desarrollo de páginas web. Entre estos, los que afectan la experiencia del usuario, el tiempo de carga de páginas, la interactividad y la estabilidad visual, que serán parte de la puntuación de Google Page Experience.
A continuación se explica con detalle las novedades de este cambio y todo lo que se debe saber sobre esta actualización programada para salir en Mayo 2021.
Core Web Vitals y las implicaciones que tiene en Google Page Experience
Las oportunidades para mejorar la experiencia del usuario pretenden evitar el retraso en el tiempo que tarda en encontrar la respuesta que busca. Indudablemente estos retrasos provocan una reducción de la satisfacción de los usuarios y el eventual abandono de un sitio. Para medir esta respuesta Web Vitals tiene su foco en tres métricas principales:
Largest Contentful Paint o LCP
Traducido es algo como «renderizado» del mayor elemento con contenido y en ella se mide la manera en la cual la navegación de página a página aparece completa para un usuario.
¿Qué elementos se evalúan con LCP?
- Imágenes.
- Iconografía del tipo svg.
- Videos.
- Fondos.
- Degradados.
¿Qué se puede considerar un buen tiempo LCP?
- Bien: en los primeros 2,5 segundos de carga de una web.
- Necesita mejorar: 2,6 – 3,9 segundos.
- Pobre: 4 segundos o más.
¿Cómo se optimiza una web para LSP?
- Debe identificarse el elemento de página más grande y darle prioridad en la carga de la página.
- Hay que mejorar los tiempos de respuesta del servidor mediante el uso de un CDN, el almacenamiento en caché, la optimización del servidor o el código que se ejecuta en él.
- Posponer cualquier JavaScript y CSS que no sean críticos hasta después de que se cargue el contenido principal de la página.
Esta ha sido una verdadera revelación en los últimos años. A diferencia de la anterior, para usar esta estructura no necesitas tener conocimientos de programación. De hecho, Divi se volvió tan popular porque trae incorporada la funcionalidad de maquetación visual, la cual facilita el trabajo de organización y esquematización de las webs mediante el uso del drag and drop para sus modulos.
Este esqueleto de diseño es muy recomendado para los usuarios que desean hacer la maquetación de su página por sí mismos y que no tengan ningún conocimiento sobre desarrollo web.
Inclusive la versión paga te permite usar un sin fin de plantillas ya prediseñadas para que tu mismo peudas configurar tu página web a gusto con un look and feel muy bueno.
Cumulative Layout Shift o CLS
Mide la frecuencia y la gravedad de los cambios de diseño inesperados en una página. De esta manera se determina la estabilidad visual de una web, al tiempo que se calcula la cantidad de contenido visible desplazado en una ventana y la distancia de desplazamiento de los elementos afectados.
¿Cómo se calcula el CLS?
A diferencia de LCP y FID, CLS es una puntuación. Un número más alto equivale a un peor rendimiento. Básicamente, la puntuación es la distancia que se ha movido un elemento en relación con la ventana gráfica y el marco.
¿Qué es una buena puntuación CLS?
- Bien: 0,1 o menos.
- Necesita mejorar: 0,11 – 0,25.
- Pobre: De 0,25 en adelante.
¿Cómo se optimiza tu web para CLS?
- Hay que eliminar cualquier actividad de la página que se produzca sin la interacción del usuario.
- También debe eliminarse cualquier CSS redundante y conflictivo que cambie ligeramente el diseño de la página después de la carga.
First Input Delay o FID
Está relacionado con la comodidad de las experiencias de un usuario en el sitio web. Por ejemplo, la capacidad de respuesta de los botones u otros elementos dentro de cada página.
La métrica FID se aplica a acciones discretas o acciones que tienen un comienzo y un final claros, como clics, toques y pulsaciones de teclas. El desplazamiento y el zoom son acciones continuas, por lo que no se evalúan en la métrica FID.
un sistema constructor propio, lo cual facilita todo el trabajo de estructuración de los espacios online y evita tener que instalar complementos extra en el servidor.
¿Qué es un buen tiempo de FID?
- Bien: 100 milisegundos o menos.
- Necesita mejorar: 101 milisegundos – 299 milisegundos.
- Pobre: + de 300 milisegundos.
¿Cómo se optimiza una web para FID?
- Pueden agruparse recursos por URL y tiempo total para facilitar su trabajo.
- Retrasar o eliminar los scripts de terceros que no sean críticos.
- Dividir las tareas largas para mejorar todas las métricas de interactividad.
¿Cómo se miden o comprueban los Web Vitals?
Google está trabajando en facilitar a los SEO y dueños de sitios web la medición de los Core Web Vitals con distintas herramientas, entre las cuales se encuentran:
- Search Console: a través del reporte Web Vitals en Google Search Console podrán evaluar las páginas de todo el sitio. Esta herramienta informa al tiempo que identifica grupos de páginas que requieren atención basada en data del Chrome UX report.
- Google Page Speed Insights: esta herramienta se actualizó para usar Lighthouse 6.0, lo que permite medir las métricas web principales en el laboratorio y el campo de las secciones del reporte.
En conclusión, todo este conjunto teórico puede resultar abrumador. Sin embargo, cada detalle de Core Web Vitals se entiende desde un principio muy básico: Google quiere que los sitios rápidos con una buena experiencia de usuario ocupen puestos más altos. Y en esta tarea debe estar el foco de las próximas mejoras. Entonces, cuanto mejor sea su UX en general, mejores serán las puntuaciones de experiencia de una página web.
