Técnicas relacionadas con CSS para optimizar las Métricas web
La forma en que escribes tus diseños y compilas diseños puede tener un gran impacto en las Métricas web esenciales. Esto es especialmente cierto para el Cambio de diseño acumulado (CLS) y la Pintura 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 según diferentes aspectos de una página: diseño, imágenes, fuentes, animaciones y carga. Durante el proceso, analizaremos cómo mejorar una página de ejemplo:
Diseño
Cómo insertar contenido en el DOM
Cuando insertas contenido en una página después de que el contenido circundante ya se cargó, todo lo demás dentro de la página 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 "No realices 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 usando el 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 igualmente 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 página que pueden ser el elemento LCP incluyen los bloques de texto y las imágenes de pósteres de video. El tiempo 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 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 de héroe y el texto del artículo son algunos de los posibles elementos de 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 .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 cuando 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 del artículo les faltan 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 de texto y causar cambios de diseño. Por lo tanto, es importante proporcionar las fuentes rápidamente.
Renderización de texto diferida
De forma predeterminada, un navegador no renderizará de inmediato un elemento de texto si sus fuentes web asociadas todavía no se cargaron. Esto se hace para evitar un "intermitencia de texto sin estilo" (FOUT). En muchas situaciones, esto retrasa el First Contentful Paint (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 se producen cuando una fuente web y su fuente de resguardo ocupan diferentes cantidades de espacio en la página. El uso de fuentes de proporción similar 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 podrá cargarse y usarse.
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
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 sentencia @import. En el fragmento de código <link>, se incluye una sugerencia del recurso preconnect. Esto debería dar como resultado una entrega de la hoja de estilo más rápida que si se usa la versión @import.
En términos generales, puedes considerar las sugerencias de recursos como una forma de indicarle 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 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 utilizan 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 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 mejor 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 "Evita las animaciones no compuestas" de Lighthouse puede ser útil para identificar las animaciones que no tienen 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 el navegador encuentra una hoja de estilo y deja de descargar otros recursos hasta que el navegador la haya descargado y analizado. Esto puede retrasar el LCP. Para mejorar el rendimiento, procura quitar el código CSS sin usar, intercalar el código CSS crítico y diferir el CSS que no sea 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 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.