Eftersom sidhastighet har blivit ett viktigt mått för både SEO och UX under åren, har konceptet med en webbprestandabudget har också kommit i förgrunden. Det är nu mer uppenbart att webbprestanda är ett ämne som kräver ett delat perspektiv mellan alla avdelningar, snarare än att bara prioriteras av en enskild avdelning eller individ.

För att förklara detta med ett exempel: marknadsavdelningar kanske vill implementera konvertering och remarketing/retargeting-koder, tillsammans med verktyg som Criteo och RTB House, som använder produktbaserad retargeting. De kan också förvänta sig iögonfallande foton och animationer. Under tiden kan produktavdelningar begära integration av verktyg som Hotjar och Klarhet. Mjukvaruavdelningar, å andra sidan, strävar efter att utvecklas så snabbt som möjligt på både frontend och backend. Efterfrågan och kostnaderna förknippade med dessa krav på sidhastighet är faktiskt i balans. Webbprestandabudgeten har kommit fram för att etablera denna balans på ett effektivt sätt.

En webbprestandabudget innebär att sätta en målhastighet för din plattform på en specifik plattform och fastställa numeriska mål som alla intressenter kommer att hålla sig till för att uppnå denna hastighet. Kort sagt, kostnaden för att vara snabb är webbprestandabudgeten.

 

bild-5.png
Källa: https://wp-rocket.me/blog/performance-budgets/

 

Allt börjar med ett förslag. Du föreslår hur snabbt din sida ska öppnas på en viss typ av anslutning. Några resultatbudgetförslag kan till exempel vara:

  • Kan hemsidan öppnas in under 2 sekunder på en snabb 3G-mobilanslutning (1.6 Mbps)?
  • Kan sökresultatsidan öppnas in under 5 sekunder på en långsam 3G-anslutning (780 Kbps)?

Därefter skapar du en handlingsplan och delmått för att uppnå dessa förslag och dela upp det i delar.

Förutom förslag kan det finnas andra resultatbudgetmål. Till exempel:

  • Öka den mobila fyren poängen på detaljsidan över 80
  • Minska storleken på alla bilder på skrivbordswebbplatsen till under 500 KB

Prestandabudgetstatistik

Det finns tre olika perspektiv som accepteras för att bestämma måtten för en resultatbudget:

Nummerbaserade mätvärden

  • Maximalt antal teckensnitt / Maximal teckenstorlek
  • Maximalt antal bilder / Maximal bildstorlek
  • Maximalt antal scripts, styles, videos, etc. / Maximum script, style, video, etc. size
  • Maximal HTML-storlek
  • Maximalt antal HTTP-förfrågningar
  • Maximalt antal skript från tredje part

 

bild-7.png
Källa: https://web.dev/vitals/

 

Tidsbaserade mätvärden

  • Första Contentful Paint (FCP) tid
  • Största Contentful Paint (LCP) tid
  • Tid för första ingångsfördröjning (FID).
  • Time to Interactive (TTI) tid
  • Total Blocking Time (TBT) tid
  • Cumulative Layout Shift (CLS) poäng
  • Speed ​​Index poäng

Regelbaserad statistik

  • Lighthouse poäng
  • GTmetrix poäng
  • Webpagetestresultat
  • Låg poäng
performance-budget-calculator.png
Källa: https://www.performancebudget.io/

När du ställer in din webbprestandabudget rekommenderas det generellt att kombinera alla dessa perspektiv i rätt mått istället för att bara välja ett. Du kan använda resultatbudgetsimulatorn för att hitta siffrorna som behövs för att nå din målhastighet.

Utvärdera sidtyper separat

En avgörande punkt när du bestämmer resultatbudgeten är att inte basera den på en enda sida på webbplatsen. Ett vanligt misstag är att endast testa hemsidan, vilket leder till en ofullständig utvärdering.

Du bör börja med att undersöka plattformen och identifiera olika typer av sidor. Analysera sedan plattformens trafik för att identifiera de sidor som får mest trafik och prioritera dem. Resultatet blir en tabell som liknar denna:

  • Hemsida
  • Statiska listsidor
  • Dynamiska listsidor
  • Detaljsidor
  • Kassasidor
  • Sökresultatsidor
  • Kampanjsidor
  • Bloggsidor

Du måste fokusera på resultatbudgetarna för dessa sidtyper separat, baserat på prioriteringarna.