Mastering Core Web Vitals: una guía para mejorar la experiencia del usuario

A medida que el comercio electrónico continúa dominando el mercado en línea, las empresas deben mantenerse a la vanguardia en términos de optimización de sitios web. Un factor clave que ha surgido en los últimos años es el concepto de Core Web Vitals. En 2020, Google estableció métricas específicas para estos elementos vitales del sitio web, brindando a las empresas de comercio electrónico un camino más directo hacia una mejor clasificación del sitio web. Pero, ¿qué son exactamente Core Web Vitals y cómo pueden las empresas optimizarlos para lograr el máximo impacto? En este artículo, analizaremos más de cerca Core Web Vitals y compartiremos herramientas esenciales para optimizarlos, de modo que su sitio web de comercio electrónico pueda mantenerse por delante de la competencia.

Publicación relacionada: 7 cosas que los dueños de negocios deben saber sobre Core Web Vitals

Por qué Core Web Vitals es tan importante

1. Core Web Vitals impacta en las clasificaciones de búsqueda de Google de su sitio

2. Son cruciales para brindar una excelente experiencia de usuario

3. La optimización de Core Web Vitals puede aumentar el tráfico y los ingresos de su sitio

La optimización de Core Web Vitals es esencial para que los propietarios y desarrolladores de tiendas en línea brinden una experiencia de usuario óptima, obtengan una clasificación más alta en los resultados de búsqueda de Google y, en última instancia, aumenten sus ingresos. Estas tres métricas principales, la pintura con contenido más grande (LCP), el retraso de la primera entrada (FID) y el cambio de diseño acumulativo (CLS), se basan en la velocidad de carga, la interactividad y la presentación visual de su sitio web.

Al priorizar estas métricas, su sitio web puede brindar a los clientes una experiencia fluida, receptiva y visualmente atractiva. No pase por alto Core Web Vitals al diseñar u optimizar su sitio web, ya que podrían ser la diferencia entre una buena y excelente experiencia de usuario y, en última instancia, afectar sus ingresos.

¿Qué es la pintura con contenido más grande (LCP)?

Largest Contentful Paint (LCP) es una métrica crucial que mide el tiempo de carga del elemento de contenido más importante de una página web, como una imagen o un cuadro de texto. Es uno de los componentes críticos de Core Web Vitals, un conjunto de métricas esenciales para brindar una experiencia de usuario perfecta. La optimización del LCP de su sitio web puede reducir los tiempos de carga de la página y mejorar la experiencia general del usuario, lo que lleva a una mayor retención y adquisición de clientes.

En Perspective recibimos solicitudes frecuentes para mejorar el LCP de Core Web Vitals. Puede ver a continuación un ejemplo de optimización de Largest Contentful Paint (LCP), que hicimos para uno de nuestros clientes:

1. Pintura con contenido más grande antes de la optimización

2. Pintura con contenido más grande después de la optimización

Lea también: Acer vs Lenovo Chromebooks: ¿Cuál es el adecuado para usted?

Cuáles son las causas más comunes de pintura con contenido bajo más grande:

1. tiempo de respuesta lento del servidor

2. JS y CSS no optimizados

3. carga lenta de recursos

4. representación lenta en el lado del cliente.

Cómo aumentar la pintura con contenido más grande

Hemos creado una pequeña lista de métodos de optimización, que se aplican constantemente en nuestro trabajo, por lo que recomendamos los siguientes:

1. Elimine el código JS que no esté en uso y minimice los archivos en modo de producción.

2. Es mejor escribir las reglas CSS en módulos (bloques) para que la estilización de algunos selectores no detenga a otros. Además, recomendamos evitar hacer una cadena larga de selectores. Todos los archivos CSS o las bibliotecas que se probarán deben almacenarse localmente, no descargarse a través de CDN.

3. Comprime las imágenes para una carga más rápida y utiliza nuevos formatos. Por ejemplo, convierta JPEG a WebP, que tiene un tamaño de 1/3 sin perder calidad.

4. Recomendamos usar imágenes receptivas (enlace) para optimizar las imágenes en términos de velocidad de descarga y experiencia de usuario. Hay un punto importante aquí. La etiqueta img tiene dos atributos críticos:

1. src : para indicar la fuente de la imagen original. Las imágenes del atributo src son escaneadas y consideradas en la clasificación por los motores de búsqueda, por lo que es necesario especificar aquí la imagen de mejor calidad.

2. srcset : le permite especificar una variedad de versiones de la imagen. De las imágenes en el atributo srcset, el navegador selecciona una imagen para cargar y mostrar según el tamaño de pantalla de los dispositivos de escritorio o dispositivos móviles en los que se ejecuta.

5. No recomendamos agregar loading=”lazy” en el atributo de la etiqueta <img>.

Eliminar el atributo perezoso para aumentar la pintura con contenido más grande

¿Qué es el cambio de diseño acumulativo (CLS)?

El cambio de diseño acumulativo (CLS) es una métrica de estabilidad visual crucial que cuantifica el alcance de los cambios de diseño inesperados durante la carga de la página. Se mide por la suma de todas las puntuaciones de cambio de diseño que superan un umbral de 0,1. Mejorar CLS se ha convertido en una prioridad principal para las empresas, ya que la experiencia del usuario ocupa un lugar central en el desarrollo web moderno. Por lo tanto, no sorprende que los clientes soliciten con frecuencia mejoras en este indicador clave de rendimiento.

Lea también: El crecimiento de los casinos en vivo en 2023

¿Cuáles son las causas más comunes de un cambio de diseño acumulativo (CLS) deficiente?

Los indicadores de estabilidad visual son fundamentales para garantizar una experiencia de usuario fluida y sin problemas. Sin embargo, la mala estabilidad visual puede deberse a varios factores técnicos. Algunos culpables comunes incluyen el tamaño de los archivos de imágenes y multimedia, las consultas de GraphQL y los carruseles no optimizados.

TAMAÑO INCORRECTO DE ARCHIVOS DE IMAGEN Y MULTIMEDIA

Cuando las imágenes o los archivos multimedia no tienen un tamaño específico, el navegador no puede asignar la cantidad adecuada de espacio cuando se carga el elemento. Esto puede resultar en un diseño de página que cambia constantemente, causando una experiencia de usuario deficiente.

CONSULTAS GRAPHQL NO OPTIMIZADAS

Al cargar imágenes o bloques GraphQL en una aplicación web progresiva (PWA), no reservar espacio puede hacer que la página "salte" después de cargar. Esto puede generar cambios de diseño deficientes y un impacto negativo en las métricas de rendimiento.

CARRUSELES NO OPTIMIZADOS

Un carrusel no optimizado que utiliza animaciones no uniformes y no combinadas puede desencadenar un recálculo del diseño de la página, lo que da como resultado puntuaciones de cambio de diseño acumulativo (CLS) deficientes. Si bien un ligero cambio puede ser apenas perceptible para el usuario, puede afectar significativamente el cambio de diseño general de la página y la estabilidad visual.

Cómo mejorar el indicador de estabilidad visual y el cambio de diseño acumulativo

USO DE MARCADORES DE POSICIÓN

La implementación de marcadores de posición es una técnica ampliamente adoptada para mejorar el rendimiento percibido de un sitio web. Los marcadores de posición sirven como señales visuales que indican que la descarga está en curso y que el sitio funciona correctamente. El enfoque más eficaz para las imágenes es establecer los atributos de alto y ancho.

Uso de marcadores de posición para mejorar la puntuación de rendimiento en Core Web Vitals

Esta estrategia permite que el navegador reserve el espacio necesario para las imágenes antes de que se carguen por completo, lo que evita cambios de diseño inesperados. Aquí hay un ejemplo de implementación de esta técnica usando la etiqueta img.

<img data-src=”imagen.webp” ancho=”380″ altura=”120″ alt=”imagen”>

Al definir los atributos de alto y ancho, el navegador puede asignar espacio para la imagen y evitar que el diseño se desplace cuando se carga la imagen. Como resultado, los usuarios experimentarán una experiencia de navegación más fluida y visualmente más estable.

PANTALLA FRONTAL: SWAP

Para lograr la puntuación de cambio de diseño acumulativo (CLS) óptima, los desarrolladores pueden utilizar la propiedad font-display: swap para mostrar el texto en la fuente del sistema antes de que el archivo de fuente personalizado se haya cargado por completo. La regla de fuente en el archivo de fuente CSS requerido debe especificar las rutas del archivo de fuente e incluir la propiedad font-display: swap.

Aquí hay un ejemplo de cómo definir la regla de tipo de letra con la propiedad font-display: swap:

@font-face {Font-family: “Proxima Nova”;src: url(“../fonts/proximanova-regular.woff2”) format(“woff2”);font-display: swap;}

Usando la propiedad font-display: swap, el navegador mostrará inmediatamente el texto en la fuente del sistema hasta que el archivo de fuente personalizado esté completamente cargado. Esta técnica puede evitar cambios de diseño inesperados y mejorar la estabilidad visual de la página, lo que da como resultado una mejor experiencia de usuario.

Lea también: El impacto de las condiciones económicas globales en el valor de las criptomonedas

TRANSFORMACIÓN CSS

La función de transformación de CSS es una herramienta influyente que los desarrolladores pueden utilizar para mejorar el rendimiento de su sitio y la experiencia del usuario. Por ejemplo, el uso de la transformación CSS puede ayudar a mitigar los problemas relacionados con la carga de carruseles de imágenes, lo que da como resultado una experiencia de navegación más rápida y fácil de usar.

Al optimizar la carga de bloques CMS (especialmente en proyectos PWA) a través de elementos HTML de GraphQL, se recomienda configurar las propiedades CSS con una altura fija. Este enfoque puede ayudar a evitar cambios de diseño inesperados y garantizar una página visualmente estable después de que se cargue.

Al implementar estas técnicas, las empresas pueden mejorar la puntuación de Core Web Vitals y proporcionar una experiencia de usuario más fluida y agradable. En uno de nuestros casos recientes, mejoramos significativamente la puntuación CLS al agregar la propiedad font-display: swap en el archivo CSS, establecer una altura mínima y optimizar la carga de fuentes (@font-face).

1. TIENDA ONLINE ANTES DE Core Web VITALS OPTIMIZATION

2. TIENDA EN LÍNEA DESPUÉS DE LA OPTIMIZACIÓN DE VITALS Core Web

¿Qué es el retardo de la primera entrada (FID)?

First Input Delay (FID) es una métrica crítica que mide la interactividad de un sitio web. First Input Delay mide cuánto tarda un sitio en responder a la primera interacción de un usuario con una página, como hacer clic en un botón o escribir en un campo de formulario.

Usando FID en Magento 2

En Magento 2, muchas interacciones del usuario pueden afectar la FID del sitio, como hacer clic en un botón de chat en vivo, agregar un producto a la cesta o completar una compra. Si estas interacciones no responden y no brindan comentarios inmediatos al usuario, puede resultar en una experiencia de usuario lenta y frustrante.

Para garantizar una experiencia de usuario óptima, es fundamental lograr una puntuación FID inferior a 100 ms. Esto se puede lograr a través de varias técnicas de optimización, como minimizar el tiempo de ejecución de JavaScript, optimizar scripts de terceros y optimizar el tiempo de respuesta del servidor. Al optimizar FID, las empresas pueden proporcionar un sitio web más receptivo y atractivo que mantiene a los usuarios interesados ​​y satisfechos.

Cómo optimizar el retardo de la primera entrada

DESCOMPOSICIÓN DE TAREAS

Un enfoque recomendado para mejorar First Input Delay (FID) es dividir las tareas más largas en subtareas más pequeñas y manejables. Las tareas largas pueden sobrecargar el subproceso principal, obstruyendo el procesamiento y la ejecución de la entrada del usuario. Cualquier segmento de código que impida el flujo durante más de 50 milisegundos se considera una tarea larga.

Determinar la FID requiere realizar mediciones en condiciones reales, ya que la interacción genuina del usuario con la página web es esencial para obtener mediciones precisas.

PRUEBA EN CONDICIONES DE LA VIDA REAL

Para medir con precisión el retardo de la primera entrada (FID), se recomienda emplear herramientas especializadas que miden el rendimiento en condiciones reales. Algunas de estas herramientas incluyen:

1. Prueba de PageSpeed ​​Insights;

2. Consola de búsqueda (informe Core Web Vitals);

3. Informe de experiencia de usuario de Chrome;

Dado que FID requiere la interacción del usuario, no es factible realizar pruebas en un entorno de laboratorio. Por el contrario, las métricas de campo capturan el rendimiento del mundo real mediante el análisis del comportamiento del usuario. Sin embargo, el tiempo de bloqueo total (TBT), una métrica que evalúa el período entre la primera pintura con contenido (FCP) y el tiempo de interacción (TTI), se puede medir en un entorno de laboratorio y está bien correlacionado con FID en condiciones de campo. TBT también es experto en identificar problemas relacionados con la interactividad. En consecuencia, cualquier optimización que mejore la TBT en un entorno de laboratorio también mejorará la FID para los usuarios. Lighthouse es una herramienta que puede medir TBT de manera efectiva.

Lea también: Una guía paso a paso para construir un escaparate personalizado de Shopify

HABILITAR DESCARGA BAJO DEMANDA

Puede usar código de terceros para permitir la descarga a pedido de páginas web. Por ejemplo, puede habilitar la descarga a pedido para que el banner en la parte inferior de la página o el anuncio se muestre solo cuando se desplazan cerca de la vista. La idea principal es descargar elementos Web que proporcionen el valor más significativo a los usuarios, no aquellos que se pueden descargar al final de la línea, como una prioridad.

OPTIMIZAR JAVASCRIPT

Para mejorar el rendimiento del sitio web, es fundamental eliminar los archivos JavaScript innecesarios. Un enfoque recomendado es aplazar la descarga de archivos JavaScript hasta que sean necesarios. Esta técnica inicialmente permite que el navegador obtenga elementos web críticos como HTML y CSS. Luego de esto, los scripts pueden ser evaluados, facilitando así un tiempo de carga más rápido. La adopción de esta estrategia es especialmente útil para sitios web con importantes extensiones de JavaScript, como la extensión Mega Menu utilizada por muchas tiendas Magento. Esta técnica permite a los propietarios de sitios web optimizar el proceso de carga y brindar una experiencia de usuario más eficiente. Por lo tanto, la eliminación de JavaScript no utilizado es una técnica de optimización fundamental que debe tenerse en cuenta para mejorar el rendimiento del sitio web.

Más indicadores para mejorar Core Web Vitals

Además de los tres principales elementos vitales de Core Web anteriores, existen varias métricas complementarias.

Primera pintura con contenido (FCP)

First Contentful Paint (FCP) es una métrica valiosa que ayuda a medir el tiempo que tarda una página en mostrar su imagen inicial o bloque de texto. Esta métrica incluye el tiempo de procesamiento de las solicitudes de DNS, las solicitudes del servidor, las operaciones del lado del servidor y la representación principal del DOM. Si bien factores como el DNS y la velocidad de la red están fuera de nuestro control, reducir el tiempo de procesamiento de las tareas del lado del servidor y optimizar la carga de estilos y secuencias de comandos puede afectar significativamente el rendimiento. Específicamente, Google recomienda priorizar la inclusión de solo estilos críticos en la sección principal de la página web y, si es posible, usar etiquetas de estilo en lugar de etiquetas de enlace para minimizar las solicitudes innecesarias del servidor.

Para mejorar aún más el rendimiento del sitio web, Google Analytics proporciona una gran cantidad de información sobre el comportamiento y la participación de los usuarios. Por ejemplo, al utilizar el informe Tiempos de usuario, los propietarios de sitios web pueden controlar la duración de acciones y eventos específicos, incluidas las cargas de página, las interacciones de los usuarios y otros eventos personalizados. Estos datos pueden ayudar a identificar áreas del sitio web que requieren optimización y realizar un seguimiento de la eficacia de los cambios realizados.

Métrica de índice de velocidad

Mientras que FCP mide el tiempo que tarda en mostrarse el primer elemento, la métrica del índice de velocidad (SI) captura la velocidad de carga general de las páginas web considerando el tiempo necesario para que la página sea completamente visible para el usuario. Proporciona una descripción general completa del rendimiento de carga de la página y considera los efectos de la velocidad de la red y el tiempo de procesamiento del servidor. Al aprovechar una combinación de FCP y SI, los propietarios de sitios pueden obtener una visión general completa del rendimiento del sitio web y tomar las medidas adecuadas para mejorar la experiencia del usuario.

SI considera varios factores que afectan el rendimiento de la página web, incluida la velocidad de la red, el tiempo de procesamiento del servidor y el tamaño de los recursos que se cargan. La métrica calcula la integridad visual de una página web a intervalos regulares durante el proceso de carga y asigna una puntuación que representa la velocidad de la página. Cuanto menor sea la puntuación SI, más rápido se carga la página y mejor es la experiencia del usuario.

Para mejorar SI, los desarrolladores web pueden usar una variedad de técnicas de optimización, incluida la minimización de recursos externos como CSS y JavaScript, la reducción del tamaño de las imágenes y el aprovechamiento del almacenamiento en caché del navegador para acelerar la carga de recursos. Al analizar las puntuaciones SI con herramientas como Google Analytics y WebPageTest, los propietarios de sitios web pueden identificar áreas que requieren optimización y realizar cambios para mejorar el rendimiento del sitio web. En última instancia, al mejorar el rendimiento del sitio web y mejorar la experiencia del usuario, los propietarios de sitios web pueden mejorar el compromiso, aumentar las conversiones y hacer crecer sus negocios.

Interacción con la siguiente pintura

Interaction to Next Paint (INP) es una métrica crítica que mide el tiempo entre la interacción de un usuario con la página web y la visualización de una respuesta visual. Esta métrica es particularmente relevante para las páginas que requieren interacciones frecuentes del usuario, como las plataformas de redes sociales y los sitios de comercio electrónico. INP proporciona información valiosa sobre la capacidad de respuesta de una página web y ayuda a identificar áreas que requieren optimización para mejorar la experiencia del usuario.

El INP se calcula seleccionando la interacción de usuario más reciente durante la visita actual a la página web y midiendo el tiempo que tarda la página web en responder con una actualización visual. Esta actualización puede incluir varios cambios, como la aparición de una nueva imagen o bloque de texto, el ajuste de posición o tamaño de un elemento, o la ejecución de una animación compleja. Al medir el tiempo entre la interacción del usuario y la respuesta visual, INP puede proporcionar información valiosa sobre el rendimiento percibido de una página web y ayudar a identificar las áreas que requieren optimización.

Para mejorar INP, los desarrolladores web pueden implementar una variedad de técnicas de optimización, como minimizar el uso de JavaScript y reducir el tamaño de imágenes y videos. Además, el uso de tecnologías web modernas, como Intersection Observer API y Web Workers, puede ayudar a mejorar el rendimiento al descargar tareas que consumen muchos recursos y reducir la carga de trabajo en el subproceso principal.

Lea también: ¿ Cómo la traducción al francés tendrá un impacto positivo en su negocio?

Tiempo hasta el primer bocado (TTFB)

El tiempo hasta el primer byte (TTFB) es una métrica crucial para el rendimiento de la página. Representa el tiempo que tarda el servidor en recibir el primer byte de datos después de enviar una solicitud. El valor TTFB está influenciado por varios factores, como la latencia de la red, el tiempo de procesamiento del servidor y la complejidad del código del sitio web. Es deseable un valor de TTFB más bajo, ya que indica tiempos de carga más rápidos y una mejor experiencia de usuario. El tiempo de respuesta ideal para un sitio web es de 250 a 350 milisegundos, mientras que cualquier valor superior a 500 se considera un tiempo de respuesta prolongado y puede afectar negativamente el rendimiento del sitio web.

Para mejorar los valores de TTFB, los propietarios de sitios web pueden usar varias herramientas y técnicas. Una de esas técnicas es el almacenamiento en caché de consultas, que almacena los datos a los que se accede con frecuencia en un caché, lo que permite un acceso y una recuperación más rápidos. Herramientas como Varnish pueden actuar como una capa de almacenamiento en caché entre el servidor y el usuario, mejorando la velocidad del sitio web y reduciendo la carga del servidor. Para los proyectos de PWA, los trabajadores del servicio se pueden usar para almacenar en caché el contenido HTML, que se puede actualizar cuando cambia el contenido, lo que brinda un acceso más rápido al contenido al que se accede con frecuencia.

Para los proyectos de Magento, el almacenamiento en caché de página completa también puede mejorar los valores de TTFB. El almacenamiento en caché de página completa permite almacenar en caché toda la página, lo que reduce la necesidad de que el servidor ejecute una gran cantidad de código y recupere información de la base de datos. Con el almacenamiento en caché de página completa habilitado, el navegador puede leer la página directamente desde el caché, lo que permite tiempos de carga más rápidos y una experiencia de usuario mejorada.

Por lo tanto, no debe hacer tantas páginas y bloques, sino reducirlos lo más posible.

Herramientas recomendadas para la auditoría Core Web Vitals

Lighthouse es una poderosa herramienta de auditoría de rendimiento web que puede ayudar a los desarrolladores a diagnosticar problemas de velocidad e interactividad del sitio web. Combina tecnologías web modernas y las mejores prácticas para proporcionar un análisis detallado del rendimiento del sitio web y ofrece información útil sobre optimización. Al ejecutar las auditorías de Lighthouse, los desarrolladores pueden identificar rápidamente oportunidades para mejorar la velocidad del sitio, la interactividad y otras métricas clave.

El informe Lighthouse tiene varias secciones:

1. Rendimiento del sitio: análisis de la velocidad de descarga del sitio

2. Funciones: describe cómo acelerar su sitio y mejorar el rendimiento.

3. Diagnóstico: indica a qué se debe prestar atención y corregir

4. Programa web progresivo: auditoría detallada

5. Disponibilidad: sección sobre cómo mejorar el diseño UX

6. Mejores prácticas: las mejores formas de optimización confiable de la mayoría de los sitios

Antes de ejecutar una auditoría, puede utilizar el botón de carga de la página Analizar para ajustar el nivel de auditoría según sus intereses (Rendimiento, SEO, Accesibilidad, etc.).

Su informe de auditoría se mostrará en la nueva ventana cuando se inicie la auditoría. También está disponible para su medición en el sitio web de PageSpeed ​​Insights.

No olvide que las métricas de Core Web vitals se tomarán durante los últimos 28 días.

Lea también: ¿ Cuáles son las mejores computadoras portátiles Apple MacBook Air y MacBook Pro?

Conclusiones

En conclusión, considere ponerse en contacto con nuestro equipo de auditoría Core Web Vitals para garantizar una buena experiencia de usuario para su tienda en línea. Aunque las métricas de Core Web Vitals pueden parecer abstractas, hacen que su sitio sea más fácil de usar. Además, estas métricas tienen una conexión clara con la funcionalidad del código de su sitio, lo que las hace relativamente fáciles de mejorar.

Según nuestra experiencia, la optimización de estas métricas puede conducir a mejoras rápidas en la clasificación y las tasas de conversión. Al medir Core Web Vitals, puede identificar áreas para optimizar y mejorar la experiencia general del usuario de su sitio web. Por lo tanto, no dude en comunicarse con el equipo de auditoría de Core Web Vitals y vea el impacto positivo que puede tener en su negocio en línea.