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] 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 | ||