Ik wil mijn website sneller maken, waar begin ik?

Je website heeft interessante tekst, leuke foto's en misschien een Youtube filmpje en een like button. Maar heeft al dat moois niet een negatief effect op de laad snelheid?

De eerste vraag is dus moet ik mijn webpagina wel sneller maken? Je kan je pagina openen op je computer of smartphone en kijken hoe lang het duurt voordat de pagina geladen is.

Is snelheid belangrijk?

Er is een psychologische reden waarom een website snel moet laden: Hoe langzamer de pagina laad, hoe eerder de bezoeker afhaakt. Haakt de bezoeker af na je eerste pagina, word dit in je statistieken weergegeven als de bounce rate.

Veel mensen onderschatten het positieve effect van een snellere webpagina op smartphones. Google rapporteerde in 2017 al dat als je je pagina van 3 naar 1 seconden versneld, je bounce rate maar liefst 32% lager wordt! Kan je terug van 5 naar 1 seconde is dat zelfs 90%!

Duurt je website een eeuwigheid om te laden?

Dan is er goed nieuws en slecht nieuws voor je. Het goede nieuws is dat je niet alleen bent met een langzame website.

Maar liefst 60% van alle webpagina's is groter is dan 1,5 MB. 36% is over 2 MB en 12% over 4 MB. De tijd om 1,5 MB over een 3G connectie te downloaden is 7 seconden. En het slechte nieuws is nu eigenlijk: Dit is echt slecht.

laadtijd laad perceptie Verhoging Bounce
0,5s tot 1s vrijwel direct 0%
1s tot 3s onder verwachting 32%
3s tot 6s ongeduldig 90%
6s tot 12s ondraaglijk 123%

Het mag duidelijk zijn dat niemand zit te wachten op langer wachten. In de ideale wereld laad je pagina altijd, en overal onder de 1,5 seconde.

Hoe versnel web pagina's?

Eerst zal je moeten weten wat veroorzaakt nu een hoge laadtijd.

Je kan 4 categorieën onderscheiden

  • pagina grootte
  • beschikbare bandbreedte
  • pagina complexiteit
  • rekenkracht van server en client

Er moet vaak een (groot) aantal dingen gebeuren tijdens het openen van een webpagina. Daarom is het belangrijk te erkennen dat je wellicht beter je pagina kunt simplificeren.

Hou het simpel, maar niet te simpel. Albert wist het al en probeerde daar waar het kon, te simplificeren.

Het simpelweg weghalen van componenten uit je pagina is daarom ook de meestgemakkelijke en effectieve optie tegen te lange wachttijden. Uiteraard is dit niet altijd wenselijk of mogelijk.

Is mijn webpagina te groot?

inzicht in je webpagina

De gemiddelde samenstelling van een webpagina Webpagina onderdelen en hun gemiddelden 2020.

Deel de grootste deler.

Na componenten verwijderen is het wellicht goed te kijken naar een 2e optie die je veel snelheid winst kan opleveren: afbeeldingen.

We kunnen afbeeldingen op 2 manieren ongevoeliger maken voor de laadtijd van een pagina.

  • Afbeeldingen op een gecomprimeerde manier opslaan.
  • Het aanpassen van het moment van laden
  • Bandbreedte en 4g vs 5g netwerken.

    De Nederlandse 4g netwerken bedekken inmiddels 93% of meer. Met de komst van 5g word de snelheid voor mobiele apparaten nog eens flink versneld. De snelheid fluctueert binnen deze netwerken nogal en daarom is het toch verstandig je laadtijd laag te houden. Verder heb je natuurlijk verbindingen over Wifi die (soms flink wat roet in het eten gooien) om nog maar niet te spreken van bezoekers van buiten Nederland.

    Afbeeldingen opslaan.

    De afmeting van een afbeelding

    De meeste mensen weten wel dat camera's foto's opslaan op een kwaliteit, die die veel te log is voor website gebruik. Je exporteerd daarom een afbeelding het liefst op het formaat gelijk aan zijn grootste web weergave. Meestal is de breedte van je webpagina onder de 1200 pixels. Is in het ontwerp van je pagina de helft van deze breedte beschikbaar voor een afbeelding, kies je afbeelding dan als met een breedte van 600 pixels.

    jpg exportinstellingen

    Behalve het terugbrengen van het formaat, kan je bij de jpg export kiezen voor een lagere "kwaliteit". Ik kies hier meestal voor 10% - 30%. De kwaliteit vind ik nog steeds acceptabel, terwijl de bestands grote enorm zakt.

    jpg voordelen en nadelen.

    • brede ondersteuning
    • geen transparantie

    Het opslaan van jpg afbeeldingen.

    Met de Iphone gemaakte foto's zijn gemiddeld 3 MB. Geëxporteerd naar 900 px breed formaat, met de jpg kwaliteit op 10% "valt" de grootte terug naar ongeveer 70 -110 KB.

    Exportinstelling voor web afbeeldingen in jpg. Kwaliteit op 10% en breedte op 900 pixels zorgt in dit geval de Albert foto (zie hierboven). De grote veranderd van 138 KB naar 25,6 KB.

    Webp vervangt Jpg?

    Kunnen de afbeeldingen nog meer ingepakt?

    Nieuwe ontwikkelingen zijn doorgang aan het vinden voor afbeeldingen. Een nieuwe standaard is gevonden met Webp. Het lijkt Jpg te gaan vervangen, daar het in alle technische opzichten superieur is en vrij te gebruiken. Ten opzichte van Jpg verklein je de afbeelding met nog zo`n 25%-60%. De foto van Albert (25,6 KB in Jpg formaat) is met Webp lossy 10% kwaliteit nu 11 KB geworden.

    Opslaan als dialoog in Photoshop De addon voor photoshop geeft een nieuwe "opslaan als Webp" optie.

    Webp opslaan en gebruiken.

    Je kan als photoshop gebruiker een addon installeren waarmee je Webp kan opslaan, en zijn er verschillende scripts, programma's en CDN's waar je terecht kan voor export naar webp. Het gebruik van Webp in websites word voor het einde van 2020 door vrijwel alle laatste versie van de webbrowsers ondersteunt. Nu is de dekking onder het Nederlands webbrowser gebruik 64%. Eind 2020 komt daar Apple bij met de nieuwe versie van Safari. De verwachting is dat we daarmee een landelijke dekking van ongeveer 90% krijgen.

    Ik wil Webp nu al gebruiken!

    Goed nieuws voor je want dat kan! (de pagina die je nu leest gebruikt ook Webp voor een aantal afbeeldingen.)

    Normaal gebruik je de volgende HTML code om een afbeelding te laten zien:

    <img src="afbeelding.jpg" alt="Alt Text!">

    Met Webp zal je er voorlopig nog voor moeten zorgen, dat oudere browsers nog steeds een jpg voorgeschoteld krijgen. We gebruiken dus 2 bestanden waarvan er 1 afhankelijk van de browser geladen wordt. We sluiten de bronnen daarvoor in het picture element:

    <picture>
    	<source srcset="afbeelding.webp" type="image/webp">
    	<source srcset="afbeelding.jpg" type="image/jpeg"> 
    	<img src="afbeelding.jpg" alt="Alt Text!">
    </picture>

    Eigenschappen van Webp

    • Nog kleinere bestanden.
    • Transparantie (kan dus ook png vervangen).
    • Animatie (kan dus ook animated-gif vervangen).
    • Nog te weinig browser ondersteuning.