Optimización de CSS para cargas de página más rápidas

 

 

 

Una publicación sencilla con algunos datos de rendimiento de Tomas Pustelnik. Es un buen recordatorio de que CSS es una parte crucial a la hora de pensar en el rendimiento web, y por una gran razón:

Cada vez que [el navegador] encuentre cualquier recurso externo (CSS, JS, imágenes, etc.), le asignará una prioridad de descarga e iniciará su descarga. Las prioridades son importantes porque algunos recursos son fundamentales para representar una página (por ejemplo, la hoja de estilo principal y los archivos JS), mientras que otros pueden ser menos importantes (como imágenes u hojas de estilo para otros tipos de medios).

En el caso de CSS, esta prioridad suele ser alta porque las hojas de estilo son necesarias para crear CSSOM (modelo de objetos CSS). Para representar una página web, el navegador debe construir tanto DOM como CSSOM.

 

Es por eso que a menudo se hace referencia a CSS como un recurso de “bloqueo”. Eso es deseable hasta cierto punto: no nos gustaría ver sitios web sin estilo. Pero obtenemos ganancias reales de rendimiento cuando hacemos que CSS sea más pequeño porque es más rápido de descargar, analizar y aplicar.

Aparte de las técnicas en la publicación, estoy seguro de que a los defensores del CSS atómico/de todas las utilidades les encantaría que se les señalara que las hojas de estilo de esos enfoques son generalmente mucho más pequeñas y, por lo tanto, más eficientes. Los enfoques CSS-in-JS a veces agrupan estilos en scripts, por lo que, para ser justos, se obtiene una pequeña ganancia de rendimiento en la parte superior al no cargar el CSS allí, pero una pérdida de rendimiento al aumentar el tamaño del paquete de JavaScript en el proceso. (Sin embargo, no he visto un estudio con una comparación justa, así que no sé si es un lavado o qué). Blog sobre Supervivencia

Enlace directo →






SUSCRÍBETE A NUESTRO BOLETÍN 

No te pierdas de nuestro contenido ni de ninguna de nuestras guías para que puedas avanzar en los juegos que más te gustan.










Al suscribirte, aceptas nuestra política de privacidad y nuestros términos de servicio.






Tal vez te puede interesar:

  1. ¿Cómo se hace el tamaño máximo de fuente en CSS?
  2. Cambiar el tamaño de los valores en pasos en CSS
  3. ¿Qué hace “revertir” en CSS?
  4. CSS4 es una mala idea

Optimización de CSS para cargas de página más rápidas

Optimización de CSS para cargas de página más rápidas

Una publicación sencilla con algunos datos de rendimiento de Tomas Pustelnik. Es un buen recordatorio de que CSS es una parte crucial a la hora de pensar en e

programar

es

https://pseint.es/static/images/programar-optimizacion-de-css-para-cargas-de-pagina-mas-rapidas-1746-0.jpg

2024-06-13

 

Optimización de CSS para cargas de página más rápidas
Optimización de CSS para cargas de página más rápidas

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

 

 

Update cookies preferences