Snellere website: Verdeel, combineer en minimaliseer

314 views, 0 reacties, 112 dagen geleden door Vincent Fabris

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.

Snellere website technieken

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.
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.

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..

Deel dit op

Vincent Fabris

Vincent Fabris is technisch directeur binnen INcreatie. Hij zorgt dat de modernste technieken weer terugkomen in alle applicaties die hij bouwt. Hij houdt van sporten en dan vooral van worstelen met programmeertalen.