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