In the field of web performance optimization, Cumulative Layout Shift (CLS) has become a crucial metric. CLS assesses the stability of content on a webpage by quantifying how much visible content shifts during the loading process. Minimizing CLS is key for enhancing user experience and SEO performance, especially on mobile devices.
When you’re building websites, keeping pages stable as they load is super important, especially on mobile. One thing that can mess with this stability is when you play around with the order of items in a CSS grid, especially if you use negative values.
I have had an issue with BetaSeries for years, but I was unable to find any relevant information on the internet to solve it. After finally fixing the issue, I wanted to share my experience.
What’s the Issue?
CSS Grid lets you easily move items around on your webpage. Sometimes, you might be tempted to use negative numbers to get an item to show up earlier than it normally would. But on mobile, where everything loads from top to bottom, this can cause a problem. When an item moves up because of a negative order, it can push other content around. This makes the page jump or shift, which is annoying for people trying to read or interact with your site.
Example Time
Let’s say you have a grid layout, and you decide to move one item to the top using a negative order:
.grid-container {
display: grid;
grid-template-columns: repeat(2, 1fr);
}
.grid-item {
order: 1; /* All items start here */
}
.special-item {
order: -1; /* Moves this item to the top, which might cause shifting */
}This bit of code moves .special-item above other items, potentially causing the page to shift as it loads.
How to Avoid These Shifts
To make sure your website loads smoothly on mobile, here are a few tips:
- Be Careful with Ordering: Try to stick to the natural flow as much as possible. Avoid using negative numbers for ordering.
- Set Sizes: Make sure elements like images have a set size so they don’t suddenly change and move stuff around on the page.
- Start Small: Design your site for mobile first and then add more features for bigger screens. This helps reduce the need to reorder things.
Bottom Line
Using CSS Grid is great, but moving items around too much, especially with negative order, can make your website less stable on mobile. Keep things simple and predictable to create a better experience for everyone visiting your site.