Hoe optimaliseer ik voor een zo snel mogelijke site?

Hieronder staat een lijst van de verschillende technieken die ik gebruik om een site zo snel mogelijk op het scherm te krijgen. Geen geneuzel met preloaders, maar gebruikers kunnen lekker snel beginnen.

Een goede manier om de snelheid van een site te meten is Google Pagespeed of Yahoo YSlow. Deze sites geven ook direct tips voor het verbeteren van de snelheid.

Gebruik maken van SVG (vector-afbeeldingen)

SVG (Scalable Vector Graphics) zijn op elk retina-scherm scherp, hebben een kleine bestandsgrootte, en zijn dus snel te downloaden. Handig voor logo’s en iconen. Voor foto’s is jpg of png nog steeds het best.

Javascript

Ik werk vooral met jQuery, soms met de light versie, en soms met zepto. Elke bibliotheek heeft z’n voor en nadelen.

Responsive afbeeldingen

Voor foto’s gebruik ik een techniek die kijkt naar de grootte van het scherm, en voor bijv. een klein scherm een kleine versie van de foto gebruikt. Dit betekent dat de bestandsgrootte soms 10 keer kleiner is.

Alles minimaliseren

Alle html, css en javascript bestanden worden geminimaliseerd. Dat betekent dat ik alle spaties en enters uit de bestanden haal. Hierdoor worden ze kleiner, en kan de browser ze sneller downloaden.

Afbeeldingen optimaliseren

Alle afbeeldingen die ik gebruik optimaliseer ik om de bestandsgrootte zo klein mogelijk te maken.

Bestanden gezipt aanleveren

Het is mogelijk om bestanden gezipt te laten downloaden. Hierdoor worden ze nog weer kleiner. Zepto gaat hierdoor bijvoorbeeld van 27 naar 11 kB.

Beperken van het aantal requests

Een van de beste optimalisaties is het beperken van het aantal bestanden die gedownload worden. Ik probeer, op allerlei manieren, dit aantal zo klein mogelijk te houden.

Javascriptbestanden onderaan

De ouderwetse manier om javascriptbestanden toe te voegen was ze direct in de html te zetten. Dit blokkeert een browser met verder tekenen van de site. Ik maak gebruik van Labjs om bestanden asynchroon toe te voegen.

De server

Als ik met WordPress werk installeer ik, indien nodig, WP Super Cache. Deze plugin maakt dat de site veel sneller reageert als er veel traffic is.

Front-end optimalisaties

Met m’n eigen site heb ik geprobeerd om de perfecte pagespeed score te halen. Daarna heb ik uitgezocht wat die optimalisatie’s eigenlijk betekenen. Daar heb ik deze blogpost over geschreven.

Een performance budget

Indien nodig werk ik met een performance budget. Dit betekent dat alle onderdelen bij elkaar opgeteld een max aantal kb’s mogen zijn. Dit getal komt niet zomaar uit de lucht vallen, het gaat er om dat we 20% sneller zijn dan je drie grootste concurrenten.

Dit is een kort overzicht van waar ik op let. Ik ben continu bezig met het zoeken naar meer manieren om m’n sites nog sneller en beter te maken, want het optimaliseren van zelfs de kleinste details is verslavend 🙂