Link to home
Start Free TrialLog in
Avatar of Robert Granlund
Robert GranlundFlag for United States of America

asked on

Page Speed Optimization

Can someone please explain to me how to fix the Cumulative Layout Shift and Largest Content Paint here:
https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fstaverstaging.wpengine.com%2F

For the life of me, I cannot figure out how to fix the Layout shift as it is shown in the Diagnostics  under Avoid Large Layout Shifts.  I am not sure how to fix what it is asking for.
Avatar of Scott Fell
Scott Fell
Flag of United States of America image

That is actually very good page speed. Nice job.

I think that is referring to the chat that shows up on the bottom of the phone. It seemed to have a slight delay. It was not the case when using dev tools in chrome and setting the simulator to a phone, just on my actual phone I noticed it. If that moves things around once loaded, that is what is meant by the shift.
ASKER CERTIFIED SOLUTION
Avatar of HainKurt
HainKurt
Flag of Canada image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
oops, I am using desktop
and desktop score is 96! purrfect...

User generated imageUser generated image
issue is on mobile side...
I dont trust google at this point...
it says, the results are coming from lighthouse
but when I use the lighthouse which is embedded into chrome developer tools, I get this for mobile

User generated image
and this for desktop
User generated image
Avatar of Robert Granlund

ASKER

@hainKurt My scores are slightly lower that yours.  I appreciate the information.  However, The following is what I am the most interested in:

"I cannot figure out how to fix the Layout shift as it is shown in the Diagnostics  under Avoid Large Layout Shifts.  I am not sure how to fix what it is asking for."

Do you have any suggestions about this?
if you change this image

https://staverstaging.wpengine.com/wp-content/uploads/2020/07/homepage-hero-mobile.webp

with a tiny one, or remove it and just use navy color, does it affect largely?
I will try that.
That image is only 65k. I don't think it is the issue.

Did you notice that on the phone how the footer and header have to move into place?  

User generated image




I have not dealt with that issue before. But it eludes to things moving/changing. Try a test home page only for mobile without the animation on the main image and see if anything changes.

You can also see the header jump as well (hamburger menu)
You have very similar results for the theme demo https://developers.google.com/speed/pagespeed/insights/?url=https%3A%2F%2Fstaverstaging.wpengine.com%2F

User generated image

And the animation shows the shift
User generated image
Thank you