1,917 lecturas

Los 10 mejores consejos de rendimiento de CSS

por Nikita Starichenko5m2022/11/14

Demasiado Largo; Para Leer

¡Hola a todos! Hay muchos consejos y trucos sobre el estilo CSS. Pero no en este artículo. Hoy quiero hablar sobre cómo usar CSS de manera más eficiente y hacer

Companies Mentioned

featured image - Los 10 mejores consejos de rendimiento de CSS

¡Hola a todos! Hay muchos consejos y trucos sobre el estilo CSS. Pero no en este artículo. ¡Hoy quiero hablar sobre cómo usar CSS de manera más eficiente y hacer que su plataforma sea más rápida!

1. Selectores simples

CSS tiene una variedad amplia y flexible de opciones de codificación que puede usar para orientar los elementos HTML para el estilo. A lo largo de los años, los expertos han aconsejado a los desarrolladores que escriban selectores simples para reducir la carga en el navegador y mantener el código limpio y simple. Incluso los selectores de CSS más complejos tardan milisegundos en analizarse, pero reducir la complejidad reducirá el tamaño de los archivos y facilitará el análisis del navegador.

No haga:

 main > div.blog-section + article > * { /* Code here */ }

HACER:

 .hero-image { /* Code here */ }

2. CSS crítico en línea

Puede incorporar reglas CSS críticas. Esto mejora el rendimiento al:

Identificar los estilos esenciales utilizados por los elementos de la mitad superior de la página (aquellos visibles cuando se carga la página)
Incorporando ese CSS crítico en una etiqueta <style> en su <head>
Cargar el CSS restante de forma asincrónica para evitar el bloqueo de procesamiento. Esto se puede lograr cargando la hoja de estilo en un estilo de "impresión" al que el navegador le da una prioridad más baja. JavaScript luego lo cambia a un estilo de medios "todos" una vez que la página se ha cargado.

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

3. Evite `@import`

La regla at @import permite incluir cualquier archivo CSS dentro de otro. Esta parece una forma razonable de cargar fuentes y componentes más pequeños. Pero no lo es.

Las reglas @import se pueden anidar, por lo que el navegador debe cargar y analizar cada archivo en serie.

Múltiples etiquetas <link> dentro del HTML cargarán archivos CSS en paralelo, lo que es considerablemente más eficiente, especialmente cuando se usa HTTP/2.

No haga:

 /* main.css */ @import url("style1.css"); @import url("style2.css"); @import url("style3.css");

HACER:

 <link rel="stylesheet" href="base.css"> <link rel="stylesheet" href="layout.css"> <link rel="stylesheet" href="carousel.css">

4. Precargar archivos CSS

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

 <!-- preload styles --> <link rel="preload" href="/css/main.css" as="style" /> <!-- some code --> <!-- load preloaded styles --> <link rel="stylesheet" href="/css/main.css" />

5. Representación progresiva

En lugar de usar un solo archivo CSS para todo el sitio, la representación progresiva es una técnica que define hojas de estilo individuales para componentes separados. Cada uno se carga inmediatamente antes de que se haga referencia a un componente en el HTML.

Cada <link> sigue bloqueando la representación, pero durante menos tiempo, porque el archivo es más pequeño. La página se puede usar antes, porque cada componente se procesa en secuencia; la parte superior de la página se puede ver mientras se carga el contenido restante.

 <head> <!-- core styles used across components --> <link rel='stylesheet' href='base.css' /> </head> <body> <!-- header component --> <link rel='stylesheet' href='header.css' /> <header>...</header> <!-- primary content --> <link rel='stylesheet' href='content.css' /> <main> <!-- form styling --> <link rel='stylesheet' href='form.css' /> <form>...</form> </main> <!-- header component --> <link rel='stylesheet' href='footer.css' /> <footer>...</footer> </body>

6. Utilice la representación de consulta de medios

Un solo concatenado y minimizado 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="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">

7. Adopta imágenes SVG

Los gráficos vectoriales escalables (SVG) se utilizan normalmente para logotipos, gráficos, iconos y diagramas más simples. En lugar de definir el color de cada píxel como los mapas de bits JPG y PNG, un SVG define formas como líneas, rectángulos y círculos en XML.

Los SVG más simples son más pequeños que los mapas de bits equivalentes y pueden escalarse infinitamente sin perder definición. Un SVG se puede insertar directamente en el código CSS como imagen de fondo. Esto puede ser ideal para iconos reutilizables más pequeños y evita solicitudes HTTP adicionales.

Ejemplo de SVG:

 <svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 800 600"> <circle cx="400" cy="300" r="50" stroke-width="5" stroke="#f00" fill="#ff0" /> <svg>

Ejemplo de uso de SVG:

 .mysvgbackground { background: url('data:image/svg+xml;utf8,<svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 800 600"><circle cx="400" cy="300" r="50" stroke-width="5" stroke="#f00" fill="#ff0" /></svg>') center center no-repeat; }

8. Dale estilo a los SVG con CSS

Los SVG se pueden incrustar directamente en un documento HTML. Esto agrega los nodos SVG directamente al DOM. Por lo tanto, todos los atributos de estilo SVG se pueden aplicar mediante CSS.

SVG en DOM:

 <body> <svg class="mysvg" xmlns="https://www.w3.org/2000/svg" viewBox="0 0 800 600"> <circle cx="400" cy="300" r="50" /> <svg> </body>

Estilos SVG:

 circle { stroke-width: 1em; } .mysvg { stroke-width: 5px; stroke: #f00; fill: #ff0; }

El volumen de código SVG incrustado se reduce y los estilos CSS se pueden reutilizar o animar según sea necesario.

Tenga en cuenta que el uso de un SVG dentro de una etiqueta <img> o como una imagen de fondo CSS significa que están separados del DOM, y el estilo CSS no tendrá ningún efecto.

9. Evite la codificación Base64

Puede codificar imágenes en cadenas base64, que puede usar como URI de datos en etiquetas HTML <img> y fondos CSS.

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
alterar 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.

No haga:

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

HACER:

 .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>'); }

10. Consejos breves

Reemplazar imágenes con efectos CSS: definir una "imagen" usando el código CSS usa considerablemente menos ancho de banda y es más fácil de modificar o animar más adelante.
Use técnicas modernas de diseño: Flexbox y Grid .
Use animaciones CSS: las transiciones y las animaciones siempre serán más rápidas que JavaScript.
Evite las propiedades costosas: algunos CSS requieren más procesamiento que otros.
1. border-radius
2. box-shadow
3. text-shadow
4. opacity
5. transform
6. filter
7. position: fixed
8. backdrop-filter
9. background-blend-mode