Snellere website: Verdeel, combineer en minimaliseer

18 Mei 2010
1
 

Snelle websites dragen bij aan een goede gebruikerservaring.  Google neemt sinds April 2010 de snelheid van uw website mee in zijn zoekcriteria. Dit blog laat 3 technieken zien die uw website sneller kunnen maken.

Een website sneller maken is een kwestie van technische aanpassingen. Niet direct wegklikken nu als  u niet bezig wilt zijn met techniek.  
Onderstaande punten zijn zo beschreven zodat u hiermee kennis opdoet en hiermee bij uw websitebouwer of programmeur terecht kunt. 


Verdeel, combineer en minimaliseer

Zoals in het eerste deel uit deze serie beschreven , gebruiken we de Page Speed add-on voor Firefox om een technische analyse te doen van onze site. De volgende 3 adviezen zijn quick-wins, makkelijk te begrijpen en makkelijk te implementeren voor elke programmeur.

  • Verdeel. Elke webbrowser (Internet Explorer, Firefox, Chrome, etc...) heeft zijn beperkingen. Een van de beperkingen is dat een webbrowser maar van 1 domein(bijv. www.increatie.nl)  2 bestanden tegelijk kan dowloaden. Onderstaand plaatje laat goed zien hoe dit werkt.snelheid van een website verhogen
    In dit schema worden 6 bestanden gedownload.  Zoals gezegd kan de webbrowser er slechts 2 per keer downloaden. Dit resulteert in 3 downloads die NA elkaar gebeuren.  We zijn dan 300 milliesecondes verder voordat alles ingeladen is.
    Om dit te verhelpen stellen we het volgende in: Dit betekent dat in de eerste ronde downloads tegelijk sub1.increatie.nl en sub2.increatie.nl aangesproken kunnen worden. .
    1. We maken 2 subdomeinen in die naar dezelfde plek wijzen als het hoofddomein. Dit zijn sub1.increatie.nl en sub2.increatie.nl. Het bestand sub1.increatie.nl/stylesheet1.css is dus hetzelfde als www.increatie.nl/stylesheet1.css.
    2. We geven aan dat stylesheet1.css en stylesheet2.css vanaf sub1.increatie.nl gedownload moeten worden.
    3. We geven aan dat stylesheet3.css en scriptfile1.js vanaf sub2.increatie.nl gedownload moeten worden.
    4. We geven aan dat scriptfile2.js vanaf sub1.increatie.nl gedownload moet worden.
    Dit resulteert in onderstaand schema.
    snelheid van uw website verhogen
    Er zijn nu dus maar 2 downloadrondes nodig. Dit scheelt ons 100ms aan laadtijd
  • Combineer. Uw website maakt waarschijnlijk gebruik van meerdere CSS (opmaak) en Javascript (functionaliteit) bestanden. De code die hierin staat hoeft niet perse in meerdere bestanden te staan. Dit is handig voor het menselijke overzicht maar zoekmachines en browsers kunnen dit prima uitlezen als het in 1 bestand staat. Het voordeel van 1 bestand gebruiken is dat er niet meerdere bestanden gedownloaden hoeven te worden. Dit scheelt in het aantal verbindingen die de browser moet maken. Zorg dus voor 1 CSS bestand en 1 Javascript bestand.
  •  Minimaliseer.  De laatste quick-win is het minimaliseren(minify-en) van Javascript en CSS bestanden. Vergelijk eens de volgende 2 stukken code:
    1.    “function GetBoxes(value) {
       loadProduct(value);
        window.location.hash = value;
     }”
    en
    2.    “function GetBoxes(value) { loadProduct(value); window.location.hash = value; }”
    Het tweede stuk code is duidelijk korter. Geen lege regels en zo weinig mogelijk spaties. Dit heet minify-en. Zorg voor zoveel mogelijk geminify-de bestanden, deze verkorten het inlezen en de verwerkingstijd hiervan.
    2 handige tools die hiervoor gebruikt kunnen worden zijn
    • javascriptcompressor.com. Een tool om  javascript bestanden mee te verkleinen.
    • cssdrive.com. Hier is een goede CSS compressor te vinden.

Meer adviezen over het sneller maken van je website?

In dit blog zijn 3 quick-wins genoemd om de snelheid van je website te verhogen, in het volgende blog gaan we 3 iets uitgebreidere technische onderdelen bespreken. Er zijn naast deze punten nog meer punten die de snelheid kunnen verbeteren. Wilt u meer informatie over een bepaalde onderwerp / probleem dat verband houdt met de snelheid van uw website? Reageer en als dit probleem bij meerdere mensen speelt, dan zal ik dit probleem in een apart blog bespreken..

Vincent Fabris
Vincent Fabris

Technisch Directeur

Vincent leest graag en heeft een passie voor techniek. Als technisch directeur is hij steeds op zoek naar technologisch hoogstandjes om Apollo CMS te verbeteren.






Reacties
1
door Vincent, 26 Jul 2012
Hallo, ik ben zeer nieuwsgierig naar de afbeeldingen, maar die doen het niet op mijn laptop. Mvg Vincent
Reageren
Naam
Email
Reactie

Website advies of een idee? Kom naar ons gratis spreekuur!

Eerstkomende plaats: Wanneer het u schikt!

Inschrijven