Kennis - Het online marketing blog van Tribal

Online marketing is een vak apart en een wereld die snel verandert. Wij laten ons dagelijks inspireren door de nieuwste ontwikkelingen, tips & tools en allerlei nuttige toepassingen. Hieronder lees je welke kennis wij in huis hebben.

5 tips om website laadtijd te verminderen

Door: Arturo Ronchi

Geschatte leestijd: 3 minuten

Verminder de laadtijd van uw website

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!

Discussie- 6 reacties

Bartjan

9 september 2009, 11:31

Een aanvulling op “2. Verminder het aantal HTTP requests”

Een andere mogelijkheid om het aantal HTTP requests te verminderen is gebruik te maken van CSS sprites. Dit houd samengevat in dat je alle afbeeldingen samenvoegt in één afbeelding.
Het effect hiervan is dat je maar één HTTP requests nodig is voor alle afbeeldingen en vaak zijn dat er al gauw tien.
Vaak is de totale bestandsgrootte van de afbeeldingen na het samenvoegen ook kleiner wat ook weer snelheidswinst geeft.

Een nadeel is echter dat het wijzigen van de website weer iets lastiger wordt.
Meer informatie over CSS sprites kan je hier vinden: https://css-tricks.com/css-sprites/

Reageer hier op

Remi van Beekum (Traffic4u)

9 september 2009, 11:43

Leuke post, handige tips.
Ik twijfel een beetje over tip 5. Door dingen extern te plaatsen maak je je site ook afhankelijk van die andere sites. En als die langzaam zijn, ben jij het ook.
Maar wellicht gaat dit niet echt op bij video maar meer bij meetscripts en vaker bannerscripts. Je ziet toch regelmatig sites die ergens halverwege de pagina stoppen met laden, van externe (trage) servers banners gaan halen, en dan pas de rest van de site gaan opbouwen. Erg irritant.

Reageer hier op

Aaron Peters

10 september 2009, 15:33

Dag Wesley,

als specialist ogv laadtijdoptimalisatie wil ik graag reageren op dit artikel.
Allereerst: goed dat je dit artikel schrijft en aandacht besteedt aan het onderwerp!

Hieronder lees je een aantal opmerkingen/aanvullingen:

Ad 1.
Je advies is om Javascript onderaan in de te plaatsen.
Dat is geen goed advies.
Javascript dient zoveel mogelijk buiten de gehouden te worden.
Een webbrowser toont niets in het scherm totdat alles in de is geladen.
Door de vol te stoppen met Javascript verhoog je de tijd dat een bezoeker naar een leeg scherm kijkt.
Tevens is het zo dat Javascript een relatief sterk blokkerend effect heeft op het laden en renderen van de webpagina, veel meer dan images en CSS, en kan daarom laat worden aangeroepen, wanneer een groot deel van de pagina al in de browser zichtbaar is.
De meeste Javascript hoeft ook helemaal niet in de , maar kan zonder gevolgen worden geplaatst onderaan in het HTML bestand.

Overigens klopt je advies wel om JS in de onder de CSS te zetten (als je dan toch besluit om de JS in de te zetten).
Inline JS dient overigens in de *boven* de CSS geplaatst te worden.

Ad 2.
De allerbelangrijkste tip voor het reduceren van het aantal HTTP requests is: zorg dat je de browser cache goed benut.
Bestanden die zelden veranderen (images, CSS, JS) dienen zgn. Expires headers te hebben zodat de browser weet dat het bestand bv. het komende jaar geldig is.
Bij een volgend bezoek hoeft de browser het bestand niet nogmaals op te vragen, want het staat in de cache. Je server load en de laadtijd kan enorm afnemen als je dit goed doet.

@Bartjan: CSS sprites is een goede techniek om de laadtijd te verbeteren.
Het maken en onderhouden van de sprite image en CSS kost wat tijd ja, maar het effect is vaak groot.

Ad 4.
Een belangrijk onderdeel van images optimalisatie is compressie toepassen, ook wel bekend als ‘crunchen’.
De bestandsgrootte van veel images op websites kan eenvoudig en met gratis tools – zonder kwaliteitverlies! – tot wel 80% kleiner worden gemaakt.

– Aaron

Reageer hier op

Wesley Sussenbach

10 september 2009, 16:06

Bedankt voor je reactie Aaron, maar ik denk dat je tip 1 niet goed gelezen hebt. Ik heb nergens het advies gegeven om JavaScript onderin de te plaatsen. Het gaat hier puur over de verwijzingen naar de externe .js bestanden, zodat JavaScript juist uit de broncode blijft.

Reageer hier op

Aaron Peters

10 september 2009, 21:34

(zie nu dat het speciale karakters in de comments niet worden getoond. Hierdoor is mijn comment soms weinig zinvol….)

Wesley,

je schrijft: zet alle losse JavaScript code in externe .js bestanden en plaats de verwijzingen naar deze bestanden onderin de head sectie.
Maw: zet losse JS in een script.js, en verwijs naar script.js onderaan in de head.
Mijn advies: verwijs niet in de head naar script.js, maar plaats die verwijzing in de body, zover mogelijk onderaan.
JS in de head vertraagt, inline en verwijzingen naar externe JS.

Reageer hier op

Floris

11 maart 2011, 22:43

Het aantal databasequeries is ook zeer bepalend voor de laadsnelheid.

Reageer hier op

Blijf op de hoogte van handige kennis en het laatste nieuws van je favoriete online marketing bureau:

INSCHRIJVEN VOOR ONZE NIEUWSBRIEF