optimización CSS

✔️ Etiqueta: optimización CSS

La optimización CSS es el proceso de mejorar el rendimiento y la velocidad de carga de las páginas web al reducir el tamaño de los archivos CSS y simplificar su estructura. Esto es importante para mejorar la experiencia del usuario y aumentar la clasificación en los motores de búsqueda.

Cómo optimizar CSS - Acortar CSS

Acortar CSS significa eliminar todos los caracteres innecesarios del código, como espacios, saltos de línea y comentarios. Esto reduce el tamaño del archivo CSS y hace que se cargue más rápido.

Combinar archivos CSS

La combinación de varios archivos CSS en uno también puede acelerar la carga de la página. Esto se debe a que el navegador necesita realizar menos solicitudes al servidor.

Uso de selectores por clase e ID

El uso de selectores de clase e ID en lugar de selectores de etiquetas puede acelerar el procesamiento de CSS en el navegador. Los selectores de clase e ID son más específicos y permiten que el navegador encuentre rápidamente elementos coincidentes en la página.

Optimización del orden de estilos

El orden de los estilos en un archivo CSS también puede afectar la velocidad de representación. Los estilos que se aplican a los elementos en la parte superior de la página deben colocarse en la parte superior del archivo CSS. Esto permitirá que el navegador muestre el contenido de la página más rápido.

La optimización de CSS es un aspecto importante del desarrollo de sitios web. Ayuda a mejorar la experiencia del usuario y mejorar la clasificación en los motores de búsqueda. Existen muchas técnicas de optimización de CSS, como acortar el código, concatenar archivos y usar selectores de clase e ID.

minificación de CSS

La minificación de CSS es el proceso de comprimir el código CSS mediante la eliminación de todos los caracteres innecesarios, como espacios, saltos de línea y comentarios. Esto reduce el tamaño del archivo CSS y hace que se cargue más rápido. Hay varias herramientas de minificación de CSS como CSS Minifier y CleanCSS.

Optimización de imagen

La optimización de imágenes también puede mejorar el rendimiento de la página. Esto significa comprimir imágenes al tamaño más pequeño posible sin perder calidad. Hay varias herramientas de optimización de imágenes como TinyPNG y JPEGmini.

La optimización de CSS es un aspecto importante del desarrollo de sitios web. Ayuda a mejorar la experiencia del usuario y mejorar la clasificación en los motores de búsqueda. Existen muchas técnicas de optimización de CSS, como acortar el código, concatenar archivos y usar selectores de clase e ID. No olvide optimizar también las imágenes para mejorar el rendimiento de la página.

Hay cuatro aspectos principales de la optimización de CSS:

1. Rendimiento de descarga: principalmente al reducir el tamaño del archivo, reducir el bloqueo de descarga y mejorar la concurrencia.

2. Rendimiento del selector.

3. Rendimiento de representación.

4. Mantenibilidad, confiabilidad.

Optimización de CSS - Rendimiento de carga

1. Compresión CSS: empaquetar y comprimir el CSS escrito puede reducir considerablemente su tamaño;

2. Estilo CSS uniforme: cuando se requieren márgenes inferior e izquierdo,

⟹ Muchas veces select:margin: top 0 bottom 0;

⟹ Pero margen inferior: inferior; margen izquierdo: izquierda; la ejecución es más eficiente;

3. Reduzca el uso de @import y use un enlace porque este último se carga junto cuando se carga la página y el primero tiene que esperar a que se cargue la página antes de cargar;

4. Diseñe su diseño CSS sabiamente, preste atención a la reutilización del estilo y reduzca el tiempo de renderizado. Para la selección de clase e id, use un comparador menos global como * y configure los estilos base de manera sensata (como configurar una tabla{}) para mejorar la reutilización.

Optimización de CSS: rendimiento del selector

1. Los selectores de CSS se emparejan de derecha a izquierda. Cuando se utilizan selectores secundarios, el navegador examina todos los elementos secundarios para determinar si es el elemento especificado, y así sucesivamente;

2. Evite el uso de comodines. Por ejemplo, *{} ¡la cantidad de cálculos es increíble! Seleccione solo los elementos que necesita.

3. Elija la menor cantidad de etiquetas posible, pero use una clase. Por ejemplo: #nav li{}, puede agregar el nombre de clase nav_item a li, seleccione .nav_item{} de la siguiente manera.

4. No use etiquetas para calificar identificadores o selectores de clase. Por ejemplo: ul#nav debe simplificarse a #nav.

5. Utilice el selector de niños lo menos posible y reduzca el peso del selector. La sobrecarga de selectores de descendientes es la más alta, intente mantener la profundidad de los selectores al mínimo, el nivel más alto no es más de tres capas y más clases de uso para vincular cada elemento de etiqueta.

6. Piense en la herencia. Sepa qué propiedades se pueden heredar y evite repetir las reglas para esas propiedades.

Optimización de CSS: rendimiento de representación

1. Utilice con cuidado los atributos de alto rendimiento: flotación, posicionamiento;

2. Minimice el cambio de página y el redibujado;

3. Reorganizar de acuerdo con el orden de escritura css:

⟹ Posición: posición, superior, izquierda, índice z, flotante, visualización.

⟹ Tamaño: ancho, alto, márgenes, relleno.

⟹ Serie de texto: fuente, altura de línea, color, espaciado entre letras.

⟹ Borde de fondo: fondo, borde.

⟹ Otros: animación, transición.

4. Redibujar: borde, contorno, fondo, cuadro-sombra, si puedes usar color de fondo, trata de no usar fondo;

5. Eliminar reglas vacías: {};

6. Cuando el valor del atributo es 0, no se agregan unidades;

7. El valor del atributo es un número decimal flotante 0.**, y se puede omitir el 0 antes del punto decimal;

8. Estandarice diferentes prefijos de navegador: los que tienen prefijos de navegador son lo primero. Los atributos estándar siguen;

9. No use el prefijo @import, esto afectará la velocidad de carga de css;

10. Hacer pleno uso de las propiedades de herencia CSS para reducir la cantidad de código;

11. Extraer estilos públicos de forma abstracta y reducir la cantidad de código;

12. El selector optimiza el anidamiento y trata de evitar niveles demasiado profundos;

13. css sprite image, un pequeño ícono de la misma parte de la misma página, conveniente de usar y reduce la cantidad de solicitudes en la página, pero la imagen en sí se hará más grande, al usarla, considere claramente las ventajas y desventajas, y luego úsalo;

14. Coloque el archivo css en la parte superior de la página.

Mantenibilidad y fiabilidad

1. Extraiga estilos con los mismos atributos, intégrelos y utilícelos en páginas a través de clases para mejorar la capacidad de mantenimiento de CSS;

2.Siguiendo al anterior, oocss también es una forma de mejorar el rendimiento de css. Al definir clases base reutilizables y semánticamente buenas y luego agregarlas al html, esta técnica también es utilizada por muchos marcos de interfaz de usuario como :class=”btn btn-active btn-blue”;

3. Separación de estilo y contenido: el código css se define en css externo;

4. Separación de envase y estilo;

⟹ Los siguientes son materiales que cubren este tema: