DataFirefly Speed Pack: volledige gids

DataFirefly Speed Pack bundelt in één module de volledige paginacache, Critical CSS, minificatie en combinatie van assets, Delay JS, native lazy loading, resource hints, CDN-herschrijving, serverdirectieven en het opschonen van de database. Deze gids behandelt de installatie, de eerste stappen en elk configuratietabblad.

Vereisten en compatibiliteit

• PrestaShop 8.0 tot 9.x
• PHP 7.2 tot 8.3
• Schrijftoegang tot de cachemap en, voor de serverdirectieven, tot het htaccess-bestand in de root
• Multistore en meertaligheid worden ondersteund

Installatie

1. Upload het archief via Modules > Modulebeheer > Een module uploaden, of kopieer de map datafireflyspeedpack naar de map modules/.
2. Klik op Installeren.
3. Open de configuratie van de module. Er wordt automatisch een preload-token gegenereerd en getoond op het tabblad Dashboard.

Snel aan de slag

Schakel de opties voor een veilige start in deze volgorde in en controleer de weergave na elke stap:

1. Schakel alleen de paginacache in. Navigeer in een privévenster naar een categoriepagina: de eerste lading geeft de header X-DfSpeedPack-Cache: MISS, het herladen geeft HIT.
2. Schakel de minificatie van HTML/CSS/JS en de defer in.
3. Schakel de lazy load van afbeeldingen in (bescherm daarbij uw LCP-afbeelding, zie verderop).
4. Schakel de Critical CSS in en daarna de asynchrone CSS.
5. Schakel Delay JS in.
6. Schakel als laatste, en pas na visuele controle, de combinatie van CSS/JS in.

Paginacache

De paginacache levert de opgeslagen HTML zeer vroeg uit, via de hook actionDispatcherBefore, vóór het instantiëren van de controller en de productqueries. De cachesleutel varieert per winkel, taal, valuta en apparaat.

Bereik

Alleen pagina’s van gasten met een lege winkelwagen worden in de cache opgenomen. De detectie van de ingelogde klant en de winkelwagen gebeurt zo vroeg mogelijk via de cookie. Een pagina van een ingelogde klant wordt nooit uit de cache geserveerd.

Cachebare controllers

De witte lijst met controllers (één per regel) bepaalt welke pagina’s in aanmerking komen: bijvoorbeeld index, category, product, cms, manufacturer. Verwijder een controller om die volledig van de cache uit te sluiten.

Uitsluitingen

• URL’s: deelstrings, één per regel.
• Cookies: de aanwezigheid van een van deze cookies schakelt de caching uit.
• User-agents: uitgesloten agents.
• Genegeerde URL-parameters: trackingparameters (utm, fbclid, gclid en dergelijke) worden uit de sleutel gehaald om versnippering van de cache te voorkomen.

Levensduur en invalidatie

De levensduur is instelbaar (0 = tot een handmatige purge). De invalidatie is automatisch bij elke wijziging van een product, categorie, CMS-pagina, fabrikant, leverancier of voorraad. U kunt de cache ook op elk moment legen via de daarvoor bestemde knop.

CSS

• Minificatie van inline en gecombineerde CSS.
• Combinatie van lokale stylesheets tot één bestand, met herschrijving van de relatieve paden in de url()-regels.
• Asynchrone CSS: stylesheets worden geladen via preload en daarna onload, om blokkerende CSS te elimineren.

Critical CSS

Plak uw above-the-fold CSS per paginatype in de daarvoor bestemde velden. Die wordt inline in de header geïnjecteerd, terwijl de rest asynchroon wordt geladen. Het veld * dient als terugval voor alle pagina’s zonder specifieke regel.

JavaScript

• Minificatie van inline en gecombineerde JS.
• Combinatie van lokale JS-bestanden.
• Automatische defer van scripts.

Delay JS

Delay JS stelt de uitvoering van scripts uit tot de eerste interactie van de gebruiker (scrollen, klikken, toetsaanslag, muisbeweging of aanraking), met een terugval op een timer. Dit levert de grootste winst op voor de TBT en de mobiele score.

• Alleen opnemen: indien ingevuld worden alleen scripts met deze trefwoorden uitgesteld.
• Uitsluiten: trefwoorden van scripts die nooit uitgesteld mogen worden (bijvoorbeeld jquery, core).
• Voeg het attribuut data-df-nodelay toe aan een scripttag om die afzonderlijk uit te sluiten.

Media

De native lazy loading voegt de attributen loading=lazy en decoding=async toe aan afbeeldingen, en loading=lazy aan iframes.

Resource hints

• Preconnect en DNS-prefetch: één URL per regel, voor externe domeinen (lettertypen, analytics, CDN).
• Preload: in de vorm url|type (bijvoorbeeld /img/hero.webp|image). Mogelijke types: image, font, style, script. Laad uw LCP-afbeelding en uw kritieke lettertypen vooraf.
• font-display swap: geïnjecteerd in de inline lettertyperegels om onzichtbare tekst te voorkomen.

CDN

De CDN-herschrijving vervangt de lokale host van statische assets door uw CDN-domein. Vul de URL van het CDN in en daarna de opgenomen en uitgesloten patronen (reguliere expressies), één per regel. Alleen lokale assets die aan de opgenomen patronen voldoen, worden herschreven.

Server (htaccess)

Speed Pack kan serverdirectieven schrijven tussen eigen markeringen in het htaccess-bestand in de root:

• GZIP- / Brotli-compressie
• Browsercache voor assets (één jaar, immutable)
• Keep-Alive-verbinding

Bij het verwijderen van de module worden de directieven automatisch weggehaald. Is het bestand niet beschrijfbaar, dan verschijnt er een waarschuwing.

Database

Het opschonen verwijdert verlaten winkelwagens (zonder bestelling, ouder dan het ingestelde aantal dagen) en de bijbehorende weesregels, oude verbindingen en gasten, en oude zoekstatistieken en logs.

De cache voorverwarmen

De preloader (warmer) verzamelt de URL’s uit uw sitemap en verwarmt vervolgens de cache voor, zodat uw bezoekers altijd een pagina in HIT ontvangen.

Vanuit de backoffice

Tabblad Dashboard: klik op URL’s verzamelen en daarna op Voorverwarmen. Een voortgangsbalk volgt de verwerking per batch.

Via een CRON-taak

Automatiseer het verzamelen en voorverwarmen na elke nachtelijke purge. Het token staat op het Dashboard.

curl -s "https://uw-winkel/module/datafireflyspeedpack/preload?action=collect&token=UW_TOKEN"
curl -s "https://uw-winkel/module/datafireflyspeedpack/preload?action=warm&token=UW_TOKEN"

Controle-attributen in het thema

• data-no-lazy: schakelt lazy load uit voor een afbeelding of iframe (LCP-afbeelding).
• data-df-nodelay: sluit een scripttag uit van Delay JS.
• data-df-nodefer: sluit een scripttag uit van de defer.
• data-df-nooptim: sluit een blok of link uit van de minificatie en de combinatie.

Instellingen importeren en exporteren

Exporteer via het tabblad Geavanceerd alle instellingen als JSON om ze op een andere winkel te repliceren, of importeer een bestaand bestand.

Problemen oplossen

Een pagina blijft op MISS staan

Controleer of u als gast navigeert (uitgelogd, lege winkelwagen), of de controller in de witte lijst staat, of de URL niet is uitgesloten en of er geen uitsluitingscookie aanwezig is. Medewerkers die in de backoffice zijn ingelogd, ontvangen nooit een pagina uit de cache.

De weergave breekt na het inschakelen van de combinatie

Schakel de combinatie van CSS/JS uit, of voeg het problematische bestand toe aan de bijbehorende uitsluitingen. De combinatie staat bewust standaard uit.

Ongestileerde tekst tijdens het laden (FOUC)

Schakel de Critical CSS van de betreffende pagina in of vul die aan, en zorg dat de asynchrone CSS actief is.

Een script werkt niet meer met Delay JS

Voeg het trefwoord toe aan de uitsluitingslijst van Delay JS, of zet het attribuut data-df-nodelay op de tag.

Verwijderen

Bij het verwijderen worden de htaccess-directieven weggehaald, de caches geleegd en de instellingen en het beheertabblad van de module verwijderd.