What's Next for Page Experience - SMX Next 2021 - Patrick Stox

@SPEAKERNA@patrickstox #SMX
What’s Coming Next For Page
Experience?

Product Advisor,Technical SEO, &
Brand Ambassador at
• I write for Ahrefs blog but have written for many industry
publications in the past
• I speak at some conferences like SMX, Pubcon, UnGagged,TechSEO
Boost
• Organizer for the Raleigh SEO Meetup (most successful in US) and
the Beer & SEO Meetup
• We also run a conference, the Raleigh SEO Conference
• FounderTechnical SEO Slack Group
• Moderator /r/TechSEO on Reddit
• Helped define the role of Search Marketing Strategist for the US
Department of Labor
• Lead author for the SEO Chapter of the 2021 Web Almanac
Who is Patrick Stox?

Things Changed Since I Spoke At SMX Advanced

Simply: It's the 5 second timeframe where the most shifting
occurs
https://web.dev/evolving-cls/
Cumulative Layout Shift (CLS) Was Changed

Google Dropped AMP Requirement For Top Stories
And The Label

The Update Finished Rolling Out

People Did Work On It

Only 11.4% of pages had CWV metrics
We Looked At 5.2M Pages In Ahrefs

Most pages had CLS and LCP #s
FID was the metric missing the most
CLS = 99.91%
LCP = 99.79%
FID = 93.08%
For Those That Had Data

This Is What We Saw For Page Level Data
21.27
42.06
98.08
50.24
39.52
32.6
1.84
31.63
39.21
25.34
0.09
18.13
0
20
40
60
80
100
120
CWV CLS FID LCP
CWV Metrics
Good Needs Improvement Poor

Should you work on them?
Page Experience Signals Are Small Ranking Signals

From Google Webmaster Trends Analyst John Mueller

Sistrix Study: Inconclusive IMO

Let’s Talk About Improving CWV

https://developers.google.com/speed/pagespeed/insights/
Use These Tabs In PageSpeed Insights To Filter

Improve FID
Source: web.dev/vitals

Break up long tasks – code splitting
JavaScript

Normally all JavaScript is run on the main thread, but it doesn’t
have to be.
Service Workers

Improve CLS

•Images without dimensions
•Ads, embeds, and iframes without dimensions
•Injecting content with JavaScript
•Applying fonts or styles late in the load
Caused By

Set height and width of images
<img src=“cat.jpg" width="640" height="360" alt=“cat with
string" />
Reserve the maximum space needed for ads
Include Sizes

<img
width="1000"
height="1000"
src="puppy-1000.jpg"
srcset="puppy-1000.jpg 1000w, puppy-2000.jpg 2000w,
puppy-3000.jpg 3000w"
alt="Puppy with balloons"
/>
Responsive Images

Use system fonts if you can
Use font-display: optional and you won’t get shifts, but may not
get your custom font.
Best chance of no shift with custom font is combining <link
rel=preload> and font-display: optional
Avoid Flashes Of Invisible Text (FOIT)

Improve LCP

The smallest page:
<!DOCTYPE HTML>
If you need JavaScript:
<!DOCTYPE HTML><html></html>
Basic Concept #1 - Smaller Is Faster

Use a CDN
Basic Concept #2 – Location Matters

Note the delay for each additional connection
Basic Concept #3 – Use The Same Server If Possible

These start the connections earlier if you need to connect to
3rd parties.
<link rel="preconnect" href="https://site.com">
<link rel="dns-prefetch" href="//asset1.com">
Preconnect and DNS-Prefetch

Basic Concept #4 – Caching
1st load 2nd load

AMP pages clicked from search are prefetched and cached.
Now you can do this with Signed Exchanges for any site.
https://web.dev/signed-exchanges/
AMP’s Magic Trick

Goal: Load things people see first, then load other things.
Basic Concept #5 – Prioritization Of Resources

Do you need it? If so, optimize size + quality
Preload images above the fold
<link rel="preload" as="image" href=“cat.jpg"
imagesrcset=“cat_400px.jpg 400w,
cat_800px.jpg 800w, cat_1600px.jpg 1600w"
imagesizes="50vw">
Images - Early

Lazy Load
<img src=“cat.jpg" alt=“cat" loading="lazy">
Images - Late

Remove unused CSS
Minify CSS
Inline Critical CSS
CSS - Early

Inline

Defer non-critical CSS
<link rel="preload" href="stylesheet.css"
as="style" onload="this.rel='stylesheet'">
CSS - Late

Best: System fonts over custom fonts if possible, if not:
Use the same server
Good: font-display: optional
Okay: Preload
Fonts

Minify
Prioritize what’s needed for the site to function only, inline or
preload
Pre-render or server-side rendering if needed
JavaScript - Early

JavaScript - Late

JavaScript - Late
Normal:
<script src="https://www.domain.com/file.js"></script>
Async:
<script src="https://www.domain.com/file.js" async></script>
Defer:
<script src="https://www.domain.com/file.js" defer></script>

What’s Next?

https://twitter.com/jeffjose/status/1394776921121067012

We want the new metric to:
1.Consider the responsiveness of all user inputs (not just the first one)
2.Capture each event's full duration (not just the delay).
3.Group events together that occur as part of the same logical user
interaction and define that interaction's latency as the max duration of
all its events.
4.Create an aggregate score for all interactions that occur on a page,
throughout its full lifecycle.
https://web.dev/better-responsiveness-metric/
FID Will Probably Change

Page Size – my best guess
You can pass the current metrics by prioritizing assets and still
have an extremely large page
What Metrics Might Come Next Year?

App History API
https://web.dev/vitals-spa-faq/
SPAs Are Hard To Measure

Speculative prerendering
https://web.dev/speculative-prerendering/
Early hints
https://blog.cloudflare.com/early-hints/
Get Things Earlier

Cloudflare:
Early Hints
Signed Exchanges
HTTP/3
Wordpress:
making a team for CWV
Platforms Doing The Work

SEE YOU AT THE NEXT SMX!

What's Next for Page Experience - SMX Next 2021 - Patrick Stox