Het grootste obstakel dat ervaren wordt op mobiele apparaten door onze bezoekers is het wachten op langzame pagina’s. 53% van de bezoekers verlaat zelfs een site met een laadtijd langer dan 3 seconden, terwijl heel veel webshops hier lang niet aan voldoen. Tijdens deze presentatie leer je hoe je met een paar simpele optimalisaties die laadtijd van jouw website reduceert.

1. Sitespeed: geen tijd te verliezen
Patty Bastiaansen
Webanalytics & Conversie-optimalisatie Consultant

2. Even voorstellen..
p.bastiaansen@ism.nl
linkedin.com/in/pattybastiaansen
Patty Bastiaansen
Webanalytics & Conversie optimalisatie consultant| ISM eCompany
Consultant voor o.a. Hunkemöller, Colourful Rebel, Woonboulevard Poortvliet en Technische Unie
2 jaar werkervaring als Marketeer CRO & Analyse bij Bax Music
Master Bedrijfscommunicatie & Digitale Media – Tilburg University
Specialisme: sitespeed

3. 150 x
per dag
Nomophobia
A fear of being without mobile device,
power source, or service area
Hoe vaak gebruik je je telefoon op een dag?

4. Slim – Simpel - Snel
Slim Simpel Snel

5. Inhoudsopgave
1. Waarom conversiespecialisten moeten focussen op
snelheid
2. Hoe optimaliseer je de laadtijd van een trage
webshop
3. Resultaten aan de hand van een case
4. Key takeaways

6. Waarom conversiespecialisten moeten focussen op snelheid

7. 16%
11%Anders
Waar heb je de meeste hekel aan wanneer je aan het surfen bent op een mobiel apparaat?
Bron:https://webmasters.googleblog.com/2015/04/mobilemadness-campaign-to-help-you-go.html
Pop-ups die getoond worden
Obstakels wegnemen

8. Hoe bezoekers zich gedragen bij een lange laadtijd
Bron: Think With Google Research Study: “The Need for Mobile Speed: How Mobile Latency Impacts Publisher Revenue”

9. Hoe bezoekers zich gedragen bij een lange laadtijd

10. Hoe bezoekers zich gedragen bij een lange laadtijd

11. Prioriteit binnen conversieoptimalisatie

12. Hoe optimaliseer je de laadtijd van een trage webshop

13. Het is als... verhuizen naar een nieuw appartement.
Het is een veel sneller proces indien:
Geef een goede eerste indruk
Bezoekers willen de content boven de vouw zo snel mogelijk zien. Laad
belangrijke content boven de vouw daarom eerst en maak de webpagina
bruikbaar binnen 3 seconden.
Verminder het aantal verzoeken
Hoe minder vaak de browser een verzoek nodig heeft vanaf de server, hoe
sneller de laadtijd
Verminder pagina gewicht
Hoe minder bytes de pagina hoeft te laden, hoe lichter de pagina is en hoe
sneller de pagina laad
Laadtijd KPI’s | Wat zijn de KPI’s?
Speed Index
Requests
Page Weight
Start Render
Laat zo snel mogelijk iets gebeuren op het scherm
Hoe sneller een request op en neer gestuurd wordt tussen de browser en de server, hoe
sneller de bezoeker iets op het scherm ziet gebeuren.
Je de meest essentiële items eerst kunt uitpakken zodat de
nieuwe plaats al snel als thuis voelt
Je hebt minder ritten tussen de verhuiswagen en het appartement
De dozen zijn allemaal licht en daarom makkelijker te verplaatsen
Je sneller op en neer rijdt zodat je snel resultaat ziet

14. Laadtijd KPI’s | Optimaliseren
Speed Index Requests Page WeightStart Render
Zorg ervoor dat de bezoeker zo
snel mogelijk iets ziet gebeuren op
het scherm
Doelstelling: < 1 seconde

15. Laadtijd KPI’s | Start Render

16. Laadtijd KPI’s | Start Render
Gebruikers blijven geconcentreerd tot een
responsetijd van maximaal 1 seconde
Bron: Jakob Nielsen
Versnel de server responsetijd
Zorg dat CSS en HTML eerder ingeladen worden dan
scripts

17. Laadtijd KPI’s | Optimaliseren
Speed Index Requests Page WeightStart Render
Zorg ervoor dat de bezoeker zo
snel mogelijk iets ziet gebeuren op
het scherm
Doelstelling: < 1 seconde
Zorg ervoor dat belangrijke content
boven de vouw zo snel mogelijk te
zien is.
Doelstelling: < 3.000

18. Laadtijd KPI’s | Speedindex

19. Laadtijd KPI’s | Speedindex
F12 / Inspecteren
Google Chrome DevTools
Network

20. Laadtijd KPI’s | Speedindex
Geef prioriteit aan content boven de vouw
Vermijd scripts die het weergeven van content boven de vouw blokkeren

21. Laadtijd KPI’s | Optimaliseren
Speed Index Requests Page WeightStart Render
Zorg ervoor dat de bezoeker zo
snel mogelijk iets ziet gebeuren op
het scherm
Doelstelling: < 1 seconde
Zorg ervoor dat belangrijke content
boven de vouw zo snel mogelijk te
zien is.
Doelstelling: < 3.000
Zorg ervoor dat de browser zo min
mogelijk verzoeken nodig heeft
vanaf de server
Doelstelling: 80 requests

22. Laadtijd KPI’s | Requests
F12 / Inspecteren
Google Chrome DevTools
Network

23. Laadtijd KPI’s | Requests
Maak gebruik van browser caching, zodat de browser minder vaak een verzoek nodig heeft vanaf de server
Laad alleen pixels in die toegevoegde waarde leveren
Voeg requests waar mogelijk samen
Laad requests die enkel van toepassing zijn voor desktop niet in op mobiel

24. Laadtijd KPI’s | Optimaliseren
Speed Index Requests Page WeightStart Render
Zorg ervoor dat de bezoeker zo
snel mogelijk iets ziet gebeuren op
het scherm
Doelstelling: < 1 seconde
Zorg ervoor dat belangrijke content
boven de vouw zo snel mogelijk te
zien is.
Doelstelling: < 3.000
Zorg ervoor dat de browse zo min
mogelijk verzoeken nodig heeft
vanaf de server
Doelstelling: 80 requests
Zorg ervoor dat de pagina zo
min mogelijk bytes hoeft in
te laden.
Doelstelling: 1 MB

25. Laadtijd KPI’s | Page Weight
F12 / Inspecteren
Google Chrome DevTools
Network

26. Laadtijd KPI’s | Page Weight
Optimaliseer je afbeeldingen
https://compressor.io/
Streef er naar afbeeldingen <53 KB te houden
Vermijd het gebruik van afbeeldingen die na compressie nog steeds > 100 KB zijn
Minimaliseer overige resources als HTML, CSS en JavaScript

27. Resultaten aan de hand van een case

28. Hoe snel is primera.nl?
5.05 s 6.43 s 9.22 s 16.21 s 21.12 s
De gebruikerservaring op de belangrijkste mobiele landingspagina: www.primera.nl
VoltooidL a d e n . . .
Visually complete Fully loaded

29. 0 – meting Primera homepage – Meeste landingen op mobiel
www.primera.nl
Hoe sneller een request op en neer gestuurd
wordt tussen de browser en de server, hoe
sneller de bezoeker iets op het scherm ziet
gebeuren.
5.05 s
Start Render

30. 0 – meting Primera homepage – Meeste landingen op mobiel
www.primera.nl
Hoe sneller een request op en neer gestuurd
wordt tussen de browser en de server, hoe
sneller de bezoeker iets op het scherm ziet
gebeuren.
5.05 s
Bezoekers willen de content boven de vouw zo
snel mogelijk zien. Laad belangrijke content
boven de vouw daarom eerst.
16.2 s
Start Render
Speed Index

31. 0 – meting Primera homepage – Meeste landingen op mobiel
www.primera.nl
Hoe sneller een request op en neer gestuurd
wordt tussen de browser en de server, hoe
sneller de bezoeker iets op het scherm ziet
gebeuren.
5.05 s
Bezoekers willen de content boven de vouw zo
snel mogelijk zien. Laad belangrijke content
boven de vouw daarom eerst.
16.2 s
Hoe minder vaak de browser een verzoek
nodig heeft vanaf de server, hoe sneller de
laadtijd 164
Start Render
Speed Index
Requests

32. 0 – meting Primera homepage – Meeste landingen op mobiel
www.primera.nl
Hoe sneller een request op en neer gestuurd
wordt tussen de browser en de server, hoe
sneller de bezoeker iets op het scherm ziet
gebeuren.
5.05 s
Bezoekers willen de content boven de vouw zo
snel mogelijk zien. Laad belangrijke content
boven de vouw daarom eerst.
16.2 s
Hoe minder vaak de browser een verzoek
nodig heeft vanaf de server, hoe sneller de
laadtijd 164
Hoe minder bytes de pagina hoeft te laden,
hoe lichter de pagina is en hoe sneller de
pagina laad
2,9 MB
Start Render
Speed Index
Page Weight
Requests

33. Verbeterpunten
Start render Speed index Requests Page Weight
Actiepunten

34. Verbeterpunten
Start render Speed index Requests Page Weight
Actiepunten
Server response time
versnellen

35. Verbeterpunten
Start render Speed index Requests Page Weight
Actiepunten
Server response time
versnellen
JavaScript en CSS in
content boven de vouw
die het weergeven
blokkeren, verwijderen
Prioriteit geven aan
zichtbare content

36. Verbeterpunten
Start render Speed index Requests Page Weight
Actiepunten
Server response time
versnellen
JavaScript en CSS in
content boven de vouw
die het weergeven
blokkeren, verwijderen
Combineer resources
Prioriteit geven aan
zichtbare content
Gebruik maken van
browsercaching

37. Verbeterpunten
Start render Speed index Requests Page Weight
Actiepunten
Server response time
versnellen
JavaScript en CSS in
content boven de vouw
die het weergeven
blokkeren, verwijderen
Combineer resources
Afbeeldingen
optimaliseren
Prioriteit geven aan
zichtbare content
Gebruik maken van
browsercaching
Javascript verkleinen
CSS verkleinen
HTML verkleinen

38. Resultaten
www.primera.nl 0-meting
Hoe sneller een request op en neer gestuurd
wordt tussen de browser en de server, hoe
sneller de bezoeker iets op het scherm ziet
gebeuren.
5.05 s
Bezoekers willen de content boven de vouw
zo snel mogelijk zien. Laad belangrijke
content boven de vouw daarom eerst.
16.2 s
Hoe minder vaak de browser een verzoek
nodig heeft vanaf de server, hoe sneller de
laadtijd 164
Hoe minder bytes de pagina hoeft te laden,
hoe lichter de pagina is en hoe sneller de
pagina laad
2,9 MB
Start Render
Speed Index
Page Weight
Requests

39. Resultaten
www.primera.nl 0-meting doelstelling
Hoe sneller een request op en neer gestuurd
wordt tussen de browser en de server, hoe
sneller de bezoeker iets op het scherm ziet
gebeuren.
5.05 s < 1 s
Bezoekers willen de content boven de vouw
zo snel mogelijk zien. Laad belangrijke
content boven de vouw daarom eerst.
16.2 s < 3 s
Hoe minder vaak de browser een verzoek
nodig heeft vanaf de server, hoe sneller de
laadtijd 164 120
Hoe minder bytes de pagina hoeft te laden,
hoe lichter de pagina is en hoe sneller de
pagina laad
2,9 MB 2 MB
Start Render
Speed Index
Page Weight
Requests

40. Resultaten
www.primera.nl 0-meting doelstelling resultaat
Hoe sneller een request op en neer gestuurd
wordt tussen de browser en de server, hoe
sneller de bezoeker iets op het scherm ziet
gebeuren.
5.05 s < 1 s 0.67 s
Bezoekers willen de content boven de vouw
zo snel mogelijk zien. Laad belangrijke
content boven de vouw daarom eerst.
16.2 s < 3 s 3.8 s
Hoe minder vaak de browser een verzoek
nodig heeft vanaf de server, hoe sneller de
laadtijd 164 120 134
Hoe minder bytes de pagina hoeft te laden,
hoe lichter de pagina is en hoe sneller de
pagina laad
2,9 MB 2 MB 2,1 MB
Start Render
Speed Index
Page Weight
Requests

41. Resultaten
www.primera.nl 0-meting doelstelling resultaat t.o.v. 0 -meting
Hoe sneller een request op en neer gestuurd
wordt tussen de browser en de server, hoe
sneller de bezoeker iets op het scherm ziet
gebeuren.
5.05 s < 1 s 0.67 s + 653 %
Bezoekers willen de content boven de vouw
zo snel mogelijk zien. Laad belangrijke
content boven de vouw daarom eerst.
16.2 s < 3 s 3.8 s + 362 %
Hoe minder vaak de browser een verzoek
nodig heeft vanaf de server, hoe sneller de
laadtijd 164 120 134 + 22%
Hoe minder bytes de pagina hoeft te laden,
hoe lichter de pagina is en hoe sneller de
pagina laad
2,9 MB 2 MB 2,1 MB + 38 %
Start Render
Speed Index
Page Weight
Requests

42. Key Takeaways
Het is de taak van de conversiespecialist om deze kansen te
signaleren
Bepaal de prioriteit van laadtijdoptimalisaties voor je eigen
webshop
Iedere seconde langere laadtijd kost je conversies
Start nog liever vandaag dan morgen: geen tijd te verliezen

43. Patty Bastiaansen
Webanalytics & Conversie-optimalisatie consultant
p.bastiaansen@ism.nl
nl.linkedin.com/in/pattybastiaansen
010-2436000