Differences

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

--- litespeed_wiki:cache:lscwp:lazyload-debug [2019/06/27 15:24]
qtwrk created
+++ litespeed_wiki:cache:lscwp:lazyload-debug [2019/06/27 20:36] (current)
Lisa Clarke Copyediting
@@ 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.
-==== 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|}}
-There are 3 class names , ''wp-block-gallery columns-1 is-cropped'' , ''blocks-gallery-item'' and ''wp-image-46''
+==== Find The Class Name ====
-but only the ''wp-image-46'' is inside between ''<img '' and ''/>'', so this is the one we need.
+In this example, there are three class names: ''wp-block-gallery columns-1 is-cropped'' , ''blocks-gallery-item'' and ''wp-image-46''
-Now add this class name into Exclude box
+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.
+==== Add Class Name to Exclude Box ====
+Add this class name into the **Exclude** box.
 {{:litespeed_wiki:cache:lscwp:lscwp-ll-2.png|}}
-Save and purge all.
+==== Save Changes and Purge Cache ====
-Check the source again , this image has been excluded from lazy load, and other images are still being lazy loaded.
+Save changes and press the **Purge All** button.
+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:
+===== Another Example =====
-. Check the source code again and see if it was the right class
+The above example might not be entirely realistic, as ''wp-image-46'' only applies to a single image. The following example shows an image that was placed with a page builder plugin, and has classes that are likely to apply to multiple images. This is a more realistic use of the **Exclude Class** feature.
+{{:litespeed_wiki:cache:lscwp:lscwp-ll-4.png|}}
+In this case, we find the class name ''attachment-large size-large'' and would add that to the **Exclude** box.
+Please do not forget that class name can also be a partial match. We can use ''attachment-large'' to fit any class name that contains that string, such as ''attachment-large size-medium'' and ''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 43: / 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.