Robert Granlund
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.
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.
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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?
"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?
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?
ASKER
I will try that.
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 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
And the animation shows the shift
And the animation shows the shift
ASKER
Thank you
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.