Byte introduceert:
Thema Snelheid

Alle ins en outs over de snelheid van je website

Hoe zorg je dat je site sneller dan in 1 seconde laadt?

Oke, snelheid is dus erg belangrijk voor je vindbaarheid, usability en je omzet/conversie. Maar hoe zorg je dat jouw site net zo snel laadt als de echt succesvolle sites wereldwijd? En wie moet dat voor je regelen?

 

Het versnellen van je site gaat helaas niet met 1 druk op de knop. Het is een complexe materie en om het nog wat onoverzichtelijker te maken wordt er ook nog wel eens wat geroepen dat niet of maar gedeeltelijk waar blijkt te zijn.
Om je te helpen hebben we een whitepaper geschreven waarin we je helpen om waarheden en onwaarheden van elkaar te scheiden. Download 'm nu gratis en ga direct aan de slag!

Wie kan wat doen?

Want hoe zit dat nou eigenlijk met die snelheid van je website? Je hebt misschien al een hele snelle hoster en toch heeft je site nog meerdere seconden nodig om te laden. En heb je eindelijk je afbeeldingen geoptimaliseerd, blijk je nog steeds koffie te kunnen gaan halen tijdens het inladen ...
Je site kan op verschillende vlakken vertraging oplopen. Zowel in de content, in de structuur van de achterkant van de site als op het gebied van hosting kunnen bottlenecks ontstaan. En op ieder van deze niveaus is dus cruciale tijdswinst te boeken. Daarvoor moeten zowel de e-commere/marketingafdeling, de webdeveloper als de hoster hun werk goed doen. Hieronder lichten we toe wíe wat kan doen om jouw site super snel te maken. Hiermee kan je dus de juiste persoon de juiste vragen stellen.

Wat kan de e-commerce of marketing afdeling doen om je site sneller te maken?

De afdeling die verantwoordelijk is voor de inhoud van de website zal moeten zorgen dat dit snel ingeladen kan worden. Veruit de meeste tijd van het inladen van een website gaat zitten in het downloaden van plaatjes, stylesheets, scripts en andere bestanden. Verminder je dit aantal onderdelen, dan is het aantal berekeningen dat de server hoeft te maken dus ook minder en zal de pagina op zijn beurt ook sneller inladen. Als je vervolgens die bestanden ook nog kleiner weet te maken, heb je dubbele tijdwinst. Het optimaliseren van afbeeldingen is daarbij dus een quick win.

Ook vervuiling in je CMS kan vertraging veroorzaken. Het is daarom belangrijk dat het CMS schoon wordt gemaakt en gehouden. Staan er veel ongebruikte pagina’s of afbeeldingen in het CMS? Laat deze dan verwijderen. Het is tenslotte sneller om een kleine hoeveelheid pagina's te doorzoeken, dan een grote massa.

Tekstopmaak (vetgedrukt, kleur, grootte) is nodig maar moet slim gebruikt worden. Dit doe je door alle opmaak mee te geven in een stylesheet (.css) bestand, en zo veel mogelijk uit je HTML weg te laten. Veel onnodige tekstopmaak sluipt je HTML binnen door opgemaakte tekst te knippen en plakken in je CMS. Deze opmaak wordt dan automatisch in je HTML geplaatst. Door enkel met platte tekst te werken en de opmaakmogelijkheden in je CMS te beperken kan dit gemakkelijk voorkomen worden.

Tot slot is het ook belangrijk om geen dode links op je pagina’s te hebben, bijvoorbeeld naar afbeeldingen die niet (meer) bestaan. Je kan makkelijk controleren of je dode links op je website hebt staan met Yslow.

Checklist:

  • Zijn al je afbeeldingen geoptimaliseerd?
  • Staan er niet te veel verschillende componenten op 1 pagina?
  • Laad je zo min mogelijk .css en .js bestanden in (denk aan: maximaal 2)?
  • Zijn ongebruikte pagina's verwijderd?
  • Staan er geen dode links op de pagina's?
  • Is de opmaak in HTML schoon?
  • Geef je al de opmaak mee in .css bestanden, en niet in je HTML?

Wat kan de webdeveloper doen om je site te versnellen?

De grootste vertraging wordt vaak veroorzaakt door slechte/veeleisende extensies en plugins. Denk aan een kaart, een inpage video, twitterfeed of kalender. Er zijn hier goede en slechte varianten van, die een groot verschil maken in de snelheid van je site.

De tweede factor voor vertraging is veelal een onlogische structuur van je HTML en databases. Met monitoringtools als New Relic, Magento Monitor of Pagespeed & YSlow kan een webdeveloper nauwkeurig bepalen wat belangrijke bottlenecks in je website zijn. Het is dus essentieel dat de webdeveloper deze tools gebruikt om jouw site gezond te maken.

Tenslotte kan er veel tijdwinst worden geboekt door bepaalde pagina’s te cachen. Bij cachen wordt een webpagina onthouden, zodat bij een nieuwe bezoeker de pagina niet opnieuw opgebouwd hoeft te worden. Hierdoor wordt de laadtijd voor iedere volgende bezoeker sterk verkleind.

Checklist:

  • Veroorzaken de plugins en extensies geen vertraging?
  • Is de structuur van je HTML en databases op orde?
  • Wordt de site voldoende gemonitord met tools als New Relic, PageSpeed & YSlow?
  • Zijn er caching tools zoals Varnish en Redis geïnstalleerd?

Wat kan de hostingpartner doen om je site te versnellen?

Op het diepste niveau achter je website is het belangrijk dat de hoster snelle hardware gebruikt en dat de infrastructuur van hoge kwaliteit is. Daarbovenop kan een hoster echter nog grote verschillen maken! Een inrichting van de servers die past bij jouw website (gebaseerd op bijv. je specifieke CMS, je bezoekersaantallen en de zwaarte van je site) kan je grote tijdswinst opleveren. Check daarom of je hostingomgeving zo is ingericht dat je niet snel last hebt van vervelende buren op de server en dat bezoekerspieken goed kunnen worden opgevangen. Het komt regelmatig voor dat hosters teveel websites op één server zetten. Dit maakt de kans groot dat een server (samen met jouw website) down gaat door een piek bij de buren.

Voor zware applicaties of CMS'en zoals Magento is het verstandig om een -voor dit CMS- geoptimaliseerde hostingomgeving te kiezen. Maak je gebruik van managed hosting? Controleer dan of wel de nieuwste versie van serversoftware wordt gebruikt (denk bijv. aan PHP of het besturingssysteem). Nieuwe versies brengen namelijk altijd optimalisaties met zich mee.

We gaven hierboven al aan dat webdevelopers gebruik zouden moeten maken van analysetools, zoals New Relic, Magento Monitor en PageSpeed & YSlow. Byte kiest er voor om deze tools al voorgeïnstalleerd aan te bieden, waardoor webdevelopers deze tools direct kunnen inzetten.

Een vergelijkbaar verhaal geldt voor cachingtools als Varnish en Redis. Met deze tools kan de laadtijd van statische webpagina drastisch verkleind worden. Deze tools kunnen echter niet op ieder hostingplatform zomaar gebruikt worden. Bovendien kunnen hostingpartijen deze tools voorinstalleren binnen de hostingomgeving, waardoor webdevelopers deze tools sneller en makkelijker kunnen toepassen.

Checklist:

  • Is de kwaliteit van de infra hoog en met de snelste hardware?
  • Zijn de servers slim ingericht bijv. specifiek voor jouw CMS?
  • Kunnen cachingtools als Varnish en Redis worden toegepast en worden deze aangeboden?
  • Worden analysetools zoals bijv. New Relic, Magento Monitor, PageSpeed & YSlow aangeboden?

Ontdek ook de andere artikelen van onze themas Snelheid:

Met de whitepaper "Mythes over snelheid, en wat wel werkt om je site sneller te maken" bieden we marketeers, e-commercemanagers en projectmanagers een ideaal overzicht over snelheid. Download de whitepaper nu en ga direct aan de slag.


Verder lezen op de website?


Voor de website-eigenaar:

Invloed van snelheid

Invloed van snelheid

Welke invloed heeft snelheid
op het succes van je site?

Snelheidsfactoren

Snelheidsfactoren

Wie kan wat doen om
je site te versnellen?

Voor de webdeveloper:

Versnel je site

Versnel je site

Wat kan je nog meer doen
om je site sneller te maken?

Vind vertragingen

Vind vertragingen

Hoe vind en verhelp je
vertragingen in je site?