CSS para Web Vitals
Técnicas relacionadas con CSS para optimizar los Web Vitals
La forma en que escribes tus estilos y creas diseños puede tener un gran impacto en Core Web Vitals. Esto es particularmente cierto para el Cumulative Layout Shift (CLS): Cambio Acumulativo del diseño y Largest Contentful Paint (LCP): Despliegue del contenido más extenso.
Este artículo cubre técnicas relacionadas con CSS para optimizar Web Vitals. Estas optimizaciones se desglosan mediante diferentes aspectos de una página: diseño, imágenes, fuentes, animaciones y carga. A lo largo del camino, exploraremos la mejora de una página de ejemplo:
Diseño #
Insertar contenido en el DOM #
Insertar contenido en una página después de que el contenido que rodea a todo ya haya sido cargado, todo lo demás será empujado hacia abajo. Esto provoca cambios de diseño.
Los avisos de cookies, en particular los que se encuentran en la parte superior de la página, son un ejemplo común de este problema. Otros elementos de la página que a menudo provocan este tipo de cambio de diseño cuando se cargan incluyen anuncios e incrustaciones.
Identificar #
La auditoría Lighthouse de "Evita grandes cambios de diseño" identifica los elementos de la página que se han desplazado. Para esta demostración, los resultados se ven de la siguiente manera:
El aviso de cookies no se incluye en estos resultados porque el aviso de cookies en sí no se desplaza cuando se está cargando. Más bien, hace que los elementos debajo de él en la página (es decir, div.hero y article) cambien. Para obtener más información sobre cómo identificar y corregir cambios de diseño, consulta Depurar cambios de diseño.
Reparar #
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 igualmente eficaz. Para obtener más información, consulta las mejores prácticas de notificación de cookies.
Imágenes #
Imágenes y Largest Contentful Paint (LCP) #
Las imágenes suelen ser el elemento de Largest Contentful Paint (LCP) de una página. Otros elementos de la página que pueden ser elementos LCP incluyen bloques de texto e imágenes de poster de video. El momento en que se carga el elemento LCP, se determina el LCP.
Es importante tener en cuenta que los elementos LCP de una página pueden variar de una carga a otra según el contenido que es visible para el usuario cuando la página se muestra 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 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, se puede desplegar el degradado en CSS, en lugar de cargar una imagen para crear el efecto.
Reparar #
Cambia el CSS de .banner para usar un degradado 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 la imagen. Si la carga de la imagen se produce después de que se ha renderizado la página, pero no se ha reservado espacio para la imagen, se produce un cambio de diseño cuando aparece la imagen. En la demostración, la imagen principal está provocando un cambio de diseño cuando se carga.
Identificar #
Para identificar imágenes sin width y height explícitos, utiliza la auditoría de "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 carecen de los atributos de width y height
Reparar #
Define los elementos de width y height en estas imágenes para evitar cambios de diseño.
Antes:
<img src="https://source.unsplash.com/random/2000x600" alt="imagen a cargar">
<img src="https://source.unsplash.com/random/800x600" alt="imagen a cargar">Después:
<img src="https://source.unsplash.com/random/2000x600" width="2000" height="600" alt="imagen a cargar">
<img src="https://source.unsplash.com/random/800x600" width="800" height="600" alt="imagen a cargar">Fuentes #
Las fuentes pueden retrasar la representación del texto y provocar cambios en el diseño. Como resultado, es importante servir fuentes rápidamente.
Renderización de texto con retraso #
De forma predeterminada, un navegador no procesará inmediatamente un elemento de texto si sus fuentes web asociadas aún no se han cargado. Esto se hace para evitar un "destello de texto sin estilo" (FOUT). En muchas situaciones, esto retrasa el First Contentful Paint (FCP): Primer despliegue de contenido. En algunas situaciones, esto retrasa a Largest Contentful Paint (LCP).
Cambios de diseño #
El intercambio de fuentes, si bien es excelente para mostrar contenido al usuario rápidamente, tiene el potencial de causar cambios en el diseño. Estos cambios de diseño ocurren cuando una fuente web y su fuente alternativa ocupan diferentes cantidades de espacio en la página. El uso de fuentes de proporciones similares minimizará el tamaño de estos cambios de diseño.
Identificar #
Para ver las fuentes que se están cargando en una página en particular, abre la pestaña de Red en DevTools y filtra la información por Fuente. Las fuentes pueden ser archivos de gran tamaño, por lo que generalmente, el rendimiento es mejor si se usan menos fuentes.
Para ver cuánto tiempo se tarda en solicitar la fuente, haz clic en la pestaña de Tiempo. Cuanto antes se solicite una fuente, antes se podrá cargar y utilizar.
Para ver la cadena de solicitud de una fuente, haz clic en la pestaña de Iniciador. En términos generales, cuanto más corta sea la cadena de solicitudes, antes se podrá solicitar la fuente.
Reparar #
Esta demostración utiliza la API de Google Fonts. Google Fonts ofrece la opción de cargar fuentes mediante las etiquetas de <link> o una declaración de @import. El fragmento de código <link> incluye un recurso de sugerencia de preconnect. Esto debería resultar en una entrega de hojas de estilo más rápida que con la versión de @import.
En un nivel muy alto, puedes pensar sobre las sugerencias de recursos como una forma de indicarle al navegador que necesitará configurar una conexión en particular o descargar un recurso en particular. Como resultado, el navegador priorizará estas acciones. Cuando utilices 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 Establecer conexiones de red con anticipación para mejorar la velocidad percibida de la página.
Elimina la siguiente @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> en el <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 enlace le indican al navegador que establezca una conexión temprana con los orígenes utilizados por Google Fonts y que cargue la hoja de estilo que contiene la declaración de fuente para Montserrat y Roboto. Estas etiquetas de <link> deben colocarse lo antes posible en <head>.
Animaciones #
La forma principal en que las animaciones afectan a los Web Vitals es cuando provocan cambios en el diseño. Hay 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 con equivalentes de mayor rendimiento mediante el uso de propiedades 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 Lighthouse de "Evitar animaciones no compuestas" puede ser útil para identificar animaciones que no funcionan.
Reparar #
Cambia la secuencia de animación slideIn para utilizar transform: translateX() en lugar de cambiar la propiedad de 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 renderizado. Esto significa que el navegador encuentra una hoja de estilo, dejará de descargar otros recursos hasta que el navegador haya descargado y analizado la hoja de estilo. Esto puede retrasar el LCP. Para mejorar el rendimiento, considera la posibilidad de eliminar el CSS no utilizado, poner en línea el CSS crítico y aplazar el CSS no crítico.
Conclusión #
Aunque todavía hay espacio para mejoras adicionales (por ejemplo, usar la compresión de imágenes para servir imágenes más rápido), estos cambios han mejorado significativamente las 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 está cumpliendo con los umbrales de Web Vitals para la mayoría de los usuarios. Para obtener más información sobre Web Vitals, consulta Aprende Core Web Vitals.