[column] 3 adviezen voor een snelle website

Iedereen kan van deze gratis tool gebruikmaken - die je gepersonaliseerde tips geeft voor jouw website - maar deze tips zijn vaak nog ingewikkelder dan het versnellen zelf. In dit artikel ontrafel ik drie veel voorkomende tips.

 

1.      Geef voorrang aan content boven de vouw

Het moment dat een bezoeker op jouw website landt, ziet hij één scherm van jouw website. Dit eerste aanzicht wordt ook wel de content ‘boven de vouw’ genoemd. Alles hieronder heet (logischerwijs) de content ‘onder de vouw’. De bezoeker hoeft niet naar beneden te scrollen om alle content boven de vouw te bekijken.

Google bedoelt met deze tip dat je bij het inladen van de website voorrang moet geven aan alles wat boven de vouw staat. Dit is immers de belangrijkste content op de website, omdat de bezoeker dit als eerste ziet. Dit geeft de bezoekers de mogelijkheid om direct de gewenste acties op jouw website uit te voeren.

Om dit te bewerkstelligen is het in veel gevallen niet meer nodig om te kunnen coderen. Zo kunnen Wordpress-gebruikers het volgende doen om voorrang te geven aan content boven de vouw:

• Een thema installeren dat dit ondersteunt
• Een plug-in installeren die dit automatisch regelt; zelf raad ik hiervoor de plug-in Autoptimize aan

 

2.      Optimaliseer de afbeeldingen

Het inladen van afbeeldingen - en andere vormen van rich media - duurt voor browsers vaak het langst. Een website zou er uiteraard niet uitzien zonder, maar hoe kunnen we ‘duurzaam’ gebruikmaken van deze verrijking? Dit heeft een aantal aspecten.

• Comprimeren

Allereerst moeten we de afbeeldingen die we willen gebruiken comprimeren. Hiermee wordt de afbeelding verkleind en hoeft de browser minder moeite te laden. Dit kun doen wanneer de afbeelding op de website staat (met een plug-in) of hiervoor al.

Wanneer je het wilt uitvoeren voordat de afbeelding op de website staat raad ik Image Compressor aan. In het geval dat je het wilt doen wanneer de afbeelding al op de website staat raad ik WP Smush aan. Dit is een plug-in die automatisch alle afbeeldingen ‘smushed’ (comprimeert)

• Afbeeldingsindelingen

Gelukt? Dan kunnen we verder met de afbeeldingsindelingen. Voorbeelden van oude afbeeldingsindelingen zijn PNG of JPEG. Als je een screenshot maakt op een Mac is dit automatisch een PNG (in ieder geval als je een oude Mac hebt, zoals ik).

Google wilt echter graag dat je gebruikmaakt van modernere afbeeldingsindelingen. Ze raden in de Google Page Speed-tool indelingen aan zoals JPEG 2000, JPEG XR en WebP.

Een mooie tool om je afbeeldingen (PNG/JPEG) te veranderen naar de modernere varianten is MyGeodata Converter.

De reden hiervoor is dat het comprimeren van deze afbeeldingsindelingen eenvoudiger en efficiënter is. Zo bespaar je nóg meer KB’s (die niet hoeven te worden ingeladen).

• Afbeeldingsformaten

Hoe zwaar een afbeelding is, wordt mede bepaald door de grootte van een afbeelding. Een afbeelding met de afmetingen 1024 x 768 is in veel gevallen zwaarder dan een afbeelding van 640 x 480.

Zo zie ik veel websites met een logo waarbij de afmetingen 250 x 100 volstaat een foto hebben van bijvoorbeeld 300 x 600. Het gebruiken van de juiste afbeeldingsformaten is niet veel werk: Het bespaart daarentegen wel enorm veel onnodige MB’s.

• Laad afbeeldingen die niet in beeld zijn nog niet

Google geeft wanneer het aankomt op het gebruiken van afbeeldingen ook de volgende tip. Laad afbeeldingen die niet in beeld zijn nog niet. Dit heeft overlappende gebieden met ‘geef voorrang aan content boven de vouw’.

Om deze tip goed uit te voeren, zou ik aanraden om gebruik te maken van lazy loading. Dit is een manier om de afbeeldingen in te laden tijdens het scrollen van de bezoeker. Dus, wanneer de bezoeker naar beneden scrolt worden de afbeeldingen gaandeweg ingeladen.

 

3.      Maak gebruik van browser caching

Elke keer dat een webpagina wordt ingeladen moet de browser alle bestanden downloaden om te tonen. Deze bestanden zijn bijvoorbeeld de HTML-, CSS- en JavaScript-bestanden.

Sommige pagina’s bevatten maar een aantal van deze bestanden en zijn kleiner in formaat. Andere pagina’s bevatten tientallen van deze bestanden. Deze pagina’s zijn daardoor relatief zwaar om in te laden. De browser moet tientallen keren heen en weer om deze bestanden op te halen (arme browser..)

Gelukkig hebben we een browser caching! Browser caching zorgt ervoor dat terugkerende bezoekers niet dezelfde wachttijd krijgen. De terugkerende bezoekers hoeven sommige delen van de website bijvoorbeeld maar één keer per week in te laden.

Dit geldt vaak voor de statische elementen van een pagina. Denk hierbij aan het logo van een website. Die zal niet elke dag veranderen, waardoor het onnodig is om deze bij ieder bezoek opnieuw in te laden.

Voor Wordpress zijn er meer dan genoeg plug-ins om dit voor je website in te stellen. Ik gebruik zelf W3 Total Cache, maar dat betekent niet dat die de beste voor iedere website is.

 

Conclusie

Het versnellen van je websitesnelheid is belangrijk en Google wil je hier graag bij helpen, maar kan weleens cryptisch overkomen. In mijn optiek is het versnellen van een website het eenvoudigst met Wordpress. Met name voor de mensen die geen kennis van coderen hebben is dit een aanrader.

Wil je zelf je website versnellen? Blijf dan testen. Elke aanpassing in je website kun je gelijk terugzien in de Google Page Speed-tool. Hierdoor kun je zien of je aanpassingen (averechts) werken.

 

Dit blog is geschreven door Ralf van Veen, SEO Specialist