Snelheid is op Internet de belangrijke sleutel tot succes. Kijk maar naar het succes van Google. Een belangrijke reden van het succes is de snelheid van hun zoekmachine en aanverwante producten. Door de laadtijd van je website te optimaliseren kun je conversiepercentages omhoog krijgen, klanten winnen en ze tevreden houden.
Met behulp van de volgende tips kun je de laadtijd van je website flink reduceren:
1. Optimaliseer de HTML
Begin met het verzamelen van alle ‘style’ elementen in de broncode, zodat we pure HTML code over houden. Kijk naar alle pagina’s en kijk of bepaalde elementen efficiënter kunnen worden opgebouwd. Tabellen kunnen bijvoorbeeld naar CSS worden omgezet. Als eenmaal alle <style> elementen verzameld zijn, kunnen ze in één of meerdere CSS bestanden geplaatst worden.
- Zet alle visuele aspecten van de pagina in een CSS bestand en plaats de verwijzing bovenin de <head> sectie van de code.
- Zet alle losse JavaScript code in externe .js bestanden en plaats de verwijzingen naar deze bestanden onderin de <head> sectie. Dit zorgt ervoor dat webbrowsers eerst de content en de visuele aspecten kunnen laden, en zich dan pas gaan bemoeien met de JavaScript van de pagina.
2. Verminder het aantal HTTP requests
Elk onderdeel van een webpagina dient een verzoek in bij de server. Als je 30 afbeeldingen op de webpagina hebt staan, dan dient iedere afbeelding een apart verzoek in bij de server. Als we spreken over een hoog aantal objecten (10+) dan domineren deze verzoeken de laadtijden van de pagina enorm. Door dit aantal objecten omlaag te brengen, verminder je het aantal verzoeken naar de server en dus ook de laadtijd van de desbetreffende pagina.
- Converteer grafische tekst naar CSS
Tekst op basis van afbeeldingen kosten nu eenmaal meer tijd om in te laden. Gebruik daarom CSS-style headers om dezelfde of een vergelijkbare uitstraling te krijgen.
- Combineer externe CSS en JavaScript bestanden
Des te minder verwijzingen er staan naar CSS en JavaScript bestanden, des te minder verzoeken er bij de server ingediend hoeven te worden.
- Gebruik géén frames
Jawel, er wordt nog steeds gebruik van frames gemaakt. Vraag me niet waarom. Zoekmachines zien frames als losse pagina’s en worden dan ook apart beoordeeld op relevantie. Het zorgt verder ook voor veel gebruikersvriendelijkheidproblemen.
3. Converteer JavaScript naar CSS
Er wordt veel gebruik gemaakt van JavaScript voor diverse doeleinden, waaronder menu’s. Het voornaamste probleem dat JavaScript met zich meedraagt is dat zoekmachines deze techniek niet kunnen lezen en het vereist een apart bestand dat de laadtijd weer langer maakt.
Maak gebruik van CSS i.p.v. JavaScript voor functies als iets zichtbaar/onzichtbaar maken, een dropdown, etc. Je moet uiteraard wel redelijk bekwaam zijn in zowel CSS als JavaScript om dit voor elkaar te krijgen.
4. Gebruik de juiste afbeeldingformaten en -grootten.
Afbeeldingen zijn over het algemeen de grootste bestanden van een website en nemen de meeste tijd in beslag om te laden. Het is dus van belang dat afbeeldingen zo goed mogelijk geoptimaliseerd zijn.
Maak ten eerste geen gebruik van de TIFF en BMP formaten. JPEG, GIF en PNG zijn voor websites de meest gangbare afbeeldingformaten. Elk formaat heeft weer zo z’n voor- en nadelen, en elk van deze drie formaten is weer beter toepasbaar op ander beeldmateriaal:
- Gebruik JPEG voor foto’s, zoals productafbeeldingen. JPEG biedt de beste compressie. Er zit qua beeldkwaliteit weinig verschil tussen hoge of gemiddelde compressie, maar de bestandgrootte kan soms de helft kleiner zijn.
- Gebruik GIF voor icoontjes, achtergronden en kleine visuele elementen.
- Gebruik PNG voor hoge kwaliteit screenshots, transparante elementen en icoontjes.
Aanvullende optimalisatie tip:
- Pas de resolutie van de afbeelding aan naar de exacte grootte die je op de website gebruikt. Extra resolutie die niet gebruikt wordt kost onnodig veel tijd.
5. Gebruik externe host voor video’s
Het optimaliseren van video’s heeft alleen zin als je ze zelf ook host op de website. Maar in de tijd van online video is dit meer nodig. Losse videobestanden kosten heel veel bandbreedte en vereisen handmatige optimalisatie. Door een video te uploaden, naar b.v. YouTube , Vimeo of blip.tv, en dan te implementeren op je website bespaar je internetverkeer en biedt je de video’s in hoge kwaliteit aan.
De hoofdregel bij dit alles is dat de hoofdcontent altijd voor gaat. Bezoekers willen hun gevraagde informatie direct kunnen benaderen. Zorg er daarom voor dat de gevraagde content altijd als eerste geladen wordt. Als bezoekers op een pagina terecht komen waar ze gebruik willen maken van een bepaalde applicatie, laadt dan eerst die applicatie in en dan de rest.
Ik hoop dat dit artikel geholpen heeft, en website-eigenaren aan het denken heeft gezet. Uiteraard zijn er nog meer tips om laadtijd te verminderen die ik heb overgeslagen. Laat ze achter in de reacties hieronder!