#perfmatters

Performance is belangrijk

Performance is belangrijk voor je gebruikers en klanten. Een snelle website genereert meer geld, verlaagt het bounce-rate, genereert meer klikken, zorgt voor een betere ranking in organisch zoekresultaten, verhoogt conversies en is een sleutelfactor om ervoor te zorgen dat gebruikers terugkomen. Steeds opnieuw.

Snelheid heeft invloed op...

 

Omzet

Als je site € 1000 per dag oplevert, dan levert een verbetering van de paginasnelheid van 1 seconde elke dag € 70 extra op.

Levenscyclus van sales

79% van de klanten die ontevredenheid over de prestaties van de website melden, zullen minder vaak van dezelfde site kopen.

Klantenervaring

47% van de klanten verwacht dat een webpagina binnen 2 seconden of minder wordt geladen.

Snelheid heeft ook invloed op de zoekresultaten, het geluk van mobiele bezoekers, conversie, paginaweergaven, bezoekduur, bounce-rate en nog veel meer … Kies maar!

Tijd is geld

Hoeveel is 1 seconde je waard?

De wetenschap toont aan dat een conversie van één seconde de conversies met 7% doet dalen.


1 seconde snellere laadtijden verhoogt je omzet met

70 elke dag

De basis van web performance

Om een snel ladende website te hebben, moet elke pagina zo snel mogelijk aan de browser worden geleverd. Wanneer de browser de gegevens heeft ontvangen, moet hij deze gegevens zo snel mogelijk kunnen gebruiken. Dit zijn de belangrijkste elementen van web performance.

Migreer naar Servebolt of probeer het gewoon gratis en ervaar laadsnelheden die je nog nooit eerder hebt gezien.

Ervaar onze snelheid in een paar eenvoudige stappen.

De eerste stap is aanmelden voor een gratis account

Meld je vandaag nog aan!

 

Response tijd

De browser moet de HTML ophalen. Het renderen kan niet beginnen voordat de browser de HTML heeft en weet wat hij vervolgens moet doen. Daarom is de reactietijd van het eerste verzoek van cruciaal belang voor de prestaties. De hosting en code van je website is van invloed op de reactietijd van de server.

Transfer tijd

De HTML, afbeeldingen en andere elementen op de webpagina moeten worden overgebracht van de server naar de browser. De afstand en de totale omvang van alle assets is wat de overdrachtstijd beïnvloedt.

Render tijd

Wanneer de browser de HTML en elementen heeft ontvangen, moet hij de code interpreteren en vervolgens de visuele presentatie van de webpagina maken. De complexiteit van de HTML, scripts en stylesheets, en de hoeveelheid andere assets, bepaalt hoe snel dit mogelijk is.

 

Eureka!

De wetten van de natuurkunde

Waarheden uit de fysieke wereld zijn ook van toepassing op websites

Het is gemakkelijk om computers, netwerken en internet als iets magisch te beschouwen. Maar laat er geen twijfel over bestaan, de wetten van de natuurkunde, over tijd, grootte en afstand, zijn ook in dit domein van toepassing. Ter herinnering waar we het over hebben:

Afstand

Het kost meer tijd om gegevens over grotere afstanden te verplaatsen dan over kortere afstanden

Grootte

Het kost meer tijd om grote assets te verplaatsen dan kleine assets

Volume

Veel items zijn moeilijker bij te houden dan een paar items

Resources

De hoeveelheid resources is een vast gegeven, wat betekent dat ze beperkt zijn.

NB! Onthoud dat alles tijd kost

Het voorbeeld van het laden van een enkele pagina

 

1. Gebruiker klikt op een link

De gebruiker klikt op een link en de browser controleert het IP-adres van het domein in de DNS en stuurt vervolgens het verzoek voor de pagina naar de server. Als de link SSL gebruikt, onderhandelen de client en de server over een beveiligde link voordat het verzoek wordt voltooid.

2. De server maakt de pagina

De server ontvangt het verzoek en voert de code van je website uit. De website doorzoekt de database en vraagt het bestandssysteem voor alle benodigde stukjes en beetjes en stelt de HTML-pagina samen.

3. HTML wordt naar de browser gestuurd

Wanneer de HTML is gemaakt, stuurt de server deze via het internet terug naar de browser.

4. De browser vraagt om assets

De browser ontvangt de HTML, leest de code en komt erachter dat er veel meer assets nodig zijn. De assets kunnen afkomstig zijn van dezelfde server of van andere servers waarvoor nieuwe DNS-lookups en SSL-verbindingen nodig zijn.

5. De browser geeft de pagina weer

Terwijl de assets nog steeds worden verzameld, begint de browser stuk voor stuk html, stylesheets, fonts, afbeeldingen en scripts samen te stellen.

6. Geef een eerste versie weer

Wanneer de browser het zichtbare deel van de pagina heeft ontvangen en samengesteld, maakt het de first content full paint en geeft het weer. Omdat de pagina nog niet is geladen, kan de gebruiker nog geen interactie met de pagina hebben.

7. Maak het klaar voor interactie

Er moet meer van de pagina worden samengesteld voordat de gebruiker kan gaan communiceren, klikken of scrollen.

8. Pagina is klaar voor gebruik

Wanneer alle assets zijn geladen en alle scripts hun installatietaken hebben voltooid, is de pagina eindelijk klaar voor gebruik.

 

Dus wat betekent dit in het kader van web performance?

 

Server responsetijden

De responstijd van HTML, of de tijd tot de eerste byte (TTFB), heeft de grootste impact op de gebruikerservaring. Als dit eerste verzoek traag is, worden alle andere stappen bij het bekijken van de webpagina vertraagd.

Er zijn twee opties om de reactietijd uit te dagen. Je kunt ervoor zorgen dat de server dezelfde hoeveelheid werk sneller doet, of je kunt de hoeveelheid werk die moet worden gedaan verminderen.

De werklast kan worden verminderd door de complexiteit te verminderen, minder database aanvragen te doen en de kwaliteit van de code te verhogen. De serversnelheid kan worden verhoogd door over te schakelen op snellere hosting of door de bestaande hostingstack te optimaliseren. Het toevoegen van meer servers maakt het niet sneller.

Netwerk transfertijden

De tijd die nodig is om iets van A naar B te vervoeren, hangt af van twee dingen. De hoeveelheid gegevens en de afstand die moet worden afgelegd.

Kijk naar internet-pakketten als naar een PostNL-bestelwagen. Als de pakketten meer zijn dan wat in de vrachtwagen past, moet deze voor de resterende pakketten nog een rondreis maken.

Pakketten zullen snel aankomen als de bezorging vlakbij is, en de bezorging zal nog sneller zijn als alles in één keer kan worden vervoerd. Transport zal veel langer duren als de levering in een naburige stad is, en zelfs langer als het meerdere keren moet rijden.

Dus om een webpagina te versnellen, moet je ervoor zorgen dat je zo min mogelijk pakketten maakt en dat de afstand van de gemiddelde websitebezoeker tot de server zo kort mogelijk is.

Browser rendertijd

De tijd die nodig is om een pagina weer te geven, wordt bepaald door de kwaliteit en complexiteit van de code die moet worden geïnterpreteerd, het aantal elementen en hun grootte, en de snelheid van het apparaat waarop de browser draait.

De snelheid van apparaten varieert erg en dat kunnen we niet veranderen. Om de rendertijd sneller te maken, moet de werklast voor de browser worden verlaagd. Hoe minder werk de browser hoeft te doen, hoe sneller deze wordt weergegeven.

Een webpagina wordt snel wanneer de HTML, CSS en scripts bug-, fout- en waarschuwingsvrij zijn. Foutloze code wordt ook mooier en consistenter op verschillende apparaten.

Om de werklast verder te verminderen, moeten ongebruikte assets worden verwijderd en moet de omvang van andere worden verminderd.

 

Ervaar het verschil

Probeer verschillende laadtijden

500 ms

9 seconden

Pingdom webpage

Laad volledig in 250ms

Pingdom webpage

Laad voltooid in seconden

Filosofie

Less is more voor web performance

De eenvoudigste manier om een snel presterende website te maken, is door minder werk te verzetten. Dit geldt voor responstijd, overdrachtstijd en rendertijd. Het zorgt ervoor dat de server sneller werkt, het netwerk zet de webpagina sneller over en de client geeft de pagina sneller weer.

De beloning voor het implementeren van het filosofische concept van less is more, naast het sneller maken, is dat het gemakkelijker te onderhouden, minder vatbaar voor fouten en veiliger is. Het zal je site waarschijnlijk zo snel maken dat je geen extra tijd hoeft te besteden aan het optimaliseren ervan. Het zal standaard snel zijn.

Op zoek naar

  • Snelle responstijden
  • Snelle laadtijden
  • Schaalbare websites
  • Eenvoudig control panel
  • Snelle database interacties

Dan ben je hier aan het juiste adres!

Meld je aan voor een gratis testaccount en ervaar het zelf

Meld je aan!

Uitgelegd

Schaalbaarheid versus performance

"The server response time for the HTML itself is often the biggest problem, and the hardest one to solve."

– Patrick Meenan, Web Performance Engineer at Cloudflare, Former web performance engineer at Google, Creator of webpagetest.org

Benieuwd hoe snel de reactietijd van de server op Servebolt-hosting is?

Dat is gemakkelijk! Maak een gratis testaccount aan en laat ons je site naar ons platform migreren zodat je kunt testen. En geniet van onze prestaties.

Schrijf je vandaag nog in!

Begin test bij ons

De concepten van schaalbaarheid en performance kunnen eenvoudig worden uitgelegd met auto’s als voorbeeld. Een auto om zo snel mogelijk van A naar B te komen. Als je een Toyota Yaris bezit, kom je niet sneller van A naar B als je er nog een koopt. Nog een Toyota kopen – dat noemen we schaalbaarheid. Het maakt het alleen mogelijk om met meer mensen van A naar B te komen. Maar als je sneller van A naar B wilt gaan, moet je de Toyota verkopen en deze vervangen door een Tesla – dat zijn prestaties.

Scalability

Scaling is the term we use about a websites ability to handle more visitors at the same time, also referred to as concurrency. This means that there is a difference between serving ten visitors at the same time, than serving hundred or thousand.

The scalability of a website is determined by how much resources it uses, and the amount of resources that are available.

An interesting thing to note, is that the ability to scale usually comes at the cost of performance. This means that you can expect the speed of your website to decrease, if you want to increase the number of visitors you are able to serve at the same time.

Performance

Performance is the term we use to explain the time it takes for a webpage to display. The speed of a website is the time it takes from you click on a link, until the page displays and is ready for you to navigate and use.

There are a whole lot of technical metrics that relate that are used to describe and measure speed, such as time to first byte (TTFB), First Paint, First Meaningful Paint, Time to Interactive and tens, if not hundreds more.

 

Wat is snel en wat is langzaam?

Je lijst met 1000 dingen maken om te repareren

Moderne hardware verbruikt minder stroom, is milieuvriendelijker en presteert sneller.

De CPU, met zijn klokfrequentie, is essentieel voor prestaties. Wanneer de server een webpagina levert, kan deze slechts gebruik maken van een enkele CPU-kern. Daarom is de snelheid van de CPU-kern belangrijk. Als je meerdere cores hebt dan worden deze gebruikt om verschillende paginaweergaven weer te geven en aanvullende server-services uit te voeren.

De snelheid van databases is een van de meest voorkomende redenen om geen snelle realtime performance te zien. De webpagina kan niet eerder aan de bezoeker worden geleverd totdat de databasequery’s zijn verwerkt. Daarom is de snelheid waarmee dit gebeurt essentieel. De snelheid van databases kan worden gemeten in databasequery’s per seconde.

PHP is meestal verantwoordelijk voor het grootste deel van de tijd van een webpagina tot de eerste byte. Nieuwere versies vanaf PHP 7 zijn veel sneller dan zijn voorgangers, dus upgraden naar nieuwere versies is een zeer effectieve manier om een website sneller te maken.

Standaard hostingstacks zijn beschikbaar in besturingssystemen en zijn over het algemeen geconfigureerd voor algemene workloads. Een geoptimaliseerde hostingstack verwerkt dezelfde hoeveelheid sneller en beter. Dit is moeilijk zelf te doen en daarom is het goed naar providers te kijken die managed hosting leveren.

Opstellingen met één computer zijn over het algemeen sneller dan met meerdere computers of clusteropstellingen. Bovendien zijn de kosten voor het onderhouden, updaten en bedienen van een multi-machine hostingopstelling hoog. Clusteropstellingen maken de implementatie en het werk voor ontwikkelaars ook moeilijker.

Virtualisatie is een techniek die wordt gebruikt om één computer op te splitsen in meerdere kleinere, virtuele computers. Dit proces heeft een overhead vergeleken met het draaien van een systeem zonder virtualisatie op een “bare metal”-server.

Het gebruik van zo min mogelijk plugins is een effectieve manier om een snelle website te onderhouden. Plugins zijn gemaakt van PHP-code en voegen functionaliteit en databasequery’s toe. Wanneer de hoeveelheid plugins toeneemt, neemt de snelheid van je website af. Meer plugins betekent ook meer bugs en mogelijk meer beveiligingslekken.

Slecht geprogrammeerde thema’s zijn de meest voorkomende reden voor trage web performance. De meest flexibele thema’s met de meeste configuraties en opties zijn vaak ook de langzaamste.

Externe netwerk verzoeken zijn altijd traag in vergelijking met de lokale verzoeken tot het bestandssysteem. Zorg ervoor dat openbare webpagina’s in realtime geen externe bronnen opvragen voordat de webpagina aan een bezoeker wordt bezorgd. Externe verzoeken zijn het best asynchroon gedaan met behulp van Javascript.

Webservers registreren fouten om een reden in een error log. Een webserver besteedt aan het afhandelen van fouten, waarschuwingen en mededelingen extra resources. Bugs worden geregistreerd omdat ze moeten worden verholpen. Een schoon logbestand met weinig fouten maakt het ook sneller om echte problemen op te lossen wanneer ze zich voordoen.

Ze lijken misschien onbelangrijk, maar verzoeken om assets die niet bestaan nemen veel resources in beslag. 404-verzoeken kunnen niet in de cache worden opgeslagen. Dit betekent dat de server elke keer dat er een 404 wordt aangevraagd code moet uitvoeren in plaats van een item rechtstreeks uit de cache te leveren. Deze resources worden beter gebruikt voor schaalvergroting.

Het laden van extra grote afbeeldingen duurt lang, vooral voor bezoekers op mobiele apparaten en langzame netwerken. Afbeeldingen moeten de juiste grootte hebben en worden gecomprimeerd, waardoor de algehele gebruikerservaring wordt verbeterd.

Houd de grootte van je website en het aantal items tot een minimum beperkt. Ze moeten allemaal van de server naar de bezoeker worden getransporteerd, en hoe minder netwerkrondreizen (RTT) nodig zijn, des te sneller de pagina voor de bezoeker wordt geladen.

De tijd die nodig is om iets van een server te downloaden, neemt exponentieel toe met de afstand tot de server. Host je website op hetzelfde continent als de meerderheid van je bezoekers.

Content Delivery Networks kunnen de netwerkafstand voor bezoekers van je website verkorten en daardoor sneller laden.

JavaScript is verantwoordelijk voor een groot deel van wat webpagina’s traag maakt op de apparaten van de bezoeker. Het verminderen van de hoeveelheid JavaScript resulteert altijd in sneller laden en een snellere tijd tot interactief.

Veel scripts doen externe verzoeken. Dit voegt extra DNS-lookups en verbindingen met andere servers toe. De verbinding met je eigen server is al open en klaar voor gebruik en zal de scripts veel sneller bedienen dan de browser te dwingen om externe verzoeken in te doen.

Bibliotheken zoals jQuery zijn traag van opzet en voegen veel extra gewicht toe aan een webpagina. Het schrijven van standaard JavaScript zal je website aanzienlijk versnellen.

Elke omleiding voegt een extra netwerkretour toe voor de bezoeker. Ook al is een omleiding triviaal, zoals omleiden van /pad-naar-mijn-pagina naar /pad-naar-mijn-pagina/ – die retour kan worden opgeslagen door rechtstreeks naar de laatste te linken.

Het laden van code die niet wordt gebruikt, kost tijd en resources. Door de hoeveelheid bloat tot een minimum te beperken, verbetert je de prestaties van je webpagina.

#perffirst

Performance als basis

De workflow voor het maken van snellere websites

 

De basis van web performance problemen

Computers zijn supersnel en kunnen miljoenen bewerkingen per seconde uitvoeren. De snelheid van computers is niet wat de web performance tegenhoudt, maar de mensen die websites maken, is het grootste probleem.

De Performance als basis workflow

De Performance als basis is een workflow die is ontworpen om het belangrijkste probleem met web performance aan te pakken. De workflow biedt iedereen die met een website werkt een set tools om de juiste beslissingen te nemen, ten gunste van web performance, tijdens het bouwen van een website.

 

FAQ

Over web performance en website snelheid

De hoeveelheid geheugen heeft geen invloed op de snelheid van je website.

Als je website onvoeldoende RAM heeft, worden ‘out of memory’-fouten geregistreerd in de error logs van de server en krijgt de bezoeker van een webpagina die RAM uitgeput krijgt een 500-foutmelding of het witte scherm des doods. Meer RAM toevoegen heeft geen invloed op hoe snel je webpagina wordt geladen.

Het aantal cores heeft geen invloed op de snelheid van je website, zolang er beschikbare cores zijn om verzoeken af te handelen. Als het aantal cores het knelpunt in de prestaties is, zult je ervaren dat je website tijdelijk langzamer wordt.

Ja. De CPU Ghz bepaalt hoeveel berekeningen de processor per seconde kan uitvoeren. Een CPU die meer berekeningen per seconde kan uitvoeren, levert je website sneller op.

Het is vermeldenswaard dat dit niet noodzakelijkerwijs het geval is op verschillende computers, omdat de snelheid van een computer wordt bepaald door hoe snel de computer werkt als een geheel systeem (moederbord, geheugen, processor en opslag).

Nee, integendeel. Als je je website opsplitst om over meerdere servers dan mag je verwachten dat je website langzamer werkt. Meer servers kunnen het schaalvermogen van je site wel vergroten, maar het zal het niet sneller maken.

Nee. De enige uitzondering is als de bandbreedte van de netwerkverbinding het knelpunt is. Een normale webpagina heeft niet meer dan 10 Mbit nodig om op maximale snelheid via het netwerk te worden geleverd.