Post on 01-Mar-2021
Jamie Indigo, Technical SEO at DeepCrawl
• Real humans want a good web experiences.
• One study found that mobile web users didn’t tend to keep their attention on the screen for more than 4–8 seconds at a time.
• When a page passes CWVs, users are 24% less likely to abandon page loads.
OO:OO:O8
Source:
Source:
▪ They’re all handled by Chromium.
▪ Web vitals were announced by Chromium and swiftly adopted across Google
▪ Google uses complex interconnected systems to build search,
▪ Chromium *is* Google’s Web Rendering Service
1. Breakdown the signal
components and how to win at
them
2. Deep dive into Core Web Vitals
3. How to improve Core Web Vitals
4. How the Ranking Signal will work
▪ Check your pages with the Mobile-Friendly
Test
▪ Monitor your site with GSC’s
Mobile Usability Report.
▪ Reference the guides available for specific
platforms like Wordpress, Drupal, and
Joomla.
▪ Use compatible plugins
▪ Define viewport properties
▪ Use a responsive viewport that matches
device-width
▪ Size content to the viewport
▪ Size clickable elements appropriately
▪ Impacts ranking not indexing
Defined by:
▪ Covering most or all of the
content on a page
▪ Difficult if not impossible to close
(timers, unresponsive or hidden
close buttons)
▪ Popping up without prompting
▪ Accept cookies
▪ Age verification
▪ Dismissable banners (like app
installs)
▪ Login prompts for unindexable
content
▪ Page-to-page interstitials
Source:
▪ Geo-location/language
▪ Responsive scroll boxes
▪ “Welcome mats”
▪ Triggered by an exit intent
▪ sticky sidebars
▪ related posts
▪ share buttons
▪ live chat boxes
▪ coupon popups
▪ User banners as an alternative
▪ Create the interstitial in a way that
search engines can still see the normal
content (without changing URLs)
▪ Render the page content without waiting
for user interaction (tapping a close or
agree button.
Alerts available from Search
Console
▪ Malware
▪ Deceptive pages
▪ Harmful downloads
▪ Uncommon downloads.
▪ Deceptive Sites
▪ Unwanted Software
▪ Understand security vulnerabilities
▪ Keep backups of your site
▪ Have a rollback plan
▪ Use strong passwords unique for every login
▪ Be judicious with administrator privileges
▪ Keep your servers up to date
▪ Learn how console messages can lead to Data Leaks
▪ Vet each and every plugin before installing
▪ Remove any unused plugin
No excuses. We all need:
▪ Encryption: encrypting the exchanged data to keep it secure from eavesdroppers. That means that
while the user is browsing a website, nobody can "listen" to their conversations, track their activities
across multiple pages, or steal their information.
▪ Data integrity: data cannot be modified or corrupted during transfer, intentionally or otherwise,
without being detected.
▪ Authentication: proves that your users communicate with the intended website. It protects against
man-in-the-middle attacks and builds user trust, which translates into other business benefits.
▪ Use robust security certificates
▪ Use server-side 301 redirects
▪ Don’t block HTTPS pages by robots.txt or noindex
tags.
▪ Use only HTTPS content on HTTPS pages.
▪ Use the URL Inspection tool to test whether Googlebot
can access your pages.
▪ Support HSTS (force those internal http links to
secure!)
▪ Make sure the content on your HTTP site and your
HTTPS is the same
▪ Already 55% of your Lighthouse v6
performance score
▪ Components and their respective
weights will evolve
(read as: change at any time for
any reason)
Source:
Lab DataLab data is performance data collected within a controlled environment with predefined device and network settings.
Field DataField data is performance data collected from real page loads your users are experiencing in the wild.
AKA Real User Monitoring (RUM) AKA Emulated Data
StrengthsWill be part of the Page Performance ranking signalCaptures true real-world user experienceEnables correlation to business key performance indicators
WeaknessesRestricted set of metrics
Limited debugging capabilities
WeaknessesMight not capture real-world bottlenecks
Cannot correlate against real-world page KPIs
Strengths• Helpful for debugging performance
issues
• End-to-end and deep visibility into the UX
• Reproducible testing and debugging environment
▪ Represents: Perceived loading
experience
▪ Measurement: the point in the page
load timeline when the page's largest
image or text block is visible within the
viewport.
▪ In DevTools, navigate to the
Timings section of the
Performance panel
▪ Hover over the LCP marker
▪ The element(s) that correspond
to LCP is detailed in the Related
Node field
▪ Goal: 75% of page loads achieve LCP in
< 2.5 seconds
▪ Slow server response times
▪ Render-blocking JavaScript and CSS
▪ Resource load times
▪ Client-side rendering
▪ Optimize your server
▪ Route users to a nearby CDN
▪ Cache assets
▪ Serve HTML pages cache-first
▪ Establish third-party connections
early
▪ Minify CSS
▪ Defer non-critical CSS
▪ Inline critical CSS
▪ Minify and compress JavaScript files
▪ Defer unused JavaScript
▪ Minimize unused polyfills
▪ Optimize and compress images
▪ Preload important resources
▪ Compress text files
▪ Deliver different assets based on
network connection (adaptive serving)
▪ Cache assets using a service worker
▪ Minimize critical JavaScript
▪ Use server-side rendering
▪ Use pre-rendering
▪ FID is only available as field data.
▪ Represents: Responsiveness to user input
▪ Measurement: the time from when a user
first interacts with a page to the time when
the browser is actually able to begin
processing event handlers in response to
that interaction.
▪ TBT Measures: Responsiveness to
user input
▪ TBT Measurement: Total time in which
the main thread is occupied by tasks
taking more than 50ms to complete
▪ FID Goal: < 100 ms TBT Goal: < 300 ms
▪ Heavy JavaScript execution
const heavy = true;
While (heavy) {
console.log("FID
fail")
}
▪ Break up Long Tasks
▪ Optimize your page for interaction
readiness
▪ Use a web worker
▪ Reduce JavaScript execution time
▪ Represents: Visual stability
▪ Measurement: a calculation based on
the number of frames in which
element(s) visually moves and the total
distance in pixels the element(s) moved.
Goal: 75% of page loads have a CLS
score < 0.10
▪ Images without dimensions
▪ Ads, embeds, and iframes without dimensions
▪ Dynamically injected content
▪ Web Fonts causing FOIT/FOUT
▪ Actions waiting for a network response before
updating DOM
▪ Always include width and height size
attributes on images and video elements.
▪ Reserve space for ad slots (and don't
collapse it)
▪ Avoid inserting new content above
existing content
▪ Take care when placing non-sticky ads
near the top of the viewport
▪ Preload fonts
Start with Search Console's new Core Web Vitals report to identify groups of pages that require attention (based on the field data)
Once you've identified pages that need work, use PageSpeed Insights (powered by Lighthouse and Chrome UX Report) to diagnose lab and field issues on a page.
Create a ticket. Do the development work
Test locally (before releasing to prod) with Lighthouse and Chrome DevTools to measure Core Web Vitals.
Brainstorming? web.dev Measurewebpagetest.org
Casually checking in browser? WCV Chrome extension(s)Web Vitals, Addy OsmaniCore SERP Vitals, Chris Johnson
▪ No clarification yet whether the signal will use mobile or desktop CWV data
▪ Given that Google is moving toward mobile-only index, optimizing for mobile
is a smart bet.
“The change for non-AMP content to become eligible to appear
in the mobile Top Stories feature in Search will also roll out in
May 2021. Any page that meets the Google News content
policies will be eligible and we will prioritize pages with great
page experience, whether implemented using AMP or any other
web technology, as we rank the results.”
Timing for bringing page experience to Google Search
▪ Google intends to update the page experience signals on an annual basis
▪ Future CWV metrics will be documented similarly to the initial signal rollout.
Imagine a world where SEOs got notice a year in advance
that Panda was coming!
|￣￣￣￣￣￣￣￣￣￣￣| BE BRAVE ENOUGH TO SUCK AT SOMETHING NEW |＿＿＿＿＿＿＿＿＿＿＿| (\__/) || (•ㅅ•) || / づ
Want to take stage as an SEO speaker?
Want to stay in the audience but see more diversity in SEO events?
United Search is an SEO speaker accelerator designed to specifically aid underrepresented groups, at no cost to students.
● Application - unitedsearch.org/apply
● Mentors - unitedsearch.org/mentors
● Mission - unitedsearch.org/about-us
For more info check out unitedsearch.org or @search_united on Twitter
▪ Blog: The SEO’s Guide to Core Web Vitals
▪ Digital Future Report:
www.deepcrawl.com/digitalfuture
▪ Next webinar…
▪ Survey
▪ Helping users find mobile-friendly pages Webmaster Blog, November 2014
▪ Finding more mobile-friendly search results Webmaster Blog, February 2015
▪ Mobile Friendliness Overview | Google Search Central
▪ Choose a mobile configuration | Google Search Central
▪ Customize your website software | Google Search Central
▪ Our Mobile Planet: US Infographic, Think with Google
▪ Mobile Path to Purchase: Five Key Findings
▪ Mobile Search Moments Study
▪ What to know when building a site for mobile devices | Google Search Central
▪▪▪▪▪▪▪▪▪▪▪
▪ Helping users easily access content on mobile Webmaster Blog, August 2016
▪ English Google Webmaster Central office-hours hangout Youtube @15:33, October 2016
▪ Page-to-page interstitial @schachin Twitter, January 2017
▪ Geo location pop-in @johnmu Twitter May 2017
▪ More Safe Browsing Help for Webmasters Webmaster Blog, August 2016
▪ Safe Browsing protection from even more deceptive attacks Webmaster Blog, November 2015
▪ Google Online Security Blog: More Protection from Unwanted Software Security Blog, February 2015
▪ Google Safe Browsing
▪ Security tips | Google Safety Center
▪ Help, I think I've been hacked! | Web Fundamentals
▪ Social Engineering (Phishing and Deceptive Sites)
▪ Malware and unwanted software | Google Search Central
▪ https://support.google.com/webmasters/answer/3258249#if_uncommon
▪ Malware and unwanted software | Google Search Central
▪ Secure your site with HTTPS | Google Search Central
▪ HTTPS as a ranking signal Webmaster Blog, August 2014
▪ Here's to more HTTPS on the web! Webmaster Blog, November 2016
▪ Why HTTPS matters web.dev, April 2020
▪ Evaluating page experience for a better web Google Search Central
▪ Understanding page experience in Google Search results Google Search Central
▪ Timing for bringing page experience to Google Search Google Search Central
▪ The SEO's Guide to Google's Core Web Vitals DeepCrawl
▪ Core Web Vitals report Search Console Help
▪ Lighthouse Largest Contentful Paint web.dev
▪ GoogleChrome/lighthouse, Github
▪ Google PageSpeed Insights page
▪ Chrome DevTools
▪ Google Search Console
▪ Measure
▪ Web Vitals - Chrome Web Store
▪ Chrome User Experience Report | Chrome UX Report
▪ Largest Contentful Paint (LCP) web.dev
▪ Optimize Largest Contentful Paint web.dev
▪ Lighthouse Largest Contentful Paint web.dev
▪ First Input Delay (FID) web.dev
▪ Total Blocking Time (TBT) web.dev
▪ Optimize First Input Delay web.dev
▪ Lighthouse: Total Blocking Time web.dev
▪ Optimize Cumulative Layout Shift web.dev
▪ Cumulative Layout Shift (CLS) web.dev
▪ Cumulative Layout Shift (CLS) in AMP – The AMP Blog AMP blog, April 2020
▪ Cumulative Layout Shift (CLS) Calculator