De snelheid van je webwinkel wordt steeds belangrijker. Niet alleen voor de klant is een snelle website fijn, ook Google waardeert een snelle website.
We hebben de laatste weken dan ook ons best gedaan om een mooie snelheidswinst te boeken. Niet alleen onze eigen website is sneller, ook jouw WebwinkelKeurwidget en -sidebar.
Graag licht ik eerst even kort toe hoe het meten van laadtijd werkt en wat we precies hebben verbeterd.
Twee manieren om laadtijd te bepalen
Kort door de bocht zijn er twee manieren om de laadtijd te bepalen. Zo kun je het aantal seconden berekenen dat de gehele website geladen is. Het nadeel van deze methode is dat het niet alles zegt over de gebruikerservaring. Zo kan 1 website 5 seconden nodig hebben om te laden, maar al naar 2 seconden bijna volledig op het scherm verschijnen. Terwijl een andere website maar 4 seconden nodig heeft om te laden, maar tot die tijd geheel blanco blijft. Voor de gebruiker is de website die al na 2 seconden bijna volledig getoond wordt veel fijner, dan de website die weliswaar sneller geheel geladen is.
De tweede methode gaat dan ook uit van het zo snel mogelijk tonen van alle content “boven de vouw”, oftewel het gedeelte van de website dat zonder scrollen direct in beeld is. Deze methode gaat uit van de beste gebruikservaring.
Sidebar en widget geoptimaliseerd voor gebruikerservaring
Wij hebben onze sidebar en widget dan ook geoptimaliseerd voor gebruikerservaring. Zo hoeft onze sidebar niet als eerste geladen te worden, maar is het belangrijker dat eerst de inhoud van jouw webwinkel getoond word. Hierdoor kan het in sommige tests lijken dat onze sidebar voor een vertraging zorgt, dat is in de praktijk juist niet het geval.
Optimalisatie met Phast
Voor de optimalisatie hebben we gebruik gemaakt van de software Phast in de vorm van de gratis WordPress-plugin PhastPress, die door Albert en Milko van Kibo IT in samenwerking met WebwinkelKeur is ontwikkeld. Deze software optimaliseert automatisch afbeeldingen, comprimeert bestanden en zorgt er voor dat de inhoud “boven de vouw” in één keer wordt geladen, en minder belangrijke delen van de pagina pas daarna.
Phast haalt als het ware de code van elke pagina op je website uit elkaar, past verbeteringen toe, en stuurt dan de verbeterde versie van de pagina naar de bezoeker. Op de site zelf wordt niets aangepast, maar de bezoeker ziet de verbeterde versie zodat de site sneller laadt. Op deze kun je dus zonder veel moeite en handwerk websites en webapplicaties veel sneller maken.
In combinatie met Phast gebruiken we de gratis plugin WP Super Cache. Deze cachingplugin zorgt ervoor dat de server niet elke keer opnieuw de pagina hoeft op te bouwen, wat veel tijd bespaart. Zo kan onze server binnen 0,2 seconden reageren, in plaats van meer dan 0,8!
De resultaten
Voor we begonnen aan de optimalisatie hebben we onze site getest in Google PageSpeed Insights en GTmetrix. Deze twee tools geven een score en tips om je site te verbeteren. In PageSpeed Insights kregen we een score van 63/100. Er waren 32 extra stylesheets en scripts nodig om de pagina te tonen, waarvoor 4 extra verzoeken aan de server nodig waren. Ook waren niet alle afbeeldingen geoptimaliseerd.
Na de installatie van PhastPress en een paar extra verbeteringen door de ontwikkelaars bij Kibo IT, scoren we nu 99/100! Er zijn geen extra verzoeken aan de server meer nodig om de pagina te tonen, waardoor onze site nu een stuk sneller op je scherm staat. Alle afbeeldingen op onze site worden automatisch geoptimaliseerd.
Jouw webwinkel snelheid testen?
We hebben hier enkele jaren geleden een blog over geschreven. In de tussentijd heeft Google ook twee mooie tools gelanceerd die we je aanraden om te gebruiken:
De snelheid van je webwinkel verbeteren
De snelheid van de widget en sidebar is door ons automatisch verbeterd, daar hoef je zelf niets aan te doen. Je eigen webwinkel verder versnellen is natuurlijk altijd verstandig. Gebruik je WooCommerce, of anderszins WordPress voor je site of shop? Dan kun je de PhastPress plugin eenvoudig installeren om je site automatisch te optimaliseren. Als je shop op OpenCart, PrestaShop, ZenCart, Magento of een ander PHP-systeem draait, dan werkt Phast ook, maar dan zul je het handmatig moeten integreren. De ontwikkelaars van Phast kunnen je daarbij helpen.