Wat is snelheid optimalisatie?
Snelheid optimalisatie betekent het verbeteren 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 de kwaliteit.
Onze websites en webshops krijgen allemaal zo’n snelheid optimalisatie, want een goede snelheid draagt bij aan de zoekmachine optimalisatie (SEO) en de conversie.
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.
Hoe wij helpen
De snelheid van een website is afhankelijk van allerlei 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.
KennismakingOnze werkwijze
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).
Stap 1
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 niet efficiënt, omdat u dan langer moet wachten totdat de gehele pagina is geladen.
Stap 2
Bestanden bundelen
Het bundelen van bestanden tot één bestand, zorgt ervoor dat uw browser een enkel verzoek hoeft te versturen i.p.v. 15 verschillende verzoeken waarbij voor elk op antwoord terug gewacht dient te worden. Deze optimalisatie passen wij toe op CSS en JavaScript.
Stap 3
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 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 bespaart op de bestandsgrootte en het gewicht van de webpagina.
Stap 4
Globale bestanden alvast meesturen
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 naar 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 laden van een webpagina sneller verloopt.
Deze methode is alleen mogelijk wanneer een website gebruik maakt van HTTPS en een SSL-certificaat heeft.
Stap 5
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.
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.
Waardoor ontstaat laadtijd?
Server zoeken verzoek sturen
Als u het adres (URL) 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 het 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 (niet letterlijk met een telefoon, dit is puur ter vergelijking).
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 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 download 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.
Voor elk bestand wordt een apart verzoek verstuurd naar de server. Dit zorgt voor een enkel bestand geen grote impact, 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.
Uw 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..