product advisor, technical seo,
TRANSCRIPT
@patrickstox
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 a lot of 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
• Founder Technical 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?
@patrickstox
Mid-June to late August rollout
The Page Experience Update Is Done Rolling Out
@patrickstox
Is This New?
@patrickstox
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
@patrickstox
https://twitter.com/jeffjose/status/1394776921121067012
@patrickstox
AMP No Longer Required For Top Stories
@patrickstox
Should you work on them?
Page Experience Signals Are Small Ranking Signals
@patrickstox
Image Credits: Google I/O 2021
@patrickstox
Page Experience Report In Google Search Console
@patrickstox
Mobile-Friendly
@patrickstox
https://almanac.httparchive.org/en/2020/seo
10.84% Of Mobile Sites Are Probably Not Mobile Friendly
@patrickstox
Bulk Checker In Google Search ConsoleMobile Usability Report
@patrickstox
In robots.txt add:
User-Agent: Googlebot
Allow: .js
Allow: .css
Don’t Block CSS Or JS Files
@patrickstox
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
@patrickstox
HTTPS
• Authentication
• Data Integrity
• Encryption
@patrickstox
HTTPS Check
@patrickstox
• Source: https://almanac.httparchive.org/en/2020/seo
@patrickstox
https://twitter.com/patrickstox/status/1289949065606606857
HTTPS – Uncommon SEO Knowledge
@patrickstox
HTTPS Is Required For Many Modern Technologies
• HTTP/2, HTTP/3
• Accelerated Mobile Pages (AMP)
• Progressive Web Apps (PWAs)
• Service Workers
• Geolocation
• Push Notifications
@patrickstox
Make sure content on the page is easily accessible to the
user.
No Intrusive Interstitials
@patrickstox
@patrickstox
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
@patrickstox
Core Web Vitals
@patrickstox
From Google Webmaster Trends Analyst John Mueller
@patrickstox
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
@patrickstox
• <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
@patrickstox
How To See The LCP Element In PageSpeed Insights
@patrickstox
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
@patrickstox
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?
@patrickstox
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
@patrickstox
Avoid Long Tasks
@patrickstox
How To See Long Tasks In PageSpeed Insights
@patrickstox
CLS measures how elements move around or how stable the
page layout is.
What Is CLS?
@patrickstox
Simply: It's the 5 second timeframe where the most shifting
occurs
https://web.dev/evolving-cls/
Cumulative Layout Shift (CLS) Was Changed Recently
@patrickstox
• Images without dimensions
• Ads, embeds, and iframes without dimensions
• Injecting content with JavaScript
• Applying fonts or styles late in the load
Basically things get added during the page load and move
other things around.
What Causes CLS?
@patrickstox
How To See CLS in PageSpeed Insights
@patrickstox
How To See CLS in WebPageTest Filmstrip View
Options:
Highlight Layout Shifts
Thumbnail Size: Huge
Thumbnail Interval: 0.1 sec
@patrickstox
How To See CLS in defaced.dev
Layout Shift GIF Generator
@patrickstox
https://ahrefs.com/blog/advanced-pagespeed-guide/
Speed Is A Complex Topic
@patrickstox
People Waited Until The Last Minute To Work On This
Data from CrUX - Real user data
@patrickstox
Tools To Measure
@patrickstox
Both Lab And Field Data For Multiple Pages
@patrickstoxCore Web Vitals report in Google Search Console
Easiest Way To See CWV For Your Site
@patrickstox
Specific Issues
@patrickstox
So How Do I Make My Site Load Faster?
@patrickstox
The smallest page:
<!DOCTYPE HTML>
If you need JavaScript:
<!DOCTYPE HTML><html></html>
Basic Concept #1 - Smaller Is Faster
@patrickstox
@patrickstox
Images: Do you need it? If so, optimize size + quality
CSS: Remove unused CSS, Minify CSS
Fonts: System fonts over custom fonts if possible
JS: Remove unused JS, Minify JS
HTML: Minify
Get Rid Of Unused Things & Make The Rest Smaller
@patrickstox
Use a CDN
Basic Concept #2 – Location Matters
@patrickstox
Note the delay for each additional connection
Basic Concept #3 – Use The Same Server If Possible
@patrickstox
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
@patrickstox
Basic Concept #4 – Caching
1st load 2nd load
@patrickstox
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
@patrickstox
Goal: Load things people see first, then load other things.
Basic Concept #5 – Prioritization Of Resources
@patrickstox
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
@patrickstox
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
@patrickstox
Lazy Load
<img src=“cat.jpg" alt=“cat" loading="lazy">
Images - Late
@patrickstox
Inline Critical CSS
CSS - Early
@patrickstox
Inline
@patrickstox
Defer non-critical CSS
<link rel="preload" href="stylesheet.css"
as="style" onload="this.rel='stylesheet'">
CSS - Late
@patrickstox
Best: System fonts over custom fonts if possible, if not:
Good: font-display: optional
Maybe: font-display: swap
Okay: Preload
Fonts
@patrickstox
Prioritize what’s needed for the site to function only, inline
or preload
Pre-render or server-side rendering if needed
JavaScript - Early
@patrickstox
Break up long tasks – code splitting
JavaScript Throughout
@patrickstox
JavaScript - Late
@patrickstox
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>
@patrickstox
Make a static copy on your own server and test performance
improvements of changes
https://youtu.be/ULJ-2AUdZYQ
Estimate Impact Of Changes
@patrickstox