Come ridurre le richieste http css?Come ridurre le richieste http css?
1 grande file CSS
file dio uno css che l'importazione di tutti gli altri css
è lo stesso?
Qual è il vantaggio di utilizzare questo
@import url('/css/typography.css');
@import url('/css/layout.css');
@import url('/css/color.css');
1 file di grandi dimensioni css o un file css che l'importazione di tutti gli altri css è lo stesso?
No come il cliente ha bisogno ancora di caricare tutti i file CSS (con un HTTP-request ciascuno)
alcuni link per saperne di più su riducendo le richieste HTTP:
Se si utilizza Firefox, consiglio vivamente lo Firebug, che offre una vista con informazioni dettagliate sulle richieste HTTP.
EDIT:
Come fly-by-wire sottolinea nei commenti: YSlow è un'estensione per Firefox che si integra con Firebug per analizzare le prestazioni pagina web
3 semplici cose che vorrei provare prima:
La maggior parte di queste cose si applicano anche a file Javascript.
Un'importazione stile sarà ancora innescherà una richiesta HTTP. Raccomando di servire solo un file CSS. È possibile combinare più file CSS utilizzando le importazioni dal lato server per inviare un file senza gestire tutte le regole CSS da un singolo file.
E minimizza la vita! – random
È possibile utilizzare un combinatore di richieste HTTP per specificare un elenco di file css comuni che devono essere consegnati come un singolo file css minificato nel browser. Ciò ridurrà le dimensioni e ridurrà significativamente il numero di richieste.
Un buon esempio di questo lavoro in un contesto .Net: http://www.codeproject.com/KB/aspnet/HttpCombine.aspx
Nel caso in cui si sta utilizzando asp.net MVC - Vai this approach. Funziona ancora come un fascino. Fondamentalmente - utilizza httphandler per combinare, comprimere e memorizzare i file delle risorse.
Ma questo è asp.net specifico. Non so se questo aiuti.
offtopic:
La stessa tecnica si può applicare per i file JavaScript (si sente bello avere belle file js strutturati e ancora - per evitare molte richieste HTTP).
Per immagini - controllare spriting. Questo bookmarklet può essere anche molto utile.
Vuoi ridurre il numero di richieste http o la loro dimensione?
Suggerirei di mettere tutti i selettori più utilizzati in un unico grande file CSS (insieme a tutte le vostre librerie/plugins utilizzati) e minify con linea ottimizzatori/minimi
ho scritto qualche post del blog su questo . Vedi Supercharging CSS in PHP. Anche se è scritto per PHP, i principi sono universali.
Fondamentalmente il tuo obiettivo è ridurre le richieste HTTP esterne. Puoi farlo con una combinazione di combinazione dei tuoi file CSS e/o versioning dei tuoi file CSS e utilizzando un'intestazione Expires molto futura.
Infine, si dovrebbe sempre GZip CSS (e Javascript) se il client lo accetta.
Se avete intenzione di essere al servizio dei file css da una web farm o è un sito ad alto volume, vi suggerisco di avere uno sguardo a: http://code.google.com/p/talifun-web/wiki/CrusherModule Esso utilizza un file di osservatore a cercare cambiamenti su css/js File. I file Css/js appartengono a set di file specificati in web.config. Quando viene rilevata una modifica su uno dei componenti js/css, crea un nuovo css o jss munged per il set di file.
Ha anche un semplice controllo per l'output di link set di file css/js. Il controllo aggiungerà una querystring con un hash del file, in modo da garantire il contenuto corretto del file.
Ciò significa che è possibile servire direttamente il file mung con IIS. Quindi puoi sfruttare la cache in modalità kernel. significa anche che non è necessario preoccuparsi di implementazioni buggy di sostegno intestazione http:
È meglio comprimere tutti i file js/css in un unico file gigante per l'intero sito Web, quindi servire dinamicamente solo i file js/css richiesti per la pagina. I browser possono memorizzare nella cache l'unico file gigante e non devono mai più preoccuparsi di scaricare css/js dal tuo sito.
E se si utilizza Firebug, consiglio vivamente YSlow – flybywire