Cómo optimizar CSS para el rendimiento máximo del sitio

Incluso en 2021, el rendimiento web sigue siendo un problema. Según HTTP Archive, la página promedio requiere una descarga de 2 MB, realiza más de 60 solicitudes HTTP y puede tardar 18 segundos en cargarse por completo en un dispositivo móvil. Las hojas de estilo representan 60 kB divididas en siete solicitudes, por lo que rara vez es una prioridad máxima cuando se intenta abordar problemas de rendimiento.

Sin embargo, CSS tiene un efecto, por leve que parezca. Una vez que haya abordado su JavaScript, aprender a optimizar CSS correctamente debería ser la siguiente prioridad.

¡Vamos a eso!

Cómo CSS afecta el rendimiento de la página

CSS parece inocente pero puede requerir un procesamiento pesado.

CSS bloquea el renderizado

Cuando su navegador encuentra un <link> , detiene otras descargas y el procesamiento del navegador mientras recupera y analiza el archivo CSS.

JavaScript también puede bloquear la representación del navegador, pero el procesamiento asíncrono es posible con:

1. los async atributo para descargar scripts en paralelo, que se ejecutan inmediatamente cuando están listos.
2. los defer atributo para descargar en paralelo, luego ejecutar en orden cuando el DOM esté listo.
3. los type="module" atributo para cargar un módulo ES (que se comporta como defer).

Los activos como las imágenes a menudo requieren más ancho de banda, pero hay formatos eficientes disponibles y pueden cargarse de forma diferida (loading="lazy" atributo) sin bloquear la representación del navegador.

Nada de esto es posible con CSS. El archivo se almacena en caché, por lo que se carga la página siguiente deberían ser más rápido, pero el proceso de bloqueo de procesamiento permanece.

¿Quiere mejorar el rendimiento de su sitio? 🚀Comience con CSS 💥Haz clic para tuitear

Los archivos CSS grandes tardan en procesarse

Cuanto más grande sea la hoja de estilo, más tiempo se tarda en descargar y procesar en un modelo de objetos CSS (CSSOM), que el navegador y las API de JavaScript pueden utilizar para mostrar la página. Aunque las hojas de estilo CSS son más pequeñas que la mayoría de los archivos de otros sitios web, no son inmunes a la regla general de «más pequeño es mejor».

Los archivos CSS crecen

Puede ser difícil identificar estilos que ya no se utilizan, y eliminar los incorrectos puede causar estragos en un sitio. Los desarrolladores suelen optar por el enfoque más seguro de «retener todo». Los estilos de página, los componentes y los widgets que ya no se utilizan siguen existiendo en CSS. ¿El resultado? El tamaño del archivo, la complejidad y el esfuerzo de mantenimiento aumentan exponencialmente, lo que hace que los desarrolladores sean cada vez menos propensos a eliminar el código redundante.

Las hojas de estilo pueden hacer referencia a otros activos

CSS puede hacer referencia a otras hojas de estilo mediante las reglas @import. Estas importaciones bloquean el procesamiento de la hoja de estilo actual y cargan más archivos CSS en series.

También se pueden hacer referencia a otros activos, como fuentes e imágenes. El navegador intentará optimizar las descargas, pero en caso de duda, las recuperará de inmediato. Los archivos codificados en base64 insertados se procesan aún más.

Representación de efectos CSS

Los navegadores tienen tres fases de representación:

1. los diseño (o reflujo) calcula las dimensiones de cada elemento y cómo afecta el tamaño o la posición de los elementos a su alrededor.
2. los pintura Phase dibuja las partes visuales de cada elemento en capas separadas: texto, colores, imágenes, bordes, sombras, etc.
3. los compuesto dibuja cada capa en la página en el orden correcto de acuerdo con los contextos de apilamiento, el posicionamiento, los índices Z, etc.

Si no tiene cuidado, los cambios en las propiedades de CSS y las animaciones pueden hacer que las tres fases se vuelvan a representar. Algunas propiedades, como las sombras y los degradados, también son computacionalmente más caras que los colores y los márgenes de los bloques.

Herramientas de análisis de rendimiento de CSS

¡Admitir que tiene un problema de rendimiento de CSS es el primer paso en el camino hacia la recuperación! Encontrar y corregir las causas es otro asunto.

Las siguientes herramientas y servicios (no clasificados en ningún orden) pueden ayudarlo a identificar los cuellos de botella de estilo en su código.

1. Panel de red de DevTools

Los especialistas en rendimiento web dedican un tiempo considerable a DevTools y La red panel en particular. DevTools es nativo de la mayoría de los navegadores modernos, aunque usaremos Google Chrome en nuestros ejemplos.

DevTools se puede abrir desde el menú del navegador, normalmente en Más herramientas > Herramientas de desarrollo, o mediante los atajos de teclado Ctrl | Cmd + Mayús + I o F12.

Cambie al La red pestaña y asegurar Desactivar el caché está marcado para evitar que los archivos en caché afecten al informe. También puede cambiar la opción de limitación para simular redes móviles más lentas.

Actualice la página para ver el gráfico de cascada de descarga y procesamiento:

Cualquier barra larga es motivo de preocupación, pero debe tener especial cuidado con las barras largas bloqueadas / estancadas (mostradas en blanco). En este ejemplo, la fila resaltada y todas las filas siguientes no pudieron comenzar a descargarse hasta que los archivos CSS y JavaScript que bloquean la representación se procesaron en la parte superior de la página HTML.

los Filtrar El cuadro le permite mostrar u ocultar activos específicos:

• larger-than:<S>: Limite a archivos mayores que , expresado como bytes (10,000), kilobytes (1,000 kB) o megabytes (1 M)
• -larger-than:<S>: Límite a archivos más pequeños que
• -domain:*<.yourdomain.com>: Muestra solicitudes de terceros que no se cargan desde su dominio principal. Estos son un contribuyente importante a los sitios lentos.

Una página de alto rendimiento con CSS optimizado generalmente tiene menos activos cargados en paralelo con barras cortas bloqueadas / detenidas.

2. WebPageTest

WebPageTest proporciona una vista de cascada de red similar, así como muchos otros gráficos de rendimiento:

El servicio utiliza dispositivos basados ​​en varias ubicaciones globales para que pueda evaluar el rendimiento del mundo real y las optimizaciones de CSS.

3. Panel Lighthouse de Chrome DevTools

Las DevTools Faro El panel se proporciona en navegadores basados ​​en Chromium como Chrome, Edge, Brave, Opera y Vivaldi. Puede generar informes de rendimiento, aplicación web progresiva, mejores prácticas, accesibilidad y optimización de motores de búsqueda para dispositivos móviles y de escritorio.

La herramienta hace sugerencias de mejora, incluidas formas de optimizar CSS. No todos pueden ser prácticos o posibles, pero se destacan las ganancias rápidas más beneficiosas.

4. Google PageSpeed ​​Insights

PageSpeed ​​Insights es la versión en línea de Lighthouse. Tiene menos funciones, pero se puede utilizar en cualquier navegador y proporciona información alternativa.

Por ejemplo, un mapa de árbol muestra los activos de JavaScript más grandes con una métrica de cobertura, que indica qué proporción de código se usa y no se usa:

No se muestra CSS, pero la cantidad de JavaScript influirá en la eficiencia de los estilos.

Herramientas de prueba de velocidad de sitios web similares incluyen Pingdom Website Speed ​​Test y GTmetrix.

5. Panel de cobertura de Chrome DevTools

Las DevTools Cobertura El panel en los navegadores basados ​​en Chromium ayuda a localizar el código CSS (y JavaScript) no utilizado. Seleccione Cobertura de DevTools Más herramientas submenú, luego actualice su página y explore su sitio / aplicación:

Los activos de CSS y JavaScript se muestran en la Cobertura panel, con la proporción de código no utilizado en rojo. Haga clic en cualquier archivo para ver su fuente con el código no utilizado resaltado en rojo en el margen del número de línea.

Algunas cosas a tener en cuenta:

• Las métricas de cobertura se restablecen si actualiza o navega a una nueva página, como es típico en un sitio de WordPress. La métrica del código no utilizado solo disminuirá si navega por una aplicación de una sola página que carga contenido sin actualizar la página.
• La herramienta solo puede dar cuenta del CSS utilizado hasta un momento determinado. No puede determinar si un widget no se ha visto o tiene varios estados enlazados a JavaScript.

6. Monitor de rendimiento en tiempo real de DevTools de Chrome

Los navegadores basados ​​en Chromium tienen un Monitor de rendimiento en tiempo real. Nuevamente, esto está disponible en DevTools Más herramientas menú. Los gráficos se actualizan a medida que navega por las páginas, se desplaza y activa animaciones:

Las siguientes métricas son de particular interés para optimizar el rendimiento de CSS (cuanto más bajo, mejor):

• Uso de CPU: Utilización del procesador de 0% a 100%.
• Diseños / seg: La velocidad a la que el navegador tiene que rediseñar la página.
• Estilo recalc / seg: La velocidad a la que el navegador tiene que volver a calcular los estilos.

Las otras métricas también pueden ser útiles si CSS tiene problemas debido a factores externos (nuevamente, los valores más bajos indican un mejor rendimiento):

• Tamaño del montón de JS: La memoria total utilizada por los objetos de JavaScript.
• Nodos DOM: El número de elementos del documento HTML.
• Oyentes de eventos JS: El número de detectores de eventos de JavaScript registrados.
• Documentos: La cantidad de recursos, incluida la página, archivos CSS, módulos JavaScript, etc.
• Marcos de documentos: El número de marcos, iframes y scripts de trabajo de JavaScript.

7. Informe de rendimiento de DevTools

Las DevTools Rendimiento El panel le permite registrar las actividades de la página para un análisis más detallado y ayudar a identificar problemas de rendimiento. Los informes generados son complejos y muchos desarrolladores los evitan, pero proporcionan información valiosa.

El icono de configuración del panel Rendimiento le permite configurar varias opciones, como ralentizar la red y la CPU. También puede deshabilitar las muestras de JavaScript para que no se registren las pilas de llamadas detalladas.

Para comenzar, haga clic en la circular Registro , cargue y / o use su página, luego haga clic en el icono Parada para ver el informe:

Casi todas estas métricas serán útiles para los desarrolladores de JavaScript, pero los problemas de optimización de CSS pueden ser especialmente evidentes en:

• Barra roja superior: Esto indica que la velocidad de fotogramas se ha reducido significativamente, lo que puede estar provocando problemas de rendimiento. Esto se espera al comienzo de la carga de una página, pero las animaciones CSS excesivas también podrían ser un problema.
• Cuadro resumen: Las métricas de alta carga, renderizado y pintura pueden indicar problemas de CSS.

Correcciones indirectas de rendimiento de CSS

Las siguientes correcciones no abordarán directamente los problemas de CSS, pero pueden ayudarlo a abordar algunos problemas de rendimiento con relativamente poco esfuerzo.

Utilice un buen anfitrión

El uso de un buen host con servidores físicamente más cercanos a sus usuarios traerá beneficios de rendimiento inmediatos. Los planes de alojamiento varían, pero hay tres tipos principales:

1. Alojamiento compartido: Su sitio web está alojado en un servidor físico, posiblemente junto con cientos de otros sitios. Se comparten el espacio en disco, la RAM, el tiempo de la CPU y el ancho de banda. Los planes suelen ser económicos, pero el rendimiento y la disponibilidad se ven afectados por otros sitios. La actualización puede ser posible, pero su sitio generalmente permanecerá en la misma infraestructura.
2. Alojamiento dedicado: Su sitio está alojado en uno o más servidores físicos de su propiedad. El hardware se puede configurar y actualizar según los requisitos. Los planes suelen ser costosos y las fallas de hardware siguen siendo problemáticas.
3. Alojamiento en la nube: El alojamiento en la nube abstrae la infraestructura de hardware en un conjunto de servicios a los que se puede acceder a pedido. Su sitio se puede aprovisionar en una variedad de dispositivos para facilitar las actualizaciones.

Los planes y precios de alojamiento en la nube varían enormemente. Podrías considerar:

1. Opciones de plataforma como servicio (PaaS), como bases de datos y servidores web virtuales, o
2. Opciones de software como servicio (SaaS), que ofrecen aplicaciones totalmente administradas como WordPress.

Cambiar de host puede mejorar el rendimiento. Es poco probable que resuelva todos sus problemas, pero es una solución rentable para problemas de backend y ancho de banda.

También podría considerar el uso de una red de entrega de contenido (CDN) o una CDN de imágenes y video especializada que pueda distribuir la carga en múltiples ubicaciones geográficamente más cerca de los usuarios.

Aproveche las funciones de eficiencia del navegador y el servidor

Alrededor del 10% de los sitios no activan la compresión gzip (o mejor), que suele ser la opción predeterminada del servidor. Esto reduce el tamaño de CSS en un 60% o más al comprimir archivos antes de la transmisión. No solucionará CSS ineficiente, ¡pero el código llegará antes!

También debe activar HTTP / 2 (o mejor), que envía datos en un formato binario más pequeño, comprime los encabezados y puede enviar más de un archivo en la misma conexión TCP.

Finalmente, asegúrese de que el navegador pueda almacenar en caché CSS y otros archivos de manera efectiva. Por lo general, esto es una cuestión de configurar hashes de Expires, Last-Modified y / o ETag en el encabezado HTTP.

Optimiza tu CMS

Los sistemas de gestión de contenido como WordPress se pueden ampliar con temas y complementos que sirven a su propio CSS. Siempre que sea posible, debe acelerar su CMS para:

1. Elimina los complementos no utilizados.
2. Usa temas más ágiles
3. Habilite el almacenamiento en caché para evitar la regeneración excesiva de páginas.

Optimiza tus imágenes

Las imágenes no tienen la misma sobrecarga de procesamiento y representación que HTML, CSS y JavaScript, pero representan una gran proporción del peso de la página y del ancho de banda utilizable. Considerar:

1. Eliminación de imágenes innecesarias.
2. Cambiar el tamaño de las imágenes grandes, tal vez a no más del 150% del tamaño máximo que pueden aparecer en la pantalla.
3. Usar un formato de imagen apropiado, idealmente una opción altamente comprimida como WebP o AVIF, pero posiblemente SVG para logotipos y gráficos.
4. Reemplazo de imágenes con degradados CSS u otros efectos.
5. Agregar atributos de ancho y alto a HTML <img> etiquetas o usando la nueva propiedad CSS de relación de aspecto para garantizar que se reserve el espacio adecuado en la página antes de que se descargue la imagen.

Un CDN de imágenes especializado puede encargarse de parte de este trabajo por usted. Para obtener más consejos, consulte nuestra guía sobre cómo optimizar imágenes para la web.

Eliminar CSS no utilizado

¡Los estilos más rápidos son aquellos que nunca necesita cargar o renderizar! Intente eliminar / editar cualquier código CSS que ya no necesite, como el de las páginas, los widgets o los marcos heredados. Esto puede resultar difícil en sitios más grandes y no siempre está claro si un conjunto de estilos en particular es esencial o no.

Las siguientes herramientas analizan el uso de HTML y CSS en el momento de la compilación o rastreando las URL para identificar el código redundante. Esto no siempre es adecuado, por lo que se pueden establecer configuraciones adicionales para garantizar que los estilos activados por JavaScript y las interacciones del usuario se permitan en la lista:

Hay una mejor opción: Divida CSS en archivos separados con niveles claros de responsabilidad y documente en consecuencia. Eliminar estilos innecesarios se vuelve considerablemente más fácil.

Optimizar el rendimiento de carga de CSS

No todos los CSS se cargan por igual. El humilde <link> La etiqueta tiene una serie de opciones y peculiaridades que no siempre son lógicas.

Optimizar el uso de fuentes web

Google Fonts y las fundiciones de fuentes similares han revolucionado las fuentes web, pero unas pocas líneas de código de fuente pueden generar cientos de kilobytes de ancho de banda.

Aquí están nuestras sugerencias de optimización:

1. Cargue solo las fuentes que necesita: Elimine las fuentes que no esté utilizando y compruebe si son necesarias nuevas fuentes.
2. Cargue solo los pesos y estilos que necesita: La mayoría de las fundiciones de fuentes pueden limitar la descarga a ciertos conjuntos de caracteres (como solo latín), pesos (grosores) y cursiva (inclinaciones). Los navegadores pueden procesar automáticamente los estilos que faltan, aunque los resultados pueden ser deficientes.
3. Limitar los caracteres requeridos: se usa con poca frecuencia las fuentes se pueden restringir a caracteres específicos. Por ejemplo, el título «Tutorial CSS» en Open Sans se puede definir agregando un &text= parámetro a la cadena de consulta de fuentes de Google: fonts.googleapis.com/css?family=Open+Sans&text=CStuorial
4. Considere fuentes variables: Las fuentes variables definen una gran variedad de estilos, pesos y cursiva mediante interpolación vectorial. El archivo de fuente es un poco más grande, pero necesita solo uno en lugar de varios. La fuente recursiva demuestra la flexibilidad de las fuentes variables.
5. Cargue fuentes de su servidor local: Las fuentes autohospedables son más eficaces que utilizar una fundición. Se requieren menos búsquedas de DNS y puede restringir la descarga a WOFF2, que es compatible con todos los navegadores modernos. Los navegadores más antiguos (te estoy mirando IE) pueden recurrir a una fuente de sistema operativo.
6. Considere las fuentes del sistema operativo: Esa fuente web de 500 kB puede verse muy bien, pero ¿alguien se daría cuenta si cambiara a las comúnmente disponibles Helvetica, Arial, Georgia o Verdana? Las fuentes compatibles con el sistema operativo o la Web son una forma sencilla de mejorar el rendimiento.

Utilice una opción de carga de fuentes adecuada

Las fuentes web pueden tardar unos segundos en descargarse y procesarse. El navegador:

1. Muestre un destello de texto sin estilo (FOUT): La primera fuente alternativa disponible se usa inicialmente pero se reemplazada una vez que la fuente web esté lista.
2. Muestre un destello de texto invisible (FOIT): No se muestra ningún texto hasta que la fuente web esté lista. Este es el proceso predeterminado en los navegadores modernos, que normalmente esperan tres segundos antes de volver a una fuente alternativa.

Tampoco es ideal. La propiedad CSS font-display y el parámetro Google Font & display = pueden seleccionar una opción alternativa:

• auto: El comportamiento predeterminado del navegador (generalmente FOIT).
• cuadra: Efectivamente FOIT. El texto es invisible hasta por tres segundos. No hay cambio de fuente, pero el texto puede tardar en aparecer.
• intercambio: Efectivamente FOUT. La primera alternativa se utiliza hasta que la fuente web esté disponible. El texto se puede leer de inmediato, pero el efecto de cambio de fuente puede resultar discordante. Font Style Matcher se puede utilizar para definir una reserva de tamaño similar.
• retroceder: Un compromiso entre FOIT y FOUT. El texto es invisible durante un período corto (generalmente 100 ms), luego se usa el primer recurso alternativo hasta que la fuente web esté disponible.
• Opcional: Similar a la reserva, excepto que no se produce ningún intercambio de fuentes. La fuente web solo se utilizará si está disponible durante el período inicial. Es probable que la vista de la primera página muestre una fuente alternativa, con vistas posteriores utilizando la fuente web descargada y almacenada en caché.

El uso de swap, fallback u opcional puede ofrecer un aumento del rendimiento percibido.

Evite CSS @import

La regla @import at permite incluir archivos CSS dentro de otros:

/* main.css */
@import url("https://kinsta.com/blog/optimize-css/reset.css");
@import url("grid.css");
@import url("widget.css");

Esta parece una forma eficaz de cargar componentes y fuentes más pequeños. Desafortunadamente, cada @import bloquea el procesamiento y cada archivo debe cargarse y analizarse en serie.

Múltiple <link> Las etiquetas dentro de HTML son más eficientes y cargan archivos CSS en paralelo:

<link rel="stylesheet" href="https://kinsta.com/blog/optimize-css/reset.css">
<link rel="stylesheet" href="grid.css">
<link rel="stylesheet" href="widget.css">

Dicho esto, es mejor …

Concatenar y minimizar CSS

Las herramientas de compilación modernas, los preprocesadores CSS como Sass y los complementos de WordPress pueden combinar todos los parciales en un archivo CSS grande. A continuación, se eliminan los espacios en blanco, los comentarios y los caracteres innecesarios para reducir el tamaño del archivo al mínimo.

Varios archivos son un problema de rendimiento menor con HTTP / 2 y superior, pero un solo archivo requiere solo un encabezado y puede ser comprimido con gzip y en caché de manera más eficiente.

Los archivos CSS separados solo son prácticos cuando tiene una o más hojas de estilo que se cambian con frecuencia, quizás varias veces por semana. Incluso entonces, el código CSS principalmente estático se puede combinar en un solo archivo.

Evite la codificación Base64

Las herramientas pueden codificar imágenes en cadenas base64, que puede usar como URI de datos en HTML <img> etiquetas y fondos CSS:

.background {
  background-image: url('data:image/jpg;base64,ABC123...');
}

Esto reduce la cantidad de solicitudes HTTP, pero perjudica el rendimiento de CSS:

• Las cadenas base64 pueden ser un 30% más grandes que su equivalente binario.
• los navegadores deben decodificar la cadena antes de que se pueda usar una imagen, y
• la alteración de un píxel de la imagen invalida todo el archivo CSS.

Solo considere la codificación base64 si está utilizando imágenes muy pequeñas que cambian con poca frecuencia, donde la cadena resultante no es significativamente más larga que una URL.

Dicho esto, puede codificar UTF8 iconos SVG reutilizables, p. Ej.

.svgbackground {
  background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 600"><circle cx="300" cy="300" r="150" stroke-width="3" stroke="#f00" fill="#ff0" /></svg>');
}

Quitar CSS Hacks y IE Fallbacks

A menos que sea desafortunado y tenga una alta proporción de usuarios de Internet Explorer, las hojas de estilo condicionales de IE y los hacks pueden eliminarse de su CSS. En la mayoría de los casos, los usuarios de IE seguirán viendo alguna cosa, especialmente si usa un diseño de dispositivos móviles que muestra una vista lineal más simple de forma predeterminada. El resultado puede no ser bonito y no será perfecto en píxeles, pero su presupuesto de desarrollo se gasta mejor considerando la accesibilidad para todos los usuarios.

Precargar archivos CSS

los <link> La etiqueta proporciona un atributo de precarga opcional que puede iniciar una descarga inmediatamente en lugar de esperar la referencia real en el HTML:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>My page</title>
  <!-- preload styles -->
  <link rel="preload" href="https://kinsta.com/css/main.css" as="style" />
  <!-- lots more code -->
  <!-- load preloaded styles -->
  <link rel="stylesheet" href="https://kinsta.com/css/main.css" />

Esto es especialmente beneficioso en WordPress y otros CMS, donde un complemento podría agregar una hoja de estilo más abajo en la página.

Utilice CSS crítico en línea

Las herramientas de análisis pueden sugerirle «CSS crítico en línea» o «reducir las hojas de estilo que bloquean el procesamiento». Esto mejora el rendimiento al:

1. Identificar estilos esenciales utilizados por elementos en la mitad superior de la página (aquellos visibles cuando se carga la página)
2. Incluir ese CSS crítico en un <style> etiqueta en tu <head>
3. Cargando el CSS restante de forma asincrónica para evitar el bloqueo de renderizado. Esto se puede lograr cargando la hoja de estilo en un estilo de «impresión» al que el navegador le da menor prioridad. JavaScript luego lo cambia a un estilo de medios «todos» una vez que la página se ha cargado (un <noscript> asegura que CSS funciona si JavaScript no está disponible):

<style>
/* critical styles */
body { font-family: sans-serif; color: #111; }
</style>
<!-- load remaining styles -->
<link rel="stylesheet" 
     href="https://kinsta.com/css/main.css"
    media="print" 
   onload="this.media="all"">
<noscript>
  <link rel="stylesheet" href="https://kinsta.com/css/main.css">
</noscript>

Herramientas como la CSS crítica y crítica pueden ayudar a extraer estilos para elementos visibles.

La técnica mejora notablemente el rendimiento y aumenta los puntajes de auditoría. Los sitios o aplicaciones con interfaces consistentes deberían ser más simples de implementar, pero puede ser más difícil en otros lugares:

• Una herramienta de construcción es esencial para todos los sitios, excepto para los más simples.
• El «pliegue» es diferente en cada dispositivo.
• Los sitios pueden tener una variedad de diseños que requieran CSS crítico diferente.
• Las herramientas CSS críticas pueden tener problemas con marcos específicos, contenido dinámico y del lado del cliente generado en HTML.
• La técnica beneficia principalmente a la carga de la primera página. CSS se almacena en caché para las páginas siguientes, por lo que los estilos en línea adicionales aumentarán el peso de la página.

Usar representación de consulta de medios

Un solo concatenado y minificado beneficiará a la mayoría de los sitios, pero los sitios que requieren una cantidad significativa de estilos de pantalla más grandes podrían dividir los archivos CSS y cargarlos mediante una consulta de medios:

<!-- core styles loaded on all devices -->
<link rel="stylesheet" href="https://kinsta.com/blog/optimize-css/core.css">
<!-- served to screens at least 40em wide -->
<link rel="stylesheet" media="(min-width: 40em)" href="40em.css">
<!-- served to screens at least 80em wide -->
<link rel="stylesheet" media="(min-width: 80em)" href="80em.css">

Este ejemplo presupone una metodología basada en dispositivos móviles. Carga de dispositivos móviles core.css pero es posible que no sea necesario descargar o analizar las hojas de estilo restantes.

Usar renderizado progresivo

El renderizado progresivo es una técnica que define hojas de estilo individuales para páginas o componentes separados. Puede beneficiar a sitios muy grandes donde las páginas individuales se construyen a partir de una amplia gama de componentes.

Cada archivo CSS se carga inmediatamente antes de que se haga referencia a un componente en el HTML:

<head>
  <!-- core styles -->
  <link rel="stylesheet" href="https://kinsta.com/blog/optimize-css/core.css" />
</head>
<body>
  <!-- header -->
  <link rel="stylesheet" href="header.css" />
  <header>...</header>
  <!-- primary content -->
  <link rel="stylesheet" href="main.css" />
  <main>
    <!-- widget styling -->
    <link rel="stylesheet" href="widget.css" />
    <div class="mywidget>...</div>
  </main>
  <!-- footer -->
  <link rel="stylesheet" href="footer.css" />
  <footer>...</footer>
</body>

Esto funciona bien en la mayoría de los navegadores. (Safari muestra una página en blanco hasta que se carga todo el CSS, pero no debería ser notablemente peor que una sola hoja de estilo grande).

La adopción de componentes web también fomenta el uso de estilos de ámbito que se cargan cuando se representa el elemento personalizado.

Optimizar el rendimiento de CSS

Las técnicas y propiedades de CSS imponen diferentes tensiones al navegador, la CPU, la memoria, el ancho de banda y otros recursos. Los siguientes consejos pueden ayudarlo a evitar un procesamiento innecesario y un rendimiento lento.

Adopte técnicas de diseño modernas (cuadrícula y caja flexible)

Los diseños basados ​​en flotantes son difíciles de crear, utilizan numerosas propiedades, requieren ajustes continuos de margen y relleno, deben administrarse mediante consultas de medios e implican un procesamiento considerable del navegador. Fueron el único método de diseño viable durante muchos años, pero ya no son necesarios. Utilizar cualquiera:

• CSS Flexbox para diseños unidimensionales que podrían pasar a la siguiente fila. Es ideal para menús, galerías de imágenes, tarjetas, etc.
• CSS Grid para diseños bidimensionales con filas y columnas explícitas. Es ideal para diseños de página.

Ambos son más simples de desarrollar, usan menos código, se renderizan más rápido y se adaptan a cualquier tamaño de pantalla sin consultas de medios.

Los navegadores muy antiguos no reconocerán las propiedades modernas de flexbox y grid, por lo que cada elemento se convierte en un bloque. Muéstrelos en un diseño lineal simple similar a un dispositivo móvil: no es necesario emular el diseño con alternativas basadas en flotadores.

Reemplazar imágenes con degradados y efectos CSS

Siempre que sea posible, opte por el código CSS en lugar de las imágenes. Experimente con degradados, bordes, radios, sombras, filtros, modos de fusión, máscaras, recortes y efectos de pseudoelementos para reutilizar o reemplazar imágenes existentes.

Los efectos CSS utilizan considerablemente menos ancho de banda, son más fáciles de modificar y, por lo general, se pueden animar.

Evite el uso excesivo de propiedades caras

Es posible que tenga un código declarativo conciso, pero algunos CSS requieren más procesamiento que otros. Las siguientes propiedades desencadenan cálculos de pintura que pueden resultar costosos cuando se usan en exceso:

• position: fixed
• border-radius
• box-shadow
• text-shadow
• opacity
• transform
• filter
• backdrop-filter
• background-blend-mode

Utilice transiciones y animaciones CSS cuando sea posible

Las transiciones y animaciones de CSS siempre serán más suaves que los efectos impulsados ​​por JavaScript, que modifican propiedades similares. No se procesarán en navegadores muy antiguos pero, dado que es probable que se ejecuten en dispositivos menos capaces, eso es lo mejor.

Sin embargo, evite la animación excesiva. Los efectos deben mejorar la experiencia del usuario sin afectar negativamente al rendimiento ni causar mareos. Compruebe la consulta de medios de movimiento reducido de preferencias y desactive las animaciones cuando sea necesario.

Evite animar propiedades que desencadenan un rediseño

La alteración de las dimensiones de un elemento (ancho, alto, relleno, borde) o la posición (superior, inferior, izquierda, derecha, margen) puede hacer que toda la página se rediseñe en cada animación. cuadro. Las propiedades más eficientes para animar son:

• opacity
• filter: Desenfoque, contraste, sombra y otros efectos
• transform: Para trasladar (mover), escalar o rotar un elemento

Los navegadores pueden usar la GPU acelerada por hardware para representar estos efectos en su propia capa, por lo que solo se ve afectada la etapa de composición.

Si tiene que animar otras propiedades, puede mejorar el rendimiento sacando el elemento del flujo de la página con position: absolute.

Esté atento a los selectores complejos

Los navegadores analizarán rápidamente los selectores de CSS más complejos, pero simplificarlos reduce el tamaño de los archivos y mejora el rendimiento. Los selectores complejos a menudo se generan cuando crea estructuras profundamente anidadas en preprocesadores CSS como Sass.

Indique qué elementos cambiarán

La propiedad will-change de CSS le permite advertir cómo se cambiará o animará un elemento para que el navegador pueda realizar optimizaciones por adelantado:

.myelement {
  will-change: transform, opacity;
}

Se puede definir cualquier número de valores separados por comas, pero la propiedad solo debe usarse como último recurso para solucionar problemas de rendimiento conocidos. No debe aplicarlo a demasiados elementos y asegúrese de darle tiempo suficiente para que se inicialice.

Considere la contención de CSS

La contención es una nueva función de CSS que puede mejorar el rendimiento al permitirle identificar subárboles aislados de una página. El navegador puede optimizar el procesamiento mediante la representación, o no renderizado: un bloque de contenido DOM específico.

La propiedad de contenido acepta uno o más de los siguientes valores en una lista separada por espacios:

• none: No se aplica la contención
• layout: El diseño del elemento está aislado del resto de la página; su contenido no afectará a otros elementos
• paint: Los elementos secundarios del elemento no se muestran fuera de su límite.
• size: El tamaño del elemento se puede determinar sin verificar los elementos secundarios; las dimensiones son independientes del contenido.

También están disponibles dos valores especiales:

• strict: Se aplican todas las reglas de contención (excepto ninguna)
• content: Aplica diseño y pintura

Una página tiene un <ul> lista con contain: strict; aplicado. Si cambia el contenido de cualquier niño <li>, el navegador no volverá a calcular el tamaño o la posición de ese elemento, otros elementos de la lista o cualquier otro elemento de la página.

La contención de CSS es compatible con la mayoría de los navegadores modernos. No hay soporte en Safari o aplicaciones más antiguas, pero la contención se puede usar de manera segura en estas porque el navegador simplemente ignorará la propiedad.

Reaccionar al encabezado Save-Data

Save-Data es un encabezado de solicitud HTTP que indica que el usuario ha solicitado datos reducidos. Puede estar etiquetado como modo «Lite» o «Turbo» en algunos navegadores.

Cuando está habilitado, un Save-Data El encabezado se envía con cada solicitud del navegador:

GET /main.css HTTP/1.0
Host: site.com
Save-Data: on

El servidor puede responder en consecuencia cuando se detectan datos guardados. En el caso de CSS, podría enviar un diseño lineal similar a un dispositivo móvil más simple, usar una fuente del sistema operativo, cambiar a colores de bloque o cargar fondos de imágenes de baja resolución.

Tenga en cuenta que el servidor debe devolver el siguiente encabezado en las solicitudes modificadas para garantizar que el contenido mínimo no se almacene en caché y se reutilice cuando el usuario apague el modo Lite / Turbo:

Vary: Accept-Encoding, Save-Data

El encabezado también puede ser detectado por JavaScript del lado del cliente. El siguiente código agrega una clase bestUX al <html> elemento cuando Save-Data es no activado:

if ('connection' in navigator && !navigator.connection.saveData) {
  document.documentElement.classList.add('bestUX');
}

Las hojas de estilo pueden reaccionar en consecuencia sin ninguna manipulación del servidor:

/* no hero image by default */
header {
  background-color: #abc;
  background-image: none;
}
/* hero image when no Save-Data */
.bestUX header {
  background-image: url("hero.jpg");
}

La consulta de medios de datos reducidos de preferencias ofrece una opción de solo CSS como alternativa, aunque no es compatible con ningún navegador en el momento de escribir este artículo:

/* no hero image by default */
header {
  background-color: #abc;
  background-image: none;
}
/* hero image when no Save-Data */
@media (prefers-reduced-data: no-preference) {
  header {
    background-image: url("hero.jpg");
  }
}

¿Ya ha abordado los problemas de rendimiento a través de JavaScript? 💪 Es hora de echar un vistazo al CSS de su sitio 🚀Haz clic para tuitear

Resumen

Hay muchas opciones para optimizar el rendimiento de CSS, pero para proyectos nuevos, considere las siguientes prácticas:

1. Utilizar una Enfoque basado en dispositivos móviles: codifique primero el diseño móvil más simple y luego agregue mejoras a medida que aumenta el espacio de la pantalla y el conjunto de funciones del navegador.
2. Divida CSS en archivos separados con responsabilidades identificables: Un preprocesador de CSS o un complemento de CMS puede combinar parciales de CSS en un solo archivo.
3. Agrega un paso de compilación: Hay herramientas disponibles que pueden eliminar automáticamente el código, identificar problemas, concatenar, minimizar, reducir el tamaño de las imágenes y más. La automatización hace la vida más fácil y es menos probable que olvide un paso de optimización.
4. Documente sus hojas de estilo: Una guía de estilo con ejemplos documentados hará que su código sea más fácil de recoger y mantener. Podrás identificar y eliminar CSS antiguo sin sudar.

¡Finalmente, aprende CSS! Cuanto más sepa, menos código necesitará escribir y más rápida será su aplicación web. Te convertirá en un mejor desarrollador independientemente de las plataformas y marcos que uses.

¿Qué otros consejos tiene para optimizar el rendimiento de CSS? ¡Compártelos en la sección de comentarios!