-
Posts
-
Please see my gtmetrix test in private content. What I need help with is the head area: when the page is loading, the centered logo first shows up to the left and then moves to the center, and the menu under that, starts off on the right then moves to the center. There’s also an image trying to load in the main content in the wrong spot. I am not using the page builder on this page as it results in much, much worse speeds.
(I know the server response is my main problem, I’m trying to resolve that with the host)
Hey Synthea79,
Thank you for the inquiry.
Looks like the site have not been fully optimized, yet. You will have to do basic optimization steps in order to improve site speed such as installing a cache plugin and utilizing the browser cache. Please check the following articles for more info about site or WordPress optimization.
// https://kriesi.at/archives/scoring-100-100-in-google-pagespeed-insights-gtmetrix-pagespeed-and-yslow
// https://gtmetrix.com/wordpress-optimization-guide.htmlBest regards,
IsmaelI have since done just that (see the first link to today’s gtmetrix score – 99/99 green all the way), but google page speed is still punishing my score on both mobile and desktop – my desktop score is 96, with the CLS being the main issue, only 65 on mobile.
Here’s the test just now. It seems if the server is slowed down even a tiny bit, that content shift can be seen and dings me. I’d just like to fix having the logo start left and the menu start right before both shifting to the center where they belong.
Hi,
Good job with the site speed optimization. Site loads more faster on our end, but the cumulative layout shift (CLS) is quite high and it might have something to do with the lazy loading. Are you using a plugin to lazy load images, and have you tried disabling it temporarily?
Thank you for the update.
Best regards,
IsmaelI’m on a litespeed server with the litespeed plugin. I had lazy loading on in litespeed, but it was also on in the Enfold Performance page. I turned off the Enfold lazy loading and did many purge-test cycles with both google pagespeed, and gtmetrix.
Then I also turned off lazy loading in litespeed. That gave me a D score (see the first link). I turned back on litespeed lazy loading, and excluded the logo and THAT gave me a great score in gtmetrix BUT google pagespeed is still bad – mobile cls is 0.484 and desktop is 0.963.
So the lazy loading on/off setting does seem to do something, but it doesn’t solve the issue in google pagespeed.
Hi,
According to the page speed tool, the CLS is now 0.001, which is pretty good. How did you improve it?
You might also want to defer loading of JS files, and turn off JS Combine option in the litespeed settings to prevent the script files from blocking DOM rendering, minimize thread work and reduce the execution time. Deferring the script might cause unexpected behavior, so make sure to check the page properly after enabling it.
// https://docs.litespeedtech.com/lscache/lscwp/pageopt/#load-js-deferred
And according to the page speed insight, the server response time is a bit slow, so optimizing the database and upgrading the server itself might also be necessary.
Best regards,
IsmaelNothing has changed, some times I get .9 and other times it’s almost 0 – with gtmetrix.
With google pagespeed, it’s always giving me a poor score because of the CLS of .9 but on desktop, my overall score is 90 so it’s not bad at all.Mobile on google pagespeed is bad – less than 50. It seems to have a problem with everything.
I think the main problem is the CLS is actually visible to a vistor if my server is running slow. The whole page loads slow so the shift that I mentioned can be seen and it’s not a nice look.
The link is the gtmetrix score I ran as I’m typing this – it’s great, except the CLS. You can see in the images that were generated, that at the .7 second point, the logo is loaded to the left, the menu under is loaded to the right. The placeholder image (the light green block in the main content) is litespeed generated so I don’t think Kriesi can help with that, but I’s to figure out what is going on to make the logo and menu load to the side then shift center where it belongs.I’ve gotten loads of compliments on the site as is so I’m not desperate to fix it, I just want to get it the best as possible – I have found a definite link between fast load times and how much money I’m making on ads (still very small but growing).
Hi,
Thank you for the update.
According to the gtmetrix tool, the biggest contributor to layout shift is the main container, which is odd because there is nothing dynamically added to that container by default, until we noticed the google ad sections and the mashsb-box sharing section in your home page. The ad sections are dynamically created using scripts, which is causing huge layout shifts. Temporarily disabling those ads should lower the layout shift by significant amount.
Did you add those ads just recently? The last time we checked, the CLS score is 0.001 and the ads sections are not there.
Best regards,
IsmaelThank you, I was able to include a min-height to my ad script to prevent some of the shift from happening – as long as my server is fast. The first link is slow response (bad score), the second link with fast server response is better than ever with 0.0 CLS. So once these ads start paying for my hosting, I’ll upgrade. This has been very helpful figuring out what I need to do!
I’ve also been able to improve the google pagespeed score on mobile by implementing an AMP plugin which unfortunately strips out the lovely Enfold design but loads much better; I’ve only got it running on the homepage + blog posts, not my store at all though I’ll probably give in and implement it there too. The Enfold design is so nice, I wish it loaded better on mobile! :(
Hi,
We also noticed that the server response time is lagging on initial load in page speed insights. First load score on mobile is 77, then after immediately testing it again, the score jumps up to 88. CLS score on second test is 0, so everything seems to be OK on that part, but LCP is still not great. The tool recommended removing unused Javascript, one of them is the AMP script, which is odd, but it should improve TTI.
Screenshot of the second test: https://imgur.com/p55plUF
Thank you for your patience.
Best regards,
IsmaelThank you for helping me troubleshoot this. I’ll upgrade my hosting later on and see if it helps anything. For now, it’s mostly good enough.
Hi,
No problem. And I agree, upgrading the hosting plan is probably the best next step to improve the initial response time. Other metrics should follow once the site is on a better server.
Please feel free to open another thread if you need anything else. We will close this one for now.
Have a nice day.
Best regards,
Ismael
- The topic ‘CLS (Content Layout Shift) Troubleshooting help please’ is closed to new replies.