Pagespeed optimalisatie

06 Dec 2016 |

De tijd die verstrijkt voordat een website op het beeldscherm van de bezoeker komt is tegenwoordig erg belangrijk, niet alleen voor zoekmachines zoals Google, maar ook voor de bezoeker zelf. Men surft tegenwoordig steeds vaker mobiel en ondanks steeds hogere mobiele internetsnelheden laat de snelheid van veel websites nog te wensen over.

Pagespeed optimalisatie

Omdat mobiel verkeer in grote mate toeneemt is het belangrijk dat een website (of in ieder geval het zichtbare gedeelte) direct ingeladen wordt.

De snelheid van een website wordt bepaald door meerdere factoren, denk hierbij aan onder andere de DNS query tijd, website caching, zware content of het veelvuldig gebruik van overbodige en/of externe bronnen. Ook de hardware (bijvoorbeeld processor/vrije schijfruimte/geheugen) en netwerksnelheid van de bezoeker is van belang.

In dit artikel ga ik in op de makkelijkste quick-wins voor een website om een betere score te behalen in de Google Pagespeed Insights tool of bijvoorbeeld de tool van GTMetrix.

Pagespeed facts (via Duda blog):

  • Meer dan 60% van alle websites duurt op een mobiele telefoon 10 seconden of langer om te laden
  • 40% van de bezoekers verlaat een website als deze langer duurt dan 3 seconden om te laden
  • Pagespeed kan impact hebben op AdWords campagnes en Quality Scores
  • Bezoekers spenderen gemiddeld 70% meer tijd en hebben 60% meer pagina weergaven op een snelle website

1) Optimalisatie van afbeeldingen

Over het algemeen valt de meeste winst toch wel te behalen bij afbeeldingen. Vaak uploaden beheerders van een website afbeeldingen in een zo groot mogelijk formaat zodat de afbeelding heel scherp wordt weergeven. Wat ze hierbij vaak vergeten is dat een afbeelding soms meer dan 10MB in grootte kan zijn, dat terwijl sommige websitepagina’s maar +/-150KB in grootte zijn.

Er zijn diverse mogelijkheden om afbeeldingen te optimaliseren, voor WordPress heb je diverse plugins zoals WP Smush, voor Magento een Image Optimizer van Apptrian en als je een eigen server hebt kan je gebruik maken van jpegoptim voor JPG’s en OptiPNG voor PNG’s. Ook zijn er online tools beschikbaar zoals bijvoorbeeld Compressor.io.

Losless of lossy compressie

Bij het kiezen van een optimizer is het belangrijk om te letten op losless of lossy compressie. Bij losless compressie gaat er geen kwaliteit verloren, bij lossy compressie kan het zijn dat de kwaliteit afneemt.

Een andere of aanvullende optie zou zijn om de afbeeldingen te serveren vanaf een losstaand netwerk (CDN), dus bijvoorbeeld vanaf een subdomein, zoals: http://afbeeldingen.mijnwebsite.nl. Het voordeel van het gebruik van een apart netwerk (CDN) is dat het aantal verzoeken wordt verdeeld, en in combinatie met HTTP/2 (zie punt 4) levert dit veel snelheidswinst op.

Naast bovenstaande opties, zou er ook gekozen kunnen worden om de afbeeldingen pas in te laden zodra de bezoeker ze ook daadwerkelijk op zijn scherm krijgt. Een goed voorbeeld hiervan is LazyLoad.

2) Caching

Wanneer jij of een bezoeker voor jou, reeds de website bezocht heeft, dan zou je in beide situaties dezelfde content willen serveren en is het onnodig om de server opnieuw alle data te laten genereren en/of op te laten halen uit de database. Om dit te voorkomen is caching uitgevonden.

Er bestaan verschillende vormen van caching, in dit artikel ga ik enkel in op client-sided caching (in je browser) en server-side caching.

Client-sided caching kunnen we toepassen door op een Apache server een aantal regels aan het .htaccess bestand toe te voegen, op een nginx server is dit iets ingewikkelder en verwijzen we graag naar het volgende artikel over Nginx caching op serversforhackers.com.

Server-sided caching is vaak afhankelijk van het systeem dat je gebruikt. Voor servers kennen we onder andere MemcachedOPcacheAPC Cache en Redis. De configuratie hiervan wordt vaak door systeembeheerders gedaan tenzij je een unmanaged webserver hebt, het beste kan je hiervoor contact opnemen met je hostingprovider om te informeren naar de mogelijkheden.

Als je echter gebruik maakt van bijvoorbeeld WordPress dan is WP Super Cache een prima plugin om de laadsnelheid van je website te verlagen, voor Magento kennen we onder andere Lesti FPC (Full Page Cache).

3) Minimaliseren van HTML, CSS & Javascript bestanden

Vaak bestaan HTML, CSS en Javascript bestanden uit onwijs veel spaties en tabs om de leesbaarheid voor de ontwikkelaars te bevorderen. Echter hebben computers deze onnodige witruimte niet nodig en zouden ze beter af zijn zonder. Want ook deze ballast heeft een negatieve invloed op de PageSpeed.

Er zijn online een hoop tools te vinden welke CSS of Javascript bestanden verkleinen, we refereren liever niet naar tools omdat er afhankelijk van je script nog wel eens fouten willen optreden. Het is dus van belang om de CSS of Javascript na het minimizen goed door te testen.

Voor WordPress adviseren wij om gebruik te maken van Autoptimize, deze plugin kan automatisch alle CSS en Javascript bestanden verkleinen.

4) HTTP/2 en SSL

Wanneer je gebruik wilt maken van http/2 is een SSL certificaat verplicht. Gelukkig bestaan er tegenwoordig gratis SSL certificaten door de introductie van Lets Encrypt. Hoewel Lets Encrypt enorm populair is kan het zijn dat je hostingprovider dit niet aanbiedt. Wij adviseren om hierover contact op te nemen met je hostingprovider die je daar meer over kan vertellen.

Het gebruik van HTTP/2 zorgt ervoor dat het inladen van bronnen (Javascript/CSS/afbeeldingen) tegelijk kunnen plaatsen (multiplexing), terwijl bij HTTP/1 verzoeken op elkaar moeten wachten.

5) Webhosting

Een goede webhosting provider uitkiezen kan ook snelheidswinst opleveren. Bij bepaalde webhosting providers kan het zijn dat je op een omgeving terecht komt waar eigenlijk te veel gebruikers op staan (overselling), ook wil het nog wel nog wel eens voorkomen dat je website wordt geserveerd vanuit een land waar de bezoeker niet vandaan komt. Een mooie oplossing hiervoor is het gebruik van een CDN, bijvoorbeeld Cloudflare.

Let bij het kiezen van een webhosting provider daarom vooral op de garanties die zij aanbieden, de mate van ondersteuning en de beoordelingen van andere klanten.

JVDmedia helpt

Wil je ook een snelle en dynamische website? Wil je ook dat jouw website goed scoort op Pagespeed tests? Neem gerust contact met ons op om de mogelijkheden te bespreken.

Daag ons uit

Wij staan voor samenwerken, korte lijntjes en een nuchtere aanpak. Samen streven naar ultiem online succes! Wil jij ook dé aanpak naar succes ervaren? Neem dan contact op en daag ons uit!

  • 19 Aug

    5 vragen voor een juiste online marketing strategie

    Online marketingstrategie opzetten? Stel jezelf dan deze vijf vragen.

  • 30 Jul

    10 Starter tips over SEO

    SEO, ook wel zoekmachine optimalisatie. Hoe werkt dat nou? Waar moet ik rekening mee houden? Wij geven jou 10 tips die jou extra handvaten geven om te beginnen met SEO.

  • 8 Apr

    Inzicht in de customer journey (2/3)

    De customer journey, je hebt er ongetwijfeld wel eens van gehoord. De term komt nogal eens voorbij, te pas en te onpas, maar is het slechts een hippe marketingterm? Of schuilt er meer achter en kan...