Aumente el rendimiento del sitio web con tres métricas

Jan 25, 2024

La web es un medio de rápido crecimiento. Con miles de nuevos sitios registrados diariamente, ¿cómo obtiene una ventaja sobre la competencia? Una categoría pasada por alto que mejora su sitio web y ayuda a aumentar el tiempo de participación del usuario es el rendimiento. ¡El rendimiento importa! El rendimiento del sitio web es fundamental para crear una experiencia de usuario positiva, permitir la accesibilidad y aumentar el tráfico. Un desempeño inadecuado puede alterar estas métricas y convertirse en una responsabilidad, creando un entorno más desafiante para que una empresa prospere. Mejorar el rendimiento también conducirá a una mejor optimización de motores de búsqueda (SEO).

Hay muchas métricas para el rendimiento. Cubriremos las mejoras para tres: cambio de diseño acumulativo (CLS), pintura con contenido más grande (LCP) y tiempo total de bloqueo (TBT). Con la versión 9 actual de Lighthouse, las tres métricas acumulativas representan el 70 % de la puntuación de rendimiento de Lighthouse de Google.

El cambio de diseño acumulativo (CLS) es una de las métricas de experiencia del usuario más fáciles de entender. Los componentes individuales en una página determinada pueden hacer o deshacer la experiencia de un usuario. A veces, los usuarios no obtienen lo que esperan cuando cargan inicialmente una página. Cada componente debe tener una acción predecible para un usuario.

El tamaño del contenido implica establecer un ancho y alto en los selectores para reducir el cambio de contenido. También les da a los usuarios con conexión lenta la comprensión de que el contenido se cargará en esa ubicación una vez que se complete el proceso de procesamiento. Algunos elementos tardan más en cargarse, lo que afecta negativamente a CLS. Por ejemplo, las imágenes receptivas requieren cobertura adicional. Considere establecer su relación de aspecto o convertir el elemento en absoluto mientras configura su pseudo-selector con un porcentaje de relleno superior.

Las animaciones son una forma única de hacer que una página sea agradable para el usuario, cuando se hace correctamente. Evite usar posiciones (arriba, derecha, abajo, izquierda) y ancho/alto para las animaciones. En su lugar, utilice el selector de transformación y su atributo de traducción para la posición. Para mayor flexibilidad, incorpore selectores de márgenes. El selector de transformación no activa el diseño a menos que sea absolutamente necesario.

Las fuentes web se están convirtiendo en un método cada vez más popular de marca para un sitio web. Pueden ser implementados internamente o llamados por otros sitios. Un usuario con conexiones lentas puede tener problemas para ver las fuentes web. En estos casos, los navegadores suelen mostrar la versión normal hasta que se carga el archivo. Una vez cargado, si el navegador admite fuentes web, cambiará automáticamente a la versión correcta. De lo contrario, el usuario recibirá las fuentes predeterminadas.

La métrica de pintura con contenido más grande (LCP) mide cuánto tiempo adicional se dedica a renderizar un elemento (imagen, video, texto). Para proporcionar una excelente experiencia de usuario, apunte a una puntuación métrica de menos de 2,5 segundos. Para mejorar LCP a través de texto, utilice la misma estrategia utilizada para CLS. Para reducir las velocidades de LCP para imágenes, optimice la imagen con lo siguiente.

Todo el proceso de la pintura más grande con contenido es hacer que su elemento (imagen, video, texto) se muestre en la página lo más rápido posible. Estas estrategias ayudan a priorizar elementos importantes en la pestaña de red. Cualquier archivo JavaScript que no sea necesario en la carga inicial de la ventana gráfica debe postergarse para más adelante.

El tiempo total de bloqueo (TBT) es una métrica de rendimiento para medir la capacidad de respuesta de carga en una página. Si bien es la última categoría en este artículo, también tiene el peso más alto del 30%. TBT mide el tiempo que se bloquea una página para que no responda a la entrada de un usuario, ya sea que esa entrada sean clics del mouse, toques de pantalla o pulsaciones de teclado. Time to Interactive (TTI) mide cuánto tiempo tarda una página en responder. First Contentful Paint (FCP) es cuando el navegador representa el primer bit de contenido del Modelo de objetos de documento (DOM). TBT es la suma de todos los períodos entre FCP y TTI. Para mejorar esta categoría, primero debe desglosar los scripts internos y de terceros.

Como resultado, el tiempo total de bloqueo es la métrica de rendimiento más impactante. Time to Interactive y First Contentful Paint juegan un papel muy importante en TBT y su hilo principal. Considere analizar FCP o TTI si está atascado en TBT.

En general, el rendimiento es una categoría fundamental que afecta drásticamente la experiencia del usuario, el compromiso y el tráfico. Siga estos consejos de categorías de rendimiento para obtener una ventaja sobre la competencia, mejorar el SEO y ayudar a mejorar la métrica de rendimiento de su sitio hasta en un 70 %. En marzo de 2023, se lanzará la versión 10 de Lighthouse que considera que CLS, LCP y TBT representan el 80 % de la métrica. El tiempo de interacción se eliminará de la métrica y su 10 % se agregará a CLS para que sea un 25 % (antes era un 15 %). ¡No lo olvides, el rendimiento importa!