Stel een budget in voor webperformance

Het instellen van een performancebudget voor websites en API’s vroeg in de ontwikkelcyclus is de optimale keuze om voor ervoor te zorgen dat uw websites en webservices voor alle gebruikers snel blijven. Maar het is nooit te laat om een webperformancebudget in te stellen om uw gebruikerservaring te verbeteren. Als u rekening houdt met uw gebruikers, kunt u met een webperformancebudget beslissingen nemen op basis van uw gewenste paginasnelheid.

Wat is een webperformancebudget?

Een website kan gemakkelijk in omvang toenemen, maar onbelemmerde groei kan een performancenachtmerrie creëren voor de gebruikers op desktopcomputers en mobiele apparaten. Om te voorkomen dat u een reusachtige site creëert die bandbreedte en tijd van de gebruiker verslindt moet u beperkingen opleggen aan elk onderdeel van de ontwikkeling van een site, dat wil zeggen een webperformancebudget. Uw budget zorgt ervoor dat performance een prioriteit blijft door limieten in te stellen voor pagina-elementen en serverresponsiviteit.

U kunt uw websiteperformancebudget baseren op laadtijd (of andere laadtijdstatistieken), totale paginagrootte, totale afbeeldingsgrootte, totaal aantal en grootte van JavaScript- en CSS-downloads, aantal requests, elementen van derden zoals weblettertypen, of een combinatie van verschillende limieten (zie figuur 1). Het bepalen van de maximale laadtijd voor uw site is uw webperformancebudget.

Figuur 1: Grafiek met performancestatistieken

Zoals bij elk budget, hebt u een bepaalde hoeveelheid van iets dat u kunt gebruiken. Bij een websiteperformancebudget is dat tijd.

U bepaalt hoe snel uw site moet laden op een bepaald apparaat en een bepaalde verbindingssnelheid, en u zorgt ervoor dat u zich aan uw budget houdt. Als u bijvoorbeeld wilt dat uw site in twee seconden laadt op een mobiel 4G-apparaat, optimaliseert u uw inhoud en serverresponstijden dienovereenkomstig.

Wat is de optimale snelheid voor uw websiteperformancebudget?

Hoe snel is snel genoeg? Dat is een lastige vraag, een website kan redenen hebben om een hoger budget te vereisen dan wat de meeste gebruikers verwachten. Maar denk twee keer na voordat u een hogere maximale laadtijd voor uw webperformancebudget instelt.

Google legt uit dat een snelle website voordelen heeft. Een site die bijvoorbeeld in minder dan drie seconden laadt, heeft een betere paginaranking en hogere voltooiingspercentages dan pagina’s die in 3,5 seconden laden. Bij vier seconden bent u 53% van uw gebruikers kwijt.

Bij het bepalen van de ranking gebruikt Google bots om de performance van uw website te doorzoeken en te testen. De resultaten helpen Google om prioriteit te stellen aan sites met hoge mobiele snelheden. Dus hoe sneller uw pagina kan laden, hoe beter uw paginarankings zijn.

In SemRush’s artikel van Cami Bird How fast is fast enough? Page load time and your bottom line, concludeert ze dat een site binnen twee seconden moet laden. Ze raadt aan uw site zo snel mogelijk te maken zonder uw klantervaring te belemmeren. Maar als uw website te traag is, hebt u uw klantervaring sowieso verknoeid.

Net als bij Cami, past een 2 secondendoel ook in de bevindingen van Tammy Everts Time is Money: The business value of web performance. Tammy beweert niet echt dat een maximale laadtijd van twee seconden het performancedoel is voor een website om het goed te doen. Ze presenteert echter meerdere onderzoeken die significante voordelen hebben gevonden voor sites die in twee seconden of minder laden. Volgens het onderzoek van Tammy is de snelheid van de website van invloed op:

• Bounce rates
• Conversies en inkomsten
• Paginaweergaven
• Gebruikerstevredenheid en -behoud
• Merkbeleving
• Google ranking

Waar begint u met een webperformancebudget?

Netwerklatentie, serverresponstijden, paginagrootte, verbindingstype, effectief gebruik van browsercaching, afbeeldingen van geschikte omvang, compressie en gebruik van CDN’s (Content Delivery Networks) dragen allemaal bij aan of verminderen paginalaadtijden.

Uw gebruikers hebben unieke configuraties van apparaten, browsers, besturingssystemen en netwerken waarmee u rekening moet houden bij het vaststellen van uw budget. Mogelijk moet u een aantal lastige keuzes maken, zoals het verwijderen van inhoud en het optimaliseren van responstijden totdat u binnen uw budget blijft.

Vanwege de verschillende gebruikersconfiguraties kunt u meerdere doelen hebben. Om zeker te weten welke apparaten, locaties, verbindingstypen en besturingssystemen uw bezoekers gebruiken om met uw inhoud te communiceren, kunt u overwegen Real User Monitoring (RUM) te gebruiken om het performancebudget van uw website verder te verfijnen.

Een van Google’s rankingfactoren gebruikt uw paginasnelheid. Google baseert de snelheid van uw pagina op een simulatie van een trage mobiele 4G-verbinding. Google gebruikt de volgende configuratie voor begrenzing:

• Latency: 150ms
• Throughput: 1.6Mbps download / 750 Kbps upload
• Packet loss: geen

Deze voorinstellingen van Google zijn een goed begin voor het bepalen van uw webperformancebudget. Als u uw performancedoel op mobiel behaalt, garandeert dit dat uw site ook snel is op de desktop. Nadat u uw performancedoel hebt bepaald, kunt u de beslissingen nemen die de performance van uw site beïnvloeden – en hopelijk verbeteren.

1. Benchmark uw huidige website performance

Het is eenvoudiger om tijdens de ontwerpfase een budget te bepalen, maar dat is niet altijd mogelijk. Als u een bestaande site hebt die u in overeenstemming wilt brengen met een budget, moet u de huidige snelheid kennen. Een synthetic tool kan u de antwoorden geven die u nodig hebt.

Als u klant van Uptrends bent, kunt u een nieuwe synthetic-controleregel configureren voor een mobiel apparaat dat op een traag 4G- of snel 3G-netwerk werkt. Of ga naar onze gratis Website Speed Test en voer een controle uit op uw site met behulp van de mobiele optie met 4G-bandbreedtebegrenzing.

De gratis Website Speed Test tool geeft u alle informatie die u nodig hebt om de performance van uw site te analyseren. U krijgt:

• Google PageSpeed Score: zoek een score in het groen (zie figuur 2) en overweeg de performanceaanbevelingen die de tool voorstelt (zie figuur 3). Een gele score betekent dat uw snelheid gemiddeld is en rood betekent dat u het helemaal niet goed doet. Voor een concurrentievoordeel hebt u een groene score nodig. Google baseert de score op:
  • First Contentful Paint: eerste render van DOM content.
  • First Meaningful Paint: primaire inhoud is geladen.
  • Speed Index: snelheid waarmee een pagina zichtbaar is geladen.
  • First CPU Idle: de meeste UI-elementen worden interactief.
  • Time to Interactive: pagina heeft nuttige inhoud, registratie van event handlers weergegeven en de pagina reageert binnen 50 milliseconden op interacties van gebruikers.
  • Estimated input latency: input responsiviteit.

Figuur 2: Algemene testresultaten, waaronder de Google PageSpeed Insights Score.

Met de gratis Website Speed Test tool krijgt u de volledige mobiele laadtijd van uw pagina (zie figuur 2); u krijgt ook performanceverbeterende informatie over hoe u binnen het budget kunt komen (zie figuur 3).

• Laadtijd: tijd vanaf de eerste request tot een volledig gerenderde pagina
• Paginagrootte:
  • Totale grootte van alle pagina-elementen
  • Objecttypes: aantal afbeeldingen, scripts, CSS, HTML, etc.
  • Totaal MB’s voor elk objecttype
• Aantal Requests: inclusief requests van eerste en derde partijen
• Watervalrapport:
  • Toont downloadsnelheden van individuele elementen
  • Gemiddelde tijd van resolve, TCP connect, HTTPS handshake, verzenden, wachten, en ontvangen

Figuur 3: Performanceaanbevelingen van Google PageSpeed Insight

Vergeet uw contentpagina’s niet

Uw budget stopt niet bij uw startpagina. Alle landingspagina’s of pagina’s binnen het pad van uw gebruiker moeten worden geanalyseerd en gebenchmarkt. Er kunnen verschillende budgetten van toepassing zijn op verschillende pagina’s, omdat de browser – hopelijk – veel elementen uit de cache laadt.

2. Weet de laadtijden van uw concurrenten

Het verslaan van de siteperformance van uw concurrenten kan u een voorsprong op hen geven. Zoals eerder besproken, verbetert een snellere site zowel de gebruikerservaring van de site als gebruikersvertrouwen. Om een concurrentievoordeel te behalen moet u ervoor zorgen dat uw website 20 procent sneller is dan die van uw concurrenten. Waarom 20 procent? Volgens de wet van Eeber-Fechner of Just-Noticeable Difference moet uw pagina 20% sneller laden dan die van een concurrent voordat uw gebruikers zich bewust zijn van een verschil.

Gebruik uw Uptrends-account of de gratis tool om de pagina’s van uw concurrenten gemakkelijk te benchmarken en hun pagina’s te monitoren op veranderingen in performance. Zelfs als u ze niet in snelheid kunt verslaan, kunt u altijd proberen ze te evenaren of dichtbij genoeg te komen zodat uw gebruikers het verschil niet merken.

3. Bepaal uw budget

Het is gemakkelijk om te zeggen: “Mijn pagina wordt binnen 1,5 seconden geladen.” Echter, voor sommige sites is het een uitdaging (zo niet onmogelijk) om dit performanceniveau te bereiken. Het vinden van de juiste balans tussen inhoud, paginaconfiguratie en serverperformance is lastig.

Uw websiteperformancebudget is een spel van geven en nemen om de juiste balans te vinden die goed werkt voor uw site. Om te illustreren hoe verschillende sites omgaan met de beperking van hun performance bekijken we vier populaire webzoektools om te zien hoe zij hun pagina-elementen hebben geconfigureerd en hoe dit de performance beïnvloedt.

We hebben elke site op 2 oktober 2019 getest met onze gratis Website Speed Test tool. We gebruikten de mobiele testoptie met een Apple iPhone 8 op een 4G-verbinding.

Tabel 1: Vergelijking van paginalaadtijden, elementtypen met aantal en totale grootte.

Zoals u in tabel 1 hierboven kunt zien, is performance een afweging. DuckDuckGo en Bing komen beide binnen 2,6 seconden binnen. Hoewel DuckDuckGo twee keer de paginagrootte en twee keer de gemiddelde ontvangsttijd van Bing heeft, heeft DuckDuckGo minder dan de helft van het aantal requests, waardoor hun laadtijden verminderen. Waar de lange ontvangsttijden van Google zijn budget om zeep helpen ondanks het lagere aantal requests. Yahoo is vergelijkbaar met DuckDuckGo wat betreft ontvangsttijden, maar heeft 77 requests meer en tweemaal de paginagrootte van DuckDuckGo.

Voor uw websiteperformancebudget moet u mogelijk vergelijkbare offers brengen in het type en de grootte van pagina-inhoud, een vermindering van het aantal requests en een verbetering van de responstijden. Resource hints, zoals preloading, preconnect en prefetch, samen met browsercaching kunnen ook de algehele paginaperformance verbeteren.

4. Gebruik Web Performance Monitoring om ervoor te zorgen dat uw website binnen het budget blijft

Nadat u uw budget hebt bepaald en uw website daarmee in overeenstemming hebt gebracht, is het belangrijk dat u uw site goed in de gaten blijft houden. Soms veranderen er dingen omdat uw site evolueert en uw performance wordt vaak door die veranderingen beïnvloed.

Met Uptrends’ Full Page Check kunt u uw belangrijkste indicatoren in de gaten houden en uw huidige performance bekijken. Als uw performance achteruitgaat, kunt u snel zien waar uw site uw budget heeft overschreden. U kunt uw mobiele en desktopperformance tegelijkertijd volgen, omdat de twee mogelijk verschillende budgetten hebben.

Conclusie

Een websiteperformancebudget is een belangrijk onderdeel van de ontwikkeling en het onderhoud van de gebruikerservaring van uw site. Het handhaven van een strikt budget verbetert gebruikersbetrokkenheid, conversierates en Google rankings en geeft uw site een voorsprong op de concurrentie. Benchmark en onderhoud uw budget met een gratis 30 dagen Uptrends proefperiode.