Hi,
I want to share a small glitch( with fix) with support and developers. Probably an edge case.
So I noticed this morning that the footer content, the logo and the text in the bottom bar was not appearing on this WooCommerce category archive page:
hidden link
A you will see it seems to be ok now because I found a fix which I will outline below.
I narrowed this down to having WooCommerce views configured to default templates and archives and SG Optimiser configured to have lazy loading for media. I am only using WooCommerce View so that I can use the shortcode for price.
The fix I discovered is to use the class skip-lazy to exclude the product thumbnails from lazy loading. I implemented this by adding the class to the shortcode for the featured image in the following manner:
[wpv-post-featured-image size="medium" class="skip-lazy"]
This might be useful to know if others encounter the same problem.
I include the debug info if you want to investigate further.
Okay thanks for including the workaround. It's hard for me to debug a problem in SG Optimizer's lazy load when it doesn't work in a localhost or in any other host environment. I can try to pick apart what is happening if you remove skip-lazy from these featured images temporarily. I wonder if there is an HTML issue at play here, maybe a typo preventing the loader from completion. I see these strange items:
1. Each item in the grid contains spam tags. Is that intentional? Can you easily replace those with span tags in the markup?
2. Several script tags contain an invalid trailing apostrophe (single quote) after defer, can you easily fix this?:
< script type='text/javascript' src='<em><u>hidden link</u></em>' defer '></script >
3. Can you easily fix the invalid CSS statements noted by validator.w3.org?
Error: CSS: border-color: Parse Error.
At line 33, column 2372
...ul{border-color:}#top-menu li...
Error: CSS: letter-spacing: px is not a letter-spacing value.
From line 33, column 3346; to line 33, column 3347
...r-spacing:px}.et_s...
Error: CSS: letter-spacing: px is not a letter-spacing value.
From line 33, column 3427; to line 33, column 3428
...r-spacing:px}.et_s...
Error: CSS: letter-spacing: px is not a letter-spacing value.
From line 33, column 3517; to line 33, column 3518
...r-spacing:px}.et_s...
Error: CSS: letter-spacing: px is not a letter-spacing value.
From line 33, column 3602; to line 33, column 3603
...r-spacing:px}@medi...
Here's what I tried already:
- I added a DOM Breakpoint on DOMContentLoaded, then refreshed the page. On the breakpoint, I triggered this code in the console to remove the skip-lazy class from the grid items:
jQuery('.js-wpv-view-layout .skip-lazy').removeClass('skip-lazy')
This removed the skip-lazy class successfully. However, when I let the page execution continue, I was able to see the footer image and text without any problems. So I'm not quite sure I know how to continue debugging here . Thoughts? If you can re-enable lazy load somewhere I will take another look.
Hi Christian,
Bless you eagle eyes. Spam? What was I thinking. All is span now!
I will check into the other errors you highlighted.
Thanks for your help.
Update: The warning on defer was related to the following function that I had in my functions.php file that can be used to defer parsing of js:
function defer_parsing_of_js ( $url ) {
if ( FALSE === strpos( $url, '.js' ) ) return $url;
if ( strpos( $url, 'jquery.js' ) ) return $url;
return "$url' defer ";
}
add_filter( 'clean_url', 'defer_parsing_of_js', 11, 1 );
Removing this fixed that one.
I have Elegant Themes looking into those css errors as they look like they are related to the default navigation header in Divi.
It looks like there are a lot things flagged in the report relating to third party plugins and/or how they interact with optimisations.
It might be good, for health reasons, not to visit w3 validator too often!
I can take another look when you're ready, but it looks like I'll need a login now.
