Waarom prestatie van belang is / Why performance is important

In ons gezamenlijke streven om het web te pushen om meer te doen, stuiten we op een veel voorkomend probleem: prestaties.ย Sites en apps zijn rijker in functionaliteit dan ooit tevoren.ย Als gevolg daarvan zijn ze veeleisender geworden voor netwerk- en apparaatbronnen.ย Zo veel zelfs dat we nu worstelen met het bereiken van een hoog prestatieniveau in verschillende netwerkomstandigheden en -apparaten.

Prestatieproblemen zijn variabel.ย In het beste geval leiden langzame sites en applicaties tot triviale vertragingen die gebruikers belemmeren voor slechts kort vervelende momenten.ย In het slechtste geval zijn ze volledig ontoegankelijk, reageren ze niet op gebruikersinvoer of beide.

Prestaties gaat over het behouden van gebruikers

We willen dat gebruikers op een zinvolle manier interacteren met wat we voor het web bouwen.ย Als het een blog is, willen we dat mensen berichten lezen.ย Als het een online winkel is, willen we potentiรซle kopers kopers maken.ย Als het een web-app voor sociaal netwerken is, willen we dat bezoekers berichten schrijven, foto’s uploaden en met elkaar communiceren.

Prestaties spelen een belangrijke rol bij het succes van een online onderneming, aangezien goed presterende sites gebruikers beter betrekken en behouden dan slecht presterende.ย Hier zijn enkele casestudy’s over hoe prestaties de betrokkenheid en conversies voor verschillende websites hebben beรฏnvloed.

Als hoge prestaties een troef zijn, is slechte prestaties een verplichting.ย Hier zijn enkele casestudy’s waarin slechte prestaties een negatief effect hadden op bedrijfsdoelen:

Omdat zaken zeer concurrerend zijn, zijn we altijd op de hoogte van hoe het met onze concurrenten gaat.ย In dezelfde DoubleClick by Google-studie die hierbovenย werdย geciteerdย , bleek dat sites die binnen 5 seconden werden geladen 70% langere sessies, 35% lagere bouncepercentages en 25% hogere advertentieweergave hadden dan sites die bijna 19 keer langer duurden na 19 seconden.ย Bekijk de Speed โ€‹โ€‹Scorecard-toolย voor een globaal beeld van de prestaties van uw site in vergelijking met die van de concurrentieย .

Een screenshot van de Speed โ€‹โ€‹Scorecard-tool, waarmee de prestaties van vier populaire nieuwsuitzendingen worden vergeleken.
Figuur 1ย .ย Speed โ€‹โ€‹Scorecard vergelijkt de prestaties van vier concurrerende sites met Chrome UX Report-gegevens van 4G-netwerkgebruikers in de Verenigde Staten.

Prestaties hebben betrekking op het verbeteren van conversies

Het behouden van gebruikers is cruciaal voor het verbeteren van conversies.ย Als u een online bedrijf leidt, zijn conversies het doel en de prestaties zijn vanย cruciaal belangย .ย Trage sites hebben een negatief effect op de omzet, en het tegenovergestelde is ook waar.ย Hier zijn enkele voorbeelden van hoe prestaties een rol hebben gespeeld bij het meer of minder winstgevend maken van bedrijven:

Als u een bedrijf op internet heeft, zijn prestaties van cruciaal belang.ย Als de gebruikerservaring van uw site snel is en reageert op gebruikersinvoer, kan deze u alleen maar van dienst zijn.ย Bekijk onzeย Impact Calculator-ย toolย om te zien hoe prestaties uw inkomsten kunnen beรฏnvloedenย .

Een schermafbeelding van de Impact Calculator, waarbij wordt geschat hoeveel inkomsten een site kan opleveren als prestatieverbeteringen worden doorgevoerd.
Figuur 2ย .ย De Impact Calculator schat hoeveel inkomsten u verdient te krijgen door de prestaties van uw site te verbeteren.

Prestaties gaat over de gebruikerservaring

Wanneer u naar een URL navigeert, doet u dit vanuit een willekeurig aantal mogelijke startpunten, waarbij u mogelijk de ene ervaring voor de andere weggooit.ย Afhankelijk van een aantal voorwaarden (bijvoorbeeld verbindingskwaliteit, server- en frontend-architectuur), kan uw ervaring behoorlijk verschillen van die van een andere gebruiker.

Een vergelijking van twee filmstrip-rollen van het laden van een pagina. De eerste toont een pagina die op een langzame verbinding wordt geladen, terwijl de tweede pagina dezelfde laadsnelheid op een snelle verbinding weergeeft.
Figuur 3ย .ย Een vergelijking van het laden van pagina’s op een zeer trage verbinding (boven) versus een snellere verbinding (onder).

Naarmate een site begint te laden, is er een periode waarin gebruikers wachten totdat inhoud wordt weergegeven.ย Totdat dit gebeurt, is er geen gebruikerservaring om over te praten.ย Dit gebrek aan een ervaring is vluchtig op snelle verbindingen.ย Bij tragere verbindingen treedt echter het tegenovergestelde op en moeten gebruikers wachten.ย Bij de definitieve renderingย gaatย starten in dergelijke omstandigheden, kunnen gebruikers worden geplaagd door verdere problemen zoals CSS, JavaScript en andere hulpmiddelen pagina langzaam binnendruppelen, die elk hun eigen unieke performance problemen.

Bijgevolg kan worden gesteld dat prestaties een fundamenteel aspect zijn van goede gebruikerservaringen.ย Wanneer sites veel code verzenden, blijven de prestaties laag omdat browsers er op langzame netwerken megabytes doorheen kauwen.ย Apparaten met beperkte verwerkingskracht en geheugen kunnen moeite hebben met het verwerken van wat we beschouwen als een bescheiden hoeveelheid niet-geoptimaliseerde code.ย Naarmate de prestaties slechter worden, neemt de reactietijd en beschikbaarheid van toepassingen af.ย Als we weten wat we weten over menselijk gedrag, zullen deze slecht presterende applicaties maar zo lang worden getolereerd voordat gebruikers ze verlaten.ย Als u meer wilt weten over hoe u de prestaties van uw site kunt beoordelen en mogelijkheden kunt vinden voor verbetering, bekijk dan onze handleiding.ย Hoe kunt u denken aan Speed โ€‹โ€‹Toolsย ?

Overzicht van paginaprestaties zoals te zien in Lighthouse.
Figuur 4ย .ย Overzicht van paginaprestaties zoals te zien inย Lighthouseย .

Prestaties gaan over mensen

Hoewel het verbeteren van de prestaties van vitaal belang is voor het financiรซle succes en het welzijn van bedrijven, is het belangrijk om de potentiรซle uitdagingen waarmee mensen worden geconfronteerd tijdens het surfen op internet niet over het hoofd te zien.ย Verbetering van de prestaties moet niet alleen worden gezien als een manier om onszelf te bevorderen, maar ook als ethisch verantwoord gedrag.ย Slecht presterende sites en applicaties kunnen echte gevolgen en kosten opleveren voor de mensen die ze gebruiken.

Aangezien mobiele gebruikers wereldwijd nog steeds een groot deel van internetgebruikers verdienenย , is het belangrijk om in gedachten te houden dat veel van deze gebruikers toegang hebben tot het internet via mobiele LTE-, 4G-, 3G- en zelfs 2G-netwerken.ย Zoals Ben Schwarz van Calibre opmerkt in deze studie van de prestatiesย in deย echte wereldย , nemen de kosten van prepaid-gegevensplannen af, wat op zijn beurt toegang tot internet betaalbaarder maakt op plaatsen waar dit voorheen niet het geval was.ย Simpel gezegd, mobiele apparaten en internettoegang zijn niet langer luxe voor welgestelde consumenten.ย Het zijn algemene hulpmiddelen die nodig zijn om te navigeren en te functioneren in een steeds meer onderling verbonden wereld.

De totale paginagrootte neemt sinds minstens 2011 gestaag toeย en de trend lijkt zich voort te zetten.ย Omdat de hoeveelheid gegevens de gemiddelde pagina verhoogt, worden gedoseerde gegevensabonnementen minder economisch.ย Wanneer deze plannen opraken, moeten ze worden bijgevuld, wat geld kost.

Terwijl snelle en lichte gebruikerservaringen een economische overweging geven, kunnen ze ook van cruciaal belang zijn voor gebruikers in een crisis.ย Publieke bronnen zoals ziekenhuizen, klinieken en crisiscentra hebben onlinebronnen die belangrijke en specifieke informatie overbrengen die een persoon nodig heeft te midden van een crisis.ย Hoewel design cruciaal is voor het efficiรซnt presenteren van belangrijke informatie op stressvolle momentenย , kan het belang van eenย snelleย levering van deze informatie niet worden ondergewaardeerd.ย Het maakt deel uit van ons werk.

Waar te gaan vanaf hier

Je weet nuย waaromย prestatie van belang is, maar je vraagt โ€‹โ€‹je misschien af โ€‹โ€‹”wat nu?”ย Vervolgens bespreken we drie pragmatische prestatie-overwegingen, compleet met suggesties om deze aan te pakken.ย Hoewel deze lijsten misschien intimiderend lijken, begrijpt u dat u nietย alย deze dingenย hoeft te doenย om de prestaties van uw site te verbeteren.ย Het zijn slechts potentiรซle startpunten, dus voel je niet overweldigd!ย Alles watย u kunt doen om de prestaties te verbeteren, is nuttig voor uw gebruikers.

Let op welke bronnen je verzendt

Een effectieve methode voor het bouwen van hoogwaardige toepassingen is om teย controlerenย welkeย bronnen u naar gebruikers verzendtย .ย Hoewel hetย netwerkvenster in de ontwikkeltools van Chromeย een fantastischย hulpmiddelย is om alle bronnen die op een bepaalde pagina worden gebruikt samen te vatten, kan het ontmoedigend zijn om te weten waar te beginnen als je tot nu toe de prestaties niet hebt overwogen.ย Hier zijn een paar suggesties:

  • Als u Bootstrap of Foundation gebruikt om uw gebruikersinterface samen te stellen, vraagt โ€‹โ€‹u zich af of dit nodig is.ย Dergelijke abstracties voegen enorm veel CSS toe die de browser moet downloaden, parseren en toepassen op een pagina, al voordat uw sitespecifieke CSS in beeld komt.ย Flexboxย enย Gridย zijn fantastisch in het maken van zowel eenvoudige als complexe lay-outs met relatief weinig code.ย Omdat CSS een render-blocking-resource isย , kan de overhead van een CSS-framework de rendering aanzienlijk vertragen.ย U moet proberen de weergave te versnellen door onnodige overheadkosten te elimineren en in plaats daarvan te vertrouwen op gereedschappen die in de browser zijn ingebakken wanneer mogelijk.
  • JavaScript-bibliotheken zijn handig, maar niet altijd noodzakelijk.ย Neem jQuery bijvoorbeeld: de selectie van elementen is aanzienlijk vereenvoudigd dankzij methoden alsย querySelectorย enย querySelectorAll.ย Gebeurtenissen binden is eenvoudig metย addEventListener.ย classList,ย setAttributeenย getAttributebieden eenvoudige manieren om met klassen en elementattributen te werken.ย Als u een bibliotheek moet gebruiken, onderzoek dan naar slankere alternatieven.ย Bijvoorbeeld,ย Zeptoย is een kleinere jQuery alternatief, enPreactย is een veel kleiner alternatief te reageren.
  • Niet alle websites hoeven single-page-applicaties (SPA’s) te zijn, omdat ze vaak uitgebreid gebruikmaken van JavaScript.ย JavaScript is de duurste bron die we op het web aanbieden voor byteย , omdat het niet alleen moet worden gedownload, maar ook moet worden geparseerd, gecompileerd en uitgevoerd.ย Nieuws- en blogsites met geoptimaliseerde frontend-architectuur kunnen bijvoorbeeld goed presteren als traditionele multipage-ervaringen.ย Vooral alsย HTTP-cachingย correct is geconfigureerd en optioneel als eenย servicemedewerkerย wordt gebruikt.

Let op hoe je middelen verstuurt

Wanneer u weetย welkeย bronnen u moet verzenden om uw app zo mooi en functioneel te laten zijn als u wilt, denk dan verder aan deย manier waaropย u ze verzendt.ย Zoals het geval is met vooruitdenken en voorkomen, is levering van essentieel belang voor het opbouwen van snelle gebruikerservaringen.

Let op hoeveel gegevens je verzendt

Met enkele ideeรซn over welke middelen geschikt zijn om te verzenden enย hoeย u ze moet verzenden, laten we een paar suggesties bespreken voor het beperken vanย de hoeveelheidย gegevens die u verzendt:

Voor een meer holistische gids over het verbeteren van prestaties, bekijk onze beschrijving vanย het RAIL-prestatiemodelย , dat gericht is op het verbeteren van zowel de laadtijd alsย de reactietijd vanย applicaties.ย Onze PRPL-patroonhandleiding is ook een uitstekende hulpbronย voor het verbeteren van de prestaties van moderne toepassingen met รฉรฉn pagina.

Als u meer wilt weten over de prestaties en hoe u uw site sneller kunt maken, bladert u door onze prestatiedocumentatie voor handleidingen over verschillende onderwerpen.ย We voegen voortdurend nieuwe gidsen toe en updaten bestaande, dus blijf terugkomen!

Speciale dank aanย Addy Osmaniย ,ย Jeff Posnickย ,ย Matt Gauntย ,ย Philip Waltonย ,ย Vinamrata Singalย , Daniel An enย Pete LePagevoor hun uitgebreide feedback bij het verbeteren en lanceren van deze bron!

Advertenties

Kom maar op met je reactie! !! ๐Ÿ—ฃ ๐Ÿ“› ๐Ÿ˜˜ ๐Ÿ’ฌ

Vul je gegevens in of klik op een icoon om in te loggen.

WordPress.com logo

Je reageert onder je WordPress.com account. Log uit /  Bijwerken )

Google+ photo

Je reageert onder je Google+ account. Log uit /  Bijwerken )

Twitter-afbeelding

Je reageert onder je Twitter account. Log uit /  Bijwerken )

Facebook foto

Je reageert onder je Facebook account. Log uit /  Bijwerken )

Verbinden met %s

This site uses Akismet to reduce spam. Learn how your comment data is processed.

%d bloggers liken dit: