Optimaliseren snelheid – Afbeeldingen uitserveren op basis van WebP
Browser ondersteuning
Nog niet iedere browser ondersteunt WebP (Chrome en Opera bijvoorbeeld wel).
Afbeeldingen voor de eerste keer beschikbaar maken in WebP bij Everts Webservices
Everts Webservices biedt volledige ondersteuning voor WebP. Volg voor de volledige implementatie de onderstaande stappen.
Let wel op: Het omzetten gebruikt alle beschikbare CPU en werkgeheugen resources in je account, waardoor het runnen van andere processen worden vertraagd, waaronder het reguliere webverkeer op je website. Verstandig is dus ook om dit te doen op het moment dat het niet druk is op je site.
- Log in via SSH, of vanuit cPanel > Advanced > Terminal
- Ga naar de folder waarin de afbeeldingen staan. We raden aan om niet de gehele public_html of root te laten omzetten, enkel de afbeeldingen die veel worden gebruikt.
Bijvoorbeeld:
cd public_html/wp-content/uploads/
- Run onderstaande commando eerst
find . -type f -name “*.jpg” -exec cwebp -q 80 {} -o {}.webp \;
- En vervolgens de volgende
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 ook beschikbaar maken in WebP
Heb je de bovenstaande snippets al eens toegepast? Dan kun je ook gebruik maken van onderstaande snippets, die alle eerder omgezette WebP afbeeldingen overslaat. Dat scheelt aanzienlijk in het gebruik van CPU en werkgeheugen gebruik.
- Gebruik deze voor PNG
find . -type f -name “*.png” -exec sh -c ‘if [ ! -f “{}.webp” ]; then cwebp -q 80 -lossless “{}” -o “{}.webp”; fi’ \;
- Gebruik deze voor JPG
find . -type f -name “*.jpg” -exec sh -c ‘if [ ! -f “{}.webp” ]; then cwebp -q 80 “{}” -o “{}.webp”; fi’ \;
webp bestanden opruimen van niet meer bestaande afbeeldingen
Gebruik daarvoor dit script:
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’