Jeremy Wagner

Establish network connections early to improve perceived page speed

Learn about rel=preconnect and rel=dns-prefetch resource hints and how to use them.

Why does speed matter?

Adapting to Users with Client Hints

Reduce JavaScript payloads with code splitting

Replace animated GIFs with video for faster page loads

Preload critical assets to improve loading speed

Choose the right image format

Choose the correct level of compression

Reduce JavaScript payloads with tree shaking

Delivering Fast and Light Applications with Save-Data

Avoid large, complex layouts and layout thrashing

Layout is where the browser figures out the geometric information for elements - their size and location in the page. Each element will have explicit or implicit sizing information based on the CSS that was used, the contents of the element, or a parent element. The process is called Layout in Chrome.

Reduce the scope and complexity of style calculations

JavaScript is often the trigger for visual changes. Sometimes that's directly through style manipulations, and sometimes it's calculations that will result in visual changes, like searching or sorting some data. Badly-timed or long-running JavaScript can be a common cause of performance issues, and you should look to minimize its impact where you can.