js en css bestanden samenvoegen / cachen?
De snelheid van een pagina aanroep wordt o.a. bepaald door het aantal requests op die pagina. Hoe meer losse bestanden er worden aangeroepen des te trager de site wordt. Het aanroepen van meerdere javascript en / of meerdere css bestanden werkt dus vertragend. Nu vraag ik me af of het zinvol is om javascript / css bestanden samen te voegen en weg te schrijven als 1 bestand.
Stel mijn site heeft 20 pagina's. Er is een main.css waar de gebruikelijke css code in staat. 5 pagina's hebben "extra" css nodig en gebruiken hiervoor een extra css bestand. Dit extra css bestand is voor alle 5 pagina's hetzelfde. We noemen dit extra css bestand voor het gemak nu even extra.css
Nu komt het. Ik zit er over te denken om een class te maken die automatisch de verschillende css bestanden van 1 pagina samenvoegt tot 1 bestand. We zouden dan een main.css bestand hebben (voor de meeste pagina's) en een main-extra.css bestand voor de "afwijkende" pagina's.
Nu is dit voorbeeld heel simpel, maar in de praktijk gaat het om heel veel pagina's met heel veel css bestanden. In mijn controller wil ik de css bestanden voor een specifieke pagina kunnen toevoegen, bijvoorbeeld:
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
<?php
function showSpecialPage() {
// doe iets
$this->css = 'main';
$this->css = 'form';
$this->css = 'special_menu';
}
?>
function showSpecialPage() {
// doe iets
$this->css = 'main';
$this->css = 'form';
$this->css = 'special_menu';
}
?>
Uiteindelijk zou dit er in moeten resulteren dat er automatisch een bestand main-form-special_menu.css wordt gegenereerd. Dit bestand wordt gecached.
Bij iedereen die nu de special page aanroept wordt gebruik gemaakt van het gegenereerde css bestand: 1 bestand in plaats van 3 bestanden.
Mijn vraag... is dit slim om te doen? Het nadeel is dat als je veel verschillende pagina's met veel verschillende css bestanden hebt, er ook veel verschillende varianten van css bestanden komen. Stel je roept 3 pagina's op mijn site aan, dan zou dit er als volgt uit kunnen zien:
pagina 1:
main.css
pagina 2:
main-form-page2.css
pagina 3:
main-form-page3.css
Er is nu sprake van 3 verschillende css bestanden. Als je de bestanden niet zou samenvoegen zou je dit krijgen:
pagina 1:
main.css
pagina 2:
main.css
form.css
page2.css
pagina 3:
main.css
form.css
page3.css
In deze laatste situatie heb je meer css bestanden, maar nadat je pagina 1 en 2 bezocht hebt hoeft de browser bij het aanroepen van pagina 3 nog maar 1 bestand binnen te halen omdat de andere 2 al zijn gecachet.
Wat is nu wijsheid om te doen? Heeft iemand wat tips?
Gewijzigd op 08/04/2011 05:43:38 door Ozzie PHP
Wat is volgens jou de beste werkwijze? Wel of niet samenvoegen?
Stel je hebt 5 verschillende met gemiddeld 50 regels, dan zou ik ze allemaal, ge-minified, in 1 bestand zetten style.cache.css.
Want 1x op de entry pagina style.cache.css laden is sneller dan eerst main-form-page2.css laden en op de volgende pagina weer main-page3.css laden. Je enkele bestand zit namelijk al in de browsercache van de gebruiker.
Wat betreft JS, daar weet ik het antwoord ook nog niet op.. Ik ben laatst HeadJS tegen gekomen en ben nu aan 't twijfelen over de beste optie; Lazy asynchronuous loading of 1 (of 2 of 3) gecachede bestanden.
Hoe dan ook, voor alles geld; minifyen/compressen etc.
Marco Bos op 08/04/2011 10:12:36:
Als je ze samen voegt is het erg ingewikkeld, en zou de codering geen kwaliteit hebben...
Ik snap totaal niet wat je hier mee bedoelt :-s
Ozzie PHP op 08/04/2011 09:43:48:
Karl dankjewel voor je reactie. Kun je iets specifieker zijn? "Het is niet helemaal waar wat je zegt." Welk gedeelte is niet waar?
Wat is volgens jou de beste werkwijze? Wel of niet samenvoegen?
Wat is volgens jou de beste werkwijze? Wel of niet samenvoegen?
Je kunt de bestanden over een aantal servers verspreiden:
http://code.google.com/speed/articles/optimizing-opensocial-gadgets.html
http://stackoverflow.com/questions/383194/whats-more-important-as-little-http-requests-as-possible-or-splitting-files-for
http://stackoverflow.com/questions/222139/how-far-should-you-break-up-stylesheets