Técnicas relacionadas con CSS para optimizar las métricas web
La forma en que escribes tus estilos y compilas diseños puede tener un impacto importante en las métricas Web Vitals principales. Esto es especialmente cierto para el Cambio de diseño acumulado (CLS) y el Procesamiento de imagen con contenido más grande (LCP).
En este artículo, se describen las técnicas relacionadas con el CSS para optimizar las métricas web. Estas optimizaciones se desglosan según los diferentes aspectos de una página: diseño, imágenes, fuentes, animaciones y carga. En el camino, exploraremos cómo mejorar una página de ejemplo:
Diseño
Cómo insertar contenido en el DOM
Si insertas contenido en una página después de que se cargó el contenido circundante, todo lo demás de la página se desplaza hacia abajo. Esto provoca cambios de diseño.
Los avisos sobre cookies, en particular los que se colocan en la parte superior de la página, son un ejemplo común de este problema. Otros elementos de la página que suelen causar este tipo de cambio de diseño cuando se cargan son los anuncios y los elementos incorporados.
Identificar
La auditoría "Evitar cambios grandes en el diseño" de Lighthouse identifica los elementos de la página que se movieron. En esta demostración, los resultados se ven de la siguiente manera:
El aviso de cookies no se incluye en estos resultados porque no cambia cuando se carga. En cambio, hace que los elementos debajo de él en la página (es decir, div.hero y article) se muevan. Para obtener más información sobre cómo identificar y corregir los cambios de diseño, consulta Cómo depurar cambios de diseño.
Corregir
Coloca el aviso de cookies en la parte inferior de la página con posicionamiento absoluto o fijo.
Antes:
.banner {
position: sticky;
top: 0;
}
Después:
.banner {
position: fixed;
bottom: 0;
}
Otra forma de corregir este cambio de diseño sería reservar espacio para el aviso de cookies en la parte superior de la pantalla. Este enfoque es igual de eficaz. Para obtener más información, consulta las prácticas recomendadas del aviso de cookies.
Imágenes
Imágenes y Largest Contentful Paint (LCP)
Por lo general, las imágenes son el elemento de Largest Contentful Paint (LCP) de una página. Otros elementos de la página que pueden ser el elemento LCP incluyen bloques de texto e imágenes de pósteres de video. El momento en que se carga el elemento LCP determina el LCP.
Es importante tener en cuenta que el elemento LCP de una página puede variar de una carga de página a otra según el contenido que el usuario ve cuando se muestra la página por primera vez. Por ejemplo, en esta demostración, el fondo del aviso de cookies, la imagen hero y el texto del artículo son algunos de los posibles elementos de la LCP.
En el sitio de ejemplo, la imagen de fondo del aviso de cookies es en realidad una imagen grande. Para mejorar el LCP, puedes pintar el gradiente en CSS, en lugar de cargar una imagen para crear el efecto.
Corregir
Cambia el CSS de .banner para usar un gradiente de CSS en lugar de una imagen:
Antes:
background: url("https://cdn.pixabay.com/photo/2015/07/15/06/14/gradient-845701\_960\_720.jpg")
Después:
background: linear-gradient(135deg, #fbc6ff 20%, #bdfff9 90%);
Imágenes y cambios de diseño
Los navegadores solo pueden determinar el tamaño de una imagen una vez que esta se carga. Si la carga de la imagen se produce después de que se renderiza la página, pero no se reservó espacio para la imagen, se produce un cambio de diseño cuando aparece la imagen. En la demo, la imagen hero causa un cambio de diseño cuando se carga.
Identificar
Para identificar imágenes sin width ni height explícitos, usa la auditoría "Los elementos de imagen tienen un ancho y una altura explícitos" de Lighthouse.
En este ejemplo, a la imagen hero y a la imagen del artículo les faltan los atributos width y height.
Corregir
Establece los atributos width y height en estas imágenes para evitar cambios de diseño.
Antes:
<img src="https://source.unsplash.com/random/2000x600" alt="image to load in">
<img src="https://source.unsplash.com/random/800x600" alt="image to load in">
Después:
<img src="https://source.unsplash.com/random/2000x600" width="2000" height="600" alt="image to load in">
<img src="https://source.unsplash.com/random/800x600" width="800" height="600" alt="image to load in">
Fuentes
Las fuentes pueden retrasar la renderización de texto y causar cambios de diseño. Por lo tanto, es importante entregar las fuentes rápidamente.
Renderización de texto diferida
De forma predeterminada, un navegador no renderizará de inmediato un elemento de texto si aún no se cargaron sus fuentes web asociadas. Esto se hace para evitar un “destello de texto sin diseño” (FOUT). En muchas situaciones, esto retrasa el primer procesamiento de imagen con contenido (FCP). En algunas situaciones, esto retrasa la Largest Contentful Paint (LCP).
Cambios de diseño
Si bien el intercambio de fuentes es excelente para mostrar contenido al usuario rápidamente, tiene el potencial de causar cambios de diseño. Estos cambios de diseño ocurren cuando una fuente web y su fuente de resguardo ocupan diferentes cantidades de espacio en la página. El uso de fuentes con proporciones similares minimizará el tamaño de estos cambios de diseño.
Identificar
Para ver las fuentes que se cargan en una página en particular, abre la pestaña Red en DevTools y filtra por Fuente. Las fuentes pueden ser archivos grandes, por lo que, por lo general, es mejor usar menos fuentes para mejorar el rendimiento.
Para ver cuánto tarda en solicitarse la fuente, haz clic en la pestaña Timing. Cuanto antes se solicite una fuente, antes se podrá cargar y usar.
Para ver la cadena de solicitudes de una fuente, haz clic en la pestaña Initiator. En términos generales, cuanto más corta sea la cadena de solicitudes, antes se puede solicitar la fuente.
Corregir
Esta demostración usa la API de Google Fonts. Google Fonts ofrece la opción de cargar fuentes a través de etiquetas <link> o una sentencia @import. El fragmento de código <link> incluye una sugerencia de recursos preconnect. Esto debería generar una entrega más rápida de la hoja de estilo que usar la versión @import.
En un nivel muy alto, puedes pensar en las sugerencias de recursos como una forma de indicarle al navegador que deberá configurar una conexión o descargar un recurso en particular. Como resultado, el navegador priorizará estas acciones. Cuando uses sugerencias de recursos, ten en cuenta que priorizar una acción en particular quita recursos del navegador de otras acciones. Por lo tanto, las sugerencias de recursos deben usarse de forma cuidadosa y no para todo. Para obtener más información, consulta Establece conexiones de red con anticipación para mejorar la velocidad percibida de la página.
Quita la siguiente sentencia @import de tu hoja de estilo:
@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400&family=Roboto:wght@300&display=swap');
Agrega las siguientes etiquetas <link> al <head> del documento:
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap" rel="stylesheet">
Estas etiquetas de vínculo le indican al navegador que establezca una conexión anticipada con los orígenes que usa Google Fonts y que cargue la hoja de estilo que contiene la declaración de fuente para Montserrat y Roboto. Estas etiquetas <link> deben colocarse lo más cerca posible del principio de <head>.
Animaciones
La forma principal en que las animaciones afectan a las métricas Web Vitals es cuando causan cambios de diseño. Existen dos tipos de animaciones que debes evitar usar: animaciones que activan el diseño y efectos "similares a animaciones" que mueven elementos de la página. Por lo general, estas animaciones se pueden reemplazar por equivalentes de mayor rendimiento mediante el uso de propiedades de CSS, como transform, opacity y filter. Para obtener más información, consulta Cómo crear animaciones CSS de alto rendimiento.
Identificar
La auditoría "Evitar animaciones no compuestas" de Lighthouse puede ser útil para identificar animaciones que no tienen un buen rendimiento.
Corregir
Cambia la secuencia de animación slideIn para usar transform: translateX() en lugar de hacer la transición de la propiedad margin-left.
Antes:
.header {
animation: slideIn 1s 1 ease;
}
@keyframes slideIn {
from {
margin-left: -100%;
}
to {
margin-left: 0;
}
}
Después:
.header {
animation: slideIn 1s 1 ease;
}
@keyframes slideIn {
from {
transform: translateX(-100%);
}
to {
transform: translateX(0);
}
}
CSS crítico
Las hojas de estilo bloquean la renderización. Esto significa que, si el navegador encuentra un hoja de estilo, dejará de descargar otros recursos hasta que haya descargado y analizado la hoja de estilo. Esto puede retrasar el LCP. Para mejorar el rendimiento, considera quitar el CSS que no se usa, intercalar el CSS crítico y aplazar el CSS no crítico.
Conclusión
Si bien aún hay margen para realizar más mejoras (por ejemplo, usar la compresión de imágenes para entregar imágenes más rápido), estos cambios mejoraron significativamente los KPIs de Web Vitals de este sitio. Si este fuera un sitio real, el siguiente paso sería recopilar datos de rendimiento de usuarios reales para evaluar si cumple con los umbrales de las métricas web esenciales para la mayoría de los usuarios. Para obtener más información sobre las Métricas web, consulta Más información sobre las Métricas web.