- This topic has 18 replies, 3 voices, and was last updated 3 years, 5 months ago by David.
-
AuthorPosts
-
September 19, 2020 at 10:46 pm #1450525Lennart
Hi
I switched to GeneratePress to get one of the fastest Themes for WordPress.
But the Cumulative Layout Shift in Google Pagespeed Insights are just as bad is not worse nowI have https://knib.dk and https://erotik.dk, which both performs really bad.
After the last two updates Google shows ALL my Urls as bad in Google Search Console.
When looking at it it shows lots of shiftsWhat can I do ?
I use WPRocket and Asset Cleanup
September 19, 2020 at 11:54 pm #1450567JulienHello,
I had the same issue on a website that was fixed by deactivating wp rocket lazy loading for image. Maybe it’s worth a try ?
September 20, 2020 at 5:04 am #1450814DavidStaffCustomer SupportHi there,
few issues.
1. WP Rocket Critical CSS – unless you can manually create the necessary CSS for each of your various layouts you should disable this feature. The automatic method has no clue as to what is critical or what is above the fold which is leading to the late loading of CSS for elements above the fold such as the Page Hero.
2. Lazy loading – as Kaspof pointed out ( Thanks Kaspof ) – you need to exclude your logo from the lazy loader. Simplest method is to exclude by filename as explained here:
https://docs.wp-rocket.me/article/15-disabling-lazy-load-on-specific-images
There the first two things to resolve.
October 1, 2020 at 6:45 am #1467136LennartThanks. I’ll try both of these.
When I can get in the customize ๐October 1, 2020 at 8:00 am #1467455DavidStaffCustomer SupportYou’re welcome – have replied to your other topic
October 1, 2020 at 8:44 pm #1468368LennartHi
I have tried this, and the logo now stays put, but the burger menu on mobile still jumps from left to right
So it had not much effect at all.If I purge all cache Op, Cloudflare etc. and runs, then the first 2-3 times it looks good and then starts to decay again
For almost all sub pages it does not help a bit. Only the frontpage looks ok.
I now have render blokcing css, but if CLS is more important I will have to live with that
Any other suggestions ?
Mine is to disable the logo and put it in a hook instead – dont know if it makes sense
October 1, 2020 at 11:26 pm #1468492LennartI found a temporary solution.
I moved the logo into a hook and removed the logos from the Customization (still super slow)Now I get CLS 0,00 ms on mobile, but still too much on desktop (0,731)
Its the menu section that starts out really heigh and resizes it self in the end.
I tried removing cache module entirely. No changes
October 2, 2020 at 3:37 am #1468783DavidStaffCustomer SupportLets do one site at a time.
The Erotik site – the main issue i see is the rating stars image. The
<img>
has not height or width specified. So on initial load the browser does not know how much space the images should occupy before it is loaded. So it goes from 0 height to 57px after load.try adding adding a height attribute to your img HTML eg.
height="50"
October 2, 2020 at 4:39 am #1468864LennartThank. I will.
But the worst pages are all other than the front page and it does NOT have the ratings.Here the menu area seems to shift in size. Cant figure out what it is
October 2, 2020 at 5:59 am #1468992DavidStaffCustomer SupportOk looks like you’re using WP Rocket Critical CSS – and the automatic option is prone to cause these kind of problems. Can you disable that option?
October 2, 2020 at 6:13 am #1469013LennartHi
I tried this. Even removed it completely. Same same.
Thats why i enabled it again, to get better load times with no render blockingOctober 2, 2020 at 6:18 am #1469021DavidStaffCustomer SupportCan you disable it again so i can take a look?
October 2, 2020 at 6:41 am #1469063LennartDone ๐ on https://erotik.dk
I added their helper module to disable Critical CSSSo WP Rocket is running but without Critical CSS generation. This can now be done manually
October 3, 2020 at 4:55 am #1470283DavidStaffCustomer SupportStill seeing some elements such as the Search bar receiving their styles after load.
Thats the problem with cache/optimization plugins that are combining and deferring scripts.
We could probably stop those elements from resizing of the Header after load by setting a min height:@media(min-width: 1024px) { #masthead { min-height: 150px; } }
The rest of the issue look related to the WPSP images not lazyloading. You can re-enable lazy load – but you will want to exclude the logo.
October 3, 2020 at 5:58 am #1470368LennartHi
Hi. I have tried this. I added height to all elements that I could think of.
I added the CSS you suggested to the extra CSS section in the customize.When looking at the screenshots in GPSI i cant see where the shift is anymore.
Its really bothering me that I cant get this down to 0 for desktop as well.
I even trid removing all other elements but text. So no shortcodes, products, nothing. Still the same number or higher actually.
The only thing I dont seem to be able to conttrol the height for is the hero element. I guess this must be the one ?
-
AuthorPosts
- You must be logged in to reply to this topic.