1.
@SPEAKERNA@patrickstox #SMX

2.
@SPEAKERNA@patrickstox #SMX
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 (message me for an invite)
• Moderator /r/TechSEO on Reddit
Who is Patrick Stox?

3.
@SPEAKERNA@patrickstox #SMX
Mid-June to late August rollout
The Page Experience Update Is Happening Now

4.
@SPEAKERNA@patrickstox #SMX
Is This New?

5.
@SPEAKERNA@patrickstox #SMX
2007 - Safe Browsing
2010 - Page Speed Desktop
2014 - HTTPS
2015 - Mobile Friendly
2017 - No Intrusive Interstitials
2018 - Page Speed Mobile
2021 – Core Web Vitals (Mobile)
Yes and No

6.
@SPEAKERNA@patrickstox #SMX
https://twitter.com/jeffjose/status/1394776921121067012

7.
@SPEAKERNA@patrickstox #SMX
AMP No Longer Required For Top Stories

8.
@SPEAKERNA@patrickstox #SMX
But that doesn’t mean you shouldn’t
work on them
Page Experience Signals Are Small Ranking Signals

9.
@SPEAKERNA@patrickstox #SMX
Image Credits: Google I/O 2021

10.
@SPEAKERNA@patrickstox #SMX
Page Experience Report In Google Search Console

11.
@SPEAKERNA@patrickstox #SMX
Mobile-Friendly

12.
@SPEAKERNA@patrickstox #SMX
https://almanac.httparchive.org/en/2020/seo
10.84% Of Mobile Sites Are Probably Not Mobile Friendly

13.
@SPEAKERNA@patrickstox #SMX
Bulk Checker In Google Search Console
Mobile Usability Report

14.
@SPEAKERNA@patrickstox #SMX
Mobile-Friendly Test
Single Page Check

15.
@SPEAKERNA@patrickstox #SMX
In robots.txt add:
User-Agent: Googlebot
Allow: .js
Allow: .css
Don’t Block CSS Or JS Files

16.
@SPEAKERNA@patrickstox #SMX
Google is shifting how they index content from the desktop to
the mobile version of sites
This started in 2016 and is nearly done
Mobile-First Indexing

17.
@SPEAKERNA@patrickstox #SMX
Safe Browsing

18.
@SPEAKERNA@patrickstox #SMX
Source: https://transparencyreport.google.com/safe-browsing/overview
Browser Warnings

19.
@SPEAKERNA@patrickstox #SMX
Source: https://transparencyreport.google.com/safe-browsing/overview
Search Warnings

20.
@SPEAKERNA@patrickstox #SMX
https://search.google.com/search-console/security-issues
Report in Google Search Console

21.
@SPEAKERNA@patrickstox #SMX
HTTPS
• Authentication
• Data Integrity
• Encryption

22.
@SPEAKERNA@patrickstox #SMX
HTTPS Check

23.
@SPEAKERNA@patrickstox #SMX
Source: https://almanac.httparchive.org/en/2020/seo

24.
@SPEAKERNA@patrickstox #SMX
https://twitter.com/patrickstox/status/1289949065606606857
HTTPS – Uncommon SEO Knowledge

25.
@SPEAKERNA@patrickstox #SMX
HTTPS Is Required For Many Modern
Technologies
• HTTP/2, HTTP/3
• Accelerated Mobile Pages (AMP)
• Progressive Web Apps (PWAs)
• Service Workers
• Geolocation
• Push Notifications

26.
@SPEAKERNA@patrickstox #SMX
Make sure content on the page is easily accessible to the
user.
No Intrusive Interstitials

27.
@SPEAKERNA@patrickstox #SMX

28.
@SPEAKERNA@patrickstox #SMX
Legal notices for cookies or age consent
Banners that use a reasonable amount of screen space and
can be dismissed
What Doesn’t Count Against You

29.
@SPEAKERNA@patrickstox #SMX
Core Web Vitals

30.
@SPEAKERNA@patrickstox #SMX
Source: web.dev/vitals
Largest Contentful Paint (LCP)

31.
@SPEAKERNA@patrickstox #SMX
It’s usually going to be a featured image, text, or maybe the
<h1> tag
LCP Is The Largest Visible Element Loaded In The
Viewport

32.
@SPEAKERNA@patrickstox #SMX
•<img> element
•<image> element inside an <svg> element
•The image inside a <video> element
•Background image loaded with the url() function
•Blocks of text
<svg> and <video> may be added in the future.
But LCP Can Be Any Of These

33.
@SPEAKERNA@patrickstox #SMX
How To See The LCP Element In PageSpeed Insights

34.
@SPEAKERNA@patrickstox #SMX
How To See The LCP Element in DevTools
• Performance > check “Screenshots”
• Click ‘Start profiling and reload page’
• LCP is on the timing graph
• Click the node; this is the element for LCP

35.
@SPEAKERNA@patrickstox #SMX
Source: web.dev/vitals
First Input Delay (FID)

36.
@SPEAKERNA@patrickstox #SMX
FID is the time from when a user interacts with your page until
the page can respond. You can also think of it as
responsiveness.
What Is FID?

37.
@SPEAKERNA@patrickstox #SMX
Counted
•Clicking on a link or button
•Inputting text into a blank field
•Selecting a drop-down menu
•Clicking a checkbox
What Counts As An Interaction?
Not Counted
•Scroll
•Zoom

38.
@SPEAKERNA@patrickstox #SMX
Avoid Long Tasks

39.
@SPEAKERNA@patrickstox #SMX
How To See FID In PageSpeed Insights

40.
@SPEAKERNA@patrickstox #SMX
Source: web.dev/vitals
Cumulative Layout Shift (CLS)

41.
@SPEAKERNA@patrickstox #SMX
CLS measures how elements move around or how stable the
page layout is.
What Is CLS?

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

43.
@SPEAKERNA@patrickstox #SMX
•Images without dimensions
•Ads, embeds, and iframes without dimensions
•Injecting content with JavaScript
•Applying fonts or styles late in the load
What Causes CLS?

44.
@SPEAKERNA@patrickstox #SMX
How To See CLS in PageSpeed Insights

45.
@SPEAKERNA@patrickstox #SMX
How To See CLS in WebPageTest Filmstrip View
Options:
Highlight Layout Shifts
Thumbnail Size: Huge
Thumbnail Interval: 0.1 sec

46.
@SPEAKERNA@patrickstox #SMX
How To See CLS in defaced.dev
Layout Shift GIF Generator

47.
@SPEAKERNA@patrickstox #SMX
https://ahrefs.com/blog/advanced-pagespeed-guide/
Speed Is A Complex Topic

48.
@SPEAKERNA@patrickstox #SMX
Only 24.2% Of Sites Pass Core Web Vitals Benchmarks
Data from CrUX
Real user data

49.
@SPEAKERNA@patrickstox #SMX
Tools To Measure

50.
@SPEAKERNA@patrickstox #SMX
Core Web Vitals report in Google Search Console
Easiest Way To See CWV For Your Site

51.
@SPEAKERNA@patrickstox #SMX
Specific Issues

52.
@SPEAKERNA@patrickstox #SMX
So How Do I Make My Site Load Faster?

53.
@SPEAKERNA@patrickstox #SMX
The smallest page:
<!DOCTYPE HTML>
If you need JavaScript:
<!DOCTYPE HTML><html></html>
Basic Concept #1 - Smaller Is Faster

54.
@SPEAKERNA@patrickstox #SMX
Use a CDN
Basic Concept #2 – Location Matters

55.
@SPEAKERNA@patrickstox #SMX
Note the delay for each additional connection
Basic Concept #3 – Use The Same Server If Possible

56.
@SPEAKERNA@patrickstox #SMX
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

57.
@SPEAKERNA@patrickstox #SMX
Basic Concept #4 – Caching
1st load 2nd load

58.
@SPEAKERNA@patrickstox #SMX
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

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

60.
@SPEAKERNA@patrickstox #SMX
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

61.
@SPEAKERNA@patrickstox #SMX
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
CLS Specific – Include Sizes

62.
@SPEAKERNA@patrickstox #SMX
Lazy Load
<img src=“cat.jpg" alt=“cat" loading="lazy">
Images - Late

63.
@SPEAKERNA@patrickstox #SMX
Remove unused CSS
Minify CSS
Inline Critical CSS
CSS - Early

64.
@SPEAKERNA@patrickstox #SMX
Inline

65.
@SPEAKERNA@patrickstox #SMX
Defer non-critical CSS
<link rel="preload" href="stylesheet.css"
as="style" onload="this.rel='stylesheet'">
CSS - Late

66.
@SPEAKERNA@patrickstox #SMX
Same server if possible
Preload
System fonts over custom fonts font-display: optional
Fonts

67.
@SPEAKERNA@patrickstox #SMX
Minify
Prioritize what’s needed for the site to function only, inline or
preload
Pre-render or server-side rendering if needed
JavaScript - Early

68.
@SPEAKERNA@patrickstox #SMX
Break up long tasks – code splitting
JavaScript Throughout

69.
@SPEAKERNA@patrickstox #SMX
JavaScript - Late

70.
@SPEAKERNA@patrickstox #SMX
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>

71.
@SPEAKERNA@patrickstox #SMX
Make a static copy on your own server and test performance
improvements of changes
https://youtu.be/ULJ-2AUdZYQ
Estimate Impact Of Changes

72.
@SPEAKERNA@patrickstox #SMX
SEE YOU AT THE NEXT SMX!