Cómo reducir las solicitudes css http?Cómo reducir las solicitudes css http?
1 gran archivo css
archivoo uno css, que la importación de todos los demás css
es el mismo?
¿Cuál es la ventaja de utilizar este
@import url('/css/typography.css');
@import url('/css/layout.css');
@import url('/css/color.css');
1 gran archivo css o un archivo CSS, que la importación de todos los demás css es el mismo?
No como el cliente todavía tiene que cargar todos los archivos CSS (con una petición de HTTP cada uno)
algunos enlaces para obtener más información sobre la reducción de las peticiones HTTP:
Si está utilizando Firefox, recomiendo Firebug, que ofrece una vista con información detallada sobre las solicitudes HTTP.
EDIT:
Como fly-by-wire señala en los comentarios: YSlow es una extensión para Firefox que se integra con Firebug para analizar el rendimiento de la página web
3 cosas sencillas que me gustaría probar primero:
La mayoría de esas cosas también se aplica a los archivos Javascript.
Un estilo de importación seguirá siendo desencadenar una petición HTTP. Recomiendo servir solo un archivo CSS. Puede combinar múltiples archivos CSS utilizando importaciones desde el servidor para enviar un archivo sin administrar todas sus reglas de CSS desde un único archivo.
¡Y minimice la vida de eso! – random
Puede usar un combinador de solicitudes HTTP para especificar una lista de archivos css comunes que se deben entregar como un único archivo css minificado al navegador. Esto reducirá el tamaño y reducirá significativamente el número de solicitudes.
Un buen ejemplo de este trabajo en un contexto .Net: http://www.codeproject.com/KB/aspnet/HttpCombine.aspx
En caso de que usted está utilizando asp.net mvc - echa un vistazo a this approach. Todavía funciona como un encanto. Básicamente, utiliza httphandler para combinar, comprimir y almacenar en caché los archivos de activos.
Pero eso es específico de asp.net. No puedo decir si eso ayuda.
Offtopic:
La misma técnica se puede aplicar para los archivos de Javascript (se siente muy bien tener buenos archivos js estructurados y aún - para evitar muchas peticiones HTTP).
Para imágenes - echa un vistazo a spriting. Este bookmarklet puede ser bastante útil también.
¿Desea reducir el número de solicitudes HTTP o el tamaño de las mismas?
recomendaría a poner todos los selectores más utilizados en un archivo CSS grande (junto con todas sus bibliotecas/plugins utilizados) y minify con línea optimizadores/minimizers
escribí algunas entradas de blog sobre este . Ver Supercharging CSS in PHP. Aunque está escrito para PHP, los principios son universales.
Básicamente su objetivo es reducir las solicitudes HTTP externas. Puede hacerlo combinando sus archivos CSS y/o versionando sus archivos CSS y utilizando un futuro encabezado Expires.
Por último, siempre debe utilizar GZip CSS (y Javascript) si el cliente lo acepta.
Si va a estar sirviendo los archivos CSS de una granja de servidores web, o si es un sitio de gran volumen, sugeriría echar un vistazo a: http://code.google.com/p/talifun-web/wiki/CrusherModule Utiliza un vigilante de archivos para buscar cambios en css/js archivos. Los archivos Css/js pertenecen a los conjuntos de archivos especificados en web.config. Cuando se detecta un cambio en uno de los archivos js/css del componente, crea un nuevo css o jss munged para el conjunto de archivos.
También tiene un control simple para dar salida a los enlaces del conjunto de archivos css/js. El control agregará una cadena de consulta con un hash del archivo, por lo que se garantiza el contenido correcto del archivo.
Esto significa que puede servir el archivo munged con IIS directamente. Entonces puede aprovechar el almacenamiento en caché del modo kernel. También significa que no es necesario preocuparse por defectos de implementación de apoyo cabecera http:
Es mejor comprimir todos sus archivos js/css en un único archivo gigante para todo el sitio web, luego es servir dinámicamente solo los archivos js/css necesarios para la página. Los navegadores pueden almacenar en caché el único archivo gigante y luego no tener que preocuparse por descargar css/js de su sitio nuevamente.
Y si usa Firebug, recomiendo YSlow – flybywire