Hoe wij websites 1111% sneller maken!

Hoe_wij_websites_1111_procent_sneller_maken

Dat lees je helemaal goed. Een 1111% snellere website en dat zonder ook maar één regel te programmeren. Dit resultaat is simpelweg behaald door de juiste combinatie van plugins en webhosting.

Het mooiste van alles? Je hebt het in een paar stappen gedaan!
In deze blog vertel ik jou welke stappen je moet ondernemen om een1111% snellere website te behalen.

Als je alleen wilt weten wat wij gebruiken:
Plugins:
– Swift Performance Lite
– Imagify

Hosting:
– VULTR Cloud, via Cloudways
– Varnish
– Stackpath CDN

Contents van deze blog:
– Waarom performance belangrijk is
– Nulmeting en wat te verbeteren
– Het verbeteren van de performance
– De eindresultaten

Tijdens deze blog ga ik er van uit dat je weet hoe WordPress werkt en hoe je plugins moet installeren.


Waarom performance belangrijk is.

Er is bij niemand denk ik twijfel dat een snelle website belangrijk is. Niemand heeft zin om te wachten op een pagina die 10 seconden op zich laat wachten.
In tegenstelling: een laadtijd van 3 seconden zorgt al voor 40% minder omzet.

Voor de mobiele versie van je website is het zelfs zo dat meer dan de helft van je bezoekers je website verlaat, volgens Google! Zoals je al kan verwachten zijn deze aantallen bij een hogere laadtijd vele malen groter.

Naast minder omzet heeft dit ook effect op je positie in Google. Google is er bij gebaat om gebruikers de beste ervaring te geven. Één van de factoren van een beste ervaring is de laadtijd van een website. Een gebruiker die een vloeiende ervaring op je website heeft, blijft gemiddeld ook langer op je website.

Naast je positie in Google heeft dit ook effect op je Adwords advertenties.
De laadtijd van je landingspagina achter je advertentie is een factor voor Google om te bepalen welke advertentie zij laten zien.

Door een slechte performance heb je dus kans op 40% minder omzet, een lagere positie in Google en dat je advertenties Google’s laatste keus zijn. Al met al iets wat wij natuurlijk niet willen.

Controleer via deze tool van Google hoeveel meer omzet jij kan maken met een snellere laadtijd.

Vul hier een willekeurige url in. Wanneer je de resultaten krijgt scroll je helemaal naar beneden naar “Eveluate the impact of your site”.
Vul daar de gegevens in en krijg te zien hoeveel meer omzet er voor jou nog te behalen valt. Voor de eenvoud heb ik hier ook een voorbeeld.
Een webshop met 5000 maandelijkse bezoekers, een conversie rate van 2%, een gemiddelde order van €100 en met een laadtijd van 3s naar 0.8s, ongeveer €16.000 per jaar extra omzet.

Genoeg over waarom, tijd voor actie!

Google Performance Tool Verbetering Omzet Verhogen

Nulmeting en wat te verbeteren

Voor de nulmeting gebruik ik het “Starter” webhosting pakket van Neostrada.
Hierop installeer ik WordPress en het veel gebruikte template Pitch.
Om de performance te testen gebruik ik Pingdom Tools.
Voor deze test activeer ik alleen het template, download de benodigde plugins en importeer ik de demo content. Geen instellingen zijn aangepast.

Volg je deze tutorial mee en loop je ergens vast? Stuur mij een mail op [email protected] en ik help je verder!

De nulmeting (Neostrada “Starter” pakket):

Website performance optimalisatie pingdom tools

De meting

De resultaten:

Website performance optimalisatie pingdom tools

Het volgende moet geoptimaliseerd worden:

  • Avoid URL redirects: zorg er voor dat al je urls naar een daadwerkelijk bestaande pagina verwijzen .
  • Make fewer HTTP Request: maak minder uitgaande request. Dit zijn vaak de vele javascript & css bestanden en afbeeldingen. Deze voegen wij samen tot 1 bestand.
  • Add Expires Headers: Dit zorgt ervoor dat de browser van de bezoeker niet elke keer opnieuw alle afbeeldingen en bestanden hoeft op te halen.

Het verbeteren van de performance

Nu wij weten wat er verbeterd moet worden kunnen we beginnen!
Eerst ga ik je laten zien wat alleen al een goede host voor je performance doet.

De nulmeting is gedaan op het “Starter” pakket van Neostrada. Met dit pakket kan je perfect beginnen, alleen bij hoge bezoekers aantallen is het handig om de hosting daar op aan te passen. Al onze hosting gebeurt in de cloud via Cloudways. Voor deze test gaan wij de website hosten in de cloud van VULTR, via Cloudways.

Op de server schakelen wij Varnish in. Varnish is een caching mechanisme dat op server niveau zit. Misschien een beetje veel techniek, alleen het is een aanrader voor je performance 😉

Meting in de cloud (VULTR cloud):

Performance optimalisatie cloudhosting VULTR Pingdom tools

De meting

De resultaten:

Performance optimalisatie cloudhosting VULTR Pingdom tools

Zoals je ziet is er weinig veranderd. De server voegt uit zichzelf al een aantal Expires headers toe waardoor de score van 0 naar 45 is gegaan. Wanneer de bezoeker je website voor de eerste keer bezoekt spelen deze “Expires headers” geen rol. Dit heeft pas effect vanaf het tweede bezoek moment.

Conclusie:
Door alleen van webhost te wisselen is er al een performance verbetering van 236%!

Cloud host + website optimalisatie:

In deze test voegen wij de plugins Swift Performance Lite & Imagify toe.

Met de Swift Performance Lite plugin gaan wij het aantal request verminderen. Swift Performance Lite zorgt daarnaast ook voor het cachen van de webpagina’s. Hierdoor hoeft een webpagina niet meer opgebouwd te worden, wat het geheel weer sneller maakt.

Het aantal request verminderen wij door afbeeldingen om te zetten in base64 data strings, voegen we alle Javascript bestanden samen tot één bestand en doen wij hetzelfde voor de CSS bestanden. Yes, een beetje technisch. Gelukkig doet Swift Performance Lite dit voor ons — out of the box!

Imagify zorgt voor het optimaliseren van de afbeeldingen. Imagify comprimeert de afbeeldingen en zet deze om naar WebP bestanden. Dit is net als een .png bestand, alleen dan speciaal voor het web. Imagify doet dit onder andere automatisch wanneer je een afbeelding upload. Geen extra werk dus, nada!

Op dit moment is de pagina 2.5MB groot en 1.5MB hiervan komt van afbeeldingen. Een mooi doel is om dit onder de 2MB te brengen en dit gaan de plugins voor ons doen!

De instellingen die ik voor Swift Performance Lite in deze test gebruik kan je hier downloaden.

Cloud host + website optimalisatie:

Website geoptimaliseerd met Swift Performance en VULTR Cloud hosting

De meting

And there we go????????????

Onder de één seconde! Zelfs onder de halve seconde!

Wat is er precies bereikt?

  • Performance score van 74 naar 92
  • Page size van 2.5MB naar 1.7MB door het comprimeren van de afbeeldingen
  • Een laadtijd van 5.21 seconden naar 469ms!
  • Van 169 request naar 46!

Resultaten:

Website geoptimaliseerd met Swift Performance en VULTR Cloud hosting

Deze resultaten zorgen bij elkaar voor een betere gebruikerservaring.
Dit ga je terug zien door bijvoorbeeld een hogere ranking in google en een verhoogde omzet.

Volgens de Google Reken tool zelfs €27,7k meer omzet per jaar!

Google Webshop Tool Hogere omzet

De eindresultaten

Door de website in de cloud te hosten via CloudWays behaalde wij al een performance verbetering van 236%.

Door het optimaliseren van de website zelf is er in totaal 1111% in performance verbetering bereikt. Dit hebben wij gedaan door afbeeldingen te optimaliseren via Imagify en het aantal request te verlagen met Swift Performance Lite.

Er zij nog vele andere manieren hoe je performance kan verbeteren. Bijvoorbeeld door niet elke plugin te downloaden. Elke plugin die jij installeert wordt op iedere pagina ingeladen, of je deze daar nu gebruikt of niet. Ook het deactiveren + verwijderen van niet gebruikte plugins helpt.

Een iets nieuwere techniek is Progressive Web Apps. Ga ik nu niet dieper op in. De voordelen hiervan moeten een eigen blog krijgen. Als je PWA’s wilt uitproberen op je website, dan is dit een hele fijne plugin.

Wil je echt voor performance gaan dan is een maatwerk template bijna altijd de eerste stap. Over de voordelen van maatwerk templates komt later nog een blog!

Hopelijk draagt dit artikel bij aan het verbeteren van jouw performance!
Heb je verbeteringen bereikt met de tips in deze blog?
We zien het graag terug in de comments!????


Dit is de eerste blog van de wekelijkse reeks #ThankGodItsWPMonday.
Elke maandag verschijnt er een blog met tips & tricks, weetjes en innovatie. Volg onze social media kanalen om van elke nieuwe blog een melding te krijgen!

LinkedINFacebookInstagramTwitter

Vragen over de blog of heb jij hulp nodig met het verbeteren van de performance van je website of webshop? Email ons op [email protected] en wij staan voor je klaar!

Andy
No Comments

Leave a Comment