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

Geef een 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