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 leert u hoe u met een paar simpele optimalisaties die laadtijd van uw website reduceert.

1. Patty Bastiaansen
Marketing Intelligence & Conversieoptimalisatie Consultant
Het belang van laadtijd
Geen tijd te verliezen

2. “Waarom moeten wij ons als conversiespecialisten,
zorgen maken over een onderwerp als laadtijd?”

3. Het belang van laadtijd
Nomophobia – “A fear of being without mobile device, power source, or service area”
We liken, swipen, tikken en pinchen alsof onze levens ervan afhangen
Een gemiddelde gebruiker brengt 6 uur per dag online door

8. Dat is waarom wij ons zorgen moeten maken over sitespeed!
“Mensen gebruiken hun mobiel vaker dan ooit
in hun aankoopproces”

9. Slim – Simpel - Snel
Slim Simpel Snel

10. Agenda
1. Waarom conversiespecialisten moeten focussen op snelheid
2. Hoe achterhaal je de laadtijd van je webshop?
3. Hoe optimaliseer je de laadtijd van een trage webshop?
3. Resultaten aan de hand van een case
4. Key Takeaways & actiepunten om direct mee aan de slag te gaan

11. Waarom conversiespecialisten moeten focussen op snelheid

12. Conversieoptimalisatie | Verwijderen van obstakels
3
15
Winkelmand
50
Bekijkt productaanbod
100
Bezoekt webshop
1000
Marktpotentieel
Verwijder obstakels!
• Kent de webshop niet
• Kan de webshop niet vinden
90%
• Vindt de webshop te druk
• Vindt de webshop te traag
50%
• Zoekt meer informatie
• Heeft onzekerheid over voorraad
• Wil vergelijken
70%
• Loopt vast bij betaling
• Kan geen verzendkosten vinden
• Vertrouwt de webshop niet
80%

13. Conversieoptimalisatie | Verwijderen van obstakels

14. Conversieoptimalisatie | Verbeteren van gebruikerservaring

15. Hoe bezoekers zich gedragen bij langzame pagina’s
Bron: Think With Google Research Study: “The Need for Mobile Speed: How Mobile Latency Impacts Publisher Revenue”

16. Hoe bezoekers zich voelen bij langzame pagina’s
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..

19. Hoe achterhaal je de laadtijd van je webshop?

20. “Hoe weet je of je mobiele webshop snel genoeg is?”

21. 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
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
Wat zijn de laadtijd KPI’s?

22. www.webpagetest.org

25. Hoe presteert mijn webshop t.o.v. de laadtijd KPI’s?
Start Render
Speed Index
Requests
Page Weight

26. Laadtijd KPI’s en doelstellingen
Speed Index Requests Page WeightStart Render

27. Laadtijd KPI’s en doelstellingen
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.
Speed Index Requests Page WeightStart Render

28. Laadtijd KPI’s en doelstellingen
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
Speed Index Requests Page WeightStart Render

29. Laadtijd KPI’s en doelstellingen
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

30. Laadtijd KPI’s en doelstellingen
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

31. Laadtijd KPI’s en doelstellingen
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

32. Laadtijd KPI’s en doelstellingen
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

33. Laadtijd KPI’s en doelstellingen
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

34. Laadtijd KPI’s en doelstellingen
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. Hoe optimaliseer je de laadtijd van een trage webshop

36. 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.
Speed Index

39. Verminder het aantal
verzoeken
Hoe minder vaak de browser een verzoek nodig heeft vanaf de
server, hoe sneller de laadtijdRequests

42. Verminder pagina gewicht
Hoe minder bytes de pagina hoeft te laden, hoe lichter de
pagina is en hoe sneller de pagina laad
Page Weight

45. Waar liggen kansen voor mijn eigen webshop?
Lighthouse

46. Lighthouse

47. Waar liggen kansen voor mijn eigen webshop?

48. Afbeeldingen

49. Resultaten aan de hand van een case

50. https://www.thinkwithgoogle.com/intl/en-154/insights-inspiration/case-
studies/primera-mobile-speed-equals-shopping-convenience/

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

52. 0-meting belangrijkste mobiele landingspagina
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

53. 0-meting belangrijkste mobiele landingspagina
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

54. 0-meting belangrijkste mobiele landingspagina
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

55. 0-meting belangrijkste mobiele landingspagina
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

56. Laadtijdoptimalisaties | actiepunten
Start render Speed index Requests Page Weight
Actiepunten

57. Laadtijdoptimalisaties | actiepunten
Start render Speed index Requests Page Weight
Actiepunten
Server response time
versnellen

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

59. Laadtijdoptimalisaties | actiepunten
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

60. Laadtijdoptimalisaties | actiepunten
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

61. Laadtijdoptimalisaties | 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

62. Laadtijdoptimalisaties | 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

63. Laadtijdoptimalisaties | 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

64. Laadtijdoptimalisaties | 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

65. Laadtijdoptimalisaties | effect op webshop KPI’s
Effect van laadtijd op CR voor optimalisaties
Correlatie: -0.79
Effect van laadtijd op CR na optimalisaties
Correlatie: -0.35
Op basis van 261.432 sessies en 2.539 transacties
Bron: Google Analytics
Op basis van 224.558 sessies en 2.362 transacties
Bron: Google Analytics
0.00%
0.20%
0.40%
0.60%
0.80%
1.00%
1.20%
1.40%
1.60%
0
10000
20000
30000
40000
50000
60000
70000
80000
3.6 3.8 4.0 4.2 4.4 4.6
Sessies Conversieratio van e-commerce
0.00%
0.20%
0.40%
0.60%
0.80%
1.00%
1.20%
1.40%
1.60%
0
10000
20000
30000
40000
50000
60000
4.6 4.8 5.0 5.2 5.4 5.6 5.8 6.0 6.2 6.4
Sessies Conversieratio van e-commerce

66. Laadtijdoptimalisaties | effect op webshop KPI’s
Effect van laadtijd op bounce voor optimalisaties
Correlatie: 0.90
Effect van laadtijd op bounce na optimalisaties
Correlatie: 0.53
Op basis van 261.432 sessies
Bron: Google Analytics
Op basis van 224.558 sessies
Bron: Google Analytics
54.50%
55.00%
55.50%
56.00%
56.50%
57.00%
57.50%
58.00%
58.50%
0
10000
20000
30000
40000
50000
60000
70000
80000
3.6 3.8 4.0 4.2 4.4 4.6
Sessies Gemiddelde Bouncepercentage
0.00%
10.00%
20.00%
30.00%
40.00%
50.00%
60.00%
70.00%
80.00%
0
10000
20000
30000
40000
50000
60000
4.6 4.8 5.0 5.2 5.4 5.6 5.8 6.0 6.2 6.4
Sessies Gemiddelde van Bouncepercentage

67. Key Takeaways

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

69. Nelleweg 1, 3044 BC Rotterdam +31 (0)10 243 60 000 info@ism.nl www.i