Wat is snelheid optimalisatie?

Snelheid optimalisatie betekent het minimaliseren van de laadtijd van webpagina's. Dit wordt gerealiseerd door minder bestanden te laden en deze in een zo klein mogelijk (bestands-)formaat te leveren, terwijl dat niet ten koste gaat van kwaliteit.

Onze websites en webshops krijgen allemaal een snelheid optimalisatie, want een goede snelheid draagt bij aan de zoekmachine optimalisatie (SEO) en de conversie.

Snelheid optimalisatie

Naast de snelheid is ook de gebruikerservaring belangrijk voor SEO. Google's nieuwe ranking factor Core Web Vitals gaat over snelheid, interactiviteit en visuele stabiliteit. Dat zijn dus nog twee belangrijke punten extra die horen bij de conversie optimalisatie.

Waardoor ontstaat laadtijd?

Server zoeken en verzoek sturen

Als u het adres van een website invult of een link aanklikt, gaat uw browser eerst achterhalen naar welke server het een verzoek moet sturen om een webpagina terug te kunnen krijgen. Dit proces hoort bij de DNS (domain name system). Eigenlijk kunt u het zien als het telefoonboek van het internet. U kunt niet zomaar Jan invoeren in uw telefoon; uw telefoon heeft een telefoonnummer nodig. Echter heeft u Jan wel gekoppeld aan een telefoonnummer, omdat hij in uw contactenlijst staat.

Zo werkt het ook bij URL's (adressen van websites) – een voor u herkenbare naam wordt omgezet naar een adres dat uw browser begrijpt. Uw browser kijkt dus in het telefoonboek en wanneer het het nummer van de website heeft gevonden, belt het de website met de vraag of het een bepaalde webpagina wilt terugsturen.

Dit klinkt als een langdurig proces, maar dit duurt echter tussen de 20 en 120 milliseconden (0,02 - 0,12 seconden).

Wachten op antwoord

Nadat de server van de website uw verzoek heeft ontvangen, gaat de server een antwoord terug samenstellen. Het wachten op antwoord van een server kost gemiddeld tussen 200 en 500 milliseconden (0,2 - 0,5 seconden). Dit is afhankelijk van hoe druk de server het zelf heeft, hoe krachtig de server is, hoe de server staat ingesteld en of de server caching gebruikt.

Wij gebruiken voor onze klanten de meest geavanceerde caching tool beschikbaar voor WordPress, namelijk: LiteSpeed Cache.

Browser krijgt een pakket, waar nog niet alles in zit

De server stuurt een HTML-bestand terug aan uw browser. In dat bestand staat de inhoud van de pagina met daarbij verwijzingen naar alle bestanden die de browser nodig heeft om de kale inhoud van de pagina vorm te geven en te voorzien van extra functies.

Browser downloadt de bijbehorende onderdelen

CSS-bestanden zijn verantwoordelijk voor de vormgeving van websites/webshops. JavaScript-bestanden bieden extra functionaliteit, zoals een uitklapbaar menu op mobiele apparaten. Daarnaast zijn er afbeeldingen (ook bestanden) die door uw browser gedownload dienen te worden om deze te kunnen tonen. Indien de bestandsgrootte van afbeeldingen niet zijn geoptimaliseerd, stijgt de laadtijd van een pagina al snel. Als een webpagina veel bestanden wilt laden, dan kost dat extra tijd voor de browser om deze te downloaden.

Normaal gesproken wordt voor elk bestand een apart verzoek verstuurd naar de server. Voor een enkel bestand maakt dat niet uit, maar zodra er 50 aparte verzoeken worden verstuurd naar een server en op antwoord gewacht wordt, kost dit ook allemaal extra tijd.

Browser gaat voor u tekenen

Uw browser heeft nu zowel de inhoud van de pagina als alle bestanden die gaan bepalen hoe de pagina eruit komt te zien.

De browser gebruikt de CSS-bestanden om kale inhoud vanuit het HTML-bestand op te maken: de pagina wordt getekend. Een CSS-bestand bestaat uit zoekopdrachten naar elementen zoals alinea's, koppen, hyperlinks en knoppen. Bij zo'n zoekopdracht staat beschreven welke stijlen toegepast moeten worden op de elementen die gevonden zijn bij zo'n zoekopdracht, bijvoorbeeld:

Zoek naar alle hyperlinks, onderstreep deze, maak ze donkerblauw.

Als de bezoeker zijn/haar muis hierop plaatst, haal dan de onderstreping tijdelijk weg.

Dat staat natuurlijk niet letterlijk zo in het Nederlands, want dat is niet hoe dat werkt.

Als een CSS-bestand veel zoekopdrachten bevat met veel aanpassingen op veel elementen tegelijk, kost dat de browser extra tijd om de webpagina voor u te tekenen. CSS-bestanden zelf creëren vaak niet zo'n grote impact op de laadtijd van webpagina's. Het is wanneer JavaScript-bestanden er zich mee gaan bemoeien dat de browser achteraf, na de handelingen en veranderingen aan het document die verricht zijn door de JavaScript-bestanden, de hele tekening overnieuw moet doen omdat de aanpassingen effect hebben op de uitkomst van de tekening van de pagina door de regels die opgesteld zijn in het CSS-bestand..

De browser weet vervolgens niet exact welke aanpassingen waar invloed op hebben, en dat door de browser uit laten zoeken weer is gevoelig voor fouten en kost misschien wel meer tijd dan simpelweg de hele tekening opnieuw te doen.. bedankt JavaScript..

Wat doen wij voor snelheid optimalisatie?

De snelheid van een website is afhankelijk van talloze factoren, maar niet alle factoren zijn de moeite waard bij de snelheid optimalisatie voor websites en webshops. Wij leggen u graag uit wat wij doen bij de snelheid optimalisatie van uw website/webshop.

Afbeeldingen optimaliseren

Wij zorgen ervoor dat uw website afbeeldingen in een moderne bestandsindeling levert en dat het formaat van de afbeelding niet groter is dan nodig. Hierdoor worden pagina's minder zwaar en zijn daardoor snel te laden, ook wanneer bezoekers beschikken over een beperkte downloadsnelheid, zoals bij het gebruik van 3G, 4G, of 5G (mobiel netwerk).

Lazy-loading voor afbeeldingen

Lazy-loading voor afbeeldingen betekent dat een afbeelding pas gedownload wordt als deze in beeld komt (met speling).

Normaal gesproken worden namelijk alle afbeeldingen gedownload die op een pagina staan, dus ook afbeeldingen die u nog helemaal niet ziet. Dat is natuurlijk niet efficiënt, omdat u dan langer moet wachten op een pagina waarvan u nog helemaal niet weet of u er iets aan heeft.

Bestanden bundelen

Het bundelen van bestanden tot één bestand, zorgt ervoor dat uw browser een enkel verzoek hoeft te versturen in plaats van 15 verschillende verzoeken waarbij voor elk op antwoord terug gewacht dient te worden. Deze optimalisatie passen wij toe op CSS- en JavaScript-bestanden.

Bestanden verkleinen

Bij het schrijven van CSS en JavaScript-bestanden maken ontwikkelaars gebruik van spaties, enters, aanhalingstekens en andere tekens. Hiermee worden de bestanden veel leesbaarder voor henzelf, maar dat maakt voor de browser helemaal niets uit.

Niet alle tekens/karakters zijn noodzakelijk voor de browser om te begrijpen wat er in een bestand wordt bedoeld. Door dat soort tekens weg te laten bij het versturen van het bestand naar uw browser, wordt er opnieuw bespaart op de bestandsgrootte en dus het gewicht van de webpagina.

Globale bestanden alvast meenemen in het pakket

De CSS- en JavaScript bestanden komen op elke pagina voor en dit zijn meestal voor elke pagina dezelfden. Wij weten daardoor al naar welke bestanden wij gaan verwijzen in het eerste pakket (het HTML-bestand), dus sturen wij deze bestanden alvast mee.

Voor die bestanden hoeft dan geen apart verzoek verstuurd te worden aan de server, maar het zorgt er wel voor dat het eerste pakketje (het HTML-bestand) wat zwaarder wordt. Zolang hetgeen niet te groot is, kan het geen kwaad en zorgt het er alleen maar voor dat het hele proces (het laden van een webpagina) sneller verloopt.

Deze methode is alleen mogelijk wanneer een website gebruik maakt van HTTPS en een geldige SSL-certificaat heeft.

Hoe testen wij de snelheid?

Wij gebruiken tools die gespecialiseerd zijn voor het testen van de snelheid van websites en webshops op zowel desktopapparaten en mobiele apparaten. Hiervoor gebruiken wij met name de volgende tools voor: PageSpeed Insights en GTmetrix.

PageSpeed Insights

PageSpeed Insights bied gratis de mogelijkheid om naast desktop ook de website op mobiele apparaten te testen, echter kunnen de resultaten van PageSpeed Insights fluctueren. De tool test vanuit de Verenigde Staten, dus de gemeten laadtijden zullen over het algemeen lager zijn dan als deze vanuit Nederland getest zouden worden. Dat heeft te maken met de tijd dat het kost om vanuit Nederland gegevens te sturen naar de Verenigde Staten. In het Engels wordt dit latency genoemd. Het Nederlandse woord latentie wordt bijna nooit gebruikt, omdat in het vakgebied van datacommunicatie eerder Engelse termen worden gebruikt i.t.t. Nederlandse.

PageSpeed Insights is een tool ontwikkeld door Google. Sinds April 2020 heeft Google een nieuw soort kwaliteit signalen opgesteld waar websites in de toekomst op beoordeeld gaan worden: Core Web Vitals. De planning is dat Google deze kwaliteit signalen mee gaat nemen in de ranking (positie in zoekresultaten) van websites en webshops in hun zoekmachine. Het is dus van belang dat wij deze tool gebruiken om de websites en webshops van onze klanten hiervoor te optimaliseren, zodat zij in de toekomst hier niet mee door de mand vallen. In tegendeel - onze klanten kunnen hiermee een stap voor zijn op hun concurrenten.

GTmetrix

GTmetrix bied de mogelijkheid om gratis de snelheid van websites en webshops te testen, maar waarbij een keuze gemaakt kan worden tussen locaties waarvandaan zij uw website/webshop gaan testen. Daarbij bieden ze ook nog veel meer opties aan.

Het nadeel van GTmetrix is dat het testen op een mobiele apparaat niet gratis is en dat u een account nodig heeft voor extra opties. Het maken van een account is gratis en hierbij heeft u de mogelijkheid de snelheid te testen vanuit locaties dichter bij Nederland.

Wij merken dat bij GTmetrix de resultaten van de snelheid minder schommelen. Daarnaast geeft GTmetrix een duidelijk overzicht met veel verschillende punten waarop de snelheid en efficiëntie van een website/webshop verbeterd kan worden. GTmetrix geeft u ook een beeld van hoe het proces van het laden van uw website/webshop verloopt in de vorm van momentopnames met filmstrips en zelfs door middel van een video. GTmetrix houd ook voor u een geschiedenis bij van de tests die u heeft gedaan, zodat u nieuwe tests kunt vergelijken met tests die u eerder heeft gedaan.