Nu paginasnelheid door de jaren heen een belangrijke maatstaf is geworden voor zowel SEO als UX, is het concept van a webprestatiebudget is ook op de voorgrond gekomen. Het is nu duidelijker dat webprestaties een onderwerp zijn dat een gedeeld perspectief van alle afdelingen vereist, in plaats van alleen maar de prioriteit te zijn van één enkele afdeling of individu.

Om dit met een voorbeeld uit te leggen: marketingafdelingen willen misschien conversie- en remarketing-/retargetingcodes, samen met tools zoals Criteo en RTB House, die gebruik maken van productgebaseerde retargeting. Ze verwachten misschien ook opvallende foto's en animaties. Ondertussen kunnen productafdelingen verzoeken om de integratie van tools zoals Hotjar en duidelijkheid. Softwareafdelingen daarentegen streven ernaar om zowel op de frontend als op de backend zo snel mogelijk te ontwikkelen. De vraag en de kosten die gepaard gaan met deze eisen aan paginasnelheid zijn feitelijk in evenwicht. Om dit evenwicht effectief tot stand te brengen, is het webprestatiebudget ontstaan.

Een webprestatiebudget omvat het instellen van een doelsnelheid voor uw platform op een specifiek platform en het vaststellen van numerieke doelstellingen waaraan alle belanghebbenden zich zullen houden om deze snelheid te bereiken. Kortom, de kosten van snel zijn zijn het webprestatiebudget.

 

image-5.png
Bron: https://wp-rocket.me/blog/performance-budgets/

 

Alles begint met een voorstel. U stelt voor hoe snel uw pagina moet openen op een bepaald type verbinding. Enkele voorstellen voor prestatiebudgetten kunnen bijvoorbeeld zijn:

  • Kan de startpagina worden geopend? minder dan 2 seconden op een snelle 3G mobiele verbinding (1.6 Mbps)?
  • Kan de zoekresultatenpagina worden geopend in minder dan 5 seconden op een langzame 3G-verbinding (780 Kbps)?

Vervolgens maak je een actieplan en substatistieken om deze proposities te realiseren, en splits je dit op in delen.

Naast voorstellen kunnen er ook andere prestatiebudgetdoelen zijn. Bijvoorbeeld:

  • Het vergroten van de mobiele vuurtoren score van de detailpagina boven de 80
  • De grootte van alle afbeeldingen verkleinen op de desktopsite tot minder dan 500 KB

Prestatiebudgetstatistieken

Er worden drie verschillende perspectieven geaccepteerd voor het bepalen van de maatstaven van een prestatiebudget:

Op cijfers gebaseerde statistieken

  • Maximaal aantal lettertypen / Maximale lettergrootte
  • Maximaal aantal afbeeldingen / Maximale afbeeldingsgrootte
  • Maximaal aantal scripts, stijlen, video's, enz. / Maximale grootte van scripts, stijl, video, enz
  • Maximale HTML-grootte
  • Maximaal aantal HTTP-verzoeken
  • Maximaal aantal scripts van derden

 

image-7.png
Bron: https://web.dev/vitals/

 

Op tijd gebaseerde statistieken

  • Eerste Contentful Paint (FCP)-tijd
  • Grootste Contentful Paint (LCP) tijd
  • Tijd voor eerste ingangsvertraging (FID).
  • Tijd naar interactieve (TTI) tijd
  • Totale blokkeertijd (TBT) tijd
  • Cumulatieve Layout Shift-score (CLS).
  • Snelheidsindexscore

Op regels gebaseerde statistieken

  • Vuurtorenscore
  • GTmetrix-score
  • Webpaginatestscore
  • Ylangzame score
prestatie-budget-calculator.png
Bron: https://www.performancebudget.io/

Bij het instellen van uw webprestatiebudget wordt over het algemeen aanbevolen om al deze perspectieven in de juiste mate te combineren, in plaats van slechts één perspectief te kiezen. Je kunt gebruiken de prestatiebudgetsimulator om de cijfers te vinden die nodig zijn om uw doelsnelheid te bereiken.

Evalueer paginatypen afzonderlijk

Een cruciaal punt bij het bepalen van het prestatiebudget is om het niet op één pagina van de site te baseren. Een veelgemaakte fout is om alleen de startpagina te testen, wat tot een onvolledige evaluatie leidt.

U moet beginnen met het onderzoeken van het platform en het identificeren van verschillende soorten pagina’s. Analyseer vervolgens het verkeer van het platform om de pagina's te identificeren die het meeste verkeer ontvangen en deze te prioriteren. Het resultaat is een tabel die er ongeveer zo uitziet:

  • Home
  • Statische vermeldingspagina's
  • Dynamische vermeldingspagina's
  • Detailpagina's
  • Afrekenen pagina's
  • Pagina's met zoekresultaten
  • Campagnepagina's
  • Blogpagina's

Je moet je concentreren de prestatiebudgetten van deze paginatypen afzonderlijk, op basis van de prioriteiten.