Door: Maikel Bakker (front-end developer)

WAAROM MOBILE PAGESPEED?

Veel mensen weten onderhand wel dat laadsnelheden op mobiel een steeds grotere rol speelt voor je webshop. Eveneens weten veel ondernemers dat een steeds groter aandeel van hun bezoekers via een mobiel apparaat hun shop bezoekt. Toch ligt hier vaak nog niet genoeg focus op. Klanten en developers werken vrijwel altijd achter een desktop/laptop met een snelle internet verbinding en worden zo niet dagelijks geconfronteerd met de laadtijden van de shop op smartphones. Onderzoek bij Google wijst uit dat 53% van de bezoekers de website verlaat wanneer de laadtijd hoger is dan 3 seconden!

Enkele andere redenen:

  • Grootste irritatie van mobiele gebruikers is een lange laadtijd
  • Bounce rate wordt hoger naarmate de laadtijd langer duurt
  • Hogere organische ranking in de Google zoekresultaten

Bij Google vinden ze daarom dat er nog niet genoeg awareness is omtrent mobile pagespeed. Dus reisde ik samen met mijn collega’s Wendy en Jordy af naar het kantoor van Google in Amsterdam voor een hackathon. Hier waren een aantal webdevelopment bedrijven via RIFF voor uitgenodigd: Digivotion, Vormkracht 10, Tupups, BE-interactive, DCR Media en Grizzly New Marketing. Zo ook Experius, hier zouden wij werken aan een gezamenlijke klant, waar wij een nieuwe Magento 2 shop voor ontwikkelen.

Na een lekker ontbijt en de gebruikelijke voorstelronde, kwam er een presentatie waarin er werd uitgelegd waarom Mobile Pagespeed zo belangrijk is en hoe het wordt gemeten. Daarbij volgden kleine opzetjes over hoe je deze punten kon verbeteren. Er hing een gemoedelijke, positieve, informele sfeer waar wij ons als Experianen helemaal in thuis voelde.

HOE WORDT MOBILE PAGESPEED GEMETEN?

Er zijn een aantal aspecten waar naar gekeken wordt wat betreft de pagespeed:

  • Load Time - de tijd tussen het moment dat de gebruiker naar de pagina navigeert en het moment dat het document geladen is
  • First Byte - hoe lang het duurt voordat de eerste byte van de server door de gebruiker wordt gedownload
  • Start Render - het moment dat de gebruiker voor het eerst iets in zijn scherm ziet veranderen t.o.v. een witte pagina
  • Fully Loaded - dit moment wordt gemeten wanneer de pagina volledig geladen is en er nog JavaScript geladen moet worden
  • Speed Index - de belangrijkste meting waar wij ons op zouden focussen. Hier wordt gemeten hoe lang het duurt voordat alle zichtbare delen van de pagina geladen worden.

Pagespeed metrics

PERCEIVED PERFORMANCE

We zouden ons focussen op iets wat 'Perceived performance' wordt genoemd. Hier gaat het meer om hoe lang het voor de gebruiker van de site voelt dat een pagina geladen wordt. Voor ons developers is het dus de taak dat de gebruiker zo snel mogelijk elementen van de pagina op zijn/haar scherm te zien krijgt. Daardoor krijgt de gebruiker namelijk het gevoel dat er ook daadwerkelijk iets gebeurt en dat het laden bijvoorbeeld niet 'vastloopt'.

Om dit te verbeteren kun je o.a. de volgende onderdelen optimaliseren:

  • JavaScript en CSS in content boven de vouw die het weergeven blokkeren, verwijderen - vaak wordt CSS en JavaScript bovenin de pagina geladen, door dit te verplaatsen onderaan pagina verlaag je de laadtijd
  • Inline CSS - CSS wordt vrijwel altijd in een extern bestand geplaatst, wat betekent in een extra aanvraag van de server. Door de CSS boven de vouw, rechtstreeks in de HTML te plaatsen verbeter je de 'perceived performance'.
  • Afbeeldingen optimaliseren - door afbeeldingen te verkleinen voor mobiele apparaten haal je uiteraard een betere pagespeed. Vaak worden er namelijk nog steeds desktop afbeeldingsformaten getoond op mobiel.
  • Lazy loading - afbeeldingen zijn vaak één van de laatste elementen die op de pagina geladen worden en zorgen vaak voor het verspringen van de pagina. Door deze te vervangen door een placeholder en de afbeelding na het 'Fully Loaded' moment in te laden verbeter je de 'perceived performance'
  • HTTP/2 - serverconfiguratie die er voor zorgt dat o.a. alle CSS en JavaScript bestanden op een efficiëntere manier wordt opgehaald.
  • Geen slider tonen op mobiel! - onderzoek wijst uit dat vrijwel niemand op de 2e slide klikt. Daarnaast is het een afleidend onderdeel van de pagina en is het inladen van de extra JavaScript en afbeeldingen een groot obstakel voor de laadtijd.

Voor dat we van start gingen met hacken, werd de pagespeed gemeten. Wie na afloop het hoogste percentage verbetering voor elkaar kreeg, ging er met een prijs en uiteraard de eer vandoor. We begonnen al, vergeleken met de andere websites, met een hoge laadsnelheid van 3.2 seconden. Mooi dat onze Whitelabel product van zichzelf dus al zo snel is maar dit was natuurlijk geen goede uitgangspositie om de hoogste percentage aan verbetering te scoren ;).

Na een kort overleg kwamen we tot de volgende taken waar we ons in een korte tijd op gingen focussen:
  • Afbeeldingen optimaliseren
  • Comprimeren van afbeeldingen, CSS, JavaScript en SVG's
  • Onnodig ingeladen CSS, JavaScript verwijderen
  • Slider vervangen
  • Lazy loading voor afbeeldingen
  • Critical CSS

We hadden zo'n vier uur de tijd om met de bovenstaande punten de laadtijd van de homepage zo kort mogelijk te maken op mobiel. Hierin kwamen we tot veel nieuwe inzichten en merkte we al snel een groot verschil t.o.v. ons startpunt. Dit gaf ons uiteraard veel energie en plezier! Na afloop presenteerde ieder team zijn bevindingen, resultaten en het development proces. Hierna was het tijd voor de prijsuitreiking, die tijdens de afsluitende borrel werd gepresenteerd.

ONZE RESULTATEN 

Zoals eerder vermeld startte wij al met een vrij goede snelheid van ~3.2 seconden. Dit hebben wij weten te reduceren naar ~1.8 seconden wat daarmee behoorde tot één van de snelste van die dag! Ons percentage aan verbetering was dus ~43%, helaas betekende dat wij er niet met de prijzen vandoor zouden gaan. De winnaar had namelijk een verbetering van ~89%.

Onderdeel Start Eind Verbetering
Laadsnelheid 3.279 sec 1.845 sec 43.73%
Pagespeed Insights ​58% 89% 31%

Nadat we (natuurlijk) als laatste van de hackathon groep de borrel verlieten, zijn we met veel nieuwe ideeën en uitdagingen de deur uitgegaan.

Wat voor nieuwe dingen hebben we dan geleerd? Nou niet super veel, we kwamen erachter dat we toch al vrij veel kennis bezitten hierover. Maar wat we wel gekregen hebben, is bevestiging. Op internet zweeft een hoop informatie omtrent pagespeed. Maar niks is zo overtuigend dan het horen van Google zelf. Zij zijn zelf immers degene die de hele pagespeed race hebben gekickstart, nadat bekend werd dat ze pagespeed meegingen rekenen in de ranking van websites.

Benieuwd welke oplossingen we kunnen implementeren om de mobile pagespeed van jouw shop te verbeteren? Neem contact op met support!

Dank aan de organisatoren bij Google en de uitnodiging van RIFF voor een leuke, informele en vooral leerzame hackathon!