But Google’s June 2021 update made us reduce our skeletons drastically due to Cumulative Layout Shift (CLS).
Some of our components weren't matching the height of the skeletons.
The CLS happened when a user navigates to a different view and the response caused the content rendering after the grace period of 500ms. We saw this happening a lot by Indian users with mobile data.
And this prevented us from getting all green URLs for the Core Web Vitals.
We stopped using skeletons for each component and moved to a skeleton per page model.
The height of the skeleton was big enough, that re-rendering it even after the 500ms grace period wouldn't cause any CLS.
Problem solved and we got all the green URLs. ✅
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
I'm pro-skeleton placeholder.
But Google’s June 2021 update made us reduce our skeletons drastically due to Cumulative Layout Shift (CLS).
Some of our components weren't matching the height of the skeletons.
The CLS happened when a user navigates to a different view and the response caused the content rendering after the grace period of 500ms. We saw this happening a lot by Indian users with mobile data.
And this prevented us from getting all green URLs for the Core Web Vitals.
We stopped using skeletons for each component and moved to a skeleton per page model.
The height of the skeleton was big enough, that re-rendering it even after the 500ms grace period wouldn't cause any CLS.
Problem solved and we got all the green URLs. ✅