Differences

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

--- litespeed_wiki:cache:lscwp:lazyload-debug [2019/06/27 15:46]
qtwrk
+++ litespeed_wiki:cache:lscwp:lazyload-debug [2019/06/27 20:26]
qtwrk
@@ Line 1: / Line 1: @@
-===== How To Debug Lazy Load Excluding =====
+====== Bulk Exclude Images from Lazy Load ======
-Although there is a feature to exclude individual images from lazy load , but when there are hundreds images to be excluded , this is not optimal solution , therefore , we can also exclude by class name.
+LiteSpeed Cache for WordPress allows you to [[litespeed_wiki:cache:lscwp:configuration:media#lazy_load_image_excludes|exclude individual images from Lazy Load]], but when there are hundreds of images to be excluded, this is not optimal solution. Luckily, we can also exclude images by class name.
-==== Step 1: Check the source code to find the class name ====
+===== How to Exclude by Class Name =====
+=====Check the Source Code ====
-Access the page by browser , and view the source code.
+Access the page by browser, and view the source code.
 {{:litespeed_wiki:cache:lscwp:lscwp-ll-0.png|}}
-This image comes with ''data-lazyloaded="1"'' which means it is lazy loaded.
+Look for images where the image tag includes ''data-lazyloaded="1"'', which means it is lazy loaded.
-In case you have LSCWP optimization feature , like HTML minify enabled , you can use ''/?LSCWP_CTRL=before_optm'' query to bypass LSCWP , e.g. ''https://www.your_domain.com/?LSCWP_CTRL=before_optm'' to make it easier to read.
+If you have the LSCWP optimization feature HTML minify enabled, your source might be hard to read. You can use the ''/?LSCWP_CTRL=before_optm'' query in your URL to bypass LSCWP optimization, like so: ''<nowiki>https://www.your_domain.com/?LSCWP_CTRL=before_optm</nowiki>''. This will make it easier to read.
 {{:litespeed_wiki:cache:lscwp:lscwp-ll-1.png|}}
-==== Step2: Find The Class Name ====
+==== Find The Class Name ====
-There are 3 class names , ''wp-block-gallery columns-1 is-cropped'' , ''blocks-gallery-item'' and ''wp-image-46''
+In this example, there are three class names: ''wp-block-gallery columns-1 is-cropped'' , ''blocks-gallery-item'' and ''wp-image-46''
-but only the ''wp-image-46'' is inside between ''<img '' and ''/>'', so this is the one we need.
+Only the ''wp-image-46'' is inside the image tag (between ''<img '' and ''/>''), so this is the class name we need in order to exclude this image from Lazy Load.
-==== Step3: Added The Class Name Into Exclude Box ====
+==== Added The Class Name to Exclude Box ====
 Now add this class name into Exclude box
@@ Line 27: / Line 28: @@
 {{:litespeed_wiki:cache:lscwp:lscwp-ll-2.png|}}
-==== Step4: Save changes and Purge Cache ====
+==== Save Changes and Purge Cache ====
-Save and purge all.
+Save changes and press the Purge All button.
-Check the source again , this image has been excluded from lazy load, and other images are still being lazy loaded.
+Check the source code again. You should see that this image has been excluded from lazy load, and other images are still being lazy loaded.
 {{:litespeed_wiki:cache:lscwp:lscwp-ll-3.png|}}
-===== Troubleshooting =====
-If after adding class into exclude but image still being lazy loaded:
+==== Other Example ====
-. Check the source code again and see if it was the right class
+Above example is done with Wordpress default editor , the following example is made with a page builder plugin which may relfect a more realistic situation.
+{{:litespeed_wiki:cache:lscwp:lscwp-ll-4.png|}}
+So in this case, we found the class name ''attachment-large size-large''
+Please do not forget that class name can also be partial match , we can use ''attachment-large'' to fit all the class names as ''attachment-large size-medium'', ''attachment-large size-small''
+===== Troubleshooting =====
-. Check if the page is cached , and if so , please do a purge.
+If you've added the class into the Exclude list, but images with that class are still being lazy loaded, try the following:
-. Check the [[litespeed_wiki:cache:lscwp:debug|Debug Log]] , you should see log as follow:
+  - Check the source code again and see if you entered the correct class
+  - Check whether the page is cached, and if so, purge it
+  - Check the [[litespeed_wiki:cache:lscwp:debug|Debug Log]], which should look something like this:
 <code>06/27/19 15:19:26.429 [123.123.123.123:54011 1 GLN] [Media] lazyload found: https://test.litespeed.dev/wp-content/uploads/2019/06/wordpress.png
@@ Line 49: / Line 59: @@
 /27/19 15:19:26.429 [123.123.123.123:54011 1 GLN] [Media] lazyload found: https://test.litespeed.dev/wp-content/uploads/2019/06/wordpress2.png</code>
-If it not showing up , most likely you may have used wrong name.
+If you're not seeing it, chances are you used the wrong class name.