167
Delen

Optimale websiteperformance is een belangrijk focuspunt van de meest succesvolle website en een cruciale factor die het succes van elke moderne online onderneming bepaalt. Tegenvallende websiteperformance kan een bedrijf de das om doen: stel je eens een bezoeker of een potentiële klant voor die 10-15 seconden moet wachten tot de eerste pagina geladen is.  In het moderne digitale landschap betekent een lange wachttijd dat bezoekers naar andere websites gaan zoeken – met alle verloren inkomsten van dien. Geduld is een schone zaak, maar dit geldt helaas niet op het web.

Speed sells!

We hebben deze diepgaande zesdelige snelheidsoptimalisatiegids gemaakt om je het belang van snelle, vlotte websites te laten zien. Ontelbare onderzoekrapporten en benchmarks hebben aangetoond dat het optimaliseren van je websitesnelheid een van de meest betaalbare investering is met de hoogste opbrengst.

In deze gids zullen we technische details proberen uit te leggen aan de hand van hapklare instructies die je meteen kunt implementeren! We hopen dat je deze handleiding niet alleen waardevol vindt, maar deze hopelijk ook zó goed vindt dat je deze gaat delen!

Razendsnelle laadtijden van je webpagina’s zorgen dat je bezoekers langer op je website blijven, hun betrokkenheid vergroot wordt en dat er meer aankopen gedaan worden. Een onmiddellijke websiterespons leidt tot hogere conversiepercentages en elke 1 seconde vertraging verlaagt bezoekerstevredenheid met 16 procent, paginaweergaves met 11 procent, en conversiepercentages met 7 procent volgens een recent onderzoek door Aberdeen Group.

De belangrijkste aspecten van optimalisatie van websitesnelheid:

Hoofdstuk 1: Inleiding tot snelheidsoptimalisatie

Wat is paginasnelheid precies?

De term paginasnelheid slaat in essentie op de hoeveel tijd die het kost om webpagina’s of mediacontent te downloaden van een webhostingserver en deze weer te geven in de ontvangende webbrowser. Laadtijd van pagina’s is de tijd tussen het klikken van de link en het weergeven van de volledige inhoud van een webpagina in de ontvangende browser.

Laadtijd

Laadtijd

Er zijn drie hoofdaspecten van belang bij het begrijpen van paginasnelheiden als het gaat om gebruikerservaring en websiteperformance:

  • De tijd die het kost om het opgevraagde materiaal af te leveren aan de browser in combinatie met de bijbehorende HTML-inhoud.
  • Hoe de browser reageert op verzoeken om pagina’s te laden
  • De ervaring van eindgebruikers terwijl de pagina wordt geladen in de browser – uiteindelijk is dit hoe de paginalaadsnelheid gemeten wordt.

Hoe goed je website het doet in de zoekmachines wordt bepaald door gepatenteerde en vaak geheime algoritmes. Toch is het vrij duidelijk dat  paginasnelheid, gebruikerservaring, websiteresponsiviteit en een hoop andere factoren die te maken hebben met websiteperformance een grote rol spelen in het behalen van een hoge ranking binnen zoekmachines.

Het is dus van cruciaal belang om je websiteperformance te maximaliseren door vanaf het begin te focussen op snelheidsoptimalisatie. Plug-ins voor performanceoptimalisatie, server-side scripts en aanpassingen achteraf hebben minimale – ook al zal je het verschil zeker merken – impact op paginasnelheid en -laadtijd. Desondanks hebben webdevelopers en online ondernemingen de neiging om de laadtijd van pagina’s als een ondergeschoven kind te behandelen tijdens het ontwerpen van hun websites en designs.

Traag? Wat is traag?

Alles wat langzamer is dan de tijd die je nodig hebt om met je ogen te knipperen – 400 milliseconde. Ontwikkelaars van Google hebben geconcludeerd dat de nauwelijks waarneembare laadtijd van 0.4 seconde(!) al lang genoeg is om een negatieve impact te hebben op het aantal mensen dat via hun platform zoekopdrachten uitvoert. 

Gelukkig heeft de technologie van het verbeteren van gebruikerservaring grote stappen gezet in de laatste jaren. De overbevolkte cyberwereld van de jaren 90 werd vaak gelabeld als het ‘World Wide Wait’ in plaats van het ‘World Wide Web’, maar innovaties in communicatie en netwerktechnologieën hebben een revolutie ontketend in de manier waarop digitale informatie wordt verzonden over het internet. De volgende generatie van online ondernemingen heeft alle benodigde middelen om hun content razendsnel af te leveren. Dat stelt bestaande bedrijven voor een belangrijke uitdaging. Zij moeten met bestaande middelen  tegengewicht bieden en snelheidsoptimalisatie toepassen op hun websites om de beste gebruikerservaring te kunnen leveren.

Snelheidspecialisten van Microsoft en informaticus Harry Shum geloven dat een kwart seconde verschil in laadtijd van pagina’s – sneller of langzamer – het magische getal is dat het competitieve voordeel voor online ondernemingen bepaalt.

En wat gebeurt er als je website traag blijft?

1 op de 4 bezoekers zal de website verlaten als het meer dan 4 seconde duurt om deze te laden. 46 procent van de gebruiker komt niet terug naar slecht presterende websites. Website-eigenaren hebben slechts 5 seconde om hun bezoekers te boeien voordat klanten overwegen de pagina te verlaten. 74 procent van de gebruiker van mobiele websites zou de pagina verlaten als het langer dan 5 seconde duurt om deze te laden. Elke seconde vertraging in laadtijd zou kunnen leiden tot $1.6 miljard aan jaarlijkse schade voor de grootste online website zoals Amazon.

Langzaam

Langzaam

47 procent van de e-commerceklanten verwacht een laadtijd van pagina’s van minder dan 2 seconde voordat ze overwegen om de pagina te verlaten – 40 procent van de gebruikers zou de website verlaten bij de derde seconde aan wachttijd. Dit is nog voordat een performanceanalysetool kan registreren dat ze de pagina hebben bezocht. De gemiddelde laadtijd voor conversies is een luttele 2 seconde – sneller dan miljoenen websites op het web.

En wat gebeurt er als je je website sneller maakt?

Toen Mozilla hun paginasnelheid met 2.2 seconde verbeterde, gingen de downloadcijfers voor Firefox omhoog met 15.4 procent, wat neerkomt op 10 miljoen per jaar! Walmart zag een verbetering van 2 procent in hun conversiepercentages voor elke 1 seconde verbetering in hun laadtijd. De cijfers liegen niet!

Snelheidsverbetering

Snelheidsverbetering

Acceptabele websiteperformance – de neurologische wetenschap

100 milliseconde. Dat is hoe lang het duurt voordat de occipitale kwab in onze hersenen visuele informatie opslaat als een zintuigelijke herinnering.

Onderzoekers van Google suggereren dat laadtijden van pagina’s van minder dan 100 milliseconde bezoeker de illusie geven van een onmiddellijke websiterespons omdat de visuele geheugenprocessor in onze hersenen werkt in pulsen van 100 milliseconde. De geheugeninformatie wist zichzelf na 0.1 seconde terwijl de lichtgevoelige cellen in de ogen meer informatie zenden naar de occipitale kwab.

Acceptabele websiteperformance

Acceptabele websiteperformance

Eén seconde van laadtijd van pagina’s is genoeg om de illusie van een naadloze stroom aan informatie te handhaven –  gebruikers voelen zich in controle over hun browsingactiviteit en bezoekers kunnen rustig browsen (zolang er geen vertragingen in laadtijd optreden).

Na tien seconde vertraging wordt de aandacht van bezoeker nog nauwelijks vastgehouden. Ongeduld en frustratie zorgen er nu voor dat zelfs de meest geduldige gebruiker niet meer terugkeert naar deze langzame website.

Het psychologische vraagstuk

Het klinkt misschien gek, maar het is waar: een gemiddelde gebruiker zou liever enkele onnodige minuten verkwisten aan het browsen op snel-reagerende maar irrelevante websites, dan moeten wachten op een trage maar relevante website. Ze

En in de zee van informatie die op het web beschikbaar is, vinden gebruikers uiteindelijk de informatie die ze nodig hebben op een andere website. Maar de uiteindelijke verliezers zijn online ondernemingen die hun klanten niet snel genoegen kunnen bereiken, ondanks dat ze de precieze informatie en diensten aanbieden waarnaar gezocht wordt.

Vreemd genoeg zouden gebruikers dus liever hun tijd steken in het zoeken naar de informatie op andere websites dan dat ze een aantal seconden wachten totdat de juiste website is geladen. De ervaring is vergelijkbaar met het Houston Airport incident van een aantal jaar geleden, wat destijds leidde tot een slimme oplossing.

Speel met menselijke psychologie

Speel met menselijke psychologie

Passagiers op het vliegveld moesten één minuut lopen naar de bagageband, en daar moesten ze vervolgens zeven minuten wachten om hun tassen te ontvangen. Het klantenrelatiepunt werd overspoeld met klachten over de langzame service.

Daarom kwamen de bestuurders van het vliegveld met een sluwe oplossing om het probleem te “verhelpen”. Ze plaatsten de aankomsthallen verder weg en leidde de bagage door de buitenste bagageband.

Passagiers moesten nu zes minuten lopen naar de bagageband, waar ze hun bagage binnen 2 minuten kregen. Het resultaat? Nul klachten. Geen enkele passagier verliet ontevreden het vliegveld – enkel met vermoeide benen. Om dezelfde reden hebben liften spiegels aan de binnenkant zodat de passagiers beziggehouden worden met hoe ze er uit zien en niet met de tijd die het kost om vervoerd te worden. Het gedrag van passagiers is vergelijkbaar met het gedrag van websitebezoekers in de cyberwereld. Dezelfde principes zijn ook van toepassing op online bedrijven: het is de objectieve lengte van de wachttijd die de gebruikerservaring definieert.

Nu kunnen we net als sommige online ondernemingen spelen met de menselijke psychologie (zoals de bestuurders van Houston Airport) en met een slimme uitgekookte formule de reageertijd van websites dragelijk te maken voor elke individuele bezoeker door de subjectieve ervaring van het wachten te verzachten. Of… we kunnen daadwerkelijk de objectieve wachttijd verminderen in het bezorgen van de opgevraagde inhoud aan hun online bezoekers met een snelle website. Deze gids zal focussen op de laatste methode, en zal je daadwerkelijk helpen om het maximale uit je online onderneming te halen door de website performance te optimaliseren en daardoor de gebruikerstevredenheid, loyaliteit en behoud te verbeteren.

De hoofdonderdelen van deze gids bestaan uit:

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. 

Langzame websites verlaten

Langzame websites verlaten

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 paramaters 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!

Snellere laadtijden staan gelijk aan betere conversiepercentages

Snellere laadtijden staan gelijk aan betere conversiepercentages

Om potentiele 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 potentiele 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).

Conversiesnelheidscalculator

Conversiesnelheidscalculator

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.

Onderpresterende websites maken gebruikers minder betrokken

Onderpresterende websites maken gebruikers minder betrokken

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 maken gebruikers blij

Goed presterende websites maken gebruikers blij

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.

Bruikbaarheidseigenschappen

Bruikbaarheidseigenschappen

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.

Mobiele sites vs. de desktop site

Mobiele sites vs. de desktop site

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.

Totale bezoeken van mobiele apparaten tegenover de desktop

Totale bezoeken van mobiele apparaten tegenover de desktop (Bron Stone Temple)

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.

Doelstellingen op het web

Doelstellingen op het web

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.

Website-inkomsten

Website-inkomsten

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).

Gemiddelde laadtijd

Gemiddelde laadtijd

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.

Mobiele aankopen

Mobiele aankopen

 

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!

The snelste website wint

The snelste website wint

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!

Goedkope webhostingdiensten

Goedkope webhostingdiensten

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 plug-ins

Extra functionaliteit is altijd aangenaam voor website-eigenaren en ontwikkelaars. Widgets en plug-ins 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!

Webverzoeken van de Facebook-widget

Webverzoeken van de Facebook-widget

Het tot een absoluut minimum beperken van add-ons is essentieel voor het behoud van optimale websiteperformance – zelfs plug-ins 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 plug-ins belangrijker dan de kwantiteit van de plug-ins. Plug-ins 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.

Pingdom-analyse van externe diensten

Pingdom-analyse van externe diensten

 

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.

Gestroomlijnde inhoud

Gestroomlijnde inhoud

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 plug-ins 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, plug-ins, 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.

Smartphones

Smartphones

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.

Slechte redirects

Slechte redirects

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.

Initiële paginasnelheid

Initiële paginasnelheid

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.

Geografische websiteperformance

Geografische websiteperformance

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.

Websitesnelheidstest

Websitesnelheidstest

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.

Pingdom

Pingdom

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

Pingdom samenvatting

Pingdom samenvatting

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.

Pingdom performanceinzichten

Pingdom performanceinzichten

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

Pingdom watervalverzoeken

Pingdom watervalverzoeken

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

Pingdom tabellen

Pingdom tabellen

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 van websitesnelheid

Optimalisatie van websitesnelheid

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%, comprimeert u 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 plug-ins voor beeldoptimalisatie, zoals ImagifyShortPixel Image OptimizerOptimus WordPress Image OptimizerWP SmushTinyPNG 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:

Geoptimaliseerde CSS

Geoptimaliseerde 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 AutoptimizeWP RocketCache EnablerCloudFlare CDN en W3 Total Cache zijn een aantal van de meest populaire tools die beschikbaar zijn om JavaScript en CSS te verkleinen.

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.

Bestandscompressie

Bestandscompressie

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.

vPlug-ins – Less is More!

Extra functionaliteit door plug-ins heeft zijn prijs: prestatievermindering. Helaas zetten webmasters een groot aantal plug-ins in om aantrekkelijke maar vaak onnodige functies toe te voegen, zoals Gravatar, tools voor profielen, website-statistieken en lettertypes – sommige gebruiken zelfs 10 verschillende plug-ins 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 plug-ins. Toch is het nummer niet geheel zorgwekkend als de geïnstalleerde plug-ins voldoende zijn ontwikkeld om complexe acties en dure serververwerkingen te voorkomen.

Aantal plug-ins

Aantal plug-ins

Vier belangrijke punten om naar te kijken als het gaat om het selecteren van hoogwaardige plug-ins:

  • Presteert de plug-in goed tijdens complexe aanvragen?
  • Laadt de plug-in veel inhoud en scripts?
  • Verhoogt de plug-in 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 plug-in een grote NEE moeten zijn!

Nu de hamvraag: hoeveel plug-ins is te veel?

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

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

WordPress-oplossingen:

Gebruik de volgende oplossingen om de prestaties van WordPress-plug-ins te controleren:

Limiteer of deactiveer WordPress-revisies

Revisiebeheer is een van de voordelen die WordPress te bieden heeft. De CMS houdt automatisch de inhoud bij die op de CMS is gemaakt 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.

WordPress-revisies

WordPress-revisies

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 voor websitehostingservers 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 plug-ins 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 rommelgegevens automatisch worden verwijderd. 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 slechtwerkende 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:

HTML-compressie

HTML-compressie

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:

  • Minificeer 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 plug-in.
  • 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.

WordPress-cache

WordPress-cache

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

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 plug-ins 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 moet gebruiken. Kinsta bied een gratis HTTP / 2 en IPv6-enabled CDN voor alle klanten!

WordPress-CDN

WordPress-CDN

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 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 plug-ins 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.

PHP-benchmarks door Rasmus Lerdorf, PHP Fluent Talk

PHP-benchmarks door Rasmus Lerdorf, PHP Fluent Talk

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 benchmarks

WordPress benchmarks

  • 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 prestatiekloof tussen PHP 5.6 en de latere versies van PHP is overduidelijk en daarom biedt Kinsta altijd de nieuwste stabiele versie aan. PHP 7.3 is officieel beschikbaar vanaf 6 december, maar is nu al beschikbaar voor alle klanten van Kinsta.

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!