Differences
This shows you the differences between two versions of the page.
Both sides previous revision Previous revision Next revision | Previous revision | ||
litespeed_wiki:cache:lscwp:lazyload-debug [2019/06/27 18:21] Lisa Clarke Copyediting |
litespeed_wiki:cache:lscwp:lazyload-debug [2019/06/27 20:36] (current) Lisa Clarke Copyediting |
||
---|---|---|---|
Line 4: | Line 4: | ||
===== How to Exclude by Class Name ===== | ===== How to Exclude by Class Name ===== | ||
- | =====Check the Source Code ==== | + | ==== Check the Source Code ==== |
Access the page by browser, and view the source code. | Access the page by browser, and view the source code. | ||
Line 12: | Line 12: | ||
Look for images where the image tag includes ''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. | ||
- | 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. | + | 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|}} | {{:litespeed_wiki:cache:lscwp:lscwp-ll-1.png|}} | ||
Line 22: | Line 22: | ||
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. | 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. | ||
- | ==== Added The Class Name to Exclude Box ==== | + | ==== Add Class Name to Exclude Box ==== |
- | Now add this class name into Exclude box | + | Add this class name into the **Exclude** box. |
{{:litespeed_wiki:cache:lscwp:lscwp-ll-2.png|}} | {{:litespeed_wiki:cache:lscwp:lscwp-ll-2.png|}} | ||
Line 30: | Line 30: | ||
==== Save Changes and Purge Cache ==== | ==== Save Changes and Purge Cache ==== | ||
- | Save changes and press the Purge All button. | + | 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. | 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|}} | {{:litespeed_wiki:cache:lscwp:lscwp-ll-3.png|}} | ||
+ | |||
+ | |||
+ | ===== Another Example ===== | ||
+ | |||
+ | 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 ===== | ===== Troubleshooting ===== | ||
- | If you've added the class into the Exclude list, but images with that class are still being lazy loaded, try the following: | + | 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 source code again and see if you entered the correct class | - Check the source code again and see if you entered the correct class |