Table of contents
- 1. QuickRead
- 2. What causes Cumulative Layout Shift?
- 3. How can you identify which elements are causing CLS?
- 4. Images without dimensions
- 5. Ads, embeds, and iframes without dimensions
- 6. Dynamically injected content
- 7. Web Fonts causing FOIT/FOUT
- 8. After 500 ms of interaction, content is inserted
- 9. Conclusion
3. How can you identify which elements are causing CLS?
- Launch Chrome Dev Tools
- Launch the Command Menu.
- Start typing “Rendering.”
- Use the Show Rendering command to display the rendering.
- Check the Layout Shift Regions box.
- Layout changes are highlighted in blue when you interact with a page.
4. Images without dimensions
width: 100%; /* or max-width: 100%; */
- If puppy.jpg has a height of 360px, the width is 360 x (16 / 9) = 640px.
- If puppy.jpg has a width of 640px, the height is 640 x (9 / 16) = 360px.
aspect-ratio: attr(width) / attr(height);
What about images that are responsive?
srcset=”puppy-1000.jpg 1000w, puppy-2000.jpg 2000w, puppy-3000.jpg 3000w”
alt=”Puppy with balloons”
5. Ads, embeds, and iframes without dimensions
- When a website puts an ad container into the DOM
- When a site uses first-party code to resize the ad container
- When the ad tag library begins to load (and resizes the ad container)
- When the advertisement fills a container (and resizes if the final ad has a different size)
- Reserve space for the ad slot statically.
To put it another way, style the element before loading the ad tag library.By restricting the slot size while inserting advertising in the content flow, you can ensure that any shifts are avoided. If these adverts are served off-screen, they should not cause layout changes.
- Non-sticky advertising should be placed at the top of the viewport with extra care.
- If no ad is returned while the ad slot is visible, provide a placeholder to prevent the reserved area from collapsing.
- By reserving the largest possible size for the ad spot, you may eliminate shifting.
This works, however, it runs the danger of leaving a vacant area if the slot is filled with a smaller ad creative.
- Based on previous data, determine the most likely size for the ad space.
- Examine your embed with developer tools to determine its height.
- Create a placeholder for the embed in these dimensions.
- You can also use media queries to adjust for variations in ad/placeholder sizes across form factors.
- When the embed loads, the enclosing iframe will resize to fit its contents.
6. Dynamically injected content
7. Web Fonts causing FOIT/FOUT
8. After 500 ms of interaction, content is inserted
- Make sure that your transitions and animations that respond to user input last no more than 500 milliseconds.
- Measure and optimize the response time of your APIs.
- Anticipate the outcome of the network call(s) or lengthy treatment by assigning the result area during the first 500 milliseconds, even if it will be filled later (you can use an optimistic UI pattern).
- Implement a distinct user interface paradigm for extended processing and network calls (queuing and completion notification system, modals, etc)
- Only animate CSS attributes in Blink that do not cause layout changes.
Some of our Magento 2 optimization Blogs
8 Oct | 7min Read How [...]
5 Oct | 7min Read | Guest Post [...]
Sept 22, 2021 | 8 min read [...]
Sept 21, 2021 | 8 min read [...]
Sept 16, 2021 | 12 min read [...]
Sept 13, 2021 | 9 min read | Guest [...]
Sept 11, 2021 | 12 min read [...]
Sept 10, 2021 | 10 min read [...]
Sept 08, 2021 | 8 min read [...]
Sept 07, 2021 | 8 min read [...]
Sept 1, 2021 | 8 min read [...]