I'm developing a small website (tipping-expert.com), and I'm eager to enhance my Lighthouse metrics. One issue I've faced is with the Cumulative Layout Shift (CLS) metric. On mobile, my layout structure includes a header, a div with the app body, and a footer. The CLS score dropped because the app loads data from an API, leaving the body mostly empty at first, which causes the footer to pop into view unexpectedly. To workaround this, I added a div with a minimum height of 90vh to prevent the footer from being visible too soon. This approach feels pretty hackish, and I'm curious if I'm overreacting or if there's a more effective solution I might have overlooked.
5 Answers
You’re touching on an important balance between metrics and actual user experience. While CLS is worth addressing, sometimes a great user experience can outweigh the number. For example, Turbo Drive can increase input delay but improve perceived performance.
It seems like you might want to explore Server-Side Rendering (SSR) instead of relying on client-side rendering. This could help with your CLS issue and provide a smoother user experience.
If your footer jump doesn’t bother you, then maybe it’s not an issue you need to fix. Your current 'hack' is certainly a workaround but doesn't tackle the root cause. If your content is somewhat dynamic, SSR might be the better approach.
Instead of using a height trick, consider implementing a skeleton loader where the content will appear. This way, you can avoid unexpected jumps in the layout without resorting to hacks.
Fair point! But isn't using a skeleton loader just a form of hack too? I get what you're saying.
Preloading your data in the HTML via a script tag instead of fetching it later might improve the perceived loading performance and reduce CLS. Just ensure your geoip data is still handled properly.
Good point! But the geoip detection complicates preloading. It does work well to adapt content based on user location.
That's true! I think SSR could work, but I have some hang-ups about switching my JS habits.