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:

��⏳

Images via:

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

– Bryan McQuade, web.dev

Source:

▪ 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