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 gran impacto en las métricas web 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 CSS para optimizar las Métricas web. Estas optimizaciones se desglosan en 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
Insertar contenido en una página después de que ya se cargó el contenido circundante desplaza todo lo demás hacia abajo. Esto provoca cambios de diseño.
Los avisos de cookies, en especial 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 el contenido incorporado.
Identificar
La auditoría "Evita 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 se desplaza cuando se carga. En cambio, hace que se desplacen los elementos que se encuentran debajo de él en la página (es decir, div.hero y article). Para obtener más información sobre cómo identificar y corregir los cambios de diseño, consulta Cómo depurar los cambios de diseño.
Corregir
Coloca el aviso de cookies en la parte inferior de la página con un 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 para el aviso de cookies.
Imágenes
Imágenes y Largest Contentful Paint (LCP)
Las imágenes suelen ser el elemento de Largest Contentful Paint (LCP) en una página. Otros elementos de la página que pueden ser el elemento LCP incluyen bloques de texto y las imágenes de póster de los videos. El momento en el 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 a otra según el contenido que sea visible para el usuario cuando se muestre la página por primera vez. Por ejemplo, en esta demostración, el fondo del aviso de cookies, la imagen principal y el texto del artículo son algunos de los posibles elementos del LCP.
En el sitio de ejemplo, la imagen de fondo del aviso de cookies es, en realidad, una imagen grande. Para mejorar el LCP, podrías pintar el gradiente en CSS en lugar de cargar una imagen para crear el efecto.
Corregir
Cambia el CSS .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 se carga. Si la carga de la imagen se produce después de que se renderizó la página, pero no se reservó espacio para la imagen, se producirá un cambio de diseño cuando aparezca la imagen. En la demostración, la imagen principal provoca un cambio de diseño cuando se carga.
Identificar
Para identificar imágenes sin atributos width y height explícitos, usa la auditoría "Los elementos de imagen tienen ancho y alto explícitos" de Lighthouse.
En este ejemplo, tanto la imagen principal como la imagen del artículo no tienen los atributos width y height.
Corregir
Configura 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 del texto y provocar cambios de diseño. Por lo tanto, es importante entregar las fuentes rápidamente.
Renderización de texto retrasada
De forma predeterminada, un navegador no renderizará de inmediato un elemento de texto si aún no se cargaron las fuentes web asociadas. Esto se hace para evitar un "destello de texto sin aplicar estilo" (FOUT). En muchas situaciones, esto retrasa el primer procesamiento de imagen con contenido (FCP). En algunas situaciones, esto retrasa el Largest Contentful Paint (LCP).
Cambios de diseño
El intercambio de fuentes, si bien es excelente para mostrar contenido al usuario rápidamente, puede provocar 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. Usar 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 Herramientas para desarrolladores y filtra por Fuente. Las fuentes pueden ser archivos grandes, por lo que, en general, usar menos fuentes es mejor para el rendimiento.
Para ver cuánto tiempo 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 Iniciador. En términos generales, cuanto más corta sea la cadena de solicitudes, antes se podrá solicitar la fuente.
Corregir
En esta demostración, se usa la API de Google Fonts. Google Fonts ofrece la opción de cargar fuentes a través de etiquetas <link> o una instrucción @import. El fragmento de código <link> incluye una sugerencia de recurso preconnect. Esto debería generar una entrega de hojas de diseño más rápida que la versión @import.
A un nivel muy alto, puedes pensar en las sugerencias de recursos como una forma de sugerirle al navegador que deberá configurar una conexión en particular 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 con cuidado 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 instrucción @import de tu hoja de diseño:
@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 indican al navegador que establezca una conexión anticipada con los orígenes que usa Google Fonts y que cargue la hoja de diseño que contiene la declaración de fuentes para Montserrat y Roboto. Estas etiquetas <link> deben colocarse lo antes posible en el <head>.
Animaciones
La principal forma en que las animaciones afectan las Métricas web es cuando provocan 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 más eficientes con 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 "Evita las animaciones no compuestas" de Lighthouse puede ser útil para identificar las 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 el procesamiento. Esto significa que, cuando el navegador encuentra una hoja de diseño, detendrá la descarga de otros recursos hasta que la haya descargado y analizado. 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 las Métricas web principales 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 para la mayoría de los usuarios. Para obtener más información sobre las Métricas web, consulta Learn Web Vitals.