Differences

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

--- litespeed_wiki:cache:lscwp:configuration:webpreplacement [2017/11/15 21:15]
Lisa Clarke [Setup WebP Replacement]
+++ litespeed_wiki:cache:lscwp:configuration:webpreplacement [2017/11/15 21:31] (current)
Lisa Clarke [Debug]
@@ Line 11: / Line 11: @@
 {{:litespeed_wiki:cache:lscwp:configuration:webp-2.png?400|}}
-=====Verify site work with WebP =====
+=====Verify That it's Working =====
-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|}}
-=====How much size reduced from WebP =====
+We setup the WooCommerce plugin with its built-in Storefront theme as our test scenario. It includes a default collection of JPG images.
-  - Check image size from browser developer tool
-    * Optimized jpg versus webp image size: \\ {{:litespeed_wiki:cache:lscwp:configuration:webp-4.png?500|}}
+Using [[https://developer.chrome.com/devtools | Chrome's developer tool]], we can verify that the JPGs have been replaced by WebPs.
-  - Check images size from console
-    * Access to **PATH_TO_WORDPRESS -> wp-content -> uploads -> YEAR -> MONTH**
+Here is the WooCommerce default Storefront theme with demo products:
-    * <code>
+{{: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|}}
+===== How Much Smaller are the WebP Images? =====
+You can evaluate the effects in a few ways.
+==== Check the image size from the browser developer tool ====
+Optimized JPG versus WebP image size:
+{{:litespeed_wiki:cache:lscwp:configuration:webp-4.png?500|}}
+==== Check the image size from the console ====
+Change directory to ''PATH_TO_WORDPRESS/wp-content/uploads/YEAR/MONTH''
+<code>
 ls -alh | grep accessories-300
 >>>
@@ Line 27: / Line 43: @@
 .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]]
+We can see that the original JPG image is 9.1K, the optimized JPG file is 8.6k and the WebP is only 6.0k. All image sizes are comparable to those which we observed via the developer tool (which needs to subtract the header size). It appears that the WebP images are around 30% reduced from JPG. This is reasonable, according to [[https://developers.google.com/speed/webp/| Google's documentation]].
-===== Debug =====
+===== Debugging =====
-  - Check following rules exist in .htaccess file \\ <code>
+If it's not working, here are a few things you can check. Don't forget, some browsers don't support WebP images yet, and for those browsers, the default JPGs will be served.
+==== Check the Following Rules Exist in the ''.htaccess'' File ====
+<code>
 ### marker WEBP start ###
 RewriteCond %{HTTP_ACCEPT} "image/webp"
@@ Line 39: / Line 59: @@
 ### marker WEBP end ###
 </code>
-  - Check Debug log with Debug Advanced level
-    * If webp image not exist, you may see ''Media: no file, bypassed''
+==== Check Debug Log with Debug Advanced level ====
+If the WebP image doesn't exist, you may see ''Media: no file, bypassed''