Cómo cargar los css para mejorar la velocidad de carga

[brusjc]

Hola a todos: he analizado mi página web con GTMetrix para ver la velocidad de carga y me dice que tengo 75 peticiones al servidor. Como he leído que 75 peticiones son demasiadas me planteo reducirlas uniendo varios archivos css que se cargan en la página web.

Todos los css tienen declarada una caducidad en el .htaccess con el siguiente código: "#ExpiresByType text/css A3600" y por tanto, después de cargarse la primera página no se volverían a cargar.

Por otra parte, hay archivos css que se cargan en algunas páginas y no en otras, dependiendo del diseño de cada una.

Quiero preguntaros sobre la mejor forma de unir esos archivos css. Si uno los ficheros creando diferentes css cargaría cada fichero css resultante en cada página que utilizara un css distinto pero si los dejo tal y como están se cargarían todos los css una única vez pero habría más peticiones al servidor. ¿Qué sería mejor crear un css para cada tipo de página que incluya todos los ficheros actuales o bien dejar los ficheros con la estructura actual?

Deseo haber explicado adecuadamente mi duda y espero ansioso vuestras respuestas. Gracias de antemano por vuestra colaboración.

Un saludo.

[Daniel Ulczyk]

Considero que una respuesta adecuada requiere del previo conocimiento de la arquitectura del sitio.

No obstante algunas consideraciones—como las siguientes—forman parte de las buenas prácticas, sobre la carga de archivos CSS y la manera en que impactan en la velocidad de carga de la página:

• Evitar un elevado número de peticiones al servidor (eso ya lo sabés)
• Declarar la vigencia de los documentos en la cache del navegador (eso también lo has hecho)
• Utilizar herramientas de minificación de archivos (podés leer al respecto sobre Minify CSS)
• Habilitar la compresión desde el lado del servidor

Finalmente la curva de satisfacción mediante prueba y error no es muy compleja siempre que mantengas copias de resguardo de tus archivos y puedas establecer fácilmente una marcha atrás de la última modificación.

Me gusta el servicio que presta GTmetrix, en especial atención de los registros históricos que te permite mantener; no osbtante—y esto es una elección personal, no profesional—me agrada más trabajar con PageSpeed Insights

[exatienda]

Pide que te habiliten la compresión GZIP en el httpd.conf de tu servidor web Apache, hoy en día la mayoría de navegadores entienden el GZIP y reducirás drásticamente la carga de tu web al cliente.

[keriosp]

Para reducir el número de peticiones, como para parece lógico, es unir varios .css. Si usas plantillas, a partir de las que creas varios tipos de páginas, pues incluye únicamente los .css que se van a usar en esas páginas, por ejemplo un .css de estilos de menus, otro para posicionamiento, otro de estilos particulares. Eso si, tener en cuenta para la renderización estilos que se usen antes en el html, aparezcan antes en el .css. Agrupando .css para grupos comunes de páginas que los usan, en plantillas, páginas maestras, pues se consigue una mejora en peticiones al server y tiempo de carga.

En cuanto a compresiones, creo que los servidores actuales, ya por defecto comprimen gzip.
Espero te sirva!

[Tedel]

Una web debería tener solamente un archivo CSS (cómo detesto cuando me piden optimizar una web y hay varios). Haz solamente uno y reducirás dos o tres peticiones allí.