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. Sitespeed: Geen tijd te verliezen

2. Patty Bastiaansen
Webanalytics & Conversieoptimalisatie Consultant
• Communicatie- en Informatiewetenschappen , Tilburg University
• 2 jaar ervaring bij Bax Music
• 2 jaar ervaring bij ISM eCompany
• Werkt o.a. voor
• Online Persuasion Qualified Individual
p.bastiaansen@ism.nl

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

8. https://info.ism.nl/whitepapers/cro/trends-in-winkelgedrag-in-de-benchmark-voor-modewebwinkels-q4-2018

9. Slim – Simpel - Snel
Slim Simpel Snel

10. Agenda
1. Waarom online marketeers 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 & actiepunten om direct mee aan de slag te gaan

11. Waarom online marketeers 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 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..

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

19. Onzekerheid reduceren,
overtuigen en verleiden
Bron: Jurjen Jongejan (2014). Meer omzet met je webshop, in vier stappen naar een hogere conversie. Culemborg: Van Duuren Management
Technologie
Functionaliteit
Usability
Intuïtie
Emotie
Klantpropositie
Behoeften vervullen en redenen
geven om te kopen
Mogelijk maken
Mogelijk maken
Mogelijk maken
Onzekerheid reduceren,
overtuigen en verleiden

20. Hoe optimaliseer je de laadtijd van een trage webshop

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. Hoe meet je de laadtijd KPI’s?

24. Hoe presteert mijn webshop tov de laadtijd KPI’s?
Start Render
Speed Index
Requests
Page Weight

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

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

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.
Doelstelling < 1 seconden < 3.000 Max. 80 Max. 1 MB
Speed Index Requests Page WeightStart Render

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

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

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

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

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

40. Waar liggen kansen voor mijn eigen webshop?
Lighthouse

41. Lighthouse

42. Waar liggen kansen voor mijn eigen webshop?
https://webspeedtest.cloudinary.com/

43. Website Speed Test Image Analysis Tool

44. Resultaten aan de hand van een case

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

62. Key Takeaways

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

64. Evenementen – meld u aan www.ism.nl/evenementen:
Emerce Conversion
Donderdag 11 april, Pakhuis de Zwijger, Amsterdam
Wouter Wensing, Team Lead CRO, ISM eCompany
What’s going on in Retailing?
Donderdag 18 april, ‘t Spant, Bussum
Sander Berlinski, Digitaal Strateeg, ISM eCompany
[Webinar] Magento en online marketing: 5 best practices voor uw webshop!
Donderdag 18 april
Collin de Boer, Business Development Manager, ISM eCompany
B2B Digital
Donderdag 23 mei
Sander Berlinski, Digitaal Strateeg, ISM eCompany

65. Vragen?

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