Een startersgids over snelheidsoptimalisatie van websites

Hoofdstuk 2: De impact van websiteperformance op zakelijk succes

Performance beïnvloedt verkoopcijfers

Websiteperformance is gebruikerservaring. Het is de kracht van paginasnelheid vertaalt naar een aantrekkelijke online winkelervaring en inspireert verkoopcijfers en bepaalt uiteindelijk het succes van een online bedrijf. Google, de grote leider binnen de industrie, houdt rekening met paginasnelheid in hun gepatenteerde zoekalgoritmes sinds het voor het eerst de impact van websiteperformance op verkoopcijfers begon te voelen. De zoekmachine merkte ooit een dip van 20 procent in webverkeer na een halve seconde vertraging in laadtijd.

Google was snel genoeg om het probleem op te lossen voordat hun marktaandeel eronder leed, maar hetzelfde kan niet altijd gezegd worden over online ondernemingen die hun aanwezigheid in de competitieve online markt nog moeten bewijzen.

V: Dus hoe beïnvloedt slechte websiteperformance de verkoop van een gemiddelde online onderneming?

A: Enorm, is het enige antwoord!

Adviesbureau Forrester heeft recentelijk onderzoek gedaan naar de status van de online winkelervaring van consumenten en evalueerde hoe onderpresterende websites ondernemingen de das om doen terwijl betere websiteperformance een snelle groei in verkoopcijfers veroorzaakt.

Het onderzoek wijst uit dat 88 procent van de internetgebruikers kiest voor een webwinkel met een hoge score op performance en gebruiksvriendelijkheid en dat bijna 50 procent weggaat wanneer de website niet binnen drie seconde is geladen.

Deze acties hebben een effect op de verkoopcijfers. 79 procent van de ontevreden klanten komt niet terug naar een onderpresterende website – tenzij je Google of Amazon bent. 46 procent van de ontevreden klanten krijgt (een langdurige) negatieve indruk van het bedrijf en 44 procent deelt hun winkelervaring met de rest van de wereld. De slechte winkelervaring heeft verder niet alleen effect op het web: 87 procent van klanten maakt aankopen zowel in webshops als in fysieke winkels.

Terwijl service en productkwaliteit op het eerste gezicht de grootste impact hebben op verkoopcijfers, is de conversie van een websitebezoeker naar een betalende klant in de praktijk voornamelijk afhankelijk van een positieve webervaring van de bezoeker. Dit is waar parameters zoals supersnelle paginasnelheden en een vlug betalingstraject een rol gaan spelen. Uiteindelijk geeft de positieve psychologische ervaring van klanten een positieve draai aan verkoopcijfers en klantloyaliteit.

Performance beïnvloedt conversie

Conversiepercentages, de belangrijkste variabele voor online ondernemingen, zijn voornamelijk afhankelijk van een aantal specifieke cruciale prestatie-indicatoren (Engels: KPI). Deze KPI’s geven online winkelplatforms een competitief voordeel ten opzichte van de concurrentie.

In de cyberwereld worden conversiepercentages niet verbeterd door enkel traditionele marketingcampagnes in te zetten. Dit moet eigenlijk altijd gebeuren door ook de gebruikerservaring te verbeteren, zoals de snelheid en reactievermogen van de pagina.

Obama’s inzamelingsactie tijdens de presidentsverkiezingen van 2011 bracht een extra 34 miljoen dollar op toen de ‘Obama for America’-website haar laadtijden van pagina’s verminderde van 5 seconde naar 2 seconde. Dat is een toename van 14 procent in de donatieconversie door een verbeterde websiteperformance van slechts drie seconde!

Om potentiële klanten naar de voordeur van een fysieke winkel te brengen heb je vaak een doordacht marketing- en advertentieplan nodig. Maar áls de klanten eenmaal binnen zijn, gaan ze meestal niet naar buiten zonder een aankoop.

Het kost veel minder moeite om online klanten een webwinkel te laten bezoeken – de meeste internetgebruikers vinden het niet erg om onbekende webpagina’s te openen – helemaal wanneer ze doelloos zitten te surfen. SEO en social media-advertenties zijn vooral geschikt om deze (lucratieve) doelgroep naar je website te krijgen.

Het is echter net zo gemakkelijk voor deze bezoekers om de website weer te verlaten als de gewenste informatie niet beschikbaar is binnen een aantal seconden – met hetzelfde gemak waarmee ze naar je website kwamen, gaan ze ook weer weg!

Gebruikerservaring met betrekking tot website performance en responsiviteit is daarom de ultieme variabele in het bepalen van de conversiepercentages van je website. E-commerce gaat in de eerste plaats over gebruiksgemak en het effectief bereiken van potentiële klanten met de juiste informatie, producten en diensten op het juiste moment.

Dit is echter alleen mogelijk als je webpagina’s snel genoeg geladen worden om je bezoeker op de site te houden. Dit lukt uiteraard niet als de performance van je website ze irriteert. Ben je je niet bewust van hoe jouw websiteperformance je conversiepercentages beïnvloedt? Tools zoals Google’s Test My Site kunnen helpen antwoord te geven op deze vraag (zie het voorbeeld hieronder).

Performance beïnvloedt gebruikersbetrokkenheid

De betrokkenheid van gebruikers is een van de belangrijkste factoren van een websiteanalyse. Online ondernemingen die zijn gevestigd in de competitieve cyberspace begrijpen tegenwoordig het belang van websiteperformance en de tools die paginasnelheden analyseren.

De betrokkenheid van bezoekers met de website, dat bijvoorbeeld wordt gecreëerd door het aanbieden van een responsieve en snelle website, wordt vaak gezien als de belangrijkste indicator van het succes van een online onderneming. Wanneer bezoekers zich in controle voelen over hun surfervaring, doordat ze bijvoorbeeld niet hoeven te wachten op het laden van een pagina, komt dit de conversiepercentages ten goede.

Voor onderpresterende websites – waar onderpresterend een relatieve term is – zijn de laadtijden langer dan het kortetermijngeheugen van mensen en, gecombineerd met fouten in code, geeft het signaal af van onkunde aan de kant van de website.

Goed presterende websites – waar goed tevens een relatieve term is – beïnvloeden de drie belangrijkste parameters van de gebruikerservaring: het gevoel, de mentale toestand en de acties van de gebruiker. Deze drie aspecten creëren een emotionele band tussen de website en de menselijke bezoekers.

Met deze band kunnen online ondernemingen sommige eigenschappen van de gebruiker sturen, zoals hun aandacht, motivatie en vertrouwen. Hierdoor wordt een bezoeker een klant, een klant een vaste klant en kan een vaste klant zelfs ambassadeur van een merk worden.

Performance is belangrijk voor je omzet

Een investering in websiteperformance kan veel kosten terwijl er slechts een paar seconden aan  laadtijd afgeschaafd wordt. Toch zal het meteen rendement opleveren in de vorm van een hogere omzet en een vermindering van operationele kosten.

E-commerce-gigant Shopzilla bereikte 50 procent minder operationele kosten door hun laadtijd te verkorten van 7 seconden naar 2 seconden. Prestatieverbeteringen, door het websiteontwerp te veranderen, stelden het bedrijf in staat om met dezelfde hardware veel meer bezoekers verwerken. Behalve de verbeterde reactiesnelheid van de website werden ook de inkomsten met 12 procent verhoogd, doordat de winkel het groeiende webverkeer uitbreidde zonder extra investeringen in hardware te hoeven doen.

Betere KPI’s van de website leidde ook naar een betere score op AdWords en daardoor ook een verminderde ‘Cost per Click’ (CPC). Online ondernemingen met hoge scores en paginasnelheden kunnen hun advertentiebudget efficiënt en effectief uitgeven en maximaliseren daardoor hun bereik om klanten aan te trekken zonder dat daarvoor extra uitgaven nodig zijn.

Aan de andere kant zorgen onnodig lange laadtijden voor hoge kosten. Bing deed een onafhankelijk onderzoek naar het effect van performance op haar omzet en ontdekte dat een vertraging van slechts 2 seconde een krimp in de omzet veroorzaakte van wel 4,3 procent per gebruiker.

Extra inspanningen om de websiteperformance te verbeteren kunnen tijdelijk extra geld kosten, maar de extra investeringen vertalen uiteindelijk naar een hoger netto inkomen, hogere inkomsten en minimale operationele kosten.

Performance beïnvloedt de gebruiksvriendelijkheid

Websites met de steilste leercurve bereiken de hoogste lock-in van klanten. Internetgebruikers beschouwen de tijd die het kost om een andere websites te leren gebruiken als een belangrijke factor om bij jou te kopen.

De verhouding tussen de gebruiksvriendelijkheid van een website en de klantenloyaliteit zijn gebaseerd op de KPI’s, waaronder paginasnelheid, laadtijd en hoe snel de website op gebruikersverzoeken reageert. Een hypothetisch model voor het optimaliseren van websitesnelheid zet deze elementen in beschouwing, waarbij karakteristieken als vertrouwen, interactiviteit en de relevantie van informatie worden beschouwd als de belangrijkste indicatoren van de gebruiksvriendelijkheid van de website.

Om die reden meten webcrawlers en zoekmachines de prestaties van websites op het gebied van paginasnelheid, navigeerbaarheid, gebruikerservaring, responsiviteit en bereikbaarheid (vanaf verschillende locaties) bij het genereren van zoekresultaten.

Eindgebruikers verwachten het volgende wat betreft de bruikbaarheid van websites:

• Makkelijk om te gebruiken, navigeren en begrijpen.
• Levert direct relevante informatie.
• Bereikbaar vanaf alle soorten apparaten, besturingssystemen, browsers en geografische locaties.
• Levert correcte, geloofwaardige en goede kwaliteit informatie, producten en diensten met minimale clicks en browseraanvragen.

Het vervullen van deze intenties is van vitaal belang voor het maximaliseren van websiteperformance, bruikbaarheid en klantenloyaliteit, wat allemaal overlappende elementen zijn op de weg naar online zakelijk succes.

Hoofdstuk 3: Het belang van mobiel verkeer

Mobiel is de toekomst. Het gebruik van mobiele apparaten stijgt, en het ziet ernaar uit dat de groei van mobiel verkeer niet te stoppen is – in 2017 waren er 2,32 miljard smartphoneabonnementen, ongeveer 30 procent van de wereldwijde bevolking. De mobiele markt gaat intussen ongestoord door met het schade toebrengen aan online ondernemingen die nauwelijks timmeren aan de weg van mobiele internetmarketing.

Succes in de cyberwereld is afhankelijk van het vermogen om een hoofdzakelijk mobiele aanpak te omarmen nu de populatie van mobiele abonnees explosief toeneemt. Voor de organisaties die hun best doen om mobiele gebruikers effectief te bereiken heeft de massieve mobiele doelgroep onvoorstelbare prijzen in petto.

Internetmarketing gericht op de desktop is passé. Zoek maar eens op de Engelse termen “Post PC Era”, “freefall of PC sales” en de “death of the desktop”, en wat steeds terugkomt is een groot aantal artikelen die een sombere toekomst zien voor organisaties die achterblijven met een desktopgeoriënteerde mindset.

Toch is er hoop. Voor dergelijke achterlopers in de industrie is het niet te laat om de mobiele website tot topprioriteit te stellen. Er is echter wel een ‘maar’. Het heeft niet veel zin om mobiele gebruikers aan te trekken, zonder dat de website geoptimaliseerd is voor mobiel gebruik.

Het is dus niet zozeer dat ze een verkeerde richting inslaan door het kiezen voor mobiel. Het is vooral omdat ze een paar essentiële stappen missen en de basisbehoeften van mobiele klanten niet vullen. Dit is voornamelijk het ontbreken van een goedwerkende mobiele website.

Mobiel versus desktop – waarom zou ik ermee beginnen?

Simpel gezegd: omdat alle anderen het doen. De strijd om de mobiele gebruiker is intens en in 2014 werd het door de directeur van Yahoo gelabeld als een “omslagpunt” voor het internet. En ze had gelijk! Stone Temple bekeek de statistieken van 77 miljard websitebezoeken door Similar Web in 2017, en tot niemands verbazing was mobiel goed voor meer dan de helft van het webverkeer.

Hier zijn een aantal statistieken:

• 87% van de Amerikanen heeft een mobiel apparaat.
• 45% hiervan heeft een smartphone.
• 90% hiervan surft op het internet via hun mobiel.
• Deze mobiele gebruikers besteden gemiddeld 1,4 uur per dag aan browsen op hun mobiel.
• 74% verlaat een mobiele website die niet binnen 5 seconde is geladen.

Vanuit het perspectief van webdesign zou de focus dus moeten liggen op het apart aanpakken van deze twee groepen – mobiel en desktop. Zonder een dergelijke strategie bereikt de gebruikerservaring van mobiele bezoekers het vriespunt, omdat ze langzame, onbruikbare en niet functionerende desktopsites moeten bezoeken. Het negeren van deze cruciale aspecten kan leiden tot een negatieve impact op je online onderneming, waaronder:

• Weinig mobiele aankopen: Mobiele internetwinkelaars hebben een kortere aandachtspan en minder geduld dan desktopgebruikers.
• Verlies van competitie: Volgens een enquête onder duizenden volwassen Amerikaanse smartphonegebruikers, zegt bijna 75 procent van de respondenten dat ze het liefst mobiele e-commercewebsite bezoeken die een volwaardige mobiele gebruikerservaring aanbieden.
• Verlies van merkwaarde: Slecht ontworpen mobiele websites, die simpelweg de HTML-code van de volledige desktopsite verkleinen waardoor bezoekers moeten in- en uitzoomen om door de pagina te navigeren, maken het minder waarschijnlijk dat bezoekers in de toekomst opnieuw contact maken met het bedrijf.

Deze gevolgen werken de volgende einddoelen van je website tegen als het gaat om de mobiele gebruiker:

• Het uitbreiden van het gebruikersbestand.
• Het genereren van nieuwe advertentiemogelijkheden.
• Het efficiënt aanbieden van kwaliteitsdiensten met een hoge mate van gebruiksgemak.
• En het meest verontrustend, het niet omarmen van het mobiele verkeer als overkoepelende strategie van de onderneming.

Desktops en mobiele apparaten verschillen in technologie, vorm en gebruikersinterface – allemaal aspecten die belangrijk zijn om tot optimale websiteperformance te komen. Zonder mobiele websites apart te optimaliseren om de beste mobiele ervaring te kunnen leveren nemen verschillende website-KPI’s af.

Omdat mobiele technologie gebruikers in staat stelt te browsen terwijl ze staan, lopen of op de bank liggen, verwachten mobiele gebruikers meer van een website wat betreft functionaliteit dan desktopgebruikers. De mogelijkheid om mobiele website-inhoud te bezorgen in de korte aandachtspan van ongeveer 2 seconde is het verschil tussen het winnen van de loyaliteit van mobiele internetgebruikers of het gefrustreerd sluiten van je website.

De aantrekkelijke mobiele site die klanten aantrekt

Gezien de vele e-commerceaankopen vanaf mobiele apparaten, zijn goed presterende mobiele websites een duidelijke prioriteit voor e-commerceorganisaties. Een recent onderzoek toont aan dat e-commercebedrijven miljoenen mobiele klanten kunnen mislopen, die samen met desktopgebruikers goed zijn voor ongeveer 80 procent van de online aankopen.

De conversieratio van kleine e-commercebedrijven die werken op onderpresterende mobiele websites is meestal 0,6 procent, vergeleken met het succespercentage van 1,6 procent van vergelijkbare desktop-e-commerceproviders.

Tabletgebruikers geven daarentegen 20 procent meer uit dan desktopgebruikers. Door dit publiek binnen te lokken kunnen online bedrijven in het mobiele internetmarketingsegment hoge inkomsten verwachten, die misschien op een dag het desktoppubliek zouden kunnen overstijgen.

Desalniettemin zal de vraag om te voldoen aan de behoeftes van mobiele gebruikers exponentieel blijven stijgen. Zoekmachineoptimalisatie van mobiele websites is nu al een vak apart – en dat geldt ook voor de optimalisatie van mobiele websites, die bestaat uit:

• Hoge snelheden
• Korte laadtijden
• Efficiënte levering van mediarijke inhoud
• Hoge downloadsnelheid
• Optimaal siteformat
• Makkelijk in gebruik en navigatie
• En een volledig functionerende website die minimale input nodig heeft om de complexe taken van mobile internetgebruik uit te voeren.

Door deze aspecten aan te pakken, kunnen kleinere websites in de mobiele internet-sector concurreren met hun grotere tegenhangers die conversiepercentages hebben tot wel 1,2 procent (dat is twee keer zo hoog als de conversiepercentages op desktopcomputers!), en ruim 80 procent van de omzet behalen van de desktopversies van hun sites.

De snelste bij de finish staat het hoogst op het podium

Het is daarom geen verrassing dat de mobiele webpagina’s van Fortune 100-bedrijven binnen gemiddeld 5 seconden laden – dat is twee seconden sneller dan de gemiddelde acceptabele snelheid (maximaal 7 seconden).

Voor webwinkeliers is een laadtijd van 5 seconden echter voldoende om bezoekers weg te jagen. In de retailsector laden sommige websites even snel als pagina’s van Google, met laadtijden vanaf 1 seconde! Enorm snel, met Google-achtige focus op paginasnelheid en reactietijd van websites. Dat is echter wel de gemiddelde laadtijd van 16 van de top 100 detailhandelaren die via meerdere kanalen de vruchten plukken van een waanzinnig snelle mobiele websites, en daardoor miljarden dollars verdienen aan hun mobiele klanten.

Google beschrijft een aantal wijzigingen (hier en hier) aan  het ontwerp van mobiele websites om de pagina’s binnen 1 seconde weer te geven – zelfs als je niet tot de top 100 behoort! Voor supernerds die mobiele webontwikkeling in eigen hand nemen, biedt het World Wide Web Consortium (W3C) zonder winstoogmerk een handvol aan best practices (hier en hier). Het is veel om te lezen, maar het laat duidelijk zien hoe belangrijk en intensief de optimalisatie van mobiele websites is!

En voor bedrijfseigenaren die webontwikkelaars in dienst hebben om responsieve en geoptimaliseerde mobiele websites te ontwerpen, moeten de verbeteringen worden gezocht in de volgende drie onderdelen van de anatomie van een mobiele website:

• Vloeiende rasters
• Flexibele afbeeldingen
• Media queries

En er moet gefocust worden op de volgende mobiele website-elementen:

• Masthead
• Afbeeldingengalerij
• Productbeschrijving
• Hulpinformatie
• Footer

Klanten waarderen snel reagerende websites en pagina’s met korte laadtijden. Mobiele technologie en de innovaties die gepaard gaan met de toenemende afhankelijkheid van smartphones en tablets vertonen geen tekenen van vertraging. De beste online webwinkels begrijpen de noodzaak om website-inhoud efficiënt naar de kleine mobiele schermen te brengen. Als je het goed aanpakt met websites die zijn ontworpen voor mobiele platforms, kunnen klanten snelle en goed geïnformeerde aankoopbeslissingen nemen die uiteindelijk oneindige inkomsten voor online bedrijven genereren.

60 procent van de consumenten gebruikt uitsluitend mobiele apparaten om aankopen te doen. Mobiele apparaten en desktopcomputers worden even belangrijk geacht als het aankomt op het opzoeken van informatie – 42 procent van de internetgebruikers geeft de voorkeur aan mobiel, tegenover 43 procent voor PC en laptop – maar het (toenemende) gemak van toegang tot internet via mobiele apparaten stimuleert zowel het gebruik van mobiel internet en de bijkomende zakelijke mogelijkheden.

En als je nu nog steeds van plan bent om de prestaties van mobiele websites te negeren, wil je misschien nadenken over de kansen en het succes dat haalbaar is met een speciaal ontworpen en geoptimaliseerde mobiele website.

Hoofdstuk 4: Veelgemaakte fouten wat betreft websiteperformance

De online markt – zoals de slagvelden van het oude Griekenland – bestaat uit concurrerende platforms met een hoge inzet, waar alleen de meest ijverige overleven. En net als bij alle gevechten met een hoge inzet, dragen menselijke factoren (beslissingsfouten, blunders en onwetendheid) aanzienlijk bij aan de uitkomst van de wedstrijden tussen online bedrijven.

Nog steeds hebben online bedrijven en webmasters de neiging om cruciale webelementen over het hoofd te zien waarmee ze de laadtijd van sites onnodig vertragen. De gevolgen hiervan zijn meestal net zo gevaarlijk als het paard van Troje dat door de versterkte muren van de stad Troje dringt en daar de volledige controle overneemt, ondanks de grootte en superioriteit van het Trojaanse leger.

Concurrentie om online zakelijk succes is net zo intens, zij het een tikkeltje minder gewelddadig. De strijd om de aandacht van de klant komt neer op het leveren van de gevraagde inhoud op de meest efficiënte en nauwkeurige manier. En net als menselijke blunders en onwetendheid die de uitkomst van de Trojaanse oorlog dicteerde, hebben veelvoorkomende fouten die websiteprestaties de nek om draaien de neiging om het resultaat van online zakelijke concurrentie te bepalen. De eerste bij de finishlijn wint de race!

De ‘Gap of Death’, het tijdsinterval tussen de verwachte laadtijd van minder dan 2 seconden en de gemiddelde sitelaadtijd van 5 seconden, groeit of krimpt  als gevolg van verwaarloosde optimalisatietactieken voor de website of door zakelijk beleid. In tegenstelling tot wat gebruikelijk is, wordt snelheidsoptimalisatie idealiter geïmplementeerd in alle stadia van de ontwikkeling van websites, en niet alleen ná het bouwen van de hele site. Dit gebeurt doorgaans alleen als de website-eigenaar zich realiseert dat het noodzakelijk is om te streven naar optimalisatie van de websiteprestatie.

Maar ook add-ons en andere toepassingen voor snelheidsoptimalisatie die geïmplementeerd worden ná het ontwikkelen van websites verbeteren de paginasnelheid, waardoor de ‘Gap of Death’ wordt verkleind. Maar zelfs binnen deze prestatiezone dalen de conversiepercentages met 7 procent voor elke seconde boven de verwachte laadtijd van 2 seconden.

Aan de andere kant kunnen website-eigenaren die op hun hoede zijn voor snelheidsoptimalisatietactieken streven naar hogere websiteprestaties door de volgende cruciale fouten te vermijden:

Middelmatige webhostingservice

De fout om te kiezen voor een middelmatige webhostingservice is eeuwig zonde. Met meer dan 1,3 miljard websites in 2017 is de webhostingsruimte overvol. De wereldwijde beschikbaarheid van vele hostingopties sporen bedrijven en hobbyisten aan om zich in de cyberwereld te vestigen. De vraag naar kosteneffectieve webhostingservices neemt exponentieel toe, en hostingproviders zijn daardoor bereid om de servicekwaliteit in te perken om een groter marktaandeel te verkrijgen door de goedkoopste te zijn.

Middelmatige webhostingservices die kosteneffectieve diensten verkopen maximaliseren hun winst door duizenden websites te hosten op enkele overvolle Apache-stacks. Niet-geoptimaliseerde servers met duizenden openbare websites op een enkele serverstack zijn bijzonder schadelijk voor e-commercewebsites, gekenmerkt door grote pieken in het webverkeer, multimedia-inhoud en grote websitebestanden.

Webhosting- en ontwikkelingsbedrijven die slechte diensten leveren zijn direct verantwoordelijk voor de financiële verliezen en een beschadigde merkreputatie van online ondernemingen. Goede websiteprestaties zijn cruciaal voor het succes van e-commercebedrijven, aangezien websites die meer dan 3 seconden nodig hebben om te laden onmiddellijk 40 procent van hun webverkeer verliezen. 79 procent van de ontevreden bezoekers keert niet meer terug naar trage e-commercesites!

Het is dan ook belangrijk om tijd en geld te investeren in een webhostingservice van de hoogste kwaliteit, die krachtige websites kan faciliteren en daarmee veel inkomsten genereert door efficiënt en systematisch de aandacht van bezoekers vast te houden.

Plaats maken voor bandbreedtedieven

Het optimaliseren van websitesnelheid is een continu proces en gaat veel verder dan een abonnement op de beste webhostingservice ter wereld. Het is ook belangrijk te realiseren dat een kleinere website in dezelfde setting sneller wordt geladen dan een grote website. Aangezien laadsnelheid cruciaal is, is het mogelijk dat ideeën die de omzet zouden moeten verhogen (door bijvoorbeeld meer afbeeldingen in de webshop te implementeren of een geavanceerde zoekfunctie te installeren) juist een averechts effect hebben, omdat de hoge laadtijd ervoor zorgt dat bezoekers afhaken. Kijk dus goed uit voor deze ‘bandbreedtedieven’.

Te veel widgets of plugins

Extra functionaliteit is altijd aangenaam voor website-eigenaren en ontwikkelaars. Widgets en plugins zorgen voor handige toevoegingen aan bestaande websites en zorgen vaak voor slechts een lichte belasting op de prestaties van de website. Maar zelfs de kleinste widgets, zoals de LinkedIn-knop, kunnen de laadtijd in sommige gevallen met wel 2 seconden doen toenemen.

De like-knop van Facebook is een andere veelvoorkomende vertraging, omdat bekend is dat deze gemakkelijk meer dan 40 webverzoeken kan toevoegen (zoals hieronder weergegeven). Op de site van een cliënt zagen we dat de knop 700 kB aan de totale paginagrootte toevoegde, wat net zo veel is als 700.000 bytes. Veels te veel!

Het tot een absoluut minimum beperken van add-ons is essentieel voor het behoud van optimale websiteperformance – zelfs plugins die op dezelfde websitekern zijn geïnstalleerd, concurreren om de snelste reactie op browserverzoeken, waardoor de bandbreedte uiteindelijk afneemt.

Soms zijn de kwaliteit en functionaliteit van de geïnstalleerde plugins belangrijker dan de kwantiteit van de plugins. Plugins die grote gegevensstromen vragen om complexe bewerkingen uit te voeren, moeten dit buiten de server doen, en niet binnen hostingomgevingen zoals WordPress.

Te veel advertenties en externe diensten

Hoe verleidelijk het ook mag zijn, te veel paginaruimte voor externe adverteerders verslechtert de prestaties van de website. Te veel en te langzame advertenties verhogen de bouncepercentages en hebben een negatieve invloed op de online verkoop. De financiële tegenvallers die gepaard gaan met hoge bouncepercentages wegen doorgaans zwaarder dan de monetaire voordelen van het overhandigen van enorme websiteruimte aan adverteerders.

Externe diensten brengen normaliter twee problemen met zich mee. De een wordt veroorzaakt door de hoeveelheid ervan, en de andere heeft te maken met wachten totdat ze laden.

• Wanneer je veel externe services hebt, moet je ze allemaal laden en op informatie wachten bij het laden van elke pagina. Hoe meer oproepen je doet, hoe meer je wacht, en hoe hoger de belasting op de eigen server en wordt, waardoor de kans groter is dat je tegen het tweede probleem aanloopt.
• In sommige gevallen wordt het laden van de pagina onderbroken totdat de gegevensoverdracht tussen uw site en de externe service is voltooid. Als de service in de header wordt aangeroepen en er een serviceonderbreking is, zal de pagina weigeren om te laden.

Volgens een onderzoek kost het genereren van inkomsten met een banneradvertentie bijna 33 procent extra netwerklatentie. Opdringende pop-upadvertenties irriteren bezoeken tot op het punt waar ze de website verlaten.

Affiliate-code, zelfs een paar extra scriptregels, neemt waardevolle geheugenruimte in beslag in de hostingomgeving en vereisen aanvullende processorcycli om de inhoud aan eindgebruikers te leveren.

Desondanks zijn online advertenties de primaire bron van inkomsten voor veel online bedrijven (denk aan Google en Facebook!) en een optimaal advertentiemodel draagt veel bij aan website-inkomsten mits vertragingen bij het laden van pagina’s worden beperkt.

Overvol designthema en incompatibele multimedia

Indrukwekkende thema’s en multimedia-inhoud zijn blikvangers voor online verkeer, mits ze het scherm van ongeduldige bezoekers überhaupt bereiken. Afbeeldingen en video’s van hoge kwaliteit (veel pixels, grote bestandsgrootte) duren langer om te downloaden, terwijl lichtgewicht afbeeldingen van lage kwaliteit de aandacht van de gebruiker nauwelijks weten te vangen, ondanks hun lagere laadtijden.

Grafisch-intensieve inhoud is echter niet altijd de beslissende factor bij het genereren van conversies en verkopen. Dit geldt met name voor e-commercewebsites die productafbeeldingen en video’s moeten bevatten die de waarde van producten beschrijven, en niet noodzakelijkerwijs mooi hoeven te zijn.

Compatibiliteitsproblemen hebben ook invloed op multimedia- en applicatieprestaties in bepaalde browsers en locaties. Neem bijvoorbeeld Google Chrome en Shockwave Flash. De twee kunnen zelden goed met elkaar opschieten. Evenzo kunnen overheidsbeperkingen van een land voorkomen dat specifieke multimedia-inhoud de bezoekers bereikt.

Websites met slecht functionerende multimedia-inhoud kosten veel communicatiecycli om de bezoeker te bereiken, wat uiteindelijk de prestaties van de website verslechteren. Het is echter aan website-eigenaren om te zorgen voor een gestroomlijnd serviceniveau voor alle browserplatforms, apparaten en geografische locaties, aangezien overheidsbeleid en browsercompatibiliteit mogelijk in de loop der tijd veranderen en vaak ook op onvoorspelbare wijze.

Snelle en volledig functionele multimedia-inhoud is cruciaal om bezoekers te kunnen behouden. Elke seconde vertraging bij het laden van de pagina leidt ertoe dat gefrustreerde bezoekers trage websites verlaten, wat leidt tot 7 procent verlies in conversiepercentages, 11 procent verlies in pageviews en 16 procent verlies in klanttevredenheid.

Nog meer code: aanmeldformulieren en analyses

Aanmeldformulieren en code voor analyse (zoals Google Analytics) voegen slechts enkele regels toe aan de kernbestanden van de website. Maar wanneer code veel ruimte inneemt op de back-end van de website, moeten de paginainhoud en de plugins met deze code concurreren om geheugenruimte. Als gevolg hiervan wordt het natuurkundige fenomeen van niet-lineariteit geactiveerd, en gedraagt elk component zich onvoorspelbaar, waardoor ze meestal meer verwerkingscycli gebruiken dan verwacht.

Vanuit het perspectief van de eindgebruikers zijn deze diensten vaak niet nodig of worden ze van ondergeschikt belang geacht ten opzichte van de daadwerkelijke inhoud die door de website wordt getoond. Veel websites hosten meer dan 80 items (afbeeldingen, plugins, add-ons en andere multimedia-inhoud) en een deel van deze inhoud is niet eens van belang voor een goede website-ervaring van de gemiddelde bezoeker. Extra investeringen in het ontwikkelen van media-rijke websites hebben uiteindelijk een averechts effect wanneer de informatie die daadwerkelijk wordt gezocht door bezoekers gepaard gaat met irrelevante aanmeldformulieren, analysecode en andere content die onnodig veel data toevoegen aan de website.

Mobiele fouten en misplaatste redirects

Verwacht wordt dat het aantal wereldwijde smartphoneabonnementen in 2019 de 2,7 miljard zal passeren en dat 83 procent van de totale internetgebruikers via mobiele apparaten het internet zal bezoeken. 30 procent van het websiteverkeer in de e-commerce kwam in 2016 van mobiele gebruikers en dit aantal blijft exponentieel stijgen met het groeiende aantal smartphonegebruikers.

De concurrentie om de aandacht van mobiele gebruikers wordt nog intenser door het traag laden van mobiele websites, en de kortere aandachtsboog van bezoekers. 60 procent van de mobiele gebruikers verwacht dat mobiele websites binnen 3 seconden worden geladen. Gemiddeld zullen 3 op 4 mensen een mobiele website verlaten als het laden meer dan 5 seconden duurt, terwijl een gemiddelde mobiel vaak zelfs 6-10 seconden nodig heeft om te laden.

Vertragingen in de laadtijd van mobiele pagina’s treden meestal op wanneer websites niet goed zijn geoptimaliseerd en ontworpen om prestaties te leveren op een mobiele interface. Zelfs met speciale voor smartphones ontworpen pagina’s worden mobiele gebruikers niet altijd doorgestuurd naar de mobiele versies van desktopwebsites.

Redirects zijn instructies die gebruikers (zonder dat ze het doorhebben) doorsturen van de opgevraagde pagina naar een andere pagina. Redirects zijn het meest effectief voor mobiele gebruikers die zoeken naar desktopversies van webpagina’s, want die moeten worden toegewezen aan de vergelijkbare mobiele versie van een pagina om de beste websitebeleving te kunnen bieden.

Als je dit onvoldoende doet, moeten gebruikers blijven schakelen tussen ongewenste websitebestanden totdat ze de juiste hebben gevonden. Dit veroorzaakt onnodige vertragingen bij het laden van de informatie die daadwerkelijk door de eindgebruikers wordt gezocht.

Dit is net als het vinden van een lege parkeerplaats op een grote, overvolle parkeerplaats en het zien van een ogenschijnlijk lege plek, om er vervolgens achter te komen dat het bezet is door een klein voertuigje dat niet zichtbaar was vanaf de verte. Dit proces gaat door totdat een je eindelijk bij een vrije plek aankomt – mits de zoektocht niet al lang is opgegeven.

Website-eigenaren zijn uiteindelijk eindverantwoordelijk voor het verliezen van concurrentievoordeel in de mobiele ruimte wanneer het mobiele webverkeer wordt omgeleid naar een irrelevante desktopversie, in plaats van een voor snelheid geoptimaliseerde mobiele oplossing voor mobiele bezoekers.

Websites die niet zijn geoptimaliseerd voor mobiele apparaten, hebben last van veelvoorkomende problemen die de mobiele gebruikerservaring belemmeren. Problemen zoals verkeerde redirects, niet-afspeelbare video’s, teveel afbeeldingen en grafische afbeeldingen, irrelevante cross-links en onnodige inhoud die aan mobiele bezoekers wordt bezorgd, verlagen de prestaties van de website en zorgen uiteindelijk voor hoge bouncepercentages.

Slechts 10 procent van de wachttijd wordt bepaald door het HTML-antwoord op browserverzoeken en de resterende 90 procent van de vertraging wordt veroorzaakt door het renderen van pagina’s, het parsen van de HTML, het uitvoeren van codescripts en het ophalen van ingesloten items. Het herzien van de websiteprestaties met optimalisatietools en scriptaanpassingen kan grote stukken van de laadtijd van pagina’s afschrapen, maar het is misschien niet zo effectief als vanaf het begin een voor snelheid geoptimaliseerde website ontwikkelen. En dat laatste vereist een marketingstrategie, beleid en inzicht in het kunnen het vermijden van de meest voorkomende fouten.

Hoofdstuk 5: Snelheidstesten voor websites – identificeer performance bottlenecks!

Laten we als eerste stellen: webverkeer en zoekmachinerankings zijn belangrijk, maar ze zijn niet de heilige graal van online marketing. Hoe belangrijk ze ook zijn, geen van beide is meer indicatief voor online zakelijk succes dan verkoopcijfers en succespercentages. Om dit in perspectief te plaatsen, e-commercewebsites met (bijna) nul procent bouncepercentage, 15 procent conversiepercentages en 10.000 unieke websitebezoekers van lage zoekmachinerankings zijn veel beter dan sites met een hoge ranking die van 100.000 unieke bezoeken met slechts 0,01 procent conversieratio genieten.

We kunnen eindeloos doorschrijven over hoe we conversiepercentages van een website kunnen verbeteren, door wijzigingen aan te brengen in bijvoorbeeld design, kleur en responsiviteit en hoe we een slecht geoptimaliseerde website kunnen omtoveren tot een goed draaiende business. Maar dit is niet alleen een enorm complexe bezigheid, maar het zal ook maanden duren voordat er – na experimenteren – een wezenlijk verschil in conversiepercentages waar te nemen is.

Makkelijker is het om ons te richten op websiteperformance. Eerder hebben we al vastgesteld hoe belangrijk laadtijd en snelheidsoptimalisatie zijn voor een goed draaiende website. Het implementeren van veranderingen in dit gebied zal niet alleen makkelijker zijn om te implementeren, de verbeteringen zullen ook meteen zichtbaar zijn in hogere conversiepercentages en stijgende verkoopcijfers.

Met name de paginasnelheid is cruciaal in het verbeteren van de conversie. Het verbetert de gebruikerservaring van de website enorm en houdt ongeduldige online klanten betrokken en tevreden. Een recent onderzoek gepubliceerd door O’Reilly concludeert dat het verminderen van de laadtijd  verkoop- en succespercentages aanzienlijk te verhoogt. De verbluffende statistieken zijn als volgt:

• +3% conversies per seconde met een verbetering in de laadtijd van 15 seconde naar 7 seconde.
• +2% conversies per seconde met een verbetering in de laadtijd van 7 seconde naar 5 seconde.
• +1% conversies per seconde met een verbetering in de laadtijd van 4 seconde naar 2 seconde.

Deze statistieken beschrijven alleen hoe paginasnelheid invloed heeft op zakelijk succes in de concurrerende cyberspace. Hoe gecompliceerd het ook lijkt, het afschaven van grote hoeveelheden laadtijd van traag ladende pagina’s is relatief appeltje eitje MITS de snelheidsoptimalisatietactieken op de juiste manier worden uitgevoerd. En het juist uitvoeren van deze veranderingen is niet makkelijk. Als de precieze bottlenecks wat betreft snelheid onbekend, te complex of te groot zijn, dan kan dit het proces om de snelheid te optimaliseren bemoeilijken.

Het streven naar een voor snelheid geoptimaliseerde website begint met het identificeren van kritieke front-end problemen die zich het duidelijkst voordoen bij standaard testprocedures voor websiteprestaties. Google’s voornaamste performance-engineer Steve Souders adviseert hierover: “80 tot 90 procent van de responstijd van de eindgebruiker komt vanuit de front-end. Begin daar”.

Waarop moet je testen?

Voordat we beginnen met zoeken naar de drempels die de snelheid van je pagina negatief beïnvloeden, helpt het om de indicatoren met de meeste impact te weten. Pas als we dit weten, kunnen we effectief de tekortkomingen van jouw specifieke website identificeren.

Initiële paginasnelheid

Het downloaden van veel geheugenbelastende inhoud in een korte periode is niet mogelijk zonder een grondige opknapbeurt van trage websites. In veel gevallen zoeken bezoekers alleen naar de primaire informatie in de vorm van inhoud of productinformatie die wordt weergegeven door webpagina’s. Voeg te veel aanvullende grafische elementen en websitefuncties toe, en de laadtijd van pagina’s wordt groter en groter.

Door de initiële paginasnelheid hoog te houden, blijven bezoekers betrokken, zelfs als het lang duurt voordat de volledige inhoud van de website, inclusief afbeeldingen, wordt weergegeven. Door de startsnelheid van de pagina te meten – door bijvoorbeeld te kijken naar indicatoren zoals de ‘Time to First Byte’ (TTFB) of door pingaanvragen van websiteservers uit te voeren – kunnen we de laadtijd van de pagina en de statistieken van de paginasnelheid nauwkeurig berekenen. Als het laden te lang duurt, moet aan de back-end worden gewerkt in de vorm van optimalisatie van de server en de website.

Volledige laadtijd

Het monitoren van de tijd die het kost om de volledige pagina-inhoud weer te geven is een belangrijk onderdeel van het testen van de gebruikerservaring. Deze informatie is van groot belang bij het nemen van beslissingen over implementatie en optimalisatie van de hardware-infrastructuur om de websiteprestaties te maximaliseren.

Regelmatige monitoring van deze prestatie-indicator stelt website-eigenaren in staat een idee te krijgen hoe de website presteert wanneer deze groeit in grootte en content. Wanneer de performance achteruit gaat, kan gekozen worden voor het leveren van statische content door een Content Delivery Network (CDN), terwijl de back-endservers op een efficiënte manier dynamische content leveren.

Geografische performance

Eén van de voordelen van het hebben van een online bedrijf is het steeds groter wordende wereldwijde marktbereik. Maar dit bereik is over de hele wereld niet altijd even efficiënt – en dus ook niet effectief – vanwege de factoren die de communicatie tussen klanten en servers beperken. Overheidsbeleid, bandbreedte en technologische beperkingen voorkomen optimale websiteprestaties over de hele wereld. Dat betekent dus ook dat websitesnelheids- en beschikbaarheidstests op verschillende locaties moeten worden uitgevoerd om de wereldwijde resultaten van websiteprestaties te bepalen.

Belastingstolerantie

De prestaties van de website variëren afhankelijk van schommelingen in het webverkeer. Hostingservers die geen problemen hebben bij normale belasting kunnen bij veel verkeer al snel veel paginasnelheid verliezen. Het uitvoeren van stresstests, platformtests, belastingtests en andere prestatietests op websites creëert een nauwkeurig beeld van hoeveel webverkeer de website aankan voordat hij prestaties verliest of helemaal niet meer werkt. Vergelijk de resultaten met de werkelijke gebruikspatronen van de website om te bepalen of de website hardware-upgrades nodig heeft om piekbelasting zo efficiënt mogelijk te verwerken.

Belasting van de webserver

Gedeelde (shared) hostingproviders die duizenden websites op afzonderlijke Apache-servers draaien leveren geen hoge prestaties-  zelfs als de website goed is ontworpen met nette en geoptimaliseerde code. Prestatieproblemen worden groter tijdens perioden van piekbelasting wanneer het rekenvermogen van de server niet in staat is om alle aanvragen efficiënt te verwerken. Door te letten op de CPU-belasting op de server, kunnen hostingbedrijven en IT-personeel problemen met webverkeer in de gaten houden en eventueel bijspringen door extra hardware te leveren.

Performance van de database

De performance van de database is van cruciaal belang voor websites met dynamische inhoud afkomstig van back-enddatabases. Er moet een mechanisme zijn om onnauwkeurigheden in de gegevensoverdracht te detecteren. Door de vrije schijfruimte in de gaten te houden op servers die websites hosten, voorkom je gegevensverlies wat weer kan leiden tot bijvoorbeeld foute links. Uiteindelijk zal dit de performance van je website negatief beïnvloeden.

Testen

Website-eigenaren kunnen gebruik maken van een reeks gratis en premium website-prestatietests om hun webpagina’s te analyseren, op maat gemaakte oplossingen te vinden en hiermee de grootste gebreken in performance te verhelpen.

Tools voor het testen van paginasnelheid – van zoekmachine-giganten Google en Yahoo of van experts op het gebied van website-monitoring Pingdom en GTMetrix – leveren gratis waardevolle inzichten in de prestatie-indicatoren van je website. Daarnaast genereren ze scores en suggesties om ook de technisch minderbedeelde website-eigenaren op weg te helpen. Bekijk onze uitgebreide handleidingen om je op weg te helpen.

Hoe deze tools werken

Deze tools gebruiken een groot aantal browsers om websites te laden en de ervaring van eindgebruikerswebsites na te bootsen vanuit verschillende geografische locaties. Knelpunten als het gaat om prestaties worden vervolgens onderzocht, zoals bijvoorbeeld bestandsgrootte, laadtijd, responstijd en verzoeken met betrekking tot verschillende websiteonderdelen (JavaScript, CSS-bestanden, HTML, afbeeldingen, enz.).

De tools genereren prestatiescores op basis van prestaties van webpagina’s en zaken die de gemiddelde bezoeker belangrijk vindt. Dit omvat bijvoorbeeld resource caching, client-server-roundtriptijden, downloaden van gegevens, uploadgrootte en een groot aantal regels die van invloed zijn op de ervaring van de eindgebruiker met betrekking tot paginasnelheid.

Vervolgens worden suggesties gegeven waarmee je de paginasnelheid van je website kan verbeteren. Als bijvoorbeeld een grote afbeelding ongecomprimeerd wordt weergegeven, geven de monitoringinstrumenten tips om deze afbeelding te verkleinen. Het spreekt voor zich dat deze tools cruciaal zijn in het optimaliseren van de websitesnelheid, simpelweg omdat dergelijke problemen vaak nauwelijks te zien zijn, door menselijke fouten of simpelweg onwetendheid. Ze stellen website-eigenaren in staat om problemen te identificeren zodat ze stappen kunnen zetten om knelpunten in de website-prestaties op te lossen.

Zo werkt een test

De volgende test werd uitgevoerd met behulp van de gratis tool van Pingdom, die websitesnelheid test. Bezoek Pingdom en voer de test uit door verschillende geografische locaties te selecteren en vergelijk de eindresultaten. Voer je website in en klik op de “Test Now”-knop.

Vervolgens wordt een overzicht van de site gegenereerd, inclusief een prestatiescore, de totale laadtijd, de totale paginagrootte en het aantal verzoeken op de website.

Het gedeelte met prestatie-inzichten van de Pingdom-snelheidstestfunctie is erg nuttig. Deze zijn allemaal gebaseerd op de regels van Google PageSpeed. Over het algemeen betekent een hogere score lagere laadtijden.

De tool geeft een overzicht van alle gedownloade bestanden in een watervaldiagram en sorteert het op basis van laadvolgorde, laadtijd, grootte, type en URL.

Analyseer de prestaties van elke download door de resultaten te lezen aan de hand van het sleuteldiagram in de tool:

De tool toont welke wijzigingen je kan aanbrengen om de snelheid van je website te optimaliseren. In de voorbeeldtest die hierboven is weergegeven moet de geteste website enkele fouten corrigeren voor niet gevonden verzoeken. Het is echter belangrijk om te begrijpen dat het optimaliseren van deze website-ontwerpelementen een doorlopend proces is dat begint bij het grondniveau van website-ontwikkeling en wordt geïmplementeerd op alle nieuwe pagina’s terwijl de website van grootte veranderd.

Als je meer hulp nodig heeft bij het oplossen van problemen met de prestaties van een site op Pingdom, bekijk dan onze uitgebreide gids voor de tool.

Welke tool moet je kiezen?

Verschillende tools – Google’s PageSpeed Insights, Pingdom en GTMetrix – identificeren verschillende problemen, testen verschillende prestatieparameters en indicatoren op verschillende manieren, en doen dit vanuit verschillende browsers en geografische locaties. Prestatiebeoordelingen en testresultaten zijn daarom waarschijnlijk verschillend, en geen enkele tool identificeert elk knelpunt in de prestatie van een website. Het is echter aan te raden om bij één tool te blijven terwijl je verbeteringen aanbrengt om de voortgang beter te kunnen volgen.

Het testen met meerdere tools, het analyseren van verschillende website-ontwerpelementen en het vergelijken van meerdere testresultaten biedt redelijke inzichten voor eigenaren van online bedrijven om snelheidsoptimalisatiestrategieën voor hun websites te ontwikkelen.

Hoofdstuk 6: Websitesnelheid verbeteren

Het ontwikkelen van een uitmuntende website vergt veel werk. Toonaangevende online bedrijven maken gebruik van ervaren talent, de laatste wetenschappelijke inzichten, een bovennatuurlijke gave voor webdesign en een geweldige webhostingservice voor het ontwikkelen van websites met de beste prestaties en gebruikerservaring. Maar voor degenen die niet beschikken over al deze mogelijkheden, maar toch het streven hebben  om een goed geoptimaliseerde website te runnen, kan een minimalistische benadering – met eenvoudige doe-het-zelf-tactieken voor snelheidsoptimalisatie – net zo goed werken. Zelfs bij een al bestaande, trage website.

Kennis over het investeren in de juiste set van oplossingen en diensten voor de optimalisatie van websitesnelheid, websitebeheer en trucs in de code is essentieel om maximale websiteprestaties te behalen. Strategisch beleid op basis van deze kennis draagt direct bij aan het verbeteren van de websiteprestaties. Dit leidt op zijn beurt tot betere online verkoop, leads, conversies en uiteindelijk zakelijk succes.

Optimalisatie is het modewoord voor succes in de cyberwereld. Cyberspace is, net als de fysieke wereld van planeten, sterren en sterrenstelsels, in een staat van voortdurende verandering en evolutie. In feite is verandering het enige consistente proces in zowel de fysieke als de cyberwereld. Overleven in deze ruimtes hangt af van hoe goed de bewoners zich kunnen aanpassen aan verschillende middelen en omgevingen.

En hetzelfde geldt voor website-eigenaren die strijden om online zakelijk succes tussen wisselende markttendensen, veranderend gedrag van internetbezoekers, razendsnelle ontwikkelingen in cybertechnologieën volgens de wet van Moore en verschillende normen voor websiteprestaties bepaald door de zoekmachine-giganten.

Doe-het-zelf snelheidsoptimalisatie

Online business owners and webmasters adapt their websites to maintain optimal results under the consistent impression of change by improvising and optimizing key elements of website design that make or break page speed.

Optimalisatie van afbeeldingen

Als vuistregel hebben grotere bestanden meer tijd nodig om gedownload te worden dan kleinere bestanden. De downloadtijd van webpagina’s, ook wel de laadtijd van pagina’s genoemd, is afhankelijk van de totale grootte van de inhoud die wordt gedownload van hostingservers door de opvragende browser. Hoogwaardige omvangrijke afbeeldingen leveren de grootste bijdrage aan de grootte van webpagina’s, verlagen de paginasnelheid en zorgen ervoor dat bezoekers ongeduldig wachten tot de webpagina wordt geladen.

Volgens HTTP Archive maken afbeeldingen vanaf december 2017 gemiddeld 66% van de totale grootte van een webpagina uit. De volgende best practices voor afbeeldingsoptimalisatie helpen in het verminderen van de negatieve impact van afbeeldingen op de snelheid van websites:

• Formatkeuze: Gebruik JPG’s wanneer kwaliteit een hoge prioriteit heeft en beeldaanpassingen zijn niet vereist voordat je het uploadt. JPG’s kunnen beperkte bewerkingen en wijzigingen doorvoeren voordat de beeldkwaliteit sterk afneemt. Gebruik PNG’s voor afbeeldingen met pictogrammen, logo’s, illustraties, tekens en tekst. Gebruik GIF’s alleen voor kleine of eenvoudige afbeeldingen en vermijd BMP’s en TIFF’s.
• De juiste maat: Bespaar waardevolle bytes van de afbeelding en koppel deze aan de afmetingen (breedte) van uw webpagina-sjabloon. Gebruik de functies voor het wijzigen van de grootte van de browser om afbeeldingen responsiever te maken door instructies voor een vaste breedte en automatische hoogte in te stellen.
• Compressie: Compressie moet een goede afweging zijn tussen beeldgrootte en kwaliteit. Voor JPG’s levert een compressie van 60-70 procent een goede balans op. Voor retinaschermen verhoog je de (JPG) afbeelding met 150-200%, comprimeer je met 30-40 procent en schaal je deze opnieuw af naar de vereiste afmetingen.
• Minder afbeeldingen: Houd het aantal afbeeldingen tot een absoluut minimum.

WordPress oplossingen:

Maak gebruik van plugins voor beeldoptimalisatie, zoals Imagify, Optimus WordPress Image Optimizer, WP Smush, TinyPNG en EWWW Image Optimizer Cloud. Het is zelfs beter als je kiest voor tools die beelden extern comprimeren en optimaliseren, waardoor de belasting van uw eigen site afneemt.

Kijk voor meer tips in onze gedetailleerde gids voor afbeeldingoptimalisatie.

Optimaliseer CSS-code

Nog niet zo lang geleden werd 30 kB beschouwd als de ideale webpagina grootte. Dat omvatte afbeeldingen, inhoud, grafische afbeeldingen en de code die de hele pagina maakten. De populariteit van CSS en JavaScript heeft het plafond van 30 kB opengebroken om een verrijkte website-gebruikerservaring te bieden.

Toch zijn moderne websites gemaakt met CSS beter in het downloaden van inhoud van servers naar browsers, efficiënter en nauwkeuriger. Optimalisatie gaat dus niet alleen over het verkleinen van de bestandsgrootte. De volgende aanbevolen procedures zorgen voor een geoptimaliseerde uitvoering van CSS:

• Shorthand-Code: Verklein de grootte van uw code door minder declaraties en operatoren te gebruiken. Minder coderegels betekenen minder verwerkingscycli en efficiënte aflevering van websitebestanden voor het aanvragen van browsers.
• Verwijder CSS-hacks voor specifieke browsers: CSS loopt gevaar door eindeloos ingewikkelde browser-specifieke hacks waardoor onnodig gewicht wordt toegevoegd aan CSS-scriptbestanden. Geoptimaliseerde CSS-code is licht en eenvoudig te verwerken door servers.
• Minimaliseer de CSS: Bijna alle monitoringinstrumenten voor websitesnelheid geven een algemene suggestie om het gewicht van CSS-code te verminderen om de snelheid te verbeteren. Lichtgewicht en compacte code helpt het downloaden, verwerken en uitvoeren te versnellen om de laadtijd van de pagina drastisch te verminderen.
• Code Positionering: Laad CSS-code in de <head> en JavaScript in de body, omdat CSS waarnaar wordt verwezen buiten deze sectie voorkomt dat webbrowsers CSS-inhoud onmiddellijk na het downloaden ervan wordt weergegeven.
• CSS Best Practices:
  • Gebruik geen @import calls.
  • Verwijder ongebruikte CSS.
  • Gebruik geen CSS in HTML zoals H1- en DIV-tags.
  • Gebruik kleine inline CSS.

WordPress oplossingen:

Tools zoals Autoptimize, WP Rocket, Cache Enabler, CloudFlare CDN en W3 Total Cache zijn een aantal van de meest populaire tools die beschikbaar zijn om JavaScript en CSS te verkleinen.

Als je een Kinsta klant bent, kun je gebruikmaken van de onze codeminificatiefeature die rechtstreeks in het MyKinsta dashboard is ingebouwd. Dit stelt klanten in staat om snel en eenvoudig automatische CSS en JavaScript minificatie in te schakelen met een simpele klik.

Codeminificatie – JavaScript, CSS, HTML

Snelheidsoptimalisatie is inderdaad niet (alleen) het verminderen van de paginagrootte. Het verminderen van het aantal client-serververzoeken bij het leveren van websitecontent aan webbrowsers is ook een belangrijk onderdeel van optimalisatie van de internetsnelheid. Webmasters kunnen dit bereiken door het aantal CSS-, HTML- en JavaScript-verzoeken te beperken. Het aantal verzoeken is echter niet zo belangrijk is als voorheen, dankzij verbeteringen aan HTTP/2. Maar dat betekent echter nog steeds dat je alle onnodige en groepeerbare lijnen code moet optimaliseren, verkleinen en samenvoegen.

Minificatie is vooral belangrijk voor inline JavaScript en externe bestanden die niet in de cache zijn opgeslagen. Google raadt aan om alle JavaScript-bestanden groter dan 4096 bytes te verkleinen, en een minimum van 25 bytes af te schaven om een merkbaar verschil in de laadtijd van de pagina te produceren.

Een rigoureuze aanpak van het ontwerpen van een geoptimaliseerde website vereist een sterke intentie om onnodige bytes uit de code te verwijderen. Gebruikmakend van alle codeerruimte die beschikbaar is, vermindert het verwijderen van extra spaties, inspringingen en regelafstanden met behoud van de leesbaarheid van de code de totale omvang van de kern- en front-end-bestanden van de website. En voor bestaande websites die zonder deze strategie zijn ontwikkeld, zorgt het combineren van meerdere serveraanvragen (voor HTML, JavaScript en CSS) tot enkele grote delen voor een grote vermindering van de laadtijd van pagina’s.

Overmatige HTML-minificatie kan echter leiden tot een verlies van de betrouwbaarheid van de websitecode, waarbij gebruikers buitensporig veel geheugen gebruiken bij het “raden” van de ontbrekende bronnen die nodig zijn om HTML-bestanden te verwerken. Zorg er dus alleen voor dat overbodige code en spaties worden verwijderd en waak erover (door tests) te doen, dat de laadtijden door overmatige minificatie juist wordt verhoogd.

Het minificeren van CSS, JavaScript en HTML heeft veel voordelen: kortere netwerklatentie, minder HTML-verzoeken, verbeterde compressie, snellere downloads door browsers en snellere uitvoering, waardoor uiteindelijk de paginasnelheid toeneemt en hogere scores worden behaald op de meetinstrumenten voor websitesnelheid.

Plugins – Less is More!

Extra functionaliteit door plugins heeft zijn prijs: prestatievermindering. Helaas zetten webmasters een groot aantal plugins in om aantrekkelijke maar vaak onnodige functies toe te voegen, zoals Gravatar, tools voor profielen, website-statistieken en lettertypes – sommige gebruiken zelfs 10 verschillende plugins voor de integratie van hun sociale media. Het enige voordeel hier is het vermijden van het handmatig schrijven van code.

Veel populaire websites hebben maar liefst 80 plugins. Toch is het nummer niet geheel zorgwekkend als de geïnstalleerde plugins voldoende zijn ontwikkeld om complexe acties en dure serververwerkingen te voorkomen.

Vier belangrijke punten om naar te kijken als het gaat om het selecteren van hoogwaardige plugins:

• Presteert de plugin goed tijdens complexe aanvragen?
• Laadt de plugin veel inhoud en scripts?
• Verhoogt de plugin het aantal database-aanvragen bij elke paginavraag?
• Doet het aanvragen aan externe API’s?

Als het antwoord op al deze vragen JA is, zou je reactie op de betreffende plugin een grote NEE moeten zijn!

Nu de hamvraag: hoeveel plugins is te veel?

Hoewel er geen alomvattend antwoord op deze vraag is, zijn beperkingen uniek voor elke website en plugin. Veel WordPress experts raden aan niet te veel plugins te gebruiken. Maar veel goed presterende websites hosten meer dan 80 plugins, totdat ze een plugin van mindere kwaliteit installeren die een halve seconde toevoegt aan de laadtijd van de pagina.

Tegelijkertijd is het gebruik van 10 plugins voor eenvoudige en unieke taken veel beter dan het inzetten van één plugin om alle complexe taken zelf uit te voeren. Uitzonderingen zijn plugins van hoge kwaliteit door gerenommeerde ontwikkelaars, zoals Yoast WordPress SEO Plugin, All In One SEO Pack en dergelijke.

WordPress oplossingen:

Gebruik de volgende oplossingen om de prestaties van WordPress plugins te controleren:

• Kinsta APM – ingebouwde oplossing voor profielschetsen van applicatieperformance
• Query Monitor

Limiteer of deactiveer WordPress revisies

Revisiebeheer is één van de voordelen die WordPress te bieden heeft. WordPress houdt automatisch de inhoud bij die gemaakt is en maakt deze beschikbaar voor toekomstige wijzigingen. Dit betekent wel dat in de database van de server aanvullende (onnodige) entry’s aangemaakt worden. Het beheren van het aantal versies dat wordt opgeslagen ontlast de kern van de website van nutteloze belasting.

Het toevoegen van de volgende codefragmenten in het wp-config.php bestand helpt dit probleem te omzeilen:

Revisies deactiveren:

define( 'WP_POST_REVISIONS', false );

Revisies beperken:

define( 'WP_POST_REVISIONS', 10 ); // limited to 10 revisions

Bekijk onze uitgebreide handleiding over het optimaliseren van WordPress revisies voor snellere prestaties.

Database-optimalisatie

WordPress slaat berichten, comments, pagina’s en andere vormen van tekstuele en gecodeerde gegevens op in een enkele database – met uitzondering van afbeeldingen en video’s die in plaats daarvan in de ‘wp-content’-map worden opgeslagen. Deze database raakt na een tijdje overvol, niet alleen met onnodige inhoud en post-revisies, maar ook met ‘rommelgegevens’.

Rommelgegevens zijn onder andere:

• Opmerkingen in de spam-wachtrij
• Afgekeurde opmerkingen
• Artikelrevisies
• Items in de prullenbak, zoals berichten en pagina’s

Database-optimalisatie draait om het verwijderen van rommelgegevens en nutteloze inhoud uit ongestructureerde databases. Door de database te verkleinen is het voor servers makkelijker maken om de aangevraagde content efficiënt op te halen. Dit kan ook betekenen dat je ervoor zorgt dat je InnoDB gebruikt voor de MySQL-databasetabellen, in plaats van MyISAM. Leer hier meer over het overstappen van myISAM naar InnoDB.

De tabel wp_options wordt ook vaak over het hoofd gezien als het gaat om algemene WordPress- en databaseprestaties. Vooral op oudere en grote sites kan dit de oorzaak zijn van langzame querytijden op je site vanwege automatisch geladen gegevens die zijn achtergelaten door plugins en thema’s van derden. Bekijk onze handleiding over het opschonen van uw wp_options-tabel.

WordPress oplossingen:

• Beperk, deactiveer en verwijder post-revisies.
• Laat de prullenbak automatisch opschonen door de volgende code toe te voegen in het wp-config.php-bestand:

  define('EMPTY_TRASH_DAYS', 10 );

  10 is het aantal dagen voordat de prullenbak automatisch geleegd wordt. Dit getal kun je aanpassen indien nodig.

Compressie

Volgens Google wordt er in de cyberwereld elke dag 99 mensenjaren verspild door ongecomprimeerde webcontent. En hoewel het grootste deel de moderne webbrowsers inhoudscompressie ondersteunen, levert niet elke website gecomprimeerde inhoud. Bezoekers van deze bandbreedte-slurpende websites ervaren een waanzinnig trage interacties met webpagina’s. De voornaamste redenen voor dit ongunstige (en meestal onbedoelde) gedrag van de website zijn onder meer verkeerd geconfigureerde hosting-servers, webproxy’s, oude of slecht werkende browsers en antivirussoftware.

Ongecomprimeerde inhoud doet de gebruikerservaring van bezoekers met beperkte bandbreedte pijn geen goed. Ze ontvangen de inhoud vaak pas na een angstaanjagend lange laadtijd. Hier is hoe een ‘conversatie’ eruit kan zien tussen een browser  en de server:

Browser: Hey, geef me /ZwaarGewichtKampioen.html!

Server: Mee bezig! *server doorzoekt de server en vindt het bestand*

Server: Alsjeblieft, 250 kB aan code!

Browser: Auw! *eindgebruiker begint te zweten, maar ontvangt uiteindelijk de opgevraagde inhoud na tientallen seconden*.(Toegegeven, client-servercommunicatie is misschien iets formeler en minder dramatisch dan het bovenstaande verhaal.)

Het voornaamste probleem zit hem in de manier waarop client-servercommunicatie in de HTML-wereld gaat. HTML-bestanden (die bijna de volledige webcontent maken) bevatten verschillende overbodige code-instanties. <Tags>, <Alts>, <HTML> en dergelijke zijn allemaal dezelfde dingen die herhaaldelijk tevoorschijn komen.

Google beveelt de volgende compressietactieken aan om website-inhoud efficiënt te leveren:

• Minify JavaScript-, HTML- en CSS-code
• Zorg voor consistentie in CSS- en HTML-code met de volgende technieken:
  • Consistente lettergrootte – voornamelijk kleine letters.
  • Consistente aanhalingstekens in HTML-tagattributen.
  • Geef HTML-kenmerken op in dezelfde volgorde.
  • Specificeer CSS-sleutel/waarde-paren in dezelfde volgorde door ze te alfabetiseren.
• Schakel GZIP-compressie in. GZIP vindt vergelijkbare strings en code-instanties, vervangt deze tijdelijk door kortere tekens. Browsers decomprimeren GZIP-bestanden en brengen ze terug naar hun oorspronkelijke vorm.

Een aantal waarschuwingen:

• Gebruik GEEN GZIP op (gecomprimeerde) afbeeldingen, PDF-bestanden of andere binaire data.
• Gebruik GZIP alleen voor data met een grootte tussen 150 en 1.000 bytes. De compressiesnelheid moet sneller zijn dan de tijd die het kost om de website-inhoud ongecomprimeerd aan te leveren.
• Comprimeer GEEN inhoud voor oude browsers.

Het niet opvolgen van de bovenstaande aanbevelingen verhoogt feitelijk de bestandsgrootte en laadtijden van pagina’s als gevolg van de overhead van compressie en decompressie.

WordPress oplossingen:

• Schakel GZIP-compressie in met de W3 Total Cache plugin.
• De beste manier om GZIP-compressie in te schakelen is op het serverniveau van Apache of Nginx. Bekijk onze De beste manier om GZIP-compressie in te schakelen is op het serverniveau van Apache of Nginx. Bekijk onze GZIP-compressiegids..

Cache

Ontwikkelaars hunkeren naar eenvoud in de code voor websitedesign. Websitecode gemakkelijker kunnen maken, lezen en onderhouden leidt tot efficiënte website-ontwikkelingsprocessen. Dit omvat het herhaaldelijk gebruiken van de beschikbare codefuncties om uitgebreide codering voor specifieke websitefunctionaliteit in te korten.

Als je echter te veel externe loops en onnodige coderegels toevoegt, worden de rendertijden van de pagina met enkele milliseconden verlengd. Een stroom van websiteverkeer zal de paginasnelheid verlagen tot ver onder de norm.

Webmasters kunnen deze reactietijden verkorten door in de cache exemplaren van de gevraagde inhoud af te leveren in plaats van deze herhaaldelijk weer te geven na elk afzonderlijk gebruikersverzoek. Webcache is het mechanisme voor het tijdelijk opslaan van kopieën van webcontent om te voldoen aan latere gebruikersverzoeken uit de cachedatabase wanneer aan specifieke voorwaarden wordt voldaan. Dit proces vermindert het aantal client-server-round trips dat wordt afgelegd bij het leveren van (statische) website-inhoud aan het aanvragen van browsers.

Website-eigenaren kunnen caching inschakelen met de volgende add-ons en configuraties wanneer hosting-serviceproviders geen server-side caching aanbieden:

• W3 Total Cache
• Cache Enabler
• WP Rocket
• FastCGI Cache  voor Nginx en Drupal servers.

Naast inhoud die statisch in de cache wordt gezet, hosten websites ook dynamische informatie met unieke attributen die regelmatig veranderen voor elke eindgebruiker. Het opslaan van cache-kopieën van niet-herbruikbare dynamische inhoud is daarom niet logisch, ook al het opvragen van niet-gecachete inhoud een traag proces is.

Fragmentcaching

Dit is de kunst van het cachen van kleinere elementen van niet-cachebare dynamische website-inhoud. Wanneer webpagina’s met statische en/of dynamische inhoud worden geladen, verwerken hostingservers PHP-code en ondervragen ze MySQL-databases om de gevraagde inhoud op te halen. Deze tijd-en-resource-verbruikende processen worden omzeild door de gewenste output te leveren die is opgeslagen als een gecachete kopie.

Fragmentcaching slaat de uitvoer op van sommige codeblokken binnen dynamische content. Specifiek zijn dit de blokken die ongewijzigd blijven, ook in verschillende versies van deze dynamische content. Wanneer bepaalde code een blok opvraagt, dan wordt deze (voor een bepaalde tijd) geleverd vanuit de cache, in plaats van dat deze code elke keer apart moet worden uitgevoerd. Dit gebeurt totdat de tijdslimiet verstrijkt.

Het eindresultaat is cache-geoptimaliseerde website-inhoud voor maximale paginasnelheid, zelfs voor e-commerce- en lidmaatschapswebsites die veel dynamische inhoud verwerken. Kinsta biedt vier verschillende soorten caching aan, die allemaal automatisch op software- of serverniveau worden uitgevoerd. Het is dus niet nodig om aan te modderen met plugins van derden.

Content Delivery Networks (CDN)

CDN is een uitbreiding van cache-optimalisatie ontworpen om de prestaties van websites te verbeteren. CDN’s zijn uitermate geschikt als je bezoekers van over de hele wereld je website bezoeken. CDN’s bestaan uit een netwerk van servers die cachekopieën van webpagina’s hosten. Internetbezoekers die deze informatie opvragen, worden doorgestuurd naar de dichtstbijzijnde server binnen dit netwerk op basis van hun geografische locatie.

Traditionele voordelen van CDN, waaronder prestatieverbetering, hoge beschikbaarheid en paginarangschikking verhogen de totale bedrijfsresultaten. Bekijk alle redenen waarom je een CDN zou moeten gebruiken. Kinsta bevat een gratis HTTP/2 en IPv6 enabled WordPress CDN voor alle klanten voor de WordPress Hosting pakketten!

Stap over naar managed hosting!

WordPress heeft het internet in wezen gedemocratiseerd door burgers van de cyberwereld in staat te stellen hun eigen blogs te creëren en online producten en diensten te lanceren met minimale investeringen. Over het algemeen maken website-eigenaren gebruik van een van de volgende hostingservices om hun websites actief te houden:

• Gratis hosting: De favoriet onder hobbyisten.
• Shared hosting: De favoriet onder personen die een online bedrijfsaanwezigheid ontwikkelen tegen de laagste kosten.
• Dedicated of managed hosting: De favoriet onder serieuze individuen en kleine tot middelgrote bedrijven die een online aanwezigheid opzetten.
• Collocated hosting: De favoriet onder grote ondernemingen of overheidsinstellingen met interne IT-teams om websites te beheren.

Hiervan is het gebruik van managed WordPress hosting voor end-to-end ontwikkeling- en beheersdiensten de meest kosteneffectieve en productieve optie voor het onderhouden van een ultra-high-performance website. Kenmerken van managed hosting-services die van invloed zijn op de paginasnelheid en de prestaties van de website zijn:

• Performance-optimalisatie – compressie, code minificatie, server-side caching, enz.
• Cache-optimalisatie.
• Contentoptimalisatie – afbeeldingoptimalisatie, beheer van rommelgegevens, enz.
• Zoekmachineoptimalisatie.
• Regelmatige software-updates.
• Compatibiliteit en implementatie van plugins voor de beste prestaties.
• Database optimalisatie.
• Content Delivery Networks.
• Prestatietests en monitoring.
• Lichtgewicht en snelheidsgeoptimaliseerde servers.
• Server- en websiteconfiguratie en -onderhoud om client-server-roundtrips te minimaliseren.
• Laatste versies van PHP en MariaDB.

WordPress is sneller met PHP 7

De release van PHP 7 ging gepaard met enorme prestatieverbeteringen! Zo groot zelfs, dat het upgraden naar PHP 7 een prioriteit zou moeten zijn, helemaal als je dit vergelijkt met een boel andere kleinere optimalisaties die je zou kunnen maken op je WordPress website. De volgende benchmarks laten significante prestatieverbeteringen zien tussen PHP 7 en eerdere versies. Met PHP 7 kan het systeem tweemaal zoveel verzoeken per seconde uitvoeren in vergelijking met de PHP 5.6 met bijna de helft van de netwerklatentie.

We hebben ook onze eigen PHP benchmarks. En net als de benchmarks hierboven, zagen we dat PHP 7.3 bijna drie keer zoveel transacties (verzoeken) per seconde kon uitvoeren in vergelijking met PHP 5.6. PHP 7.3 is ook gemiddeld 9% sneller dan PHP 7.2.

• WordPress 5.0 PHP 5.6 benchmark resultaten: 91.64 aanvragen/sec
• WordPress 5.0 PHP 7.0 benchmark resultaten: 206.71 aanvragen /sec
• WordPress 5.0 PHP 7.1 benchmark resultaten: 210.98 aanvragen /sec
• WordPress 5.0 PHP 7.2 benchmark resultaten: 229.18 aanvragen /sec
• WordPress 5.0 PHP 7.3 benchmark resultaten: 253.20 aanvragen /sec 🏆

Oordeel

De prestatieverschillen tussen PHP 5.6 en de latere versies van PHP zijn overduidelijk, en daarom biedt Kinsta altijd de laatste stabiele versie aan. PHP 8.1, dat nog sneller is, werd officieel uitgebracht op 25 november 2021 en is nu beschikbaar voor alle Kinsta klanten met een hostingabonnement.

Conclusie: Websitesnelheid doet ertoe!

Je hebt het einde van de gids gehaald! Gefeliciteerd en bedankt voor het lezen. We hopen dat je op zijn minst een paar geweldige tips hebt gevonden waar je nu meteen mee aan de slag kunt! Bij Kinsta bieden we premium WordPress hostingservices aan, en met onze infrastructuur kun je er zeker van zijn dat alle server-side optimalisaties worden uitgevoerd. Ben je benieuwd hoe we de prestaties van jouw WordPress website naar recordhoogte kunnen brengen, check dan deze pagina.

En ten slotte: als je iets hebt gehad aan deze gids, dan zouden we het heel leuk vinden als je deze met je vrienden en volgers deelt!