BrightonSEO, March 2021
With Google's Page Experience ranking signal update rolling out in May 2021, you're running out of time to put in the budget line items for all the fancy SEO tools you'll need! Don't panic. Rachel Anderson and Jamie will show you how to optimize for humans (and algorithm updates) using an underestimated SEO ally: Chrome DevTools.
1. Are you there Page Experience?
It’s me, Dev Tools.
Jamie Indigo, Senior Technical SEO
Rachel Anderson, Senior Technical SEO
@rachelleighrva @jammer_volts
4. What are DevTools?
“Chrome DevTools is a set of web developer
tools built directly into the Google Chrome
browser.”
AKA: Your way to prep for the update without all
those darn extensions
@rachelleighrva @jammer_volts
15. Intrusive Interstitials
● Impacts ranking not indexing
Defined by:
● Covering most or all of the content on a page
● Difficult if not impossible to close
● Popping up without
prompting
@rachelleighrva @jammer_volts
16. Use inspect to ensure crawlability
● Elements panel
● Biggest risk: content isn't available until the
interstitial is dismissed.
● Overlays are fine as long as the content is
available without dismissing or agreeing (or any
interaction)
@rachelleighrva @jammer_volts
19. HTTPS-Security
No excuses! We all need:
● Encryption: encrypting the exchanged data to keep it
secure from eavesdroppers
● Data integrity: data cannot be modified or corrupted
during transfer
● Authentication: proves that your users communicate
with the intended website
@rachelleighrva @jammer_volts
23. Meet the 3 components of Web Vitals
Loading Interactivity Visual Stability
�
�
⏳
Images via: The SEO's Guide to Google's Core Web Vitals
24. Why Web Vitals?
● 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: The Science Behind Web Vitals, Chromium Blog May 2020
26. Field Data
OR: Why don't my tests match the Crux report??
● Field data is the last 28 days averages from real
chrome users on your site
● CrUX data is field data
● CrUX data can be accessed with
Page Speed Insights, in GSC, LightHouse, and the
CrUX API
Source: The Science Behind Web Vitals, Chromium Blog May 2020
27. Lab Data
● Lab data is performance data collected within a
controlled environment with predefined device
and network settings.
● Lab data can be accessed in LightHouse and the
Dev Tools Performance report
Source: The Science Behind Web Vitals, Chromium Blog May 2020
29. Performance Report: Recording a Page Load
1. Press “record”
2. Refresh the
browser
3. Wait for the
page to load
4. Stop profiling
@rachelleighrva @jammer_volts
30. The Performance Report: Metric Markers
● LCP
● FCP
● FP
● DCL
● OL
@rachelleighrva @jammer_volts
31. Largest Contentful Paint
LCP measures loading
performance.
To provide a good user
experience, LCP should
occur within 2.5 seconds
of when the page first
starts loading.
LCP time
(in milliseconds) Color-coding
0–2,500 Green (fast)
2,500-4,000 Orange (moderate)
Over 4,000 Red (slow)
@rachelleighrva @jammer_volts
32. The Performance Report: LCP
● Resource Type
● Resource Size
● Related Node!
@rachelleighrva @jammer_volts
33. Cumulative Layout Shift
Cumulative Layout Shift
(CLS): measures visual
stability.
To provide a good user
experience, pages should
maintain a CLS of less
than 0.1.
CLS calculated score Color-coding
0–0.10 Green (fast)
0.11-0.24 Orange (moderate)
>= 0.25 Red (slow)
@rachelleighrva @jammer_volts
35. The Performance Report: CLS
● CLS is marked in
the experience row
as “layout shift”
● Details appear in
the summary
section
● There can be
multiple layout
shifts
@rachelleighrva @jammer_volts
36. First Input Delay
(FID) measures interactivity.
To provide a good user experience, pages should
have a FID of less than 100 milliseconds.
@rachelleighrva @jammer_volts
37. First Input Delay vs Total Blocking Time
There is no FID in lab data - TBT is the closest substitute
The Total Blocking Time (TBT) metric measures the total
amount of time between First Contentful Paint (FCP) and
Time to Interactive (TTI) where the main thread was blocked
for long enough to prevent input responsiveness.
FID
(in milliseconds)
TBT
(in milliseconds) Color-coding
0-100 0–300 Green (fast)
101-299 301-599 Orange (moderate)
>= 300 Over 600 Red (slow)
@rachelleighrva @jammer_volts
38. Causes of Poor FID
▪ Heavy JavaScript execution
const heavy = true;
While (heavy) {
console.log("FID fail")
}
@rachelleighrva @jammer_volts
39. Performance Report: Long Tasks
Long tasks (which are
added together for TBT)
are labeled in the Main
thread
@rachelleighrva @jammer_volts
40. The Performance Report: TBT
TBT is at the bottom of
the summary panel
(don’t be like Rachel who
manually added TBT from long
tasks for a month before
realizing this)
@rachelleighrva @jammer_volts
41. Finding Unused JavaScript
This is nice but what are
these scripts?
How much unused
JavaScript is there anyway?
@rachelleighrva @jammer_volts
42. Coverage Report: Unused Bytes
● You can identify
which scripts are
the most wasteful
and exactly which
lines are not
executed
@rachelleighrva @jammer_volts
44. Launching May 2021
● Page-level factor
● Score may be a mix of origin summary and
page specific
● The signal will use mobile CWV data
● AMP pages are included in the signal
● Noindexed pages are included in the
signal
@rachelleighrva @jammer_volts
45. Top Stories - AMP No
Longer Required
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
@rachelleighrva @jammer_volts
46. Expect Core Web Vitals to evolve
● Google intends to update the page
experience signals on an annual basis
● Future CWV metrics will be documented
similarly to the initial signal rollout.
@rachelleighrva @jammer_volts
47. The future of SEO is collaborative
Dev
UX
Product
Search
Engines
SEO
@rachelleighrva @jammer_volts
48. There’s SO Much More
● Need more DevTools
in your life?
Watch Chris Johnson’s
talk!
@rachelleighrva @jammer_volts
50. Resources
▪ Performance panel updates, Google
Developers
▪ A Technical SEO Guide to Lighthouse
Performance Metrics
@rachelleighrva @jammer_volts
51. Mobile-Friendly Resources
▪ 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
@rachelleighrva @jammer_volts
53. Mobile-Friendly Testing Resources
▪ In Chrome using device emulation & Lighthouse panel
▪ Check your pages with the Mobile-Friendly Test
▪ Monitor your site with GSC’s Mobile Usability Report
@rachelleighrva @jammer_volts
54. Interstitial Resources
▪ 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
@rachelleighrva @jammer_volts
55. Safe Browsing Resources
▪ 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
@rachelleighrva @jammer_volts
56. HTTPS Resources
▪ 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
@rachelleighrva @jammer_volts
57. Page Experience Ranking Signal Resources
▪ 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
@rachelleighrva @jammer_volts
58. Core Web Vitals Resources
▪ The SEO's Guide to Google's Core Web Vitals DeepCrawl
▪ Core Web Vitals report Search Console Help
▪ Lighthouse Largest Contentful Paint web.dev
@rachelleighrva @jammer_volts
59. Core Web Vitals Testing Tools
▪ 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
@rachelleighrva @jammer_volts
60. LCP Resources
▪ Largest Contentful Paint (LCP) web.dev
▪ Optimize Largest Contentful Paint web.dev
▪ Lighthouse Largest Contentful Paint web.dev
@rachelleighrva @jammer_volts
61. FID/TBT Resources
▪ First Input Delay (FID) web.dev
▪ Total Blocking Time (TBT) web.dev
▪ Optimize First Input Delay web.dev
▪ Lighthouse: Total Blocking Time web.dev
@rachelleighrva @jammer_volts
62. CLS Resources
▪ 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
@rachelleighrva @jammer_volts