WordPress 31 oktober 2016

Het belang van een snelle WordPress website

We weten allemaal dat bezoekers niet graag wachten op het inladen een website. En met de concurrent is slechts 1 klik verderop, zijn alternatieven zijn snel gevonden. Maar hoe snel moet je website eigenlijk zijn? En hoe zorgen wij er voor dat je website sneller wordt? Je leest het in dit artikel.

Meten is weten

Om te weten te komen of je website snel genoeg is of juist niet, kan je een aantal gratis online tools gebruiken die de nodige inzichten geven. De volgende tools gebruiken wij dagelijks:

Google PageSpeed Insights

nu-page-speedhttps://developers.google.com/speed/pagespeed/insights/

Google rekent sinds enige tijd de laadsnelheid van een website mee als ranking factor. Simpel gezegd worden snelle websites beter getoond in de zoekresultaten dan trage websites en krijgen ze dus meer bezoekers. Google geeft aan dat snelle websites beter worden gewaardeerd door bezoekers en daarom hebben ze een streepje voor in de index. Voor website-eigenaren en webdevelopers heeft Google een handige tool ontwikkeld waarin je kunt zien hoe zij je snelheid waardeert: Google PageSpeed Insights.

Je website wordt zowel “mobiel” als “gewoon” (desktop) bezocht en gewaardeerd met een aantal punten op een schaal van 100. Aangenomen wordt is dat een score boven de 85/100 prima is te noemen. Een score onder de 50 is laag, en tussen de 50 en 85 is matig. De tool geeft niet alleen een score maar ook handvatten om deze te verbeteren. Zo wordt aangegeven dat je bijvoorbeeld afbeeldingen dient te verkleinen, stylesheets en javascripts dient samen te voegen en dat je gebruik moet maken van browsercaching.

Je kunt de tool onbeperkt gebruiken dus je kunt heel eenvoudig opnieuw testen na het doorvoeren van aanpassingen. Zo kan je blijven optimaliseren totdat je een goede score hebt bereikt.

Overigens is de perfecte score (100/100) erg lastig te behalen. Zeker met een website die sterk visueel is ingericht of heel veel content bevat. Wij moesten het natuurlijk proberen en het is ons gelukt. De vraag is of het uit kan (ontwikkelbudget vs voordeel in ranking of gebruikservaring).

Voordelen

  • Geeft inzicht in hoe Google je laadtijd waardeert. Handig voor SEO
  • Overzichtelijke tips voor optimalisatie
  • Snel inzicht en overzicht

Nadelen

  • Geen technische onderbouwing van mogelijke optimalisaties

Webpagetest

nu-webpagetesthttps://www.webpagetest.org/

In webpagetest.org kan je het bezoek van je website analyseren vanuit meerdere plekken in de wereld, op meerdere verbindingssnelheden. De ene verbinding is immers de andere niet en niet iedereen heeft een 200 Mbit lijn tot zijn beschikking. Wij testen doorgaans vanuit Amsterdam op kabel omdat de meeste van onze klanten Nederland als doelmarkt hebben. Omdat ook de verbinding van de webserver variabel kan zijn, doen we stadaard 3 tests achter elkaar zodat we een mooi gemiddelde kunnen bepalen.

Nadat de tests gedraaid hebben, krijg je een zeer uitgebreid overzicht van alles wat er op je website wordt ingeladen. Elk script, elke stylesheet, elke afbeelding: alles wordt inzichtelijk gemaakt in de zogenaamde “waterval weegave”. Daarbij zie je heel duidelijk welke bestanden de grootste problemen opleveren. Zo kan je alle onderdelen op je website analyseren en optimaliseren. Zijn afbeeldingen te groot? Worden er overbodige scripts ingeladen? Worden sommige bestanden niet gevonden? Je vindt het met deze tool.

Voordelen

  • Zeer uitgebreid overzicht voor optimalisatie
  • Testen met echte browsers op diverse verbindingssnelheden
  • Goed inzicht in hoe lang het duurt voordat de gebruiker de website ziet.

Nadelen

  • Ingewikkeld overzicht, veel opties
  • Beperkt aantal (gratis) tests per dag

De combinatie van beide tools geeft de juiste inzichten een de juiste tools om de laadtijd van je website te optimaliseren.

Meest voorkomende optimalisaties

Wij doen veel optimalisaties. Elke website die wij opleveren gaat door beide tools heen en wordt aangepast waar mogelijk en nodig. Daarom zien wij veel dezelfde punten terugkomen die kunnen worden geoptimaliseerd. Wij hebben de meeste van deze punten inmiddels verwerkt in onze werkmethode waardoor ze niet meer terugkomen.

Combineren van CSS en JS bestanden

Een WordPress website gebruikt vaak veel verschillende stylesheets (css) en javascripts (js). Wanneer meerdere plugins zijn geïnstalleerd op de website kan het aantal snel oplopen. Elk bestand moet apart worden gedownload en uitgevoerd. Omdat alle stylesheets in dezelfde taal (CSS) zijn geschreven, kunnen ze ook tot enkele bestanden worden gecombineerd. Dan hoeft de computer slechts een aantal bestanden op te halen en uit te voeren en dat scheelt enorm veel tijd. Ditzelfde geldt ook voor JavaScripts.

Wist je dat:

Wij voor het opleveren van onze websites altijd CSS en JS bestanden combineren waar mogelijk? En dat dit een van de maatregelen is waar Google PageSpeed Insight veel waarde aan hecht?

Gebruik maken van caching

Caching laat zich lastig uitleggen. De beste omschrijving is wellicht als volgt: Toen je leerde rekenen gebruikte je waarschijnlijk je vingers voor de eerste optelsommetjes. Twee plus drie was bij elkaar precies een handje vol en daarmee vijf. Het uitrekenen duurde even. Na een aantal sommetjes werd je er handig in en op een goed moment wist je gewoon: 2 + 3 = 5. Je hebt de uitkomst (5) opgeslagen en hoeft dus niet meer te rekenen. En dat scheelt behoorlijk wat tijd!

Zo werkt cache ook. De eerste keer dat een bezoeker de website bekijkt worden alle bestanden opgehaald en uitgevoerd. Dat is de rekensom en die duurt dus even. Als alles is uitgevoerd en de pagina is samengesteld wordt deze pagina (de uitkomst) opgeslagen op de webserver. De eerstvolgende bezoeker die op de website komt, krijgt niet de rekensom, maar het resultaat voorgeschoteld. Dat leidt tot zeer grote winst in de laadtijd.

Wist je dat:

Klanten van Sturdy Digital met een onderhoudscontract gratis gebruik maken van een caching plugin?

Optimalisatie van afbeeldingen

Doorgaans is eenvoudig veel winst te behalen door het optimaliseren van de afbeeldingen op een website. Tijdens de bouw van een website zorgt een goede webbouwer voor het gebruik van geoptimaliseerde afbeeldingen. Maar als je er als klant mee aan de slag gaat, ben je niet altijd in de gelegenheid om afbeeldingen te optimaliseren voordat je ze gebruikt. Je plaatst bijvoorbeeld een foto-album met 50 foto’s van een evenement terwijl je de foto’s zo van de camera afhaalt. Goede kans dat die 3 tot 5 mb zijn. Dat zorgt voor een enorme belasting aan de kant van de bezoeker terwijl dezelfde foto’s voor ca 10% van de omvang, zonder kwaliteitsverlies op het scherm kunnen worden vertoond. Gelukkig is er software beschikbaar die er voor zorgt dat jij je als klant niet meer druk hoeft te maken over de grootte van de bestanden die je uploadt. Wel zo gemakkelijk!

Wist je dat:

Websites die door ons worden gebouwd altijd voorzien zijn van een stukje software die alle foto’s, dus ook degene die door de klant worden geplaatst, zonder kwaliteitsverlies worden geoptimaliseerd? Dit scheelt vaak 50 tot 90% van de benodigde ruimte.

Hosting

Zonder goede hosting kun je optimaliseren wat je wilt, maar kom je nooit tot een fatsoenlijk resultaat.  Natuurlijk is ook de hosting van je website een belangrijke component in de snelheid van je website. Het is echter niet zo eenvoudig dat betere of duurdere hosting zorgt voor een snellere website. De maatregelen zoals hierboven omschreven hebben doorgaans meer effect dan het aanpassen van je hosting.

Het kan echter wel zo zijn dat hosting een negatief effect heeft op je snelheid. Veel gedeelde hostingaccounts staan op servers met honderden of soms wel duizenden andere websites. Je kunt je voorstellen dat een server die zoveel websites serveert, het af en toe erg druk heeft. Het geheugen en de processor moet verdeeld worden over alle websites en hun bezoekers dus kan het zomaar gebeuren dat jouw website langzamer laadt omdat het op een andere website druk is. Of omdat die slecht is geprogrammeerd of niet goed is beveiligd. Wij adviseren klanten om hosting niet als een sluitpost te zien. Vaak is het verschil tussen heel slechte en goede hosting een paar tientjes per jaar.

Wist je dat:

Onze hosting wordt verzorgd door Realhosting en dat op onze eigen gedeelde server nooit meer dan 40 websites staan? En die zijn allemaal door ons gebouwd, dus goed geoptimaliseerd.

Waarom wil je een snelle website?

Stel je voor dat je € 1,- per klik betaalt in Google Adwords en dat je website er te lang over doet om te laden. De bezoeker klikt weg en gaat naar je concurrent. Dat is driedubbel verlies:

  1. Die euro voor je bezoeker ben je kwijt
  2. De bezoeker bestelt niets op je website
  3. De bezoeker bestelt bij je concurrent

Bezoekers hebben een hekel aan traag ladende websites. En het is vaak niet nodig.

Doe eens een test door je eigen website in te voeren in bovenstaande tools. Scoren ze niet goed? Probeer te optimaliseren of vraag het ons, wij helpen je graag.

Photocredits: Ross Elliot, bewerkt, Licence

Volgende story