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?

8. ISM Fashion Benchmark
https://info.ism.nl/whitepapers/trends-in-winkelgedrag-in-de-
benchmark-voor-modewebwinkels-2017

9. Slim – Simpel - Snel
Slim Simpel Snel

10. Agenda
1. Belang van laadtijdoptimalisatie
2. De belangrijkste laadtijd KPI’s
3. Laadtijd optimalisatie tips
4. Resultaten aan de hand van een case
5. Key takeaways

11. Belang van laadtijdoptimalisatie

12. 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

13. 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”

14. Hoe bezoekers zich voelen bij een lange laadtijd
1 – 2 seconden Dit gaat lekker!
3 – 6 seconden Oke, het is langzaam maar goed
te doen
7 – 10 seconden Ugh, this better be worth it
10+ seconden Wow, finally..

15. Hoe bezoekers zich gedragen bij een lange laadtijd

16. Hoe bezoekers zich gedragen bij een lange laadtijd

17. Correlatie laadtijd en conversie/ bouncepercentage
1
2

18. Correlatie laadtijd en conversie/ bouncepercentage
3
4

19. Correlatie laadtijd en conversie/ bouncepercentage

20. Correlatie laadtijd en conversie/ bouncepercentage
5

21. Correlatie laadtijd en conversie/ bouncepercentage

22. Correlatie laadtijd en conversie/ bouncepercentage
6
7 8

23. Correlatie laadtijd en conversie/ bouncepercentage
9

24. Correlatie laadtijd en conversie/ bouncepercentage

25. Correlatie laadtijd en conversie/ bouncepercentage
0,00%
5,00%
10,00%
15,00%
20,00%
25,00%
30,00%
35,00%
0
0,2
0,4
0,6
0,8
1
1,2
2,4 2,7 3 3,3 3,6 3,9 4,8
Laadtijd - Bouncepercentage
Sum of Sessies Average of Bouncepercentage
0,00%
0,20%
0,40%
0,60%
0,80%
1,00%
1,20%
1,40%
1,60%
1,80%
0
0,2
0,4
0,6
0,8
1
1,2
2,4 2,7 3 3,3 3,6 3,9 4,8
Laadtijd - Conversieratio
Sum of Sessies Average of Conversieratio van e-commerce

26. Vragen?

27. Hoe optimaliseer je de laadtijd van een trage webshop

28. 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

29. Laadtijd KPI’s | Hoe meet je de KPI’s?

30. Laadtijd KPI’s | Hoe meet je de KPI’s?

31. Laadtijd KPI’s | Hoe meet je de KPI’s?
Start Render
Speed Index
Requests
Page Weight

32. Laadtijd KPI’s | Doelstelling
Speed Index Requests Page WeightStart Render

33. Laadtijd KPI’s | Doelstelling
Speed Index Requests Page WeightStart Render
Uitleg Zorg ervoor dat de
bezoeker zo snel
mogelijk iets ziet
gebeuren op het
scherm.
Zorg ervoor dat
belangrijke content
boven de vouw zo
snel mogelijk te
zien is.
Zorg ervoor dat de
browser zo min
mogelijk verzoeken
nodig heeft vanaf de
server.
Zorg ervoor dat de
pagina zo
min mogelijk bytes
hoeft in
te laden.

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

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

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

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

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

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

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

41. Betekenis
Laat zo snel mogelijk iets gebeuren op het scherm.
Doelstelling
< 1 seconde
✓ Server response tijd versnellen
✓ Zorg dat CSS en HTML eerder ingeladen worden dan scripts
Start Render

42. Betekenis
Zorg ervoor dat belangrijke content boven de vouw
zo snel mogelijk te zien is.
Doelstelling
< 3.000
Speed Index
✓ Geef prioriteit aan content boven de vouw

45. Betekenis
Zorg ervoor dat belangrijke content boven de vouw
zo snel mogelijk te zien is.
Doelstelling
< 3.000
Speed Index
✓ Geef prioriteit aan content boven de vouw
✓ Vermijd scripts die het weergeven van content boven de vouw
blokkeren

46. Betekenis
Zorg ervoor dat de browser zo min mogelijk verzoeken
nodig heeft vanaf de server.
Doelstelling
80 requests
Start Render

47. F12 / Inspecteren
Google Chrome DevTools
Network

48. Betekenis
Zorg ervoor dat de browser zo min mogelijk verzoeken
nodig heeft vanaf de server.
Doelstelling
80 requests
✓ Maak gebruik van browser caching
Start Render
✓ Laad enkel pixels in die toegevoegde waarde hebben
✓ Voeg requests waar mogelijk samen

49. ✓ Losse requests van kleine afbeelingen

50. ✓ Samenvoegen tot sprites van max. 100 KB

51. Betekenis
Zorg ervoor dat de browser zo min mogelijk verzoeken
nodig heeft vanaf de server.
Doelstelling
80 requests
✓ Maak gebruik van browser caching
Start Render
✓ Laad enkel pixels in die toegevoegde waarde hebben
✓ Voeg requests waar mogelijk samen
✓ Laad requests die enkel van toepassing zijn voor desktop
niet in op mobiel

52. Betekenis
Zorg ervoor dat de pagina zo min mogelijk bytes hoeft
In te laden.
Doelstelling
1 MB
Page Weight

54. F12 / Inspecteren
Google Chrome DevTools
Network

55. Betekenis
Zorg ervoor dat de pagina zo min mogelijk bytes hoeft
In te laden.
Doelstelling
1 MB
Page Weight
✓ Optimaliseer je afbeeldingen
https://compressor.io/
✓ Streef ernaar 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

56. Laadtijd KPI’s | PageSpeed Insights

57. Laadtijd KPI’s | PageSpeed Insights

58. 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

59. Vragen?

60. ✓ 18 januari [Webinar] Display advertising: de basic essentials
✓ 24 & 25 januari ISM eCompany aanwezig op de Webwinkel Vakdagen
✓ 8 februari [Webinar] Hoe zet u in 3 stappen een pakkende contentstrategie neer?
www.ism.nl/evenementen
Meer informatie en kennis opdoen?

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