Websitesnelheid voor PrestaShop: installatiegids

Performance - WebP, lazy load, minify & cache. Performance versnelt uw webwinkel met levering van WebP (met veilige terugval op het origineel), lazy loading, minificeren en combineren van CSS/JS, headers voor de browsercache, preload- en preconnect-hints en onderhoud van de database dat niets onherstelbaar wijzigt. Elke optimalisatie heeft een eigen schakelaar, zodat u precies inschakelt wat uw thema ondersteunt en de rest uit laat. Geen programmeerwerk, geen aanpassingen aan het thema.

Performance versnelt uw webwinkel met levering van WebP (met veilige terugval op het origineel), lazy loading, minificeren en combineren van CSS/JS, headers voor de browsercache, preload- en preconnect-hints en onderhoud van de database dat niets onherstelbaar wijzigt. Elke optimalisatie heeft een eigen schakelaar, zodat u precies inschakelt wat uw thema ondersteunt en de rest uit laat. Geen programmeerwerk, geen aanpassingen aan het thema.

1. Installatie

  1. Ga in het back-office naar Modules → Module Manager → Upload a module en selecteer de ZIP van de module.
  2. Klik na de installatie op Configure om de installatiewizard te openen.
Updates verlopen automatisch. Updates zijn inbegrepen. Ontwikkeldomeinen (.local, .test, localhost) zijn altijd toegestaan. Zodra er een nieuwe versie beschikbaar is, wordt dit direct in de module getoond.

Als u in plaats van de bevestiging de melding ‘Upload failed’ ziet, heeft PrestaShop de module mogelijk zonder bericht uitgeschakeld: uw instellingen en gegevens blijven behouden. Hoe u een module bijwerkt en wat u doet bij de melding ‘Upload failed’.

2. Configuratie: stap voor stap

Het scherm Configure is één pagina: een statuspaneel, de instellingen per optimalisatie, actieknoppen en een hulpmiddel om de database op te schonen.

Status

Een gezondheidspaneel bovenaan de pagina dat alleen kan worden gelezen.

  • Master switch: of de optimalisaties momenteel AAN of UIT staan.
  • WebP engine (GD/Imagick): of de server WebP kan genereren. Als dat niet beschikbaar is, wordt het herschrijven naar WebP gewoon overgeslagen.
  • WebP cache directory writable: of gegenereerde WebP-bestanden kunnen worden opgeslagen.
  • Browser-cache .htaccess block: of de cacheregels momenteel zijn weggeschreven.
Status
Status: de mogelijkheden van de server in één oogopslag

General & Images hoofdschakelaar

De hoofdschakelaar plus alle optimalisaties van afbeeldingen.

  • Enable optimizations: hoofdschakelaar. Uit = de module doet niets in het front-office.
  • Serve WebP: verpakt afbeeldingen in <picture> met een WebP-bron en het origineel als terugval.
  • Lazy-load images / Lazy-load iframes/videos: voegen loading="lazy" toe waar dat ontbreekt. Het logo, afbeeldingen in de paginakop, de eerste 3 afbeeldingen en afbeeldingen met hoge prioriteit worden meteen geladen.
  • IntersectionObserver fallback: een klein script voor oude browsers zonder ingebouwde lazy loading.
  • WebP quality (1-100): de compressiekwaliteit bij het genereren van WebP.
General & Images
General & Images: hoofdschakelaar, WebP en lazy loading

CSS / JS / HTML

Combineer en minificeer uw bestanden. De ‘ingrijpende’ opties staan standaard uit, test ze op uw thema.

  • Combine and minify CSS (invasive) / Combine and minify JS (invasive): standaard uit. Ze schakelen de ingebouwde CCC van PrestaShop in (combineren, comprimeren en cachen): alle lokale stylesheets worden samengevoegd tot één geminificeerd bestand en lokale scripts tot één geminificeerd bestand per positie, waardoor de laadvolgorde kan veranderen. Test uw thema nadat u ze hebt ingeschakeld.
  • Minify HTML (invasive): voegt witruimte samen; laat pre/textarea/script/style intact.
  • Exclusions: één fragment per regel; elke afbeelding waarvan het adres een van deze fragmenten bevat, blijft ongemoeid (geen WebP, geen lazy loading).
CSS / JS / HTML
CSS / JS / HTML: combineren en minificeren, uitzonderingen

Preload / Preconnect

Voeg hints voor bronnen toe om de eerste weergave te versnellen.

  • Preload: één URL per regel voor lettertypen en kritieke bestanden. Het attribuut as wordt afgeleid uit de extensie.
  • Preconnect: één oorsprong (origin) per regel, bijv. https://fonts.gstatic.com.
Preload / Preconnect
Preload / Preconnect: hints voor lettertypen en oorsprongen

Critical CSS (advanced) optioneel

Zet de CSS voor het zichtbare deel van de pagina inline in de <head> van de pagina. Geavanceerd en standaard uit.

  • Inline critical CSS (invasive): standaard uit; zet de onderstaande CSS inline in de head.
  • Above-the-fold CSS: de CSS die inline moet komen. Laat leeg tenzij u weet wat u moet extraheren.
Critical CSS (geavanceerd)
Critical CSS: uw stijlen voor het zichtbare deel inline plaatsen

Database maintenance thresholds

Hoe oud tijdelijke gegevens moeten zijn voordat het opschoonhulpmiddel ze aanraakt.

  • Abandoned carts older than (days)
  • Connections/guests older than (days)
  • Log rows older than (days)

Elke waarde ligt tussen 7 en 3650 dagen. Deze drempels sturen het opschoonhulpmiddel verderop op de pagina aan.

Drempels voor databaseonderhoud
Database maintenance thresholds: leeftijdsgrenzen voor tijdelijke gegevens

Actions

Onderhoudsknoppen met één klik.

  • Clear WebP cache: verwijdert de gegenereerde WebP-bestanden.
  • Regenerate WebP (batch 500): genereert WebP vooraf voor maximaal 500 afbeeldingen tegelijk.
  • Write / Remove browser-cache rules: schrijft de cacheregels in .htaccess binnen een omkeerbaar blok # BEGIN/END cll_perf (er wordt eenmalig een back-up .htaccess.cll_perf-bak gemaakt). GZIP/Brotli worden ingeschakeld waar de Apache-module aanwezig is.
Acties
Actions: WebP-cache en .htaccess-regels voor de browsercache

Database cleanup (maintenance)

Een opschoning van tijdelijke gegevens die niets onherstelbaar wijzigt. Dit is geen ‘onderhoudsmodus’ van de webwinkel: uw front-office blijft online en bezoekers worden nooit geblokkeerd.

  • Execute (otherwise dry-run): laat uitgevinkt voor een voorbeeld; er wordt niets verwijderd totdat u dit aanvinkt.
  • Also OPTIMIZE TABLE: win optioneel na het opschonen tabelruimte terug.
  • Run maintenance: alleen tijdelijke gegevens van gasten en logboeken die ouder zijn dan uw drempels worden geraakt; geldige bestellingen en klanten worden nooit aangeraakt.
Opschonen van de database (onderhoud)
Database cleanup: eerst altijd een dry-run, daarna uitvoeren

3. Controleer of het werkt

  • Open het paneel Status: de master switch moet AAN staan en de WebP-engine moet ‘available’ zijn.
  • Bekijk met ‘Serve WebP’ aan de bron van een productpagina, afbeeldingen moeten zijn verpakt in <picture> met een bron .webp.
  • Voer de opschoning van de database eerst uit als dry-run: die meldt hoeveel winkelwagens, verbindingen en logregels verwijderd zouden worden voordat u uitvoert.
  • Controleer na het schrijven van de regels voor de browsercache in uw .htaccess het blok # BEGIN cll_perf.

4. FAQ

Kan een optimalisatie mijn thema breken?

De ‘ingrijpende’ opties (CSS/JS combineren en minificeren, HTML minificeren, kritieke CSS) staan standaard uit. Schakel ze een voor een in en test; gebruik de lijst Exclusions om een problematische afbeelding over te slaan.

Wat als mijn server geen WebP kan maken?

Het paneel Status vertelt het u. Als noch GD noch Imagick beschikbaar is, wordt het herschrijven naar WebP gewoon overgeslagen en worden de originele afbeeldingen geleverd.

Is het opschonen van de database veilig?

Ja. Het wijzigt niets onherstelbaars, biedt altijd een dry-run en verwijdert alleen tijdelijke gegevens van gasten en logboeken die ouder zijn dan uw drempels, nooit geldige bestellingen of klanten.

Moet ik mijn thema aanpassen?

Nee. Performance werkt via standaardhooks en is compatibel met elk thema.

🔧 Ontdek en koop de module: Performance - WebP, lazy load, minify & cache

Gerelateerde gidsen

📚 Alle modulegidsen

Terug naar boven