⚡️ 62: Prevent layout shifts with CSS

        17 November 2020

⚡️ 62: Prevent layout shifts with CSS

         ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

[issue 62]()

#### Editor’s note

We dedicate a lot of attention to auditing and optimising JavaScript performance, and rightly so. The way we build apps and sites often predominantly lies with the JavaScript domain and brings specific performance issues with it.

However, with that targeted focus, it might be easy to overlook other ways we could be improving perceived speed. Those improvements might lie in our markup, styling, choice of third party tools, CDN providers and their settings and many other places.

It might be easiest to look at most prominent areas, but at some point, we run out of obvious fixes. Get creative and investigate.

Karolina

#### What’s Performance newsletter?

Performance Newsletter is a fortnightly mailing by [Calibre](https://calibreapp.com), featuring web performance tools, talks and resources.

Don’t worry—we don’t spam. If you’d like to leave, [unsubscribe]() at any time. Suggest content [here](mailto:[email protected]).

# Articles

### [Prevent layout shifts with CSS grid stacks](https://www.hsablonniere.com/prevent-layout-shifts-with-css-grid-stacks--qcj5jo/)

[Hubert Sablonnière](https://twitter.com/hsablonniere)

Layout shifts are common during page load, but that’s not the only time they can occur. Learn how to prevent shifts when toggling component state with HTML and CSS.

### [The Case Against Anti-Flicker Snippets](https://andydavies.me/blog/2020/11/16/the-case-against-anti-flicker-snippets/)

[Andy Davies](https://twitter.com/andydavies)

Are you running experiments with Google Optimize and leveraging Anti-Flicker Snippet to prevent performance troubles? Learn how snippets can introduce new issues of their own.

### [Site-Speed Topography](https://csswizardry.com/2020/11/site-speed-topography/)

[Harry Roberts](https://twitter.com/csswizardry)

It can be challenging to build a holistic view of the performance of a given site. Know how to categorise types of pages, visualise and compare their speed.

### [Timing for bringing page experience to Google Search](https://webmasters.googleblog.com/2020/11/timing-for-page-experience.html)

[Jeffrey Jose](https://twitter.com/jeffjose)

In May, Google announced that Core Web Vitals would be used in search ranking. The new ranking, including vitals, will come into effect in May 2021.

# Browsers

### [Warp: Improved JS performance in Firefox 83](https://hacks.mozilla.org/2020/11/warp-improved-js-performance-in-firefox-83/)

[Jan de Mooij](https://twitter.com/jandemooij)

SpiderMonkey, the JavaScript engine used in the Firefox web browser, got a significant speed boost. The update brings improvements to load times, garbage collection and memory usage.

# New in Calibre

### [Release Notes: October](https://calibreapp.com/blog/release-notes-oct-2020)

Here’s our monthly roundup of what was released in October: streamlined test settings management, global headers and cookies, Lighthouse 6.4, Compatibility Mode to prevent failed tests and more.

This email is brought to you by the team at [Calibre](https://calibreapp.com). Our performance monitoring platform helps you deliver stellar user experiences to everyone.

Performance Newsletter is sent from the traditional lands of the Wurundjeri people of the Kulin nation. We acknowledge that sovereignty was never ceded and pay respects to the Elders past, present and emerging.

 Send your suggestions, links and feedback to [[email protected]](mailto:[email protected]).

[View or share this email →]()

[Quickly unsubscribe →]()

[Browse older issues →]()

**Sent by**

<a style='border-collapse: collapse;mso-line-height-rule: exactly;font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";text-decoration: none;font-weight: normal;margin: 0;padding: 0;mso-effects-shadow-color: #2B2B2B;color: #ffffff;'>Calibre Analytics<br/>149A Brunswick Street<br/>Fitzroy Victoria 3065<br/>Australia</a>

                                Don't miss what's next. Subscribe to Performance Newsletter:

                        Email
                        *

                    ← Newer

                ⚡️ 63: Make navigating sites fast

                    Older →

                ⚡️ 61: Get and stay fast