Het behouden van een schitterende website performance

Wanneer was de laatste keer dat u de performance van uw website heeft gecheckt? Als uw antwoord langer dan 5 minuten geleden is dan verwaarloost u één van de meest belangrijkste dingen die u kunt doen om bouncepercentages, Google ranking, conversies en omzet te verbeteren. In dit artikel leggen we de stappen uit die u moet nemen om een snelle gebruikerservaring te handhaven.

Waarom is website prestatie van belang?

Het maakt niet uit hoeveel tijd en moeite u besteed aan de ontwikkeling van uw gebruikersinterface, het genereren van geweldige content, de marketing van uw website of hoe geweldig uw producten zijn – als uw website traag is dan benadeelt dat uw bedrijf. Gebruikers maken besluiten over uw website op het moment dat ze op een link klikken. Onderzoek heeft aangetoond dat een vertraging van 500 milliseconden in paginasnelheid al voldoende is om hun mening te beïnvloeden. Een pagina die traag laadt beïnvloedt gebruikers op verschillende manieren zoals Tammy Everts heeft beschreven in haar boek: Time is Money: the Business Value of Web Performance.

  • Trage websites tasten het vertrouwen in een merk aan.
  • Trage pagina’s bevorderen een negatieve perceptie van de gebruikersinterface (UI) en aangeboden diensten en producten.
  • Langzame en onhandige checkouts verminderen het vertrouwen en verhoogt het percentage van gebruikers die vroegtijdig verlaten.
  • Toename van bouncepercentages. Na 3 seconden zijn 45% van de gebruikers al overgestapt naar een concurrent.
  • Klantbehoud gaat omlaag.
  • Inkomsten lijden wanneer conversies en de omvang van winkelmandjes afnemen.
  • De snelheid van de pagina’s heeft invloed op SEO.

Zoals u ziet, het onderhouden van pagina’s die snel inladen is net zo belangrijk als elk ander aspect van uw bedrijf en website; helaas geven veel merken prestaties minder prioriteit en hun bedrijven lijden eronder.

Waarom verslapt uw website snelheid in de loop van de tijd?

Hopelijk bent u begonnen met een goed werkende website. U heeft een prestatiebudget opgesteld en eraan vastgehouden, maar ontdekt nu dat uw prestatie alsnog onderuitgaat. U bent niet de enige, veel webprofessionals bevonden zich namelijk in hetzelfde schuitje. Laten we kijken naar een paar redenen waarom uw webprestaties in de loop van de tijd kunnen verslechteren.

  • Introductie van ongeoptimaliseerde afbeeldingen, CSS- en Script-bestanden.
  • Het toevoegen van afbeeldingen, script en CSS-bestanden (nieuw of uitbreiding) die de omvang of grootte overschrijden zoals in het prestatiebudget is beschreven.
  • Excessieve verzoeken. Elk element vereist een nieuw verzoek dat tijd inneemt bij de server.
  • Webhosting pakket. Wellicht zit u aan de limiet van uw webhosting pakket, dat andere sites op een gedeelde hosting abonnement de beschikbare bandbreedte innemen of dat u extra servers moet toevoegen om de belasting te kunnen verwerken.
  • Verouderde infrastructuur. Uw webservers en ondersteunende hardware vertragen door slijtage of kunnen het groeiende verkeer niet aan.
  • Content van externe partijen verbruiken meer bandbreedte en verwerkingstijd dan verwacht.
  • Browsers veranderen in de loop van de tijd. Veranderingen kunnen resulteren in tragere laadtijden voor uw site, dus u moet zich aanpassen voor veranderingen in browserprestaties wanneer ze plaatsvinden.

De waarheid is dat er genoeg redenen zijn dat de webprestaties van websites verslappen en zelfs de meest ervaren webontwikkelaars worstelen met het onderhouden van een snelle website.

Start een webprestatiecultuur

Een van de eerste stappen om een snelle website te onderhouden is om het hele bedrijf te betrekken om webprestatie een prioriteit te maken.

Een snel Internet voor elke gebruiker

Als werknemers in de technologiesector hebben wij de neiging om te ontwerpen voor de nieuwste technologie. In de haast om de nieuwste apparaten- en developmenten praktijken op te nemen, vergeten we soms dat veel van onze gebruikers geen toegang hebben tot snelle apparaten en netwerken. Het ontwerpen en testen voor gebruikers die gebruik maken van verschillende apparaten, verbindingen en browsers is gewoon logisch.

Zorg ervoor dat u, en die aan uw project werken, gebruik maken van een verouderd apparaat. Simuleer slechte netwerkomstandigheden en trage CPU’s en maak uw project robuust. Ontdek welke apparaten uw gebruikers bezitten en wees voorzichtig met prioriteit geven aan welke apparaten de gebruikers op uw website gebruiken.

José M. Pérez

Ontwerp met prestatie in het achterhoofd – voor nu en in de toekomst

Elk besluit over de website of app dient te komen vanuit een prestatie-standpunt. Hoe zal deze nieuwe functie de prestatie van de site beïnvloeden? U moet elke nieuwe techniek, API en bibliotheek testen om te zien hoe de prestatie wordt beïnvloedt voordat het in de build van de website wordt geïmplementeerd.

Krijg iedereen aan boord

De focus op prestatie vergt tijd en inzet. Met behulp van onderbouwing en goedkeuring van aandeelhouders bent u in staat om sommige dingen op te offeren dat vanwege de toewijding naar prestatie wellicht vereist wordt. Licht de teams in over de technologie en beslissingen die voor de verbetering van prestatie worden genomen en daag hun uit om naar nieuwe prestatieverbeteringen te zoeken om uit te testen.

Maak prestatietesten onderdeel van uw CI/CD-workflow

Het integreren van prestatie in uw CI/CD (Continuous Integration/Continuous Delivery) processen betekent dat geautomatiseerde processen uw development- en acceptatieomgevingen monitoren om eventuele prestatiegerelateerde problemen vast te leggen voordat Development overgaat naar een nieuw project. Zodra een ontwikkelaar een wijziging doorvoert, start de code repository een nieuwe build en begint de prestatie-controleregel met het testen zodra de build voltooid is. Als er een probleem is, brengt de controleregel het team onmiddellijk op de hoogte.

U kunt uw monitoring updates automatiseren, en als u een Persoonlijke Controlestation heeft, kunt u Uptrends aan het werk zetten om uw development- en acceptatieomgeving te monitoren. Lees meer over het integreren van Uptrends in uw CI/CD-proces.

Stel een prestatiebudget voor de website op

Net als bij het betalen van de rekeningen, heeft u elke maand een bepaald bedrag beschikbaar gesteld voor huisvesting, vervoer, vermaak en diverse uitgaven. Als het geld opraakt, stopt u met uitgaven en moet u misschien wat geld verschuiven om het allemaal voor elkaar te krijgen. Met uw website is het niet anders. Stel een maximale laadtijd vast en houdt uzelf eraan. Wat er ook gebeurt.

Daarbij moet u goed kijken naar uw ‘line items’.

  • Netwerkduur: DNS resolve, verbindingsduraties, omleidingsduraties
  • Backend: Ontvangst en verzend-duraties
  • Laadtijd: ‘Time to first byte’ en de tijd voordat de pagina gereed is
  • Frontend: DOM- en renderduraties
  • Downloadtijd

U moet de bovenstaande lijst voor elk pagina-element in overweging nemen. Tochtjes naar de server zijn duur, dus het minimaliseren van het aantal verzoeken van de server draagt veel bij aan het verbeteren van prestaties. U kunt ook de tochten naar de server verminderen door script- en CSS bestanden te combineren. Neem de belangrijkste script- en CSS-elementen van het bovenstaande op in de header en ‘lazy-load’ de rest (Lees hoe u CSS kunt inladen zonder rendering te blokkeren).

U heeft veel mogelijkheden tot uw beschikking:

  • Maak gebruik van Content Delivery Networks (CDN’s) om netwerklatentie te verminderen.
  • Gebruik van browserhints: preload, prefetch, en preconnect.
  • Maak gebruik van Service workers.
  • Inschakelen van compressie.
  • Optimaliseer afbeeldingen en gebruik imagesprites wanneer mogelijk.
  • Verwijder verouderde of ongebruikte CSS en code om bestandsgrootte te verkleinen.
  • Maak gebruik van de browser cache en stel langere time-outs in.

Als u wilt weten waar u te beginnen met uw websiteoptimalisaties kan onze gratis Website Speed Test tool u uw PageSpeed Insights score en optimalisatie aanbevelingen geven. U heeft veel mogelijkheden om uw website in orde te krijgen, maar het behouden van een snelle website vereist voortdurend onderhoud.

Website Speed Test PageSpeed Insights score en aanbevelingen

Bewaak de snelheid van uw website

De kleinste verandering in code, netwerkinfrastructuur of inhoud kan ervoor zorgen dat uw website plotseling vertraagt. Om uw websitesnelheid in de gaten te houden heeft u synthetische Web Performance Monitoring nodig. Met Uptrends’ Full Page Check (FPC) kunt u real-time ervaringen simuleren door

  • Gebruik te maken van een relevante browsers: Firefox, Chrome, of Internet Explorer.
  • Simuleren van verschillende apparaten en schermafmetingen.
  • Verbindingen onderdrukken om verschillende verbindingstypes te simuleren.

De FPC meet elk verzoek en registreert de DNS-resolutie, verbinding-, handshake, zend-, wacht- en de ontvangsttijd. De FPC geeft de resultaten weer in een handige watervalgrafiek waar u snel falende elementen, knelpunten en andere element-specifieke problemen zoals trage reacties van externe partijen kunt zien.

Watervalgrafieken weergeeft de progressie van laadtijden.

U kunt de details van elk request- en response header bekijken.

Klik de +/- voor de volledige weergave van request en responsheaders.

Als u ervoor kiest om de FPC te verbeteren (Full Page Check +), kunt u ook uw inhoud uitgebreid inzien op basis van domein. U kunt prestaties inzien op basis van externe partijen, CDN responses en snelheid van uw servers.

Het tabblad van domeingroepen in het waterval rapport.

Met Uptrends’ Full Page Check kunt u zien hoe uw prestaties in de loop van de tijd veranderen en kunt u gemakkelijk prestatiepieken en trends signaleren. U kunt grotere problemen zoals falende servers voorkomen en u kunt de effecten van andere systemen op de achtergrond zien, zoals database-updates die ’s nachts worden uitgevoerd.

Website Performance Grafiek

Traceer uw gebruikerservaring met behulp van Real User Monitoring (RUM)

Een klein scriptbestand in de header van uw pagina’s stelt Uptrends in staat om informatie over de gebruikersomgeving te verzamelen en gegevens over het laden van de pagina’s te verzamelen wanneer ze uw site bezoeken. Uptrends verzamelt de gegevens en geeft statistieken weer zoals downloadtijd, ’time to first byte’ (TTFB), en de duratie totdat de pagina gereed is. U ontvangt statistieken op basis van gebruikerslocatie, soort apparaat, besturingssysteem, type browser en de bekeken pagina. Uw RUM-dashboards maken het gemakkelijk om toegang te krijgen tot uw werkelijke gebruikerservaring. Lees meer over RUM.

RUM dashboard

Conclusie

Het onderhouden van uw webprestaties vraagt om zorgvuldigheid. U dient te ontwerpen voor prestatie, plannen voor toekomstige verbeteringen en nieuwe tools en technieken gebruiken wanneer deze beschikbaar komen en u moet ten allen tijden uw prestatiemetingen in de gaten houden. Uptrends heeft de tools om u te helpen om de prestaties van uw site te handhaven van ontwikkeling tot en met productie. Als uw prestaties verslappen, stuurt Uptrends’ dynamische waarschuwingen naar buiten.

We hebben ook de tools voor u om de snelheid van uw API’s en webapplicaties te controleren. Multi-step API Monitoring en Web Application Monitoring geeft u prestatiegegevens over elke aanvraag en de volledige interactie. Als u Uptrends zelf wilt uitproberen, bieden wij u een 30 dagen durende, vrijblijvende, gratis proefversie aan. Meld u vandaag nog aan voor uw proefversie!