Ga naar inhoud

Optimaliseer je website

Deze pagina laat een aantal aanpassingen zien waarmee je site sneller laadt en soepeler draait.

Je hoeft niet alles in één keer te doen. Elke optimalisatie staat op zichzelf, en de badges onder elke titel laten zien hoeveel werk het kost en hoeveel verschil het maakt.

Voordat je begint

Deze aanpassingen doe je in de pagina-editor. Open een pagina en houd de editor open terwijl je de stappen doorloopt.

Werk aan één pagina tegelijk en bekijk je wijzigingen in de preview voordat je publiceert. Als iets er niet goed uitziet, kun je het terugdraaien voordat het live gaat.

Structureer je pagina's efficiënt

Hoe een pagina is opgebouwd heeft het grootste effect op de laadsnelheid. Een pagina met minder bouwblokken rendert sneller voor je bezoekers.

  1. Bouw layouts met Containers, en laat één container meerdere widgets bevatten.
  2. Verpak niet elke widget in zijn eigen container. Dit voegt onzichtbare lagen toe die de pagina vertragen.
  3. Verwijder Spacer- en Divider-widgets. Voeg ruimte toe via de padding- en margin-instellingen van een container.
  4. Combineer gerelateerde tekst in één Text Editor-widget in plaats van losse Heading- en Text-widgets op te stapelen.
  5. Stel responsive opties in op één widget voor mobiel en desktop, in plaats van twee kopieën te maken en er één te verbergen.

Een vuistregel voor paginagrootte

Rond de 30 tot 50 widgets per pagina is normaal. Zit een pagina boven de 100 widgets, dan is dat meestal een teken dat je er een aantal kunt combineren.

  1. Upload de aangepaste versie.

Een veel grotere afbeelding uploaden dan nodig vertraagt de pagina, zelfs nadat de builder hem comprimeert. Beginnen met een bestand op de juiste maat maakt het verschil.

Beheer je lettertypes

Lettertypes moeten laden voordat tekst in zijn uiteindelijke vorm verschijnt. Minder lettertypes, en minder varianten per lettertype, betekent minder om te laden.

  1. Beperk de site tot twee of drie lettertypefamilies. Een gangbare opzet is één lettertype voor koppen en één voor lopende tekst.
  2. Laad alleen de gewichten die je gebruikt, zoals regular en bold, in plaats van het volledige bereik.
  3. Sla je lettertypes op je eigen site op met de Custom Fonts-functie van de builder, in plaats van ze extern te laden. Dit scheelt een extra verbinding die de browser anders zou moeten maken.
  4. Schakel de standaardlettertypes en -kleuren van de builder uit als je site zijn eigen lettertypes en kleuren gebruikt, zodat er niets laadt dat je niet gebruikt.

Tekst zichtbaar houden terwijl lettertypes laden

De standaardinstelling van de builder houdt je lopende tekst zichtbaar in een fallback-lettertype terwijl je gekozen lettertype laadt. Dat is de juiste keuze voor gewone tekst. Icoonlettertypes zijn de uitzondering: daarbij is het beter om even te wachten tot de juiste iconen verschijnen.

  1. Voeg voor een uitzondering een nieuwe naamgestuurde stijl toe binnen het globale systeem, in plaats van één widget te overschrijven.

Merk je dat je dezelfde stijl bij veel widgets overschrijft? Dat is meestal een teken dat de globale opzet een nieuwe stijl nodig heeft, in plaats van herhaalde losse aanpassingen.

Ga goed om met iconen en afbeeldingen

Iconen en kleine afbeeldingen trekken soms stiekem meer binnen dan nodig is.

  1. Gebruik de eigen icoonwidgets van de builder. Deze plaatsen iconen direct in de pagina in plaats van een heel icoonlettertype te laden.
  2. Upload een los icoon of logo als SVG-bestand, in plaats van een hele icoonbibliotheek te laden voor één symbool. SVG's laden als afbeelding, voegen geen extra verzoek toe en blijven scherp op elke grootte.

Note

Font Awesome Pro-iconen zijn een uitzondering. Zet de Font Awesome-kit in je Font Awesome-account op SVG-modus om ze efficiënt te laten laden.

  1. Verwijder animatie die een bezoeker nergens naartoe leidt dat ertoe doet. Meestal kost het meer dan het oplevert.

Wees bewust met add-ons en embeds

Content en widgets van externe bronnen brengen elk hun eigen code mee naar je pagina.

  1. Geef de voorkeur aan de eigen widgets van de builder boven widgets uit externe add-onpakketten. Add-onwidgets laden hun eigen styling en scripts mee en zijn een veelvoorkomende verborgen oorzaak van trage pagina's.
  2. Gebruik voor embeds zoals video's, kaarten of chat een voorbeeldafbeelding die pas bij een klik de volledige content laadt, als die optie beschikbaar is. Anders laadt elke embed direct externe scripts zodra de pagina opent.

Even over plugins

Plugins breiden uit wat je site kan, maar elke plugin kan eigen code aan je pagina's toevoegen en ze vertragen.

  • Activeer alleen de plugins die je echt nodig hebt.
  • Deactiveer plugins die je niet meer gebruikt.
  • Check voordat je een plugin activeert of een ingebouwde functie van de builder al doet wat je nodig hebt.

Meer plugins is niet beter. Een kortere lijst houdt je site sneller en makkelijker te onderhouden.

Waar je kunt beginnen

Wil je maar een paar aanpassingen doen, begin dan bij de onderdelen met de hoogste Impact: je pagina's efficiënt structureren en je afbeeldingen op de juiste grootte houden. Beide maken een merkbaar verschil en vragen geen diepgaande technische kennis.

De rest kun je in je eigen tempo doorwerken. Bekijk elke wijziging in de preview voordat je publiceert, en stop zodra je site snel genoeg aanvoelt.