De snelheid van je website verbeteren

Indra Pinsel
Indra Pinsel Front-end & UX-developer

Bij Bureau Vet hebben we het vieren van online succes met onze klanten hoog in het vaandel staan. Succes is een abstract begrip en kan dus op vele verschillende manieren gerealiseerd worden. Vaak zien we succes ontstaan door iets tastbaars op te leveren in de vorm van content ten behoeve van SEO, een Adwords campagne of een mooi ontworpen website. Maar succes gaat verder dan dat, er schuilt immers ook een stukje website techniek achter waar naast de gebruikers van de website ook zoekmachines, zoals Google, veel waarde aan hechten. Eén van de speerpunten waar Google dan ook op focust is stimuleren dat de snelheid van je website verbetert. Een snelle website zorgt immers voor tevreden gebruikers.

Waarom is een snelle website belangrijk?

Gebruikers hebben geen zin om lang te moeten wachten op een website die aan het laden is. Hoe sneller een bezoeker een pagina krijgt voorgeschoteld, des te groter de kans dat hij of zij die pagina leest en doorklikt binnen de website. Wanneer een gebruiker lang moet wachten, zal deze de site simpelweg verlaten. En zo denkt Google er ook over. De zoekmachine hecht waarde aan snelle websites, wat concreet betekent dat een site binnen 3 seconden geladen moet zijn (Bron: Hubspot). Snellere websites hebben daarom een streepje voor in de SEO resultaten van de zoekmachine, omdat Google nu eenmaal voorrang geeft aan websites die gebruiksvriendelijk zijn. Uit onderzoek van KISSmetrics blijkt zelfs dat 47% van de internetgebruikers verwacht dat een site binnen 2 seconden laadt. 40% verlaat een site als deze niet binnen 3 seconden geladen is.

Vraag website checklist aan

Hoe maak je een website sneller?

Om een website sneller te maken is het simpelweg zaak dat je gegevens zo snel mogelijk van de websiteserver bij de bezoeker op het scherm krijgt. Daarbij zijn drie onderdelen van belang die je dient te optimaliseren om een supersnelle website te kunnen realiseren:

  • De snelheid waarmee de host kan rekenen en de data naar de klant stuurt
  • De grootte van de bestanden die van de host naar de klant verstuurd moeten worden
  • De hoeveelheid bestanden die van de host naar de klant verstuurd moeten worden

Aandachtspunten bij het optimaliseren van de website snelheid

De hosting van de website

Los van het type website dat je bouwt is het altijd zaak dat deze goed wordt gehost. Hosting is een vak apart en heeft grote invloed op de snelheid van de site. Om goede, snelle website hosting te kunnen garanderen werkt Bureau Vet samen met Savvii, dé Wordpress hosting specialist van Nederland. Savvii heeft de servers dusdanig ingericht, dat deze volledig zijn geoptimaliseerd voor het hosten van een Wordpress site. Enkele voordelen van Savvii ten opzichte van een traditionele hostingpartij:

  • Nginx als webserver
  • HTTP2
  • Automatische gzip compressie
  • Standaard PHP7
  • Varnish, memcashed en XCashe
  • Supersnelle Time To First Byte

Wordpress CMS en maatwerk design

Om het website beheer makkelijk te maken kiezen we bij Bureau Vet voor het bouwen van een website in het gebruiksvriendelijke Wordpress Content Management Systeem (CMS). Om ervoor te zorgen dat er geen onnodige functionaliteiten en trage plugins in de website te vinden zijn bouwt Bureau Vet de site op het zelf ontwikkelde 'startersthema' waarin alle belangrijke onderdelen voor de website zijn opgenomen. Bovenop dit thema wordt altijd een maatwerk website gebouwd. Daarmee garanderen we dat elk getypt karakter er in de code toe doet, waardoor de code 'schoon' blijft en in de basis volledig geoptimaliseerd is t.b.v. SEO-doeleinden. Op die manier weten we zeker dat er geen onnodige bestanden of trage plugins zijn opgenomen en hoeft er uiteindelijk minder data te worden gedownload bij het bezoeken van een pagina binnen de site.

Afbeeldingen optimaliseren t.b.v. SEO

Diverse instellingen aan de afbeeldingen binnen een website zorgen ervoor dat deze zo klein mogelijk geserveerd worden aan de gebruiker van de site. Bij Bureau Vet realiseren we dat door diverse optimalisaties aan de afbeeldingen te doen. Zo wordt de afbeelding na het uploaden ervan binnen de site automatisch door een tool (kraken genaamd) gehaald. Dit zorgt ervoor dat alle onnodige data die aan een afbeelding kleeft wordt verwijderd en dat de afbeelding zo minimalistisch mogelijk wordt opgeslagen. Dat alles gebeurt zonder dat er kwaliteitsverlies optreedt. Je kunt dus met gemak een afbeelding van 10MB uploaden, zonder snelheidsverlies.

Naast het automatisch verkleinen van een afbeelding wordt er tevens voor gezorgd dat een afbeelding niet groter wordt geladen dan noodzakelijk is. Wanneer je een kleine afbeelding nodig hebt binnen de site, dan wordt er een kleine afbeelding ingeladen. De bezoeker krijgt enkel het formaat afbeelding voorgeschoteld dat op dat moment nodig is. Doordat de afbeelding minder zwaar is vindt de data-overdracht sneller plaats. Tot slot wordt er gekeken naar het type device waarop de afbeelding wordt ingeladen. Op een mobiel volstaat het om minder grote afbeeldingen te tonen dan op een laptop. Hierdoor wordt de site op een mobiel weer een stukje sneller weergegeven.

Optimalisatie aan CSS, JS, HTTP2 en SSL

Om een website nog sneller te maken worden CSS en JS bestanden die benodigd zijn bij het realiseren van de website zo klein mogelijk gehouden. Dit wordt uitgevoerd door te 'minify-en' en samen te voegen. Simpel gezegd betekent dit dat alle spaties, commentaren en overige onbelangrijke zaken worden weggehaald waardoor er een zo klein mogelijk bestand overblijft. Om het geheel nog verder te optimaliseren is het zaak dat alle bestanden via HTTP2 worden binnengehaald. HTTP2 kan ten opzichte van de oude variant meerdere bestanden tegelijkertijd binnenhalen, waardoor een bezoeker minder lang hoeft te wachten op het laden van een website.

Minimaliseren van connecties

Om een website snel te houden is het zaak dat, zoals hierboven uitgelegd, bestanden zo klein mogelijk worden gehouden. Echter is het dan wel van belang dat er niet te veel bestanden ingeladen worden. Daarom is het van belang dat er zo min mogelijk 'connecties' worden gelegd tussen de gebruiker van de site en de server. Dit wordt gerealiseerd door bestanden samen te voegen of juist uit te sluiten. Je kunt het zien als een postbode die pakketjes rondbrengt; het is efficiënter als hij er zoveel mogelijk tegelijk kan afgeven. Daarnaast is het belangrijk dat overbodige connecties worden verbroken. Ofwel, er worden geen pakketjes aan jou als bezoeker afgeleverd op moment dat je er niets aan hebt.

Gebruik caching

Wanneer de bestanden in een site zo klein mogelijk zijn gemaakt en zo ver als mogelijk zijn samengevoegd kan de cache aangezet worden. Dit houdt in dat er niet continu nieuwe bestanden naar je toe worden gestuurd, maar dat je juist bestanden te zien krijgt die al eerder door jou bekeken zijn. Hierdoor hoeft de server niet benaderd te worden, maar wordt er gebruik gemaakt van een tussenlaag (genaamd de cache). Deze tussenlaag schotelt bezoekers veel sneller bestanden voor, omdat deze al eerder zijn opgehaald. Bij Bureau Vet maken we daarvoor gebruik van WP-Rocket caching en de basis-caching van onze hostingpartij Savvii.

Snellere website? Aan de slag!

Bij Bureau Vet zijn we altijd bezig met het ontdekken van nieuwe wegen om een website nog sneller te maken. Op die manier krijgt de bezoeker een veel betere gebruikservaring en daarnaast doen we natuurlijk ook Google een plezier. De techniek ontwikkelt zich snel en dat betekent dat er maandelijks optimalisaties worden doorgevoerd aan ons Wordpress startersthema. Daarnaast blijven we testen om te kijken op welke manieren we de website van onze klant nog sneller kunnen maken. Kortom, wanneer je aan de slag gaat met het optimaliseren van je B2B website, vergeet dan zeker de website techniek niet. Dat is namelijk de backbone van je online succes.

Vind jij het cool om snelheidsrecords te verbreken? En ben jij hongerig naar het nog sneller maken van onze websites? Kom dan snel ons team versterken en solliciteer als Wordpress developer.

Bureauvet-online-succesvolle-website-whitepaper-50tips

Gepubliceerd op 15 november 2016