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.
In dit artikel lees je meer over:
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 gepersonaliseerd zijn, laden sneller dan websites die veel inhoud bevatten.
Het optimaliseren van je website kan zorgen voor een verbeterde laadtijd, evenals een betere score bij 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
Wanneer je je website bouwt of bijwerkt, raden we aan
de laadvolgorde van elementen in gedachten te houden, omdat ze 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 naar Wix-websites worden geüpload, worden automatisch verkleind voor optimalisatie. We raden aan om JPG-afbeeldingen te gebruiken in plaats van PNG-afbeeldingen, tenzij je een transparante achtergrond nodig hebt, omdat JPG-afbeeldingen beter zijn geoptimaliseerd voor de laadtijd en prestaties van de website.
Lees meer over afbeeldingen en de prestaties van je website
Let op:
- Waar mogelijk converteert Wix automatisch afbeeldingen naar moderne formaten zoals WebP. Dit formaat verkleint de downloadgrootte terwijl de beeldkwaliteit behouden blijft.
- 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 websiteSpeciale 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 gebruikt
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 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 links in de mobiele Editor op
Verborgen op mobiel te klikken
.
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 op de afbeelding in de Editor.
- 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.
Ondersteunde besturingssystemen op mobiele apparaten:
- iPhone: iOS 12 en hoger (iPhone 6 en hoger)
- Android: 9.0 en hoger
Ondersteunde browsers op mobiele apparaten:
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.
