Patrick Stox shares tips to optimize site speed at SMX

@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?

Mid-June to late August rollout
The Page Experience Update Is Happening Now

Is This New?

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

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

AMP No Longer Required For Top Stories

But that doesn’t mean you shouldn’t
work on them
Page Experience Signals Are Small Ranking Signals

Image Credits: Google I/O 2021

Page Experience Report In Google Search Console

Mobile-Friendly

https://almanac.httparchive.org/en/2020/seo
10.84% Of Mobile Sites Are Probably Not Mobile Friendly

Bulk Checker In Google Search Console
Mobile Usability Report

Mobile-Friendly Test
Single Page Check

In robots.txt add:
User-Agent: Googlebot
Allow: .js
Allow: .css
Don’t Block CSS Or JS Files

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

Safe Browsing

Source: https://transparencyreport.google.com/safe-browsing/overview
Browser Warnings

Source: https://transparencyreport.google.com/safe-browsing/overview
Search Warnings

https://search.google.com/search-console/security-issues
Report in Google Search Console

HTTPS
• Authentication
• Data Integrity
• Encryption

HTTPS Check

Source: https://almanac.httparchive.org/en/2020/seo

https://twitter.com/patrickstox/status/1289949065606606857
HTTPS – Uncommon SEO Knowledge

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

Make sure content on the page is easily accessible to the
user.
No Intrusive Interstitials

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

Core Web Vitals

Source: web.dev/vitals
Largest Contentful Paint (LCP)

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

•<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

How To See The LCP Element In PageSpeed Insights

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

First Input Delay (FID)

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?

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

Avoid Long Tasks

How To See FID In PageSpeed Insights

Cumulative Layout Shift (CLS)

CLS measures how elements move around or how stable the
page layout is.
What Is CLS?

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

•Images without dimensions
•Ads, embeds, and iframes without dimensions
•Injecting content with JavaScript
•Applying fonts or styles late in the load
What Causes CLS?

How To See CLS in PageSpeed Insights

How To See CLS in WebPageTest Filmstrip View
Options:
Highlight Layout Shifts
Thumbnail Size: Huge
Thumbnail Interval: 0.1 sec

How To See CLS in defaced.dev
Layout Shift GIF Generator

https://ahrefs.com/blog/advanced-pagespeed-guide/
Speed Is A Complex Topic

Only 24.2% Of Sites Pass Core Web Vitals Benchmarks
Data from CrUX
Real user data

Tools To Measure

Core Web Vitals report in Google Search Console
Easiest Way To See CWV For Your Site

Specific Issues

So How Do I Make My Site Load Faster?

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

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

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

Same server if possible
Preload
System fonts over custom fonts font-display: optional
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

Break up long tasks – code splitting
JavaScript Throughout

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>

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

SEE YOU AT THE NEXT SMX!

Patrick Stox shares tips to optimize site speed at SMX

Recomendados

Recomendados

Más contenido relacionado

La actualidad más candente

La actualidad más candente (18)

Similar a Patrick Stox shares tips to optimize site speed at SMX

Similar a Patrick Stox shares tips to optimize site speed at SMX (20)

Más de Ahrefs

Más de Ahrefs (16)

Último

Último (20)

Patrick Stox shares tips to optimize site speed at SMX

Notas del editor