- This topic has 18 replies, 2 voices, and was last updated 2 years, 11 months ago by David.
-
AuthorPosts
-
May 9, 2021 at 10:49 pm #1771989Norman
So, I’ve spent the past half hour looking through the previous CLS topics but sadly I was not able to find an exact solution for my problem. But if there is, kindly point me towards it.
I seem to have two major problems with CLS
1) div class=”slideout-overlay”
I tried to change to flexbox but that didn’t really fix the issue. Am I missing something?2) div class=”page-hero grid-container grid-parent”
The hero also seems to generate an LCP problem on top of the CLS issue.
How do I fix these two issues?
There is also a problem with “div class=”site grid-container container hfeed”” but from what I gathered that’s related to my ads and probably nothing I can (read want) to fix.
May 11, 2021 at 1:27 am #1773761NormanHm..anyone out there?
May 11, 2021 at 1:52 am #1773791DavidStaffCustomer SupportHi there,
your topic slipped past our system – so please accept our apologies for not replying sooner.
Can you disable the Optimized CSS delivery (Critical CSS) option in WP Rocket – the automatic method is one of the main causes of CLS that we see.
May 11, 2021 at 2:14 am #1773822NormanOkay..that seems to have done something. However, I still get the LCP issue for div class=”page-hero grid-container grid-parent”
May 11, 2021 at 2:26 am #1773839DavidStaffCustomer SupportIs the background image in the Header Element the Featured Image?
May 11, 2021 at 2:27 am #1773840Normanyes it is.
May 11, 2021 at 2:49 am #1773860DavidStaffCustomer SupportTry adding this PHP Snippet:
add_action( 'wp_head', function() { if( is_single() ) { if ( wp_is_mobile() ) { $featured_img_url = get_the_post_thumbnail_url(get_the_ID(),'medium_large'); echo '<link rel="preload" as="image" href="'.$featured_img_url.'"/>'; } else { $featured_img_url = get_the_post_thumbnail_url(get_the_ID(),'full'); echo '<link rel="preload" as="image" href="'.$featured_img_url.'"/>'; } } });
How to add PHP: https://docs.generatepress.com/article/adding-php/
This will preload the background image, including a smaller attachment size for Mobile.
May 11, 2021 at 3:19 am #1773898NormanHm..tried that but doesn’t seam to work ๐
May 11, 2021 at 3:32 am #1773915DavidStaffCustomer Supportwell the code is working as the image request is now being made before the HTML is loaded….
But the file its outputting is still 183kb … how large was the original image in file size ?May 11, 2021 at 3:37 am #1773918NormanThe image is 1200 by 801 pixels and the file size is 188kb.
May 11, 2021 at 4:19 am #1773954DavidStaffCustomer SupportWell Google PSI is definitely having a turn on this one… LCP on background images are awfully hit and miss.
As this cannot be explained:If you check the first frame of the filmstrip highlighted in Red box you can see the LCP ( featured image ) element. If there were the actual delay between FCP and LCP time then that featured image would not be visible in the first frame… going by the FCP/LCP timings i wouldn’t expect to see it anywhere near the first frame.
Which makes it really hard ( impossible ) to debug. We’re preloading the featured image, as you can see here in the waterfall report:
its the first request to be made after the HTML has loaded. So theres not a request delay.
So this leaves it down to two possiblities ( in my mind anyways ):
1. The size of the image – google may just be ‘simulating’ that image takes longer to display then it is.
Reducing the size of the image would help.We could try a quick test, in the code above you will see:
medium_large
andlarge
– change them both tomedium
so we can see if it pulls in the smallest of images.2. Inteference from other scripts – aside of the unexplainable film strip – i notice every PSI report i ran there were completely different opportunities being flagged. One of the common one was the ezoic ad scripts causing render blocking. You can try deferring those scripts using a plugin like Flying Scripts.
In addition to this – running multiple tests i get various results and various opportunities. They never seem to be the same.
May 11, 2021 at 6:37 am #1774173NormanOkay..you seem to be switching up some things here.
– I am not with Ezoic, so I doubt there is Ezoic code running ๐
– In your PHP code there was no large, just a full. I changed that to medium as well. Tho no change at all.May 11, 2021 at 7:43 am #1774501DavidStaffCustomer SupportAah my bad – false of habit – i meant mediavine ( just saw an Advert script ) appearing in a render blocking opportunity in PSI.
Remove the above snippet and try adding this instead:
add_action( 'wp_head', function() { if( is_single() ) { $featured_img_url = get_the_post_thumbnail_url(get_the_ID(),'medium'); echo '<link rel="preload" as="image" href="'.$featured_img_url.'"/>'; echo '<style> @media(max-width: 500px) { .page-hero { background-image: url('.$featured_img_url .');} } </style>'; } });
May 11, 2021 at 10:13 am #1774704Normandoesn’t seem to work either. It does seem to improve the speed score on two out of three requests, tho. God…I hate these core vitals
May 12, 2021 at 12:21 am #1775314DavidStaffCustomer SupportWell that code is definitely an improvement. On mobile networking test – the image is preloaded ( first in the request queue ) and its a tiny 13kb. Thats a 170kb saving! It loads so fast it actually appears before the logo….
Tested on Lighthouse locally the FCP is 1.3s ( matching Google PSI ) and the LCP is a consistent 2.2s.But we still see the anomaly on PSI.
So the only thing i can consider is that ‘something’ else is interfering with the API that measures the LCP element. I still see the Mediavine CSS being preloaded ( the browser complains its preloaded but not used with a short time ) and then theres all the scripts that they load.
A simple to test to determine whether the advert code is interferring would be to temporarily disable it.
As other than this – i am at total loss !
-
AuthorPosts
- You must be logged in to reply to this topic.