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é).

Enlace directo →