De performance van je website: belangrijker dan ooit

Dit is deel 3 van de 7-delige blogserie 'Digital Marketing Live! 2018'

In deze blogserie duiken we in de 22 (!) presentaties en round table sessies die Fingerspitz als hoofdsponsor verzorgde tijdens dé jaarlijkse marketing update van Emerce, in de Beurs van Berlage in Amsterdam.

  1. The Marketeer of the Future
  2. Search als spin in het Web 3.0
  3. De performance van je website: belangrijker dan ooit
  4. Stop met marketingfails, drink Jägermeister
  5. Leadgeneratie met marketing automation
  6. AdWords & e-commerce trends
  7. Customer Lifetime Value verhogen met technologie

Meld je aan voor de community en mis niets van deze blogserie, en nog veel meer interessante content.


Hoe snel is jouw website?

Wanneer heb je dat voor het laatst gemeten?

Heb je enig idee wat het effect van die paar extra seconden betekent voor je conversies?

Het antwoord op de vraag of dat belangrijk is, is eigenlijk een beetje dubbelzinnig. Nee en ja.

Een snelle website: waarom onbelangrijk?

Een snelle website is onbelangrijk in de zin dat je website minder belangrijk wordt.

Hoe dan?

  1. Mensen blijven langer op de SERP (zoekresultatenpagina van Google). Ze vinden hun antwoord nou eenmaal sneller, dankzij bijvoorbeeld Google My Business en rich snippets. Jelmer ging hier tijdens zijn sessie dieper op in.
  2. Platformen zoals social media, blognetwerken en brands nemen de rol van een website over. Interactie met een merk op veel meer plekken dan alleen de website.

Kijk bijvoorbeeld eens naar dit bizarre feitje: we zitten bijna 5,5 jaar van ons hele mensenleven de Facebooken, Snappen, appen, Twitteren en noem maar op.

Wat deze platformen met je website gemeen hebben, is de strijd om aandacht.

We hebben geen geduld meer. We willen meteen geboeid worden. Meteen zien wat we hebben aangeklikt. We willen niet wachten totdat een video, afbeelding of website is geladen.

Een snelle website: waarom belangrijk?

Eerlijk is eerlijk: op je website gebeurt het nog steeds. Daar realiseer je waarschijnlijk nog altijd de meeste conversies. En die conversies, daar gaat het natuurlijk om.

De sleutel tot conversie optimalisatie is een goede gebruikerservaring. En die gebruikerservaring begint en eindigt met één ding: snelheid. Want als je snel bent, houd je de aandacht van je bezoekers vast.

  • De maximaal aanvaardbare snelheid die wij mensen (uit onderzoek) accepteren, is niet meer dan twee seconden.
  • De gemiddelde mobiele laadsnelheid is 19 seconden op 3G en 8 seconden op ons “supersnelle” 4G. Wat je snel noemt.
  • 53% van de personen verlaat een mobiele site als deze niet binnen 3,5 seconden is geladen.

Ja, en dan is daar natuurlijk de mobile-first index van Google. Presteert je website ondermaats op mobiel? Dikke pech, dan sta je vanaf nu een behoorlijk aantal posities lager.

Kortom: gebruikerservaring wordt meer en sneller dan ooit een belangrijke rankingfactor. Bovendien tonen studies aan dat crawler-obstructies (de Time-To-First-Byte: hoe snel de server reageert op de aanvraag van de gebruiker) een restrictie is voor het vinden/tonen van je pagina’s in Google.

Performance analyseren

‘Ja, hij is er! Onze nieuwe website is ein-de-lijk live!’

En vervolgens...

Wat een afknapper. Dan is je investering in een nieuwe website vrijwel voor niets geweest.

Snelheid van je website: check deze factoren

Het barst van de tools die je iets vertellen over de performance van je website. Deze 4 raad ik je in ieder geval aan om standaard te gebruiken:

Google Lighthouse

Het vertelt je meer dan de bekende PageSpeed-tool, namelijk écht iets over de performance. Zie het verschil (boven is PageSpeed, onder is Lighthouse):

PageSpeed vertelt meer iets over je gebruikerservaring, terwijl Lighthouse écht de diepte (of verte) in kijkt, op zoek naar gevaar. Het geeft je een veel gedetailleerder rapport, wat je bij wijze van spreken zo aan je webdeveloper kan geven: ‘kijk, dit kan beter. Succes.’

Webpage rendering

Een belangrijke factor. De webpage rendering geeft namelijk aan hoe lang het duurt voordat de gebruiker iets visueels ziet. Zo is het belangrijk dat je je bestanden in de juiste volgorde naar de browser stuurt: eerst de noodzakelijke CSS en dan pas Javascripts die zorgen voor de minder belangrijke functionaliteiten. Je bezoekers gaan toch niet direct over tot een klik. Ook content die onder de vouw staat (dat wil zeggen; pas zichtbaar is als de gebruiker naar beneden scrollt), heeft geen prioriteit. Daarover later meer.

Gebruikerservaring op meerdere apparaten

Veel webdevelopers richten vanouds een website in voor desktop gebruik. Dat is goed, alleen zijn de ervaringen op mobiel minstens zo belangrijk.

Een website dient dus responsive te zijn - maar dat is niet genoeg: bij een website die “alleen responsive” is, wordt vaak nog steeds van alles ingeladen wat voor een mobiele website niet interessant is.

Time-to-First-Byte (TTFB)

Hoe snel reageert de server op de aanvraag van de bezoeker? Dat gegeven wordt gemeten met de TTFB.

  • 0 tot 200 milliseconden: zeer goed;
  • 200 tot 500 milliseconden: goed;
  • 500-1000 milliseconden: acceptabel;
  • 1000-2000 milliseconden: traag;
  • meer dan 2000 milliseconden: onacceptabel. Onderneem direct actie!

De snelheid waarmee een server reageert kan op diverse manieren geoptimaliseerd worden. Denk natuurlijk aan de snelheid van de hosting, maar ook een Content Delivery Network (CDN) helpt om de bezoeker sneller te bieden wat hij zoekt.

De Time-to-First-Byte vind je onder meer als je een pagina gaat Inspecteren (met je rechtermuisknop in Google Chrome), op deze plek:

Analyseer je code

Zware kost voor een marketeer. Je hebt hier echt wel wat codekennis voor nodig. Of raadpleeg gewoon de webdeveloper.

Beoordeel de code onder meer op de volgende onderdelen:

  • Is de CSS en Javascript zo opgezet dat deze door meerdere pagina’s gebruikt kunnen worden, of zijn deze specifiek per pagina?
  • Hoe zit het met de toegankelijkheid?
  • Wordt inline styling (CSS  tussen de HTML) correct toegepast?
  • Worden de assets in de juiste volgorde geserveerd?

Vermijd vertragende zaken

Er zijn elementen die webdesigners en marketeers maar wat graag op hun website willen plaatsen, omdat het mooi is.

Zit wat in, maar ga er toch maar over in discussie. Vooral over de volgende zaken:

  • Afleidende, drukke maar vooral trage animaties;
  • Carrousels of sliders: dé absolute no-go voor een converterende website. Vraag dat maar aan Desiree.
  • Video’s above the fold - en zéker niet als ze automatisch afspelen. Echt een killer voor je performance.
  • Social widgets. Deze dragen altijd flinke scripts die ingeladen moeten worden, zoals tracking en andere gegevens vanuit het platform. Niet best voor je performance.
  • Te grote afbeeldingen, vanzelfsprekend. Foto’s kun je vaak tot onder de 200 kB verkleinen, terwijl de kwaliteit uitstekend blijft. Emerce zelf kan hier ook nog wel wat van leren. De achtergrondafbeelding op de website van Digital Marketing Live! hoeft toch niet zo haarscherp te zijn?
  • Kies het juiste bestandsformaat voor je afbeelding. Kijk hierbij naar de afmetingen in pixels (1000 pixels voor een afbeelding die niet de volledige breedte inneemt is hartstikke prima), en naar de manier van opslaan (JPEG of liever JPEG-2000 voor foto's, PNG voor illustraties).

Scripts staan vaak vol met overbodige regels, zoals commentaar, spaties en functies. Misschien lijkt het niet zo, maar als je dit allemaal kunt minimaliseren, scheelt dan echt heel veel.

Voorbeeld:

De besparing van dit hele kleine stukje code is al 70,48%!

Sprites

Door het gebruik van sprites wordt het aantal requests verkleind. Het is een veelgebruikte techniek waarbij meerdere kleine afbeeldingen worden samengevoegd op één enkele afbeelding. Vervolgens wordt met CSS de juiste sectie uit deze grote afbeelding getoond op de plek waar nodig. In plaats van tientallen losse requests is er nu nog maar één enkele request nodig.

Verbeter de performance van je website

Let’s punch it. Wat zijn nou écht slimme manieren om je website te optimaliseren op het gebied van performance?

Lazy loading

Content die pas onder de vouw staat, hoeft niet tegelijk te worden ingeladen met de content die boven de vouw staat. Het is toch nog niet meteen zichtbaar voor de eindgebruiker.

Dit heet lazy loading: naarmate iemand naar beneden scrollt, worden bepaalde elementen pas zichtbaar. Dit doet verder geen afbreuk aan de gebruikerservaring die iemand heeft op een website. Probeer het zelf maar.

Upgrade your engines: check je PHP

Welke PHP-versie draait er op jouw website?

Die versie wordt niet vanzelfsprekend automatisch geüpdatet. Terwijl er toch echt enorme verschillen zitten in de performance-prestaties van oudere en nieuwe versies. Bij PHP gaat dat om het aantal requests per seconde.

Hosting

Vanzelfsprekend is goede hosting ook van belang. Maar staar je niet blind op de prijs: er is nog veel meer van belang voor goede hosting:

  • Welke versies worden er gebruikt?
  • Hoe zit het met de supportafdeling?
  • Wat is de downtime per jaar? De downtime geeft aan hoe vaak een server down is - ofwel, offline. Hoe groter het percentage, hoe beter: 99% (1% downtime dus) betekent nog steeds 7 uur offline. 99,9999% slechts 2,7 seconden.
  • Gebruiken ze shared hosting? Hierbij maak je met meerderen gebruik van een server, waardoor het pakket flink goedkoper kan uitvallen.

Response headers

Wanneer de browser van de bezoeker een verzoek doet naar de server om bijvoorbeeld een plaatje op te halen, zal de server naast het plaatje antwoorden met een aantal “response headers”. Hierin staat bijvoorbeeld hoe lang het plaatje gecached mag worden door de browser van de bezoeker. Op die manier zal het plaatje de volgende keer niet meer worden opgevraagd door de browser - dat scheelt!

Content Delivery Network (CDN)

Met een Content Delivery Network maak je gebruik van servers die op meerdere locaties staan. Een verzoek van iemand uit Japan doet er nou eenmaal langer over om aan te komen bij een Nederlandse server, dan het verzoek van iemand uit Amsterdam.

Een CDN heeft een paar flinke voordelen:

  • Doordat er een ander domein wordt gebruikt kunnen er meer concurrent requests (gelijktijdige connecties) worden gebruikt om de assets van een website te laden
  • Fllupage cache als dienst: wanneer je een relatief statistische website hebt is dit een echte performance improvement. Het CDN zal zelf een kopie van je website opslaan, inclusief alle assets. Dit betekent dat wanneer het CDN aan het request van de bezoeker kan voldoen er geen communicatie op je eigen server hoeft plaats te vinden met bijvoorbeeld de database.
  • DDoS protection, grote hoeveelheden malafide verkeer worden geïdentificeerd en tegengehouden, zodat je website online blijft.
  • Plotse spikes, zoals een radiospotje of commercial die plots zorgt voor een grote hoeveelheid bezoekers? Een CDN helpt om dit goed af te handelen.

HTTP/2

HTTP/2 is de snelle opvolger van HTTP/1. Dat komt onder andere door de “multiplexing”-techniek: de browser stuurt meerdere verzoeken, zodat de server kan bepalen wat er als eerste ingeladen moet worden. Dit komt de laadsnelheid enorm ten goede.

Google Tag Manager

En toen kwam de marketeer. Het webbureau heeft zo zijn stinkende best gedaan om alles te optimaliseren... En dan komt die onwetende marketeer die GTM (Google Tag Manager) gebruikt om de hele website om te bouwen.

Het gevolg:

  • Korte experimenten die voor eeuwig in GTM blijven staan, terwijl ze uiteindelijk door de webbouwer geïmplementeerd zouden moeten worden als het experiment succesvol blijkt.
  • Door de lage drempel van GTM is het wel heel erg makkelijk om toch even een code voorbeeld van een blog te knippen en plakken, inclusief die jQuery libraries die eigenlijk al in de site zaten.
  • De lookup table variable: super handig, maar let op bij een grote hoeveelheid entries.

Wees dus accuraat met Google Tag Manager. Het lijkt een slimme en snelle oplossing voor marketeers, en dat is het ook - maar slim en snel is het zeker niet als je er een rommeltje van maakt. Bij twijfel? Vraag je developer!

Stop met one-time optimalisaties

En zo zijn we terug bij mijn eerste vraag: hoe vaak check jij de performance van je website?

In de regel dien je toch wel minimaal 1 keer per kwartaal een goede check te doen. Maar let op:

  • Een goed geoptimaliseerde website zal minder vaak een check nodig hebben;
  • Een website met een flink verleden heeft ingewortelde slijtage, bij wijze van spreken, en heeft vaker aandacht nodig.

Wie helpen jou dan met het up-to-date houden van je snelheid?

  • Je hosting partner, die dient na te denken over de server;
  • Je webbouwer, die problemen moet kunnen “ruiken” en ook direct oplost;
  • Een analytische online marketeer, die de prestaties monitort.

Slimme tools

Je wilt een snelle website. Die performance begint bij een geoptimaliseerde website, die continu geoptimaliseerd wordt.

Er zijn slimme tools die je helpen bij het optimaliseren van de snelheid van je website:

  • Smart Pre-rendering: deze slimme tool voorspelt, op basis van machine learning, wat de volgende pagina gaat zijn waar je bezoeker waarschijnlijk heen gaat en laadt die alvast in in de browser.
  • Pingdom: monitort de performance van je website op de belangrijkste punten.
  • Imagecompressor: bepaal zelf hoe de kwaliteit van je afbeelding is, waarbij je natuurlijk ook let op de bestandsgrootte van de afbeelding.
  • PageSpeed-tools van Google: tools van Google zelf die je helpen bij het verbeteren van je performance.
  • Lighthouse: een zeer gedetailleerd rapport dat Google voor je genereert, waar je bij wijze van spreke direct mee aan de slag kan.

Dit is deel 3 van de 7-delige blogserie 'Digital Marketing Live! 2018' In deze blogserie duiken we in de 22 (!) presentaties en round table sessies die Fingerspitz als hoofdsponsor verzorgde tijdens dé jaarlijkse marketing update van Emerce, in de Beurs van Berlage in Amsterdam. Meld je aan voor onze community en mis niets van deze blogserie, en nog veel meer interessante content.