Loading...
Performance Optimization Strategy in 2
02
4
Compiled by
Vitaly Friedman
.
https://smashed.by/perf-strategy
Get a big picture
Run a test with
Yellow
lab Tools
Check the state of things in
CrUX
Check the state of things in
Search Console
Check
resource loading priorities
in Chrome’s Network panel +
differences
Make
good use of DevTools
Check the performance panel in Chrome
Run a test for
HTML site analyzer
Run a test for resource hints with a
resource hints validator
Check the
waterfall in WebPageTest
Check the
Search Console
,
PageSpeed Insights
and
Lighthouse Metrics
Check
Bulk Core Web Vitals
Show
Core Web Vitals overlay
in Chrome DevTools
Check the
carbon footprint impact
Check the
third-parties
with
Requestmap
Consider ways to
accelerate JavaScript in the browser
Check what browsers we are supporting, and how
Check:
Can Include
,
CanIEmail
,
WhatTheTag
,
WhoCanUse
,
Which Icon Is That
,
IsItAccessible?
1. Clean up and reorder the <head>
Turn on Brotli compression
Reduce the markup of
SVG favicons
Pre-connect
to critical domains
Preloading critical font
s
<link rel=
"
preload
"
as=
"
font
"
crossorigin href=
"
font.woff2
"
>
Not loading fonts for users with
saveData
on and
prefers-reduced-data
on
Preload critical files
Measure timings
with Local Overrides
Validate your resource hints
Use
ct.css
and
Capo.js
to sort the <head>
Check for
bfcache support
Use
fewer but larger bundles
for fast delivery
Studied and analyzed by Harry Roberts
2. Manage critical CSS and CSS loading
Define and inline critical CSS per template, but
beware of implications
Consider
Tailwind vs. Semantic CSS
Create
critical.css
and
non-critical.css
for each template
Use
outline: 3px solid red
to check layout shifts
Remove all external SVGs
(inlined
into CSS)
Adjust
Browserslist
to avoid legacy browsers
(IE)
Use the
print stylesheet loading trick
to load non-critical CSS async
3. Improve Web Font Loading
Always
self-host fonts
on your own servers
Identify
font subsetting opportunities
(
WebFontAnalyzer
)
Check
high-performance web font loading
and
best practices for fonts
Use
font-display: optional
(or
swap
) for fast rendering
Please turn on JavaScript to use Paper in all of its awesomeness. ^_^
Get a big picture
1. Clean up and reorder the <head>
2. Manage critical CSS and CSS loading
3. Improve Web Font Loading