De complete gids voor een snelle website - 4: CSS en Javascript bestanden combineren

Karel
17/8/2011
Karel
17/8/2011
Zoekmachine optimalisatie
X
min leestijd
bestanden-combineren-rating

Door zoveel mogelijk bestanden samen te voegen zorg je voor een stuk minder http requests en zodoende voor minder vertraging. De focus komt de laatste tijd steeds meer op het schrijven van modulaire code te liggen waarbij bestanden juist worden gescheiden. De code wordt opgebouwd uit verschillende kleine onderdelen (modules), die samen het uiteindelijke product vormen en ook apart te hergebruiken zijn. Bij websites heeft het scheiden echter een negatief effect op de laadtijd, omdat elk onderdeel dan ook apart geladen moet worden. Tijdens de bouw kan het dus handig zijn om de bestanden (CSS, Javascript) te scheiden, maar uiteindelijk is het toch het beste om deze samen te voegen tot 1 bestand. Dit is de tip der tips, dus als je begint met snelheid optimalisatie is dit de tip om mee te beginnen.

Achtergrond

modulair-bouwen-als-lego

Even wat achtergrondinformatie: afbeeldingen, scripts, informatie over de layout etc. kunnen ofwel in de HTML pagina zelf gezet worden (intern), of als aparte bestanden (extern) worden ingeladen. Het grote voordeel van externe bestanden is dat je de code 1 keer opschrijft en dat daarna elke pagina er gebruik van kan maken. Deze methode wordt dan ook voornamelijk gebruikt en dat is prima. Het probleem met deze modulaire manier is echter dat ontwikkelaars opeens 10 verschillende layout bestanden gaan gebruiken, 15 bestanden voor de interactie en zo verder. Ze delen alles op in kleine stukjes. Dit vertraagt de boel.‘Modulaire code' of te wel het schrijven van code zodat het hergebruikt kan worden (een beetje zoals bouwen met legoblokken) is iets wat goede ontwikkelaars doen. Het is een best practise. Ondanks het nadelige effect op de laadsnelheid, biedt modulair bouwen zoveel voordelen, dat je er als snelheidsoptimalisator maar gewoon mee te dealen hebt.De oplossing is de bestanden samen te voegen, voordat ze naar de bezoeker gestuurd gaan worden. De website gebruikt dus veel verschillende bestanden tijdens de ontwikkelingsfase, om deze vervolgens te bundelen tijdens de implementatiefase.Helaas kunnen we niet alle bestanden van de website samenvoegen tot 1 mega bestand. Het web zit zo niet in elkaar: je kunt alleen bestanden van hetzelfde type samenvoegen. In dit artikel focus ik op het samenvoegen van CSS (code om de layout van een website te bepalen) en Javascript (code om de website interactief te maken).

Voorbeeld

Neem Wordpress (CMS systeem om websites te beheren). Dit is een typisch voorbeeld waarbij het aantal modules al snel de pan uit rijst. Als je een van de thema's kiest om de website een uiterlijk te geven begin je het al te merken: er worden veel te veel bestanden ingeladen. Ik heb een willekeurig thema gekozen en een print screen gemaakt van de HTML van de homepage om je een beeld te geven:

broncode-veel-modules

En dit is slechts het thema. Als je vervolgens een aantal plugins aanzet om functionaliteit toe te voegen worden de bestanden alleen maar meer en meer. De kans is groot dat als je Wordpress hebt (of een ander CMS) dat je website snelheid zeer te lijden heeft onder al die bestanden die moeten worden ingeladen.

De tip in beeld

Om je een goed beeld te geven van deze tip ga ik eerst 10 Javascript bestanden inladen, en vervolgens 1 bestand (met Webpagetest.org, Amsterdam IE7) . Waarbij ik de 10 dus samenvoeg tot 1. Let wel, de totale bestandsgrootte blijft hetzelfde. Ik laad precies dezelfde hoeveelheid in.

Met 10:

10-bestanden-voor-combineren

Met 1:

1-bestand-na-combineren

De versie met 10 bestanden doet er ongeveer 4 seconden over. De versie met maar 1 bestand doet er ongeveer 2,4 seconden over. Er zitten meerdere seconden verschil tussen beide!

Voor de echte ‘performance ninja'

Het is echter niet altijd het beste om alle bestanden ‘klakkeloos' samen te voegen. Als je echt tot het uiterste wilt gaan en je je website echt fine wil tune zodat je zo'n groot mogelijke boost krijgt, zijn er een aantal overwegingen te maken:

  • Bestanden die niet nodig zijn voor het inladen van de website kunnen worden ‘uitgesteld'. Je laadt ze pas op het moment dat ze nodig zijn. Dit betekent dat je die bestanden samenvoegt voor het ‘opstarten' van de website en en andere voor daarna. Dit ga ik in een aparte tip behandelen.
  • Het is niet handig om bestanden die je inlaadt van een andere website/server ook te gaan samenvoegen. De andere server reageert misschien traag of heeft een ander probleem en dan staat jouw website in de wacht (als je het automatisch doet, zie verderop). Ook ontstaan er soms problemen doordat de code niet in de juiste volgorde ingeladen wordt. Daarnaast is de deze code meestal ook niet onder jouw controle waardoor je er geen zeggenschap over hebt.
  • Je kunt een bestand of stuk code waar bezoekers bijna nooit mee in aanraking komen in een eigen bestand plaatsen. Je laadt dit dan alleen in als het opgevraagd wordt door de gebruiker.
  • Kleine stukjes code die niet door andere pagina's gedeeld worden, kunnen in de broncode van de pagina zelf gezet worden.

De juiste afwegingen maken

Het is een zaak van afwegingen. Meestal probeer je een balans te vinden tussen de grootte van de code en hoe vaak het nodig is. Bijvoorbeeld:Stel je hebt een pagina (zoals je privacy policy of disclaimer) die minder bezocht wordt dan de rest en je gebruikt veel code speciaal voor die pagina. Waarom zou je dan al dat extra gewicht aan elke te laden pagina toevoegen. Dan is het beter om de code voor die pagina een eigen bestand te geven.Echter, als de code voor de individuele pagina klein is, dan kan het beter zijn om het wel te combineren. Je bespaart dan een request.Als je echt een ‘ninja' bent kun je ‘bezoekersstromen' op je website in kaart te brengen (alleen als het een grote website is). Als een groep bezoekers vaak van het ene gedeelte van de site naar het andere gaat, hebben ze na verloop van tijd de bestanden van het tweede gedeelte toch nodig. Dan heeft het zin om bij het bezoek van het eerste gedeelte alvast de bestanden van het tweede gedeelte mee te sturen. Bestanden van gedeeltes die je bezoekersgroep bijna nooit bezoekt laat je er dan achterwege.Als je bezoekers hoofdzakelijk 1 enkele pagina bezoeken is het een idee om alle code in de HTML te zetten (intern). Je behaalt immers geen voordeel uit de externe bestanden (daar heb je alleen voordeel van als de bezoeker meerdere pagina's bekijkt) en dan is het gewoon niet efficiënt om al die extra requests te krijgen. Een website als Nederland FM zou hiermee zijn voordeel kunnen doen. De bezoeker bezoekt namelijk 99% van de tijd alleen die ene pagina om naar een radiostation te luisteren en is niet geïnteresseerd in de overige pagina's.Sommige websites kiezen er daarom voor om alle code op de homepage (als dat de drukst bezochte pagina is) intern te zetten en dan voor de andere pagina's externe bestanden te gebruiken. De homepage laadt hierdoor supersnel in. Een goede eerste indruk!

In praktijk

Als je wilt kun je het samenvoegen van bestanden met de hand doen. Het is niet zo moeilijk. Het vergt alleen wat knip en plak werk. Als je dit teveel gedoe vindt, dan zijn er ook een aantal tools die dit knippen en plakken voor je kunnen doen. Zoals CSS Merge. Als je een beetje rond Googeled is er veel te vinden.Maar als je website in ontwikkeling is (en is een website niet altijd in ontwikkeling) dan is het niet de juiste oplossing. Het is erg irritant als je voor elke kleine verandering weer opnieuw moet gaan knippen en plakken. Na een aantal keer heb je er waarschijnlijk genoeg van. Wat je nodig hebt is iets dat alle stappen automatiseert, zodat je er daarna niet meer over na hoeft te denken. Een set and forget oplossing:

Scripts

Als je technisch bent kun je kijken naar een van de vele scripts die er zijn. Van wat ik heb gezien lijkt PHP Minify de beste te zijn.

WordPress

In WordPress heb je aantal plugins waarvan ik WP Minify het beste vind. Het kost je maar een paar klikken en het werkt al!

Schrijf je in voor onze nieuwsbrief

Je bent succesvol ingeschreven voor onze nieuwsbrief!
Er is iets fout gegaan bij het verzenden van het formulier

Wil je meer gratis tips over online marketing?

Bekijk onze gratis downloads

Categorieën

Ontdek hoe wij jouw bedrijf verder kunnen helpen

We hebben je aanvraag succesvol ontvangen, we nemen zo snel mogelijk contact met je op
Er is iets fout gegaan bij het verzenden van het formulier