Loading...
Performance Optimization Strategy in 2
02
5
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
Monitor-Core-Web-Vitals-Sentry
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
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