Naar
boven

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

bestanden-combineren-ratingDoor 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-legoEven 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-modulesEn 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!

Meer leren over zoekmachine optimalisatie? Klik hier voor onze gratis e-mailcursus!

Met onze hulp bovenaan in Google?

Bekijk onze cursus zoekmachine optimalisatie, onze dienst of vul onderstaand formulier in:


Over de auteur:

Dit artikel is geschreven door .

Daan Walraven
Daan werkt bij Bikkelhart.
6 reacties op "De complete gids voor een snelle website – 4: CSS en Javascript bestanden combineren"
  • Oscar zegt:
    17 Aug, 2011 om 14:53

    Ik gebruik deze plugin ook al een tijdje.

    Het enige nadeel is dat deze plugin niet kan worden gebruikt in combinatie met de Google Website Optimizer plugin.

    Het probleem daarbij is dat GWO de testpagina’s niet kan valideren omdat de javascript codes extern worden geladen via WP Minify.

    Daardoor kan Google de code niet zien. Ik heb geprobeerd om WP Minify eerst uit te zetten, dan de pagina’s te valideren en daarna weer aan te zetten maar dat werkt niet.

    Heb je een oplossing? Ik heb dit probleem al op het wordpress forum gezet maar ik krijg geen reacties.

    Kan je javascript codes in WP Minify uitschakelen? En zo ja, hoe doe je dat dan?

    Reageren
    • Daan Walraven zegt:
      24 Aug, 2011 om 14:21

      Waarom werkt het niet als je WP Minify uit zet? Als je de plugin uit hebt gezet zou het toch moeten werken? Dan ligt het misschien niet aan de plugin.

      Ik heb zelf soms ook wat problemen met website optimizer, en dit zijn mogelijke oorzaken waar ik mee te maken heb gehad:

      – Als je een caching plugin aan hebt staan moet je eerst de cache leeg maken. Het kan zijn dat website optimizer een pagina te zien krijgt die ‘oud’ is.
      – Soms dan zit het probleem gewoon ergens bij website optimizer zelf. Als je 10 min wacht werkt het opeens wel.
      – Je moet de code precies kopiëren anders geeft optimizer al een melding. Sommige plugins voegen commentaar, cdata stukken en dergelijke toe aan de pagina en dan werkt het soms ook niet goed. Ik voeg dan onder en boven wat enters toe (als dat kan) zodat de code los komt te staan.
      – Soms werkt het niet doordat er veel fouten in de code van de pagina zitten. Er geen doctype declaratie is etc.

      De validatie in website optimizer staat los van of het wel of niet werkt. Dus website optimizer zal wel werken. Alleen je hebt even een probleem met de validatie (het validatieprogrammatje heeft zijn gebreken).

      Daarom bestaat er offline validatie:
      http://www.google.com/support/websiteoptimizer/bin/answer.py?answer=61428

      Dat werkt helaas meestal toch niet zo goed. Maar probeer dat eerst.

      Wat ik zelf doe als het op de een of andere manier niet wilt werken is het volgende. Ik maak twee html bestanden aan met alleen maar de codes erop, en laat die valideren door optimizer. Het is dan wel niet de echte pagina (en je flasht optimizer) maar het werkt wel.

      Je kunt javascript codes uitschakelen in WP Minify uitschakelen. Lees in de documentatie het kopje ‘JavaScript files to exclude from minify’:
      http://omninoggin.com/wordpress-posts/tutorial-wp-minify-options/

      Let op: ‘Enable Minification on External Files’ moet je altijd uit laten staan. Zie dit artikel voor de reden waarom. (Met External bedoelen ze hier bestanden van andere websites).

  • Henri zegt:
    17 Aug, 2011 om 20:50

    Daan, een goed artikel!

    Je kunt ook in je .htaccess gzlib gebruiken om de pagina in te pakken. Wellicht helpt dat ook. En daarnaast ook zo dat alle JS en CSS bestanden altijd nodig zijn? Door alleen in te laden wat nodig is, bespaar je natuurlijk ook.

    Reageren
  • Ton zegt:
    25 Aug, 2011 om 11:25

    Om alles inzichtelijk te maken kun je http://gtmetrix.com/ gebruiken. Je ziet dan waar er (snelheids)winst te halen valt :-)

    Reageren
  • Oscar zegt:
    29 Aug, 2011 om 17:16

    Bedankt voor de uitleg, het is me al gelukt!

    Reageren
  • Julia zegt:
    19 Apr, 2016 om 12:06

    Hallo allemaal,

    Ik ben echt helemaal nieuw in Magento land en heb geen idee van al die technische snufjes. Ik merk nu wel dat mijn website erg traag is en was aan het zoeken hoe ik CSS en javascript kan combineren. Nu lees ik dat ik eigenlijk alleen maar in de systeem configuratie bij ‘JAvascript bestanden samenvoegen’ en CSS bestanden samenvoegen op ‘ja’ Zal moeten klikken…Nu vraag ik me af of het echt zo makkelijk is of dat, zodra ik dit heb gedaan heel mijn pagina eruit ligt?

    Kan mij iemand hierbij helpen aub?

    Alvast bedankt,
    Julia

    Reageren

Reageren