Google''s Core Web Vitals update and how it's going to impact your search rankings.

1. 1
CORE
WEB
VITALS
-
@IPULLRANK
Core Web Vitals and Your
Search Rankings
Michael King | Managing Director | mike@ipullrank.com

2. 2
Greetings and Salutations, I’m Mike King (@iPullRank)
Search Marketer of the Year
Author of “The Science of SEO”
International Speaker
Former Sony Recording Artist
JavaScript SEO
Persona-driven SEO
Content Engineering
Pioneer of:

3. 3
https://bestmc.co/iconic

4. 4
CORE
WEB
VITALS
-
@IPULLRANK
The Why Behind Speed

5. 5
5
CORE
WEB
VITALS
-
@IPULLRANK
Google Announced Page
Speed as a Ranking Factor in
2010
Back in 2010, Google announced Page
speed as a ranking factor, but there was a
general lack of understanding for what to
optimize for.
https://webmasters.googleblog.com/201
0/04/using-site-speed-in-web-search-
ranking.html

6. 6
6
CORE
WEB
VITALS
-
@IPULLRANK
Mobile Has Continued to
Explode as the Primary User
Context
Google placed the right bet by going after
mobile several years ago. They clearly are
looking to serve the primary user context

7. 7
7
CORE
WEB
VITALS
-
@IPULLRANK
Mobile First Indexing is
Actually the Bigger Issue
The bigger issue is that Google is crawling
mobile-first now and mobile pages tend to
be plagued with more performance issues
than desktop sites.
https://webmasters.googleblog.com/202
0/03/announcing-mobile-first-indexing-
for.html

8. 8
8
CORE
WEB
VITALS
-
@IPULLRANK
Mobile-Desktop Disparities
are a Far Bigger Deal
In a study I worked on for the Web
Almanac, we identified that only 16.29% of
pages surface the same exact number of
words on both their mobile and desktop
versions.
30.39% of pages show a different link
count.

9. 9
No, seriously, open this link right now:
https://bit.ly/ipr_mobile

10. 10
10
CORE
WEB
VITALS
-
@IPULLRANK
Google Announced Page
Speed as a Mobile Ranking
Factor in 2018
Google also announced that they are
directly incorporating page speed as a
mobile ranking factor.
https://webmasters.googleblog.com/201
8/01/using-page-speed-in-mobile-
search.html

11. 11
11
CORE
WEB
VITALS
-
@IPULLRANK
Google’s Expectations in Mobile
Google has aggressive expectations of load times in the mobile environment.
https://developers.google.com/speed/docs/insights/mobile

12. 12
CORE
WEB
VITALS
-
@IPULLRANK
Accelerated Mobile Pages
Accelerated Mobile Pages, or AMP, is an
open specification for the improvement of
the mobile user experience primarily
focused on editorial content.
Implementation of a series of restrictive
practices to build websites using AMP-
HTML, AMP-JS, and hosting content on
Google’s AMP Cache allows websites to
yield nearly instant load times.
Implementation has also historically
unlocked features such as Top Stories.
Sites can achieve the same and better
speeds on their own with better
engineering, but AMP has been seen as
shortcut to improved page performance.
The initiative was launched by Google in
October of 2015 .

13. 13
13
CORE
WEB
VITALS
-
@IPULLRANK
The Page Experience update is an overall user experience update encompassing speed, security, and elements that contribute user
pain. Google is expanding this definition to be included in their scoring functions or Search algorithms. Core Web Vitals is a subset of
this update which surfaces the primary measures that impact loading, interactivity, and visual stability.
The Upcoming Page Experience Update is More Than Page Speed

14. 14
CORE
WEB
VITALS
-
@IPULLRANK
Core Web Vitals

15. 15
15
CORE
WEB
VITALS
-
@IPULLRANK
How Does Page Experience
Change Things?
It’s a rebrand of what we already knew.
The Core Web Vitals component is largely
a rebranding and deeper explanation of
things that we already expected (aside
from Cumulative Layout Shift).
Everything else is a function of other
components of security, speed or good
user experience that were already
incorporated through other algorithm
updates.
Nevertheless, these things are all
interconnected.

16. 16
CORE
WEB
VITALS
-
@IPULLRANK
Page Speed and Bounce Rate
Having a fast site yields a higher
probability of users remaining on the site.

17. 17
17
CORE
WEB
VITALS
-
@IPULLRANK
Page Load Stresses Users Out
Don’t raise the heart rate of your users in negative ways by making you pages slower than the user expects.

18. 18
18
CORE
WEB
VITALS
-
@IPULLRANK
UX Hierarchy of Needs
The most important part of the user experience to the actual user is that the site loads fast.

19. 19
19
CORE
WEB
VITALS
-
@IPULLRANK
Users Perceive Speed Impacts in the Milliseconds
Users can perceive delays on the millisecond level. Your site improves its ability to keep and convert by shaving off milliseconds.

20. 20
20
CORE
WEB
VITALS
-
@IPULLRANK
How Site Speed Historically Impacted SEO
While page speed may be a tie breaking ranking factor, historically increases in page speed yielded more crawl activity.

21. 21
CORE
WEB
VITALS
-
@IPULLRANK
How Google Measures
Page Speed

22. 22
CORE
WEB
VITALS
-
@IPULLRANK
Googlebot Doesn’t See
Everything
Googlebot has limits at web scale. It may
not wait for all of the JavaScript to
execute and it adheres to robots.txt.
This means that it may not see all the ads
and the site may load faster in its
environment than for an actual user.
In the case of Complex, despite the
generally poor page load times, Googlebot
does not see the ads blocked by the ad
server. This will directly quantity and
depth of crawl.

23. 23
23
CORE
WEB
VITALS
-
@IPULLRANK
Lab Data vs Field Data
Google leverages “lab data” which is an indication of performance in an experimental environment (or how Googlebot would see the
site) and real user metrics (RUM) data which is user performance collected from across their ecosystem.

24. 24
24
CORE
WEB
VITALS
-
@IPULLRANK
Google Analytics is the Equivalent of RUM data

25. 25
CORE
WEB
VITALS
-
@IPULLRANK
What do the Core Web
Vitals Metrics mean?

26. 26
26
CORE
WEB
VITALS
-
@IPULLRANK
What Are the Core Web Vitals?
Core Web Vitals were introduced May 5, 2020 on Google Chrome blog. The 3 new metrics were carefully
chosen for their capacity to be tested in the field and in the lab in order to predictably evaluate pages.
The Core Web Vitals scores can be found through PageSpeed Insights, Google Search Console, and
Lighthouse. They started impacting search rankings in June of 2021.

27. 27
27
CORE
WEB
VITALS
-
@IPULLRANK
The Page Experience Update Was Delayed A Few Times

28. 28
Google Pushed it Back Because Everyone Still Struggled
CWV is a rolling 28 day average; if you didn’t already
make the update it would have been too late.

29. 29
29
CORE
WEB
VITALS
-
@IPULLRANK
How the User Experiences Page Speed
Putting those metrics in context is an indication of how https://medium.com/@addyosmani/progressive-web-apps-with-react-js-part-
2-page-load-performance-33b932d97cf2

30. 30
30
CORE
WEB
VITALS
-
@IPULLRANK
First Contentful Paint (FCP)
The First Contentful Paint (FCP) metric measures the time from when the page starts loading to when any part of the page's
content is rendered on the screen

31. 31
31
CORE
WEB
VITALS
-
@IPULLRANK
Largest Contentful Paint (LCP)
The Largest Contentful Paint (LCP) metric reports the render time of the largest image or text block visible within the viewport. Looks
at the largest image or text block visible within the viewport. Ideally under 2.5 seconds

32. 32
32
CORE
WEB
VITALS
-
@IPULLRANK
Improving Largest Contentful Paint Score
LCP is impacted by server response, poor coding practice, or slow external resources.

33. 33
33
CORE
WEB
VITALS
-
@IPULLRANK
First Input Delay (FID)
FID measures the time from when a user first interacts with a page (i.e. when they click a link, tap on a button, or use a custom,
JavaScript-powered control) to the time when the browser is actually able to begin processing event handlers in response to that
interaction.

34. 34
34
CORE
WEB
VITALS
-
@IPULLRANK
Time to Interactive (TTI)
The TTI metric measures the time from when the page starts loading to when its main sub-resources have loaded and it is capable of
reliably responding to user input quickly.

35. 35
35
CORE
WEB
VITALS
-
@IPULLRANK
Cumulative Layout Shift (CLS)
• “Measures the sum total of all individual layout shift
scores for every unexpected layout shift that occurs
during the entire lifespan of the page”
• Looks at unstable elements in the viewport
• Ideally a score of 0.1 or lower

36. 36
36
CORE
WEB
VITALS
-
@IPULLRANK
Cumulative Layout Shift
CLS measures the sum total of all
individual layout shift scores for every
unexpected layout shift that occurs during
the entire lifespan of the page.
This is a huge problem for ad-driven
publisher sites.

37. 37
37
CORE
WEB
VITALS
-
@IPULLRANK
What You Can Do to Improve Your CLS
Address these:
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

38. 38
38
CORE
WEB
VITALS
-
@IPULLRANK
Add Dimensions And Use Placeholders
Always include width and height size attributes on your
images and video elements
Include width and height size attributes on ads, embeds
and iframes
Anticipate the maximum space needed (can result in some
blank space)

39. 39
CORE
WEB
VITALS
-
@IPULLRANK
How were Sites Doing
Prior to the Rollout?
Data from Searchmetrics’s CWV study

40. 40
CORE
WEB
VITALS
-
@IPULLRANK
Searchmetrics Released a
CWV Study in April
This is definitely a must read to get a
good understanding of where the web
currently stands.
https://www.searchmetrics.com/knowled
ge-hub/studies/core-web-vitals-study-
april-2021/

41. 41
41
CORE
WEB
VITALS
-
@IPULLRANK
96% of Sites Did Not Have Good CWV scores
The study indicates that an overwhelming majority of sites do not have good CWV scores across all three core web vital measures.

42. 42
42
CORE
WEB
VITALS
-
@IPULLRANK
Average Core Web Vital Scores
To give you a sense of where you might stand on average, these are the average values for each of the core web vitals for the top 5 and
top 20 ranking results.

43. 43
43
CORE
WEB
VITALS
-
@IPULLRANK
Speed Index Has a Positive Correlation with Rankings
As you might expect, a fast website is as well ranked website.

44. 44
CORE
WEB
VITALS
-
@IPULLRANK
Positive Correlation of
Cumulative Shift to Ranking
Ayyyye
I truly believe CLS is the big metric to
worry about, especially for
media/publishing websites.
Searchmetrics’s study indicates a positive
correlation between CLS and high
rankings.

45. 45
45
CORE
WEB
VITALS
-
@IPULLRANK
Unused JS is a Key Culprit
The study found that there is a full second in load time that can be shaved off by removing unused code. You can find this in Code
Coverage tool in Chrome.

46. 46
46
CORE
WEB
VITALS
-
@IPULLRANK
Optimizing Images is a Key Opportunity

47. 47
47
CORE
WEB
VITALS
-
@IPULLRANK
YouTube is a Key Culprit in Slowing Pages Down
Total Blocking time is nearly 3X higher for pages that have YouTube videos.

48. 48
CORE
WEB
VITALS
-
@IPULLRANK
What Happened Since
the Rollout?
Data from post-rollout research

49. 49
49
CORE
WEB
VITALS
-
@IPULLRANK
It was a Hot Google Summer
Google had a variety of “Core”, Link
Spam, and Page Experience updates
throughout the summer. There were
more perceptible and named updates
this summer than ever before.
On average, domains saw an increase in
visibility of 2.7%. This is the baseline of
performance improvement.

50. 50
CORE
WEB
VITALS
-
@IPULLRANK
Faster Domains Saw an Extra
1% Bump in Visibility
Domains that scored well on all three
Core Web Vitals saw an average
visibility improvement of 1%.
Source:
https://www.sistrix.com/blog/core-web-
vitals-is-a-measurable-ranking-factor/

51. 51
51
CORE
WEB
VITALS
-
@IPULLRANK
Slow Domains Rank 3.7%
Worse than Fast Domains
Domains that perform poorly on at least
one Core Web Vital saw an average of
3.7% lower visibility than does that
satisfy all CWV.
However, the net effect is that those
domains, on average, had no change as
compared to when all updates began
rolling out since June 15th.

52. 52
Conclusion
You’re leaving traffic and conversions on the table,
if you don’t update your site for Core Web Vitals.

53. 53
CORE
WEB
VITALS
-
@IPULLRANK
How to Fix
Performance Issues

54. 54
Performance Determination
It’s easy to diagnose performance issues; it’s far
more difficult to make changes happen.

55. 55
55
CORE
WEB
VITALS
-
@IPULLRANK
Performance Measurement
Tools
While there are a wealth of tools to help
determine what needs to be updated to
improve the performance of a site, we’ll be
focusing on two:
Google Page Speed Insights
Google Lighthouse

56. 56
CORE
WEB
VITALS
-
@IPULLRANK
PageSpeed Insights
PageSpeed Insights (PSI) reports on the
performance of a page on both mobile
and desktop devices, and provides
suggestions on how that page may be
improved.

57. 57
57
CORE
WEB
VITALS
-
@IPULLRANK Lighthouse
Google Lighthouse is an open-source, automated tool for measuring the quality of web pages. It can be run against any web page,
public or requiring authentication. Google Lighthouse audits performance, accessibility and search engine optimization of web pages.

58. 58
58
CORE
WEB
VITALS
-
@IPULLRANK
A Free Tool For You
Reviewing pages one by
one doesn’t scale. So,
we made you a tool in
Google Sheets that will
track Core Web Vitals
for up to 1000 URLs per
day.
Check it out here:
https://bit.ly/cvw-daa-tool

59. 59
59
CORE
WEB
VITALS
-
@IPULLRANK
Lighthouse Scoring
Calculator
This calculator helps you understand what
features of your page speed may yield
better performance.
https://googlechrome.github.io/lighthous
e/scorecalc/

60. 60
Why Do You Get Different Values for the Same URL?
Network conditions impact speed metrics; Look at
the average performance to determine the true
value.

61. 61
61
CORE
WEB
VITALS
-
@IPULLRANK
Waterfall / Network Tab
Built into Chrome in the Network tab is a visualization that shows each resource as it loads and the timings related to it. This is where
you can diagnose which individual piece of your page is slowing down load times.

62. 62
62
CORE
WEB
VITALS
-
@IPULLRANK
Resource Hints Apply Here
Resource Hints are directives that tell the browser to download or connect to a resource before it’s encountered in the code. The
Network tab will give you an indication of where there are opportunities to implement Resource Hints.
https://www.smashingmagazine.com/2019/04/optimization-performance-resource-hints/

63. 63
63
CORE
WEB
VITALS
-
@IPULLRANK
We Used Rel-Prerender to
Speed Up iPullRank.com
We devised a clever way to leverage the
Google Analytics API to determine what
page a user is likely to visit next and sped
up the site 68.35%.
https://ipullrank.com/how-i-sped-up-my-
site-68-percent-with-one-line-of-code/

64. 64
64
CORE
WEB
VITALS
-
@IPULLRANK
HTTP/3
HTTP/3 or HTTPS of QUIC (Quick UDP Internet Connection) is the latest version of the hypertext transfer protocol. All you really need to
know is that is us MUCH faster than HTTP/1.1 and HTTP/2.

65. 65
65
CORE
WEB
VITALS
-
@IPULLRANK
You got HTTP/2 yet?
Odds are your site is till on HTTP/1.1
despite the fact that HTTP/2 has been
around since 2015.
It too is significantly faster than HTTP/1.1
Don’t worry though...

66. 66
66
CORE
WEB
VITALS
-
@IPULLRANK
You’re Not Alone
Googlebot is just now supporting H/2 in
time for it to be obsolete.
https://webmasters.googleblog.com/202
0/09/googlebot-will-soon-speak-
http2.html

67. 67
67
CORE
WEB
VITALS
-
@IPULLRANK
HTTP/3 Check
Use https://http3check.net/ to check if your site is HTTP/3 capable.

68. 68
68
CORE
WEB
VITALS
-
@IPULLRANK
Performance Tab
Chrome’s Performance tab will give you an indication of the different operations that are slowing your page down. Spoiler alert: It’s
always JavaScript.

69. 69
69
CORE
WEB
VITALS
-
@IPULLRANK
What is a Performance Budget?
“A performance budget is a set of limits imposed on metrics that affect site performance. This could be the total size of a page, the
time it takes to load on a mobile network, or even the number of HTTP requests that are sent. Defining a budget helps get the web
performance conversation started.”

70. 70
CORE
WEB
VITALS
-
@IPULLRANK
Setting Performance
Budgets
You’ll need to work with your
development team to
determine and implement a
performance budget. This
will create a framework for
them to build within.
https://web.dev/performanc
e-budgets-101/

71. 71
71
CORE
WEB
VITALS
-
@IPULLRANK
PerformanceBudget.io
This tool will help you build a performance budget and compare it against your existing site. https://www.performancebudget.io

72. 72
CORE
WEB
VITALS
-
@IPULLRANK
PerformanceBudget.io
Budget Preview
Based on your configuration,
it gives you a sense of page
load expectations for
different connection types.

73. 73
73
CORE
WEB
VITALS
-
@IPULLRANK
Core Web Vitals as Part of the Page Experience
Top Stories will not need to be AMP
Rewards positive page experience rather than punishing the
extremely negative page experience

74. 74
74
CORE
WEB
VITALS
-
@IPULLRANK
Optimize Server Response Time
Cache static assets
Use a CDN
Serve HTML assets cache-first
Establish 3rd party connections early (rel-preconnect)

75. 75
CORE
WEB
VITALS
-
@IPULLRANK
Implement Brotli
Compression
Created by Google and available
for most servers, Brotli
compression improves TTFB for
text heavy websites. This would
be a perfect application for
Edmunds who leads with strong
on-page content.
https://github.com/google/brotli

76. 76
76
CORE
WEB
VITALS
-
@IPULLRANK
Address Render-Blocking JavaScript and CSS
CSS
Minify
Defer non-critical
Inline critical
JavaScript
Minify/compress JavaScript files
Defer unused JavaScript
Minimize unused polyfills

77. 77
77
CORE
WEB
VITALS
-
@IPULLRANK
Improve Slow Resource Load Times
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
<img>
<image> <video>
Block-level elements

78. 78
78
CORE
WEB
VITALS
-
@IPULLRANK
Client-Side Rendering
Minimize critical JavaScript
Use server-side rendering
Use pre-rendering

79. 79
79
CORE
WEB
VITALS
-
@IPULLRANK
First Input Delay (FID)
“Measures load responsiveness because it quantifies the
experience users feel when trying to interact with
unresponsive pages”
Only focuses on input events from discrete actions like
clicks, taps, and key presses
Ideally 100 ms or faster

80. 80
80
CORE
WEB
VITALS
-
@IPULLRANK
What You Can Do To Improve FID
Break up long tasks
Optimize your page for interaction readiness
Use a web worker
Reduce JavaScript execution time

81. 81
81
CORE
WEB
VITALS
-
@IPULLRANK
Break Up Long Tasks
• Code that blocks main thread for 50 ms or more
• Explore code-splitting
• Check the waterfall in Chrome Inspect Element for
examples

82. 82
82
CORE
WEB
VITALS
-
@IPULLRANK
Optimize Your Page for Interaction Readiness
Address Total Blocking Time (TBT) through optimization of
the Critical Rendering Path
Move slow and non-essential components out of Critical
Path

83. 83
83
CORE
WEB
VITALS
-
@IPULLRANK
Use a Web Worker
A Web Worker can run JavaScript in the background
helping to cut thread blocking time
Comlink: A helper library that abstracts postMessage and
makes it easier to use
Workway: A general purpose web worker exporter
Workerize: Move a module into a web worker

84. 84
84
CORE
WEB
VITALS
-
@IPULLRANK
Reduce JavaScript Execution Time
Defer unused JavaScript
Code-splitting
Defer non-critical JavaScript
Minimize unused polyfills

85. 85
CORE
WEB
VITALS
-
@IPULLRANK
Wrapping Up…

86. 86
Focus on the Quick Wins to Prioritize
Prioritizing performance optimizations is all about
the give and take between resourcing, requirements
and impact.

87. 87
Measuring Speed Improvements
Project the conversion impact based on the savings
in milliseconds to get buy-in, then perform a before
and after analysis to prove the value.

88. 88
I’m Mike King
(@iPullRank)

89. 89

90. 90
Good SEO Sits at the Intersection of Art & Science;
That’s Where We Live.
Art Science
Content Strategy &
Marketing
Audience
Research
Technical SEO
Strategy
Content
Engineering

91. 91
This is Who We Work With
HAPPY
CLIENTS

92. Mike King
Founder / Managing Director
@iPullRank
Thank You | Q&A
mike@ipullrank.com
Download these slides:
https://bit.ly/cwv-daa-deck
Follow @iPullRankAgency on Twitter
Award Winning, The World’s Greatest SEO
Featured by
FOR THE ALBUM

93. 93