Skip to main content
UploadLanguage (EN)Support
BusinessMobileSocial MediaMarketingTechnologyArt & PhotosCareerDesignEducationPresentations & Public SpeakingGovernment & NonprofitHealthcareInternetLawLeadership & ManagementAutomotiveEngineeringSoftwareRecruiting & HRRetailSalesServicesScienceSmall Business & EntrepreneurshipFoodEnvironmentEconomy & FinanceData & AnalyticsInvestor RelationsSportsSpiritualNews & PoliticsTravelSelf ImprovementReal EstateEntertainment & HumorHealth & MedicineDevices & HardwareLifestyle
Ahrefs, profile picture
Uploaded byAhrefs
PPTX, PDF517 views

Google's Search Signals For Page Experience - SMX Advanced 2021 Patrick Stox

Patrick Stox is a product advisor, technical SEO, and brand ambassador at Ahrefs who writes for their blog and speaks at conferences. He summarizes that Google's Page Experience update is currently rolling out and focuses on core web vitals like LCP, FID, and CLS. He provides tips on optimizing pages for speed by prioritizing critical resources, using content delivery networks, caching, and other techniques.

Marketing◦
Download to read offline
@SPEAKERNA@patrickstox #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?
@SPEAKERNA@patrickstox #SMX Mid-June to late August rollout The Page Experience Update Is Happening Now
@SPEAKERNA@patrickstox #SMX Is This New?
@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
@SPEAKERNA@patrickstox #SMX https://twitter.com/jeffjose/status/1394776921121067012
@SPEAKERNA@patrickstox #SMX AMP No Longer Required For Top Stories
@SPEAKERNA@patrickstox #SMX But that doesn’t mean you shouldn’t work on them Page Experience Signals Are Small Ranking Signals
@SPEAKERNA@patrickstox #SMX Image Credits: Google I/O 2021
@SPEAKERNA@patrickstox #SMX Page Experience Report In Google Search Console
@SPEAKERNA@patrickstox #SMX Mobile-Friendly
@SPEAKERNA@patrickstox #SMX https://almanac.httparchive.org/en/2020/seo 10.84% Of Mobile Sites Are Probably Not Mobile Friendly
@SPEAKERNA@patrickstox #SMX Bulk Checker In Google Search Console Mobile Usability Report
@SPEAKERNA@patrickstox #SMX Mobile-Friendly Test Single Page Check
@SPEAKERNA@patrickstox #SMX In robots.txt add: User-Agent: Googlebot Allow: .js Allow: .css Don’t Block CSS Or JS Files
@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
@SPEAKERNA@patrickstox #SMX Safe Browsing
@SPEAKERNA@patrickstox #SMX Source: https://transparencyreport.google.com/safe-browsing/overview Browser Warnings
@SPEAKERNA@patrickstox #SMX Source: https://transparencyreport.google.com/safe-browsing/overview Search Warnings
@SPEAKERNA@patrickstox #SMX https://search.google.com/search-console/security-issues Report in Google Search Console
@SPEAKERNA@patrickstox #SMX HTTPS • Authentication • Data Integrity • Encryption
@SPEAKERNA@patrickstox #SMX HTTPS Check
@SPEAKERNA@patrickstox #SMX Source: https://almanac.httparchive.org/en/2020/seo
@SPEAKERNA@patrickstox #SMX https://twitter.com/patrickstox/status/1289949065606606857 HTTPS – Uncommon SEO Knowledge
@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
@SPEAKERNA@patrickstox #SMX Make sure content on the page is easily accessible to the user. No Intrusive Interstitials
@SPEAKERNA@patrickstox #SMX
@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
@SPEAKERNA@patrickstox #SMX Core Web Vitals
@SPEAKERNA@patrickstox #SMX Source: web.dev/vitals Largest Contentful Paint (LCP)
@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
@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
@SPEAKERNA@patrickstox #SMX How To See The LCP Element In PageSpeed Insights
@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
@SPEAKERNA@patrickstox #SMX Source: web.dev/vitals First Input Delay (FID)
@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?
@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
@SPEAKERNA@patrickstox #SMX Avoid Long Tasks
@SPEAKERNA@patrickstox #SMX How To See FID In PageSpeed Insights
@SPEAKERNA@patrickstox #SMX Source: web.dev/vitals Cumulative Layout Shift (CLS)
@SPEAKERNA@patrickstox #SMX CLS measures how elements move around or how stable the page layout is. What Is CLS?
@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
@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?
@SPEAKERNA@patrickstox #SMX How To See CLS in PageSpeed Insights
@SPEAKERNA@patrickstox #SMX How To See CLS in WebPageTest Filmstrip View Options: Highlight Layout Shifts Thumbnail Size: Huge Thumbnail Interval: 0.1 sec
@SPEAKERNA@patrickstox #SMX How To See CLS in defaced.dev Layout Shift GIF Generator
@SPEAKERNA@patrickstox #SMX https://ahrefs.com/blog/advanced-pagespeed-guide/ Speed Is A Complex Topic
@SPEAKERNA@patrickstox #SMX Only 24.2% Of Sites Pass Core Web Vitals Benchmarks Data from CrUX Real user data
@SPEAKERNA@patrickstox #SMX Tools To Measure
@SPEAKERNA@patrickstox #SMX Core Web Vitals report in Google Search Console Easiest Way To See CWV For Your Site
@SPEAKERNA@patrickstox #SMX Specific Issues
@SPEAKERNA@patrickstox #SMX So How Do I Make My Site Load Faster?
@SPEAKERNA@patrickstox #SMX The smallest page: <!DOCTYPE HTML> If you need JavaScript: <!DOCTYPE HTML><html></html> Basic Concept #1 - Smaller Is Faster
@SPEAKERNA@patrickstox #SMX Use a CDN Basic Concept #2 – Location Matters
@SPEAKERNA@patrickstox #SMX Note the delay for each additional connection Basic Concept #3 – Use The Same Server If Possible
@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
@SPEAKERNA@patrickstox #SMX Basic Concept #4 – Caching 1st load 2nd load
@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
@SPEAKERNA@patrickstox #SMX Goal: Load things people see first, then load other things. Basic Concept #5 – Prioritization Of Resources
@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
@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
@SPEAKERNA@patrickstox #SMX Lazy Load <img src=“cat.jpg" alt=“cat" loading="lazy"> Images - Late
@SPEAKERNA@patrickstox #SMX Remove unused CSS Minify CSS Inline Critical CSS CSS - Early
@SPEAKERNA@patrickstox #SMX Inline
@SPEAKERNA@patrickstox #SMX Defer non-critical CSS <link rel="preload" href="stylesheet.css" as="style" onload="this.rel='stylesheet'"> CSS - Late
@SPEAKERNA@patrickstox #SMX Same server if possible Preload System fonts over custom fonts font-display: optional Fonts
@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
@SPEAKERNA@patrickstox #SMX Break up long tasks – code splitting JavaScript Throughout
@SPEAKERNA@patrickstox #SMX JavaScript - Late
@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>
@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
@SPEAKERNA@patrickstox #SMX SEE YOU AT THE NEXT SMX!