Differences

This shows you the differences between two versions of the page.

--- litespeed_wiki:cache:lscwp:configuration:webpreplacement [2017/11/15 15:46]
Eric Leu [Verify site work with webp]
+++ litespeed_wiki:cache:lscwp:configuration:webpreplacement [2017/11/15 21:03]
Eric Leu [Debug]
@@ Line 1: / Line 1: @@
-====== How to let WordPress image display with webp format======
+====== How to let WordPress image display with WebP format======
-I assume you prepared images with webp format by [[https://www.litespeedtech.com/support/wiki/doku.php/litespeed_wiki:cache:lscwp:image-optimization | Image optimization setup]] already
+Before making webp replacement works, you may want to prepared webp format images by either [[https://www.litespeedtech.com/support/wiki/doku.php/litespeed_wiki:cache:lscwp:image-optimization | LiteSpeed Image optimization]] or [[https://developers.google.com/speed/webp/#webp_converter_download_stylefont-weight_bold | webp convert by yourself]].
-=====Setup from LSCache =====
+=====Setup WebP Replacement =====
   * Navigate to ** Settings -> Media **
   * Set Image WebP Replacement as `ON` \\ {{:litespeed_wiki:cache:lscwp:configuration:webp-2.png?400|}}
-=====Verify site work with webp =====
+=====Verify site work with WebP =====
-We setup Woocommerce plugin with builtin storefront theme as our test scenario and we are going to use Chrome developer tool to verify.
+We setup Woocommerce plugin with builtin storefront theme as our test scenario which includes around 99 images by default. And we are going to use [[https://developer.chrome.com/devtools | Chrome developer tool]] to verify webp replacement function. This image is Woocommerce default storefront theme with demo products.\\ {{:litespeed_wiki:cache:lscwp:configuration:webp-5.png?700|}}
   * Before webp replacement \\ {{:litespeed_wiki:cache:lscwp:configuration:webp-1.png?700|}}
   * After webp replacement \\ {{:litespeed_wiki:cache:lscwp:configuration:webp-3.png?700|}}
-  * jpg versus webp image size: \\ {{:litespeed_wiki:cache:lscwp:configuration:webp-4.png?500|}}
+=====How much size reduced from WebP =====
+  - Check image size from browser developer tool
+    * Optimized jpg versus webp image size: \\ {{:litespeed_wiki:cache:lscwp:configuration:webp-4.png?500|}}
+  - Check images size from console
+    * Access to **PATH_TO_WORDPRESS -> wp-content -> uploads -> YEAR -> MONTH**
+    * <code>
+ls -alh | grep accessories-300
+>>>
+.1K accessories-300x300.bk.jpg
+.6K accessories-300x300.jpg
+.0K accessories-300x300.jpg.webp
+</code>
+We can found original jpg image is 9.1K, optimized jpg file is 8.6k and webp only 6.0k. All image sizes are match to previous checking method of developer tool which need to minus header size. It's around 30% size reduced from JPEG which is a reasonable number by referring [[https://developers.google.com/speed/webp/| google webp]]
+===== Debug =====
+  - Check following rules exist in .htaccess file \\ <code>
+### marker WEBP start ###
+RewriteCond %{HTTP_ACCEPT} "image/webp"
+RewriteRule .* - [E=Cache-Control:vary=%{ENV:LSCACHE_VARY_VALUE}+webp]
+### marker WEBP end ###
+</code>
+  - Check Debug log with Debug Advanced level
+    * If webp image not exist, you may see ''Media: no file, bypassed''