Waarom laadt je website langzaam en wat kun je laten verbeteren?

01 / VAN VRAAG NAAR PRAKTIJK

Waar wachten je bezoekers eigenlijk op?

Je opent je website op kantoor en alles lijkt vlot. Een klant zit onderweg op een telefoon en ziet eerst een leeg vlak. Dat verschil maakt een klacht niet minder echt. Een eerder bezochte pagina kan bestanden uit de browsercache gebruiken. Het toestel en de verbinding van je klant kunnen bovendien anders zijn dan die van jou.

Beschrijf het probleem voordat je een oplossing bestelt. Blijft het scherm leeg, verschijnt de hoofdfoto laat of reageert het menu niet meteen? Noteer het pagina-adres, apparaat, browser en moment. Geef ook aan of het bij het eerste bezoek gebeurt of iedere keer. Met “hij is traag” kan een bouwer minder gericht onderzoeken dan met een herhaalbare handeling.

Kijk naar de pagina’s die voor je bedrijf tellen. Voor een installateur kan dat de dienstpagina met de aanvraagknop zijn. Voor een winkel gaat het ook om een productoverzicht en het winkelmandje. Alleen de homepage meten kan een probleem elders missen. Maak daarom een kleine selectie met verschillende soorten inhoud en functies.

Een geautomatiseerde test helpt bij het zoeken naar knelpunten. Een meting in een nagebootste situatie is echter iets anders dan gegevens van echte bezoekers. Een nieuwe of weinig bezochte website heeft mogelijk nog onvoldoende bezoekersdata. Dat betekent niet automatisch dat alles goed of slecht gaat. Vraag welke gegevens het rapport gebruikt en wat de beperkingen zijn.

02 / VAN VRAAG NAAR PRAKTIJK

Afbeeldingen, scripts of hosting: wat pak je aan?

Een zware foto is een logische eerste verdachte als de tekst al staat en het grote beeld nog ontbreekt. Volgens de uitleg van web.dev over afbeeldingsprestaties kunnen afbeeldingen een belangrijk deel van het te downloaden materiaal vormen. Passende afmetingen en efficiënte bestanden helpen onnodig dataverkeer te verminderen. Laat daarbij de zichtbare kwaliteit op verschillende schermen controleren.

Bedenk een fictieve bloemist met zes originele camerafoto’s in een portfolio. Iedere foto is veel groter dan het vlak waarin ze verschijnt. In een verbeterde uitvoering ontvangt een telefoon een passend formaat en worden beelden verder naar beneden pas geladen wanneer ze nodig zijn. Dit is een ontwerpvoorbeeld, geen gemeten klantresultaat. De winst moet bij de eigen website worden vastgesteld.

De belangrijkste foto bovenaan moet juist op tijd beschikbaar zijn. Blind alle afbeeldingen uitgesteld laden kan de eerste indruk verslechteren. Laat de bouwer dus onderscheid maken tussen direct zichtbare inhoud en materiaal verderop. Bij video kan een goede posterafbeelding alvast duidelijk maken wat er komt, terwijl de zwaardere inhoud later beschikbaar wordt.

Een pagina kan ook al zichtbaar zijn maar nog moeizaam reageren. Denk aan een menuknop, filter of formulier. Laat onderzoeken welk werk de browser uitvoert. Losse widgets, externe hulpmiddelen en uitgebreide animaties kunnen extra werk veroorzaken. Verwijder functies niet zomaar: bepaal eerst of ze gebruikt worden en welke afhankelijkheden er zijn.

Hosting komt in beeld wanneer de eerste reactie van de server lang duurt. Bij een dynamische website kunnen onder meer de inrichting en het opbouwen van een pagina meespelen. Een duurder pakket is zonder onderzoek geen zekere oplossing. Bespreek bij hosting en domeinnaam welk probleem de verandering moet oplossen en hoe dat wordt gecontroleerd.

Bij een webshop vraagt caching extra aandacht. Het winkelmandje en accountinformatie mogen niet als algemene inhoud aan andere bezoekers worden getoond. Laat daarom iemand met kennis van de gebruikte winkelsoftware bepalen wat wel en niet kan worden opgeslagen. Een snelle productpagina is weinig waard als de bestelroute daarna fouten bevat.

03 / VAN VRAAG NAAR PRAKTIJK

Zo beoordeel je een verbetering zonder mooie praatjes.

Leg een beginmeting vast en herhaal de test na de wijziging op dezelfde pagina, met dezelfde instellingen. Doe meerdere metingen; één uitschieter kan een vertekend beeld geven. Noteer welke versie is getest en of de test met een lege cache is uitgevoerd. Vergelijk een desktopmeting niet rechtstreeks met een mobiele meting alsof alleen de site is veranderd.

Vraag om een korte toelichting per wijziging: wat was de oorzaak, wat is aangepast en welk effect is gezien? Een rapport met alleen een groen cijfer laat niet zien of een probleem voor jouw bezoekers is opgelost. Een nuttige oplevering bevat ook resterende aandachtspunten en onderdelen die bewust behouden zijn, zoals een belangrijke productvideo.

Test daarna de echte taken opnieuw. Open het menu, vergroot een productfoto, vul een formulier in en doorloop waar nodig een testbestelling. Controleer mobiel én desktop. Gebruik daarvoor ook de controlelijst voor een responsive website. Snelheid en bruikbaarheid horen samen beoordeeld te worden.

Laat grotere aanpassingen eerst in een testomgeving uitvoeren. Maak vooraf een herstelafspraak, zeker bij wijzigingen aan plug-ins of de winkelsoftware. In ons artikel over back-ups en hersteltesten lees je wat je daarover kunt vastleggen. Spreek af wie controleert nadat de wijziging live staat.

Nieuwe inhoud kan een eerdere verbetering weer tenietdoen. Geef degene die de site bijhoudt daarom praktische grenzen mee voor foto’s en video’s. Bij websiteonderhoud kunnen we bespreken welke controles nodig zijn. Is de bestaande opbouw zelf het probleem, dan kan gericht aanpassen van de website een logischer opdracht zijn dan telkens losse reparaties.