Het verbeteren van de prestaties van je website is een belangrijk onderdeel van het creatieproces en doorlopend onderhoud. De richtlijnen in dit artikel kunnen je helpen om de ervaring van je bezoekers te verbeteren en zo aspecten zoals responsiviteit, vloeiendheid en laadtijd te verbeteren.
De laadtijd van je website begrijpen
De laadtijd van een website meet hoe snel je website volledig wordt geladen nadat een bezoeker toegang heeft gevraagd door op een link te klikken of de pagina-URL in te voeren. Veel factoren kunnen de laadtijd van een pagina beïnvloeden. Sommige zijn website-specifiek en andere zijn gerelateerd aan het apparaat en de internetverbinding van je bezoeker.
Websites die geoptimaliseerd en aangepast zijn, laden sneller dan websites die veel inhoud bevatten.
Het optimaliseren van je website kan zorgen voor een verbeterde laadtijd en een betere score in prestatietools zoals Google PageSpeed Insights.
Hoe Wix de laadtijd meet
Wix controleert en verzamelt gegevens voor verschillende statistieken. Dit zijn onder andere Google's Core Web Vitals en aanvullende vitals zoals FCP, TTFB en TTI. Je kunt
de snelheidsstatistieken van je website bekijken vanaf je dashboard.
Wix verzamelt deze prestatiegegevens automatisch in realtime op ons platform om de snelheid van je website te monitoren en te verbeteren. We raden aan de onderstaande best practices te volgen om een betere laadtijd voor je website te garanderen.
De laadvolgorde van elementen
Bij het bouwen of bijwerken van je website raden we aan
de laadvolgorde van elementen in gedachten te houden, omdat deze de prestaties van je website kunnen beïnvloeden.
Elementen die bijvoorbeeld interactief zijn of veel inhoud hebben (zoals video's en apps van derden) laden doorgaans langzamer dan statische of lichtere elementen, zoals tekst en knoppen.
Elementen op je website optimaliseren
Optimaliseer de homepage en elementen zoals tekst, animatie en afbeeldingen voor betere websiteprestaties. Klik op een optie hieronder om meer te lezen:
Inhoud die zich boven de vouw van je website bevindt, wordt vóór de rest van je pagina geladen. Door zinvolle, relevante en lichte inhoud aan dit gedeelte van je pagina toe te voegen, zorg je ervoor dat websitebezoekers nuttige informatie kunnen ontdekken terwijl de rest van de pagina wordt geladen.
We adviseren het gebruik van statische elementen zoals tekst, vormen en knoppen in je gedeelte boven de vouw. Aangezien deze elementen als eerste worden geladen, verbetert dit de laadtijd en prestaties van je website.
Wat is 'boven de vouw'?
Dit is het gedeelte van je website dat bezoekers als eerste zien, voordat ze naar beneden scrollen.
Afbeeldingen die op Wix-websites worden geüpload, worden automatisch verkleind voor optimalisatie. We raden aan om AVIF-afbeeldingen te gebruiken in plaats van PNG-afbeeldingen, tenzij je een transparante achtergrond nodig hebt. AVIF-afbeeldingen zijn beter geoptimaliseerd voor de laadtijd en prestaties van de website.
Meer lezen over afbeeldingen en de prestaties van je website.
Let op:
- Waar mogelijk converteert Wix afbeeldingen automatisch naar moderne indelingen zoals AVIF. Deze indeling verkleint de downloadgrootte met behoud van de beeldkwaliteit.
- Het is niet mogelijk om afbeeldingen van meer dan 25 MB naar je Wix-website te uploaden.
Video's zijn een geweldige manier om interactie en interesse van bezoekers aan te moedigen. We raden aan om de laadtijd in gedachten te houden bij het toevoegen van video's, aangezien deze over het algemeen een hoge resolutie hebben en langer nodig hebben om te laden dan statische elementen.
Apps van derden en iFrames
De inhoud die wordt weergegeven in apps van derden en iFrames (zoals ingebedde video's of feeds van sociale kanalen) wordt geleverd vanaf externe servers, in plaats van de Wix-servers.
Dit betekent dat Wix ze niet kan optimaliseren en daarom kunnen ze een overhead veroorzaken op de laadtijd van je website.
We raden aan om ze op secundaire pagina's te plaatsen, met een knop op de Homepage die bezoekers van je website ernaartoe leidt.
We raden aan niet meer dan 3 of 4 lettertypen op je website te gebruiken, omdat dit de uitstraling van je website kan verbeteren en een professionele uitstraling kan geven. Door de lettertypestijlen binnen dit nummerbereik te houden, kunnen de prestaties van de website ook worden verbeterd, omdat het de laadtijd verkort.
Verder raden we ook aan om waar mogelijk het gebruik van aangepaste lettertypen te vermijden. Systeemlettertypen worden sneller geladen, wat de prestaties van je website kan verbeteren.
Lees meer over lettertypen en je website.
Speciale effecten zoals animaties en slideshows kunnen je website tot leven brengen.
Ze laden echter meestal langzamer dan statische elementen. We raden aan om ze waar mogelijk onder de vouw van je website te houden.
Let op: Geanimeerde GIF's moeten volledig worden gedownload voordat ze kunnen worden afgespeeld. We raden aan om alle geanimeerde GIF's die je wilt gebruiken om te zetten in een video.
Lightboxen worden door het ontwerp later geladen dan andere elementen op je website. We raden daarom aan het gebruik van lightboxen op je website te beperken en lightboxen niet als de belangrijkste inhoud van je pagina te gebruiken.
De DOM-volgorde van je website is de volgorde waarin bezoekers die ondersteunende technologieën gebruiken (zoals schermlezers) door je elementen navigeren.
Om deze bezoekers een soepele ervaring te bieden en de juiste volgorde van elementen te garanderen, raden we aan om de visuele volgorde van elementen handmatig aan te passen aan de volgorde die wordt weergegeven in het Lagen-paneel.
Inhoud op je mobiele website optimaliseren
Over het algemeen zijn mobiele apparaten niet zo sterk of snel als desktopcomputers en hebben ze een tragere internetverbinding. Daarom kan het langer duren voordat je website is geladen wanneer je deze op een mobiel apparaat bekijkt.
Als je mobiele website langzaam laadt, raden we je aan de onderstaande richtlijnen te volgen om de prestaties te optimaliseren.
Klik op een optie hieronder om te lezen hoe je:
De mobiele Editor gebruiken
Gebruik de mobiele editor om je mobielvriendelijke website te optimaliseren. Je kunt elementen verbergen en aanpassen, en zelfs een welkomstscherm toevoegen.
Mobielvriendelijke websites zien er anders uit dan de desktopversie, dus we raden je aan deze aan je behoeften aan te passen.
Om toegang te krijgen tot de mobiele editor:
- Open de Wix Editor.
- Klik op de bovenste balk op het Mobiele Editor-pictogram
.
Onnodige elementen verbergt
Sommige elementen zijn mogelijk niet relevant voor je mobiele website en hebben een aanzienlijke invloed op de laadtijd.
We raden je aan rekening te houden met deze elementen. Vermijd overmatig gebruik van elementen zoals lightboxes en apps van derden en houdt alleen relevante en noodzakelijke inhoud op je mobiele website.
Om elementen van je mobiele website te verbergen:
- Klik op het element dat je wilt verbergen.
- Klik op het Element verbergen-pictogram
.
Tip: Verborgen elementen kunnen worden bekeken en opnieuw worden toegevoegd aan je mobiele website door op
Verborgen te klikken
links in de mobiele editor.
Afbeeldingen bijsnijdt of vergrooten/verkleint
Het kan even duren voordat grote afbeeldingen op je mobielvriendelijke website zijn geladen. We raden je aan je afbeelding bij te snijden of kleiner te maken om te voorkomen dat de laadtijd van je mobiele website wordt beïnvloed.
Om een afbeelding bij te snijden:
- Klik in de editor op de afbeelding.
- Klik op het Bijsnijden-pictogram
.
- Sleep de grepen om de afbeelding bij te snijden.
- Klik op Toepassen.
Tip: Afbeeldingen kunnen worden aangepast door op de afbeelding te klikken en vervolgens de grepen te verslepen om deze groter of kleiner te maken.
Items in galerijen en repeaters vermindert
Galerijen en repeaters zijn een goede manier om afbeeldingen en informatie op je website weer te geven, maar ze laden meestal langzamer dan andere elementen zoals tekst of basisvormen.
Als best practice raden we aan om het aantal items in een galerij of set repeaters op mobiel te verminderen. Geef alleen relevante en belangrijke items en media weer en verdeel ze gelijkmatig over je website.
Een welkomstscherm toevoegt
Welkomstschermen zijn een ideale manier om het merk van je mobiele website te introduceren. Dit is het eerste wat bezoekers zien, terwijl je website op de achtergrond volledig kan worden geladen.
Om een welkomstscherm toe te voegen:
- Klik links in de mobiele editor op Mobiele tools
.
- Klik op Welkomstscherm.
- Personaliseer je welkomstscherm met behulp van de beschikbare opties.
- Klik op Gereed.
Een ondersteund(e) systeem en browser gebruikt
Wix-websites worden ondersteund op verschillende mobiele besturingssystemen en browsers. Als bezoekers problemen hebben met het bekijken van je mobielvriendelijke website, moeten ze mogelijk hun systeem of browser bijwerken.
Code van derden
Code van derden kan belangrijke inzichten, tools en functies voor je website bieden. Het kan echter ook van invloed zijn op de laadtijd en prestaties van je website als het niet is geoptimaliseerd.
Veelgestelde vragen
Klik op een vraag hieronder om meer te lezen.
Waarom is de Largest Contentful Paint (LCP)-score van mijn website zo laag en hoe kan ik deze verbeteren?
LCP meet hoe snel de grootste zichtbare inhoud op je pagina wordt geladen.
Om de LCP te verbeteren:
- Optimaliseer afbeeldingen met lichtere indelingen zoals AVIF of WebP en comprimeer ze voordat je ze uploadt.
- Minimaliseer de grootte van inhoud boven de vouw, zoals banners of video's.
- Gebruik tekst of kleine afbeeldingen boven de vouw voor sneller laden.
- Schakel caching voor je pagina's in in het Wix-dashboard.
- Beperk aangepaste code of het aantal apps van derden die je pagina kunnen vertragen.
Hoe kan ik de totale blokkeringstijd (TBT) van mijn website verkorten?
TBT meet hoe lang de thread van je website wordt geblokkeerd door scripts.
Om TBT te verbeteren:
- Stel niet-essentiële JavaScript-code uit en verklein JavaScript-bestanden.
- Verwijder ongebruikte JavaScript- en CSS-bestanden van je website.
- Beperk het gebruik van animaties en overgangen, vooral animaties die worden geactiveerd bij het laden van de pagina.
- Gebruik de ingebouwde tools van Wix om de prestaties van je website in de editor te optimaliseren.
Wat moet ik doen als mijn website langzaam is ondanks het volgen van optimalisatietips?
Als je website nog steeds langzaam is na het optimaliseren van media en het verminderen van onnodige elementen:
- Controleer het Websitesnelheid-dashboard in je Wix-account voor specifieke inzichten.
- Controleer je internetverbinding en browserinstellingen op lokale problemen.
Kan ik afbeeldingen op mijn website in bulk optimaliseren?
Wix optimaliseert automatisch afbeeldingen tijdens het uploaden, maar als je extra comprimering nodig hebt:
- Gebruik externe tools om afbeeldingen te comprimeren voordat je ze naar Wix uploadt.
- Vervang grote afbeeldingen op je website door geoptimaliseerde versies.
- Gebruik voor pro galleries de optie 'Kwaliteit aanpassen' om alle galerijafbeeldingen in bulk te optimaliseren.
Hoe kan ik de laadsnelheid van mijn mobiele website verbeteren?
Mobiele websites laden vaak langzamer vanwege kleinere apparaten en langzamere internetverbindingen.
Om de laadsnelheid van mobiele apparaten te verbeteren:
- Verberg onnodige elementen op mobiel met behulp van de mobiele editor.
- Gebruik lichtere afbeeldingsindelingen zoals AVIF en comprimeer grote bestanden.
- Plaats geen video's of animaties boven de vouw.
- Schakel handmatige caching in voor pagina's met zware inhoud.
Waarom worden mijn afbeeldingen wazig weergegeven op mobiele apparaten?
Wazige afbeeldingen worden vaak veroorzaakt doordat afbeeldingen met een hoge resolutie worden verkleind voor kleinere schermen.
Om dit op te lossen:
- Gebruik de Wix Media Manager om de afmetingen van afbeeldingen voor mobiel aan te passen.
- Vervang grote afbeeldingen door geoptimaliseerde versies onder 1 MB.
- Zorg ervoor dat afbeeldingen niet overlappen met video's of andere elementen in de editor.
Kunnen animaties mijn website vertragen? Hoe optimaliseer ik ze?
Ja, animaties kunnen de prestaties van je website significant beïnvloeden. Om ze te optimaliseren:
- Gebruik eenvoudige overgangen in plaats van complexe animaties.
- Beperk het aantal animaties bovenaan de pagina (boven de vouw).
- Trigger animaties bij gebruikersinteractie, niet bij het laden van de pagina.
Wat is lazy loading en welke invloed heeft het op mijn website?
Lazy loading vertraagt het laden van afbeeldingen en video's totdat ze de viewport van de gebruiker binnenkomen, waardoor de initiële laadtijden van pagina's worden verbeterd. Wix maakt lazy loading standaard mogelijk voor afbeeldingen en video's.
Om verder te optimaliseren:
- Zorg ervoor dat kritieke inhoud eerst wordt geladen.
- Minimaliseer elementen boven de vouw voor sneller zichtbare inhoud.
Kan ik dynamische pagina's gebruiken om de prestaties van mijn website te verbeteren?
Dynamische pagina's zijn ideaal voor websites met veel inhoud omdat ze gegevens uit een CMS-verzameling halen, waardoor er minder behoefte is aan meerdere statische pagina's. Dit kan de laadtijden verbeteren door:
- Contentbeheer te stroomlijnen.
- Het aantal statische pagina's dat tegelijk moet worden geladen, te verminderen.
- Hiermee inhoud dynamisch te kunnen weergeven op basis van gebruikersinteractie.
