Web Vitals: How to Avoid Large Layout Shifts
Introduction
I was checking my website's performance the other day and noticed that its performance score was pretty low. I started digging, and I found multiple root causes. The one that I'm going to discuss in this blog is the Large Layout Shifts. I found it hard to understand what it meant at first, but once I understood what it meant, the fix was pretty easy!
Before we start, you can check your website's score here. Your website will be analyzed, and then you will get your website's score in four categories
- Performance
- Accessibility
- Best Practices
- SEO
What is Large Layout Shifts?
Large Layout Shifts occur when your page elements start moving and jumping around when your page loads. For example, you have a table whose rows' data are added to it when an API call gets its response. Now, imagine there is a button below that table. That button position is inconsistent; it will keep changing based on the number of rows of that table, and this is what it's all about!
How to fix Large Layout Shifts?
That's easy; you have to prevent elements' positions from changing!
In our previous example, you just set the
height
for the table, so no matter how many rows are added, the position of
that button is consistent, and that's it!
Summary
Mumen.blog's Web Vitals Score from PageSpeed Insights
Large Layout Shifts are a huge deal for your website's performance score, so make sure to fix any related issues!