Afbeeldingen optimaliseren in Magento 2

Let op: maak je gebruik van Magento 1? Dan verwijzen wij je graag door naar onze handleiding: Afbeeldingen optimaliseren in Magento 1.

Soms kan het, nadat jouw website volledig is geoptimaliseerd, alsnog voorkomen dat specifieke pagina’s of afbeeldingen binnen pagina’s enorm langzaam laden. Dit kan zich uitten in een pagina die in de browser volledig geladen is, maar waarbij de afbeeldingen een paar seconden later pas tevoorschijn komen. Vooral op trage (of mobiele) verbindingen zal dit opvallen en resulteren in een slechte webervaring en uiteindelijk zelfs conversiedaling. Voorkom dit met een paar simpele stappen. Daarnaast struikelt ook de Google Pagespeed-test over te grote afbeeldingen. Dit valt in de test onder de volgende punten:

  • Properly size images
  • Efficiently encode images

Een derde, minder specifiek punt is Avoid enormous network payloads. Als Google Pagespeed Insights dit punt teruggeeft als advies, dan is de hele pagina te groot en hoeft het niet specifiek aan de afbeeldingen te liggen. Op onze testsite zagen wij een toename van vijftien punten op de gehele Pagespeed score. Op websites met meer afbeeldingen kan dit resultaat veel verder oplopen.

Afbeeldingen optimaliseren in Magento 2

Met een aantal stappen kunnen we deze afbeeldingen verkleinen zodat ze sneller geladen worden.

Ondanks dat het vrij makkelijke stappen zijn, kan het eindresultaat tegenvallen. Om deze reden willen we je adviseren om een back-up te maken van jouw Magento-media via bijvoorbeeld de functionaliteit van Magento of cPanel. Om een back-up te maken kun je onze creëer en restore een back-up via cPanel voor Magento handleiding gebruiken.

De optimalisatie zelf doen wij met de programma’s optipng en jpegoptim, welke via SSH toegankelijk zijn. Inloggen via SSH kan op drie manieren. Voor alle drie de manieren hebben wij een handleiding geschreven: SSH verbinden met Windows, SSH verbinden met Mac OS X of SSH verbinden met Linux.

Voor het optimaliseren van één enkele afbeelding kan je het volgende gebruiken:

  • Voor een PNG-afbeelding: optipng -strip all -o4 -preserve /pad/naar/bestand.png
  • Voor een jpg- of jpeg-afbeelding: jpegoptim –strip-all -p /pad/naar/bestand.jpeg

Mocht je alle afbeeldingen willen optimaliseren, dan kan dat met de volgende commando’s:

  • Voor jpg- en jpeg-afbeeldingen: find /home/cpanel gebruikersnaam/public_html/pub/{media/,static/frontend/} -iname *.jpg -exec jpegoptim --max=85 --strip-all {} \;
  • voor PNG-afbeeldingen: find /home/cpanel gebruikersnaam/public_html/pub/{media,static/frontend} -iname *.png -exec optipng -o7 -preserve -strip all {} \;

Let op: vervang cpanel gebruikersnaam door jouw cPanel gebruikersnaam.

Het is niet optimaal voor de productiviteit om deze handleiding iedere keer handmatig uit te moeten voeren. Gelukkig is dit te automatiseren via een cron job. Het automatiseren van het optimaliseren van afbeeldingen kan met onderstaand commando. Met het commando worden de afbeeldingen iedere zondag tussen 03:00 en 04:00 geoptimaliseerd.

0 3 * * 0 find /home/cpanel gebruikersnaam/public_html/pub/{media/,static/frontend/} -iname *.jpg -exec jpegoptim --max=85 --strip-all {} \; > /dev/null

0 4 * * 0 find /home/cpanel gebruikersnaam/public_html/pub/{media,static/frontend} -iname *.png -exec optipng -o7 -preserve -strip all {} \; > /dev/null

Let op: vervang cPanel gebruikersnaam door jouw cPanel gebruikersnaam.

Wanneer alle stappen correct gevolgd zijn is de cron job ingesteld en worden de afbeeldingen eens per week waar mogelijk geoptimaliseerd.

Cron job instellen in cPanel

Neem je Magento hosting bij ons af? Dan kun je dit ook heel eenvoudig instellen via het bijgeleverde controlpanel.

1. Log in op cPanel door jouw domeinnaam in te voeren gevolgd door /cpanel. Bijvoorbeeld: www.domeinnaam.nl/cpanel.

2. Navigeer naar Geavanceerd > Cron-taken.

3. Stel de cron job in met de gegevens zoals vermeld in de afbeelding hieronder.

4. Klik vervolgens op Nieuwe cron-taak toevoegen.

Onderaan de pagina staan alle actieve cron jobs. Wanneer de zojuist ingesteld cron job er tussen staat is deze correct ingesteld.

Mocht het optimaliseren van de afbeeldingen niet het gewenste resultaat opleveren qua snelheidswinst? Dan hebben we nog een aantal aanvullende stappen voor het optimaliseren van andere onderdelen van je Magento-installatie. Daarvoor kun je onze handleiding Magento 2 optimaliseren volgen.

in Magento 2
Was dit artikel behulpzaam?