PrestaShop performance: de CCC-opties en de fabeltjes

Geplaatst door  Michael Dekker  2016-06-22  Performance CCC  

Wordt je webwinkel sneller als je alle CCC-opties op de pagina "Geavanceerde instellingen > Prestaties" meteen aanzet? Nee, integendeel! PrestaShop-winkels worden er zelfs tot 3x trager van. Hoe komt dat precies? Deze functionaliteit er toch om de winkel te versnellen?

In deze blogpost gaan we diep in op de technische oorzaken achter deze vertraging. Het doel is om je na het lezen van deze blogpost een goed beeld te geven van de redenen om een optie al dan niet in te schakelen, zodat je voortaan zelf kunt bepalen met welke aanpassingen je de optimale snelheid in je webwinkel kunt bereiken.

Laten we eerst kijken naar de losse opties op de pagina Geavanceerde instellingen > Prestaties in de backoffice. Er is keuze uit:

  • Smart Cache voor CSS
  • Smart Cache voor JavaScript
  • HTML minimaliseren
  • Comprimeer inline JavaScript in HTML
  • Verplaats JavaScript naar het einde
  • Apache-optimalisatie

Prestatie-instellingen

Smart Cache voor CSS

De CSS cache zorgt ervoor dat alle CSS-bestanden voor elk paginatype (product, categorie, cms, etc.) worden gecombineerd en gecomprimeerd tot één pakket, waardoor de browser niet alle losse bestanden voor een pagina hoeft op te halen. Om de cache te vullen moeten de CSS-bestanden van het thema bij elkaar worden gezocht, maar per paginatype horen alleen de CSS-bestanden bij elkaar die nodig zijn om een pagina weer te geven.

Zorda bekend is welke bestanden gecombineerd moeten worden, wordt gecontroleerd of er al een pakket beschikbaar was. Is dit het geval? Dan wordt het bestand meteen geserveerd, zonder dat de server nog iets hoeft te doen. Lekker snel! Wat als dit pakket toch aangemaakt moet worden? In dat geval worden de bestanden verzameld, in één los pakket gezet en vervolgens wordt de witruimte uit het bestand verwijderd, waardoor het kleiner wordt. Deze bewerking kan vrij zwaar zijn, omdat alle witruimte geanalyseerd moet worden, maar het is niet zo zwaar als het combineren van JavaScript, omdat de structuur van het bestand minder diep hoeft te worden geanalyseerd.

Het comprimeren van CSS levert niet altijd de gewenste snelheidswinst op, controleer daarom na het inschakelen van deze optie of je verbeteringen merkt. Het kan zijn dat door de aanwezig gzip-compressie op de server de snelheidswinst ook niet te merken is, omdat gzip-compressie in veel gevallen net zo krachtig kan zijn als het minimaliseren van witruimte. Het grote voordeel van gzip-compressie is dat dit gebeurt op de webserver (Apache, nginx, etc.) zelf en dit kan vaak veel efficiënter worden uitgevoerd dan met PHP. Als HTTP/2.0 is ingeschakeld is de kans helemaal groot dat deze optie inschakelen geen snelheidswinst oplevert. Je kunt onderaan deze blogpost een manier vinden om te ontdekken of je website op HTTP/2.0 draait en of gzip-compressie is ingeschakeld. Schakel, in het geval je geen snelheidsverbetering merkt, de CSS cache uit.

Voordelen

  • Zorgt ervoor dat de browser minder lang hoeft te wachten om CSS binnen te halen
  • Door het comprimeren wordt er minder data verbruikt

Nadelen

  • Haalt voor een groot deel dezelfde informatie op per paginatype
  • Vereist rekenkracht op de server (vooral problematisch bij goedkope shared hosting) gzip-compressie op de server kan beter geschikt zijn en de cache teniet doen
  • Heeft weinig nut als HTTP/2.0 is ingeschakeld

Is deze optie aan te raden?

Als je geen gebruikmaakt van diensten zoals CloudFlare, dan is deze optie over het algemeen aan te raden. Wel is het handig om het effect van deze optie eerst te testen.

Smart Cache voor JavaScript

De JavaScript-cache zorgt ervoor dat alle JavaScript-bestanden voor elk paginatype (product, categorie, cms, etc.) worden gecombineerd en gecomprimeerd tot één pakket, waardoor de browser niet alle losse bestanden voor een pagina hoeft op te halen. Om de cache voor te bereiden moeten alle JavaScript van het thema worden verzameld, maar alleen de JavaScript-bestanden die noodzakelijk zijn om het huidige paginatype te kunnen weergeven. Daarnaast moeten de JavaScript-bestanden van modules nog worden toegevoegd. Zodra bekend is welke bestanden dit zijn, wordt gecontroleerd of er al een pakket beschikbaar was. Is dit het geval? Dan wordt het bestand rechtstreeks geserveerd, zonder dat de server verder nog iets hoeft te doen. Lekker snel!

Wat als dit pakket niet overeenkomt met de noodzakelijke gevonden bestanden? In dat geval worden de bestanden verzameld, in één los pakket weggeschreven en vervolgens wordt onder andere de witruimte uit het bestand verwijderd, waardoor het kleiner wordt. Deze bewerking kan heel zwaar zijn, omdat naast de witruimte er ook gekeken wordt of de programmeercode verkleind kan worden. Zo verandert een JavaScript-functie als:

function increaseProductPrice(productPrice) () {}

in:

function a(b)(){}

Alleen al in dit kleine voorbeeld scheelt het alweer 32 karakters! Door functies en variabelen te hernoemen naar a, b, c, etc. kunnen we heel veel ruimte besparen, maar hoe voorkomen we botsingen en wanneer mogen we ze korter maken? Hiervoor moet de compressie-tool goed op de hoogte zijn van de programmeercode en heel diep analyseren. Dit kan, afhankelijk van de complexiteit van de programmeercode, veel of juist heel weinig tijd in beslag nemen. Controleer om die reden altijd op een aantal pagina's of deze optie wel de gewenste snelheidsverbetering biedt! Dit kan enorm verschillen. Net als bij CSS kan de combinatie gzip-compressie en HTTP/2.0 ervoor zorgen dat deze optie geen snelheidsverbetering oplevert. Schakel in dat geval deze optie uit.

Voordelen

  • Zorgt ervoor dat de browser minder lang hoeft te wachten om JavaScript binnen te halen
  • Door het comprimeren wordt er minder data verbruikt
  • Maakt het lastiger voor buitenstaanders om de code van je website in te zien en te kopiëren

Nadelen

  • Haalt voor een groot deel steeds dezelfde informatie op per paginatype
  • Vereist rekenkracht op de server (vooral problematisch bij goedkope shared hosting)
  • Heeft weinig nut als zowel gzip-compressie als HTTP/2.0 zijn ingeschakeld

Is deze optie aan te raden?

Als je geen gebruikmaakt van diensten zoals CloudFlare, dan is deze optie over het algemeen aan te raden. Wel is het handig om het effect van deze optie eerst te testen.

HTML minimaliseren

Naast het minimaliseren van JavaScript en CSS is het ook mogelijk om de gehele HTML-pagina te minimaliseren. Net als bij JavaScript en CSS moet de minimalisatie-tool op de hoogte zijn van de code en weten wat aangepast mag worden en niet. Helaas is deze functionaliteit op het moment van schrijven (PrestaShop 1.6.1.6) meer dan 3 jaar oud en kunnen we stellen dat de manier waarop deze tool de HTML minimaliseert niet meer past bij de huidige browserstandaarden. Om je een goed beeld te geven (wel onwijs technisch) van hoe snel browserstandaarden kunnen wijzigen raad ik aan om een kijkje te nemen van de site van de WhatWG-standaard. Bijna dagelijks worden er nieuwe voorstellen aangedragen en wordt de standaard na verloop van tijd aangepast. In drie jaar is er dus heel veel gebeurd. Ook de manier waarop de HTML geminimaliseerd wordt laat te wensen over. Het is een hele zware berekening, over het algemeen zwaarder dan de berekening die wordt losgelaten op de JavaScript- en CSS-bestanden. Sommige webwinkels werden zelfs 5 seconden trager per pagina na het inschakelen van deze optie!

Comprimeer inline JavaScript in HTML

Naast JavaScript bestanden kunnen er ook stukjes JavaScript bevinden op de HTML-pagina. In PrestaShop komt het regelmatig voor dat er informatie van de server naar de JavaScript-functies gestuurd moet worden. Hierdoor ontstaan er veel losse JavaScript-blokken op de pagina. De laatste tijd wordt er veel aandacht besteed aan het optimaliseren van JavaScript in modules (in ieder geval in de Addons Store), waardoor de JavaScript in deze blokken erg klein kort maar krachtig gehouden wordt. Soms zijn de stukjes zelfs zo klein dat het niet meer de moeite waard is om deze te analyseren, want er valt immers nog weinig snelheidswinst te behalen. Download je veel modules uit de Addons Store? Zet dan deze optie uit. Gebruik je veel gratis modules (vanaf het forum of ergens anders)? Dan kan het de moeite waard zijn om deze optie in te schakelen, want naar mijn ervaring worden deze modules over het algemeen slordiger geprogrammeerd in verband met een gebrek aan eisen en controle.

Voordelen

  • Minder dataverbruik
  • Maakt het lastiger voor buitenstaanders om de code van je website in te zien en te kopiëren

Nadelen

  • Kost relatief veel rekenkracht
  • Niet de moeite waard bij goed geprogrammeerde modules

Is deze optie aan te raden?

Download je veel kwaliteits-modules (veelal afkomstig uit de Addons Store, Envato, etc.)? Dan is het niet de moeite waard. Daarentegen, als je veel gratis modules download dan kan het de moeite waard zijn. Test in ieder geval of je een verschil merkt!

Verplaats JavaScript naar het einde

Het verplaatsen van JavaScript naar het einde geeft de browser de kans om eerst de HTML-pagina te laten, de stijl toe te passen en dan pas zorgen te hoeven maken om het uitvoeren van JavaScript. Dit heeft als voordeel dat de pagina veel sneller getoond worden en de gebruiker ook het gevoel geeft dat de pagina een stuk sneller is. Wel is de kans groter dat de pagina tijdelijk flitst of er even vreemd uitziet. Er is ook een kans dat modules niet meer werken, omdat niet op tijd kan worden voldaan aan de afhankelijkheden die een module kent. Sommige modules, waarbij bekend is dat ze niet werken met de optie ingeschakeld, geven een waarschuwing. Zie je zo'n waarschuwing? Schakel dan zeker deze optie uit!

Afhankelijk van je thema kan dit de pagina ook trager maken. Niet alle thema's zijn geschikt om te gebruiken met deze optie. Door het uitstellen van JavaScript zijn er twee momenten waarop de browser, vlak na het navigeren naar een URL, flink aan de slag moet om de pagina te tonen, waar dat normaal slechts één keer is. Moderne browsers zijn tegenwoordig zodanig geoptimaliseerd dat ze het piekmoment goed kunnen verdelen en optimaliseren. Door deze optie uit te schakelen geef je de browser weer de controle over het efficiënt laden van zowel de pagina, CSS en JavaScript. Er is weliswaar één groot piekmoment, maar dit kan in totaal minder rekenkracht kosten, dan de berekening te verdelen over twee piekmomenten. Het verschil in performance is vooral op mobiele apparaten goed te merken. Test het effect van deze optie daarom goed op je smartphone!

Voordelen

  • Pagina kan sneller getoond worden
  • Benodigde rekenkracht wordt over twee piekmomenten verdeeld

Nadelen

  • De pagina kan gaan flitsen
  • De totale benodigde rekenkracht kan een stuk hoger zijn
  • Is deze optie aan te raden?
  • Over het algemeen is deze optie niet aan te raden, omdat moderne browsers vaak wel raad weten met de grote hoeveelheid berekeningen waar het mee te maken krijgt.
  • Zeker smartphones kunnen last krijgen van het inschakelen van deze optie. Ook zijn veel thema's niet geoptimaliseerd voor deze optie. Controleer daarom goed op mobiele apparaten wat het effect is op de performance van de pagina, voordat je deze optie inschakelt.

Apache-optimalisaties

Als je webwinkel gebruikmaakt van Apache, dan kun je met deze optie het .htaccess-bestand van PrestaShop, dat zich in de hoofdmap van de PrestaShop-installatie bevindt, automatisch laten optimaliseren om enkele Apache-opties goed in te stellen. Afhankelijk van je hostingprovider worden de optimalisaties al dan niet doorgevoerd. Het is daarom nooit zeker of deze optie wel verbeteringen met zich meebrengt.

Eén van de opties is het inschakelen van gzip-compressie. Hiermee worden bestanden/pagina's goed gecomprimeerd, voordat ze naar de browser van de klant worden verzonden. Alle browsers die nieuwer zijn dan Internet Explorer 6 (!!) ondersteunen deze functionaliteit. Het is daarom zeker aan te raden om deze optie in te schakelen. Alleen al vanwege deze functionaliteit. Het kost wel wat rekenkracht om bestanden te comprimeren, maar in de praktijk zijn er weinig hostingproviders die moeite hebben met comprimeren binnen een redelijke tijd. Alleen bij de aller- allerkarigste hostingproviders levert dit een vertraging op. Merk je dit bij je hostingprovider? Verhuis dan zo snel mogelijk naar een betere, want dit is een goede indicatie dat het mis is!

Voordelen

  • Zorgt ervoor dat Apache goed wordt ingesteld
  • Minder dataverbruik door gzip-compressie

Nadelen

  • Werkt alleen met Apache
  • Kost meer rekenkracht
  • Is deze optie aan te raden?
  • Als je gebruikmaakt van Apache, dan wordt aangeraden om deze optie in te schakelen.

Hoe controleer ik of mijn website HTTP/2.0 ondersteunt?

Op deze site kun je testen of je website op HTTP/2.0 draait. Is dat het geval dan zie je:

HTTP2 ingeschakeld

In dat geval zit je goed. Is ook gzip-compressie ingeschakeld? Controleer dan of de meeste CCC-opties wel nut hebben. Als je webwinkel HTTP/2.0 niet ondersteunt, dan zie je het onderstaande:

HTTP2 uitgeschakeld

Vraag in dit geval of je hostingprovider HTTP/2.0 kan inschakelen. Is dit niet het geval? Dan kun je er voor kiezen om gebruik te maken van bijvoorbeeld CloudFlare. Hiermee wordt HTTP/2.0 automatisch ingeschakeld mits je je site hebt gekoppeld aan CloudFlare.

Hoe controleer ik of mijn website gzip-compressie ondersteunt?

Op checkgzipcompression.com kun je zien of gzip-compressie is ingeschakeld op je website en goed werkt. Werkt gzip-compressie goed? Dan zie je op deze site ook nog eens hoeveel data er bespaard is:

Gzip ingeschakeld