Optimaliseren snelheid - Afbeeldingen uitserveren op basis van WebP

Het Webp formaat wordt inmiddels door alle moderne browsers ondersteund.

Afbeeldingen optimaliseren middels een plugin

Verreweg de handigste manier om de afbeeldingen automatisch om te zetten naar WebP formaat is door middel van de 'Modern Image Formats' plugin. Hiermee zullen alle nieuwe afbeeldingen welke via de mediabibliotheek geupload worden direct aangemaakt worden als WebP (of AVIF) formaat.

https://wordpress.org/plugins/webp-uploads/

Na het installeren van deze plugin heb je hier verder geen omkijken maar naar. Let wel op dat bestaande afbeeldingen niet geoptimaliseerd zullen worden. Hiervoor is het noodzakelijk om de thumbnails opnieuw te laten genereren middels bijvoorbeeld de 'Regenerate thumbnails' plugin, of om de bestaande afbeeldingen te converteren met behulp van onderstaande commando's:

Afbeeldingen optimaliseren naar WebP middels commando's

Hoasted biedt volledige ondersteuning voor WebP. Volg voor de volledige implementatie de onderstaande stappen. 

Let op: Het omzetten gebruikt veel CPU en werkgeheugen resources in je account, waardoor het runnen van andere processen worden vertraagd. Verstandig is dus ook om dit uit te voeren op het moment dat het rustig is op je site.

• Log in via SSH, of vanuit cPanel > Advanced > Terminal
• Navigeer vervolgens met het 'cd' commando naar de uploads map van de WordPress installatie. We raden aan om niet de gehele public_html of root te laten omzetten, enkel de afbeeldingen die veel worden gebruikt. 

cd public_html/wp-content/uploads/

• Zet nu de JPG afbeeldingen om naar .webp met onderstaande commando:

find . -type f -name "*.jpg" -exec cwebp -q 80 {} -o {}.webp \;

• Zet vervolgens de PNG afbeeldingen om naar .webp met onderstaande commando:

find . -type f -name "*.png" -exec cwebp -q 80 -lossless {} -o {}.webp \;

• Voeg als laatste stap het onderstaande script nog toe aan je .htaccess bestand: 

RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{DOCUMENT_ROOT}/$1.webp -f
RewriteRule (.+)$ $1.webp [T=image/webp,E=accept:1,L]

Nieuwe afbeeldingen automatisch omzetten naar WebP met een cronjob

Heb je de bovenstaande snippets al eens toegepast? Dan kun je ook ook de nieuw geuploade afbeeldingen automatisch omzetten naar het WebP formaat met behulp van een cronjob.

Let op dat je hierbij eerst de cronjobs instelt voor het comprimeren van de afbeeldingen om het maximale resultaat te halen.

• Log in op cPanel en ga naar cPanel > Advanced > Cronjobs
• Maak twee nieuwe cronjobs aan welke wekelijks draait
• Vul deze in voor de JPG bestanden:

find ~/public_html/wp-content/uploads/ -type f -name "*.jpg" -exec sh -c 'for file do if [ ! -f "$file.webp" ]; then cwebp -q 80 "$file" -o "$file.webp"; fi; done' sh {} \; >/dev/null 2>&1

• En gebruik deze voor de PNG bestanden:

find ~/public_html/wp-content/uploads/ -type f -name "*.png" -exec sh -c 'for file do if [ ! -f "$file.webp" ]; then cwebp -q 80 "$file" -o "$file.webp"; fi; done' sh {} \; >/dev/null 2>&1

Webp bestanden opruimen van niet meer bestaande afbeeldingen

Wanneer je afbeeldingen via WordPress opruimt zullen de .webp afbeeldingen niet automatisch opgeruimd worden. Om dit alsnog uit te voeren kun je gebruik maken van onderstaande commando:

find ~/public_html/wp-content/uploads/  -type f -name "*.webp" | awk '{ gsub(".webp$", "") ; print $0 }' | xargs -i sh -c 'if [ ! -f "{}" ]; then rm -f {}.webp; fi' find ~/public_html/wp-content/themes/  -type f -name "*.webp" | awk '{ gsub(".webp$", "") ; print $0 }' | xargs -i sh -c 'if [ ! -f "{}" ]; then rm -f {}.webp; fi'