Dropbox Paper

Loading...

Performance Optimization Strategy in 2022

Compiled by Vitaly Friedman. https://smashed.by/perf-strategy

Get a big picture

Check the state of things in CrUX

Run tests with Yellowlab Tools, ct.css + Harry’s video + Slides

Run a test for resource hints with a resource hints validator

Explore front-end architecture with front-end rendering patterns

Check resource loading priorities in Chrome’s Network panel + Priority Hints

Check the performance panel in Chrome

Check the Search Console

Check what browsers we are supporting, and how

Check: Can Include, CanIEmail, WhatTheTag, WhoCanUse, Which Icon Is That

1. Cleaning up and reordering the <head>

Turn on Brotli compression

Use fewer but larger bundles for fast delivery

Reduce the markup of SVG favicons

Preconnecting to critical domains

Preloading critical fonts

Defining web font loading

Not loading fonts for users with saveData on and prefers-reduced-data on

Inlining critical CSS per template

Preload critical files

Experiment with Local Overrides in Chrome

User-uploaded image: image.png

Studied and analyzed by Harry Roberts

2. Managing critical CSS and CSS loading

Define critical CSS per template, make sure image is static (check with outline)

Removing all external SVGs (inlined into CSS)

Adjust Browserslist if needed

Use the print stylesheet loading trick to load non-critical CSS async

Use modern CSS layout and utility classes

Create critical.css and non-critical.css for each template

3. Improving Web Font Loading

Group repaints to avoid reflows

Subsetting fonts

$, §, ×, ", ',’,“,Á,Â, É,Í, Ó, é, é, é, â, î , ô, ñ, ö, ü, ä, ć, ç, ß, á, é, í, ó, ú, š, ž, å, £, €, ÷, –, —, “, ”, ć, ¢, %, ‰, …, ¶

Move to Latin-1 Supplement

Consider adding MijaLCP and ElenaLCP as variants for poor connections

Consider adding font-display, e.g. optional or swap

User-uploaded image: Screen+Shot+2021-03-10+at+8.28.26+PM.png

4. Optimizing the rendering for LCPs

Add preload for LCPs (usually images or large headings)

Optimize images for high-density displays

Optimize images, by default all non-critical images include loading="lazy" and decoding="async"

All images should have height and width defined

Above-the-fold images include loading="eager"