SlideShare a Scribd company logo
Your Name | @Twitterhandle | #TechSEOBoost
Rendering Strategies: Measuring the
Devil's Details in Core Web Vitals
Jamie Indigo
Technical SEO Consultant,
DeepCrawl
Your Name | @Twitterhandle | #TechSEOBoost
Rendering Strategies
Measuring the Devil's Details in Core Web Vitals
Your Name | @Twitterhandle | #TechSEOBoost
Image
credit:
Ian
Myles
Core Web Vitals are coming.
Your Name | @Twitterhandle | #TechSEOBoost
● Understand Core Web Vital metrics and measurement
● Where and how CWV occur
● Rendering strategies with their respective CWV pratfalls, and mitigation
tactics
Our quest
Your Name | @Twitterhandle | #TechSEOBoost
Metrics and Measurements
Core Web Vitals
Your Name | @Twitterhandle | #TechSEOBoost
⏳
Images
via:
The
SEO's
Guide
to
Google's
Core
Web
Vitals
Your Name | @Twitterhandle | #TechSEOBoost
Field Data is performance data
collected from real page loads your
users are experiencing in the wild.
AKA Real User Monitoring (RUM)
Crux data will be used in the Page
Experience Ranking Signal.
Crux = CWV source of truth
Lab Data is performance data
collected within a controlled
environment with predefined device
and network settings.
AKA Emulated Data
Use Lab Data for debugging
performance issues and QAing fixes in
lower environments.
A quick note on Lab vs Field Data
Your Name | @Twitterhandle | #TechSEOBoost
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.
Behavior: Pages using the same page
templates typically share the same LCP
node
Largest Contentful Paint (LCP)
LCP time
(in milliseconds) Color-coding
0–2,500 Green (fast)
2,500-4,000 Orange (moderate)
Over 4,000 Red (slow)
Your Name | @Twitterhandle | #TechSEOBoost
What can be LCP?
Text
blocks
Images
Video
posters
Your Name | @Twitterhandle | #TechSEOBoost
1. Open Chrome Dev Tools to
the Performance panel
2. Tick 'Web Vitals'
3. Click the 'start profiling and
reload page
Define LCP using Chrome DevTools
Your Name | @Twitterhandle | #TechSEOBoost
1. In DevTools, navigate to
the Timings section of the
Performance panel
2. Hover over the LCP marker
3. The element(s) that
correspond to LCP is
detailed in the Related
Node field
Define LCP using Chrome DevTools
Your Name | @Twitterhandle | #TechSEOBoost
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.
Behavior: FID is only available as field data.
First Input Delay (FID)
Your Name | @Twitterhandle | #TechSEOBoost
FID is a way of measuring main thread activity
Your Name | @Twitterhandle | #TechSEOBoost
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.
Use Total Blocking Time (TBT) for lab tests
Your Name | @Twitterhandle | #TechSEOBoost
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.
Behavior: Often an element used across
pages. Probably your cookie notice.
Cumulative Layout Shift (CLS)
Your Name | @Twitterhandle | #TechSEOBoost
CLS is marked in the experience
row as “layout shift”
Details appear in the summary
section
Identify CLS elements using Chrome DevTools
Your Name | @Twitterhandle | #TechSEOBoost
Image
credit:
Joe
Wue
Your Name | @Twitterhandle | #TechSEOBoost
Mobile
Screen
Resolution
Stats
Worldwide
360 x 640
Your Name | @Twitterhandle | #TechSEOBoost
Core Web Vitals measure how
long it takes to complete the
the script functions needed to
paint the above the content.
Your Name | @Twitterhandle | #TechSEOBoost
It's a simple formula
User Screen Content
Your Name | @Twitterhandle | #TechSEOBoost
the process of
turning HTML into
pixels
Rendering:
Your Name | @Twitterhandle | #TechSEOBoost
CWV Arena
Pixel Pipeline
Your Name | @Twitterhandle | #TechSEOBoost
The pixel pipeline
JavaScript Style Layout Paint
Composit
e
Handles work that will result in visual changes
Examples:
● jQuery’s animate function
● Sorting a data set
● Adding DOM elements to the page
Your Name | @Twitterhandle | #TechSEOBoost
DOM
HTML
HTML
Parser
DOM
Tree
JavaScript modifies or adds
content to the DOM.
@Jammer_volts
Step 1: Parsing
turns a chunk of HTML
into DOM nodes
Your Name | @Twitterhandle | #TechSEOBoost
Body
h1 p img
Before JavaScript Body
h1 p img
After JavaScript
ol
li li
li
p img
Your Name | @Twitterhandle | #TechSEOBoost
The pixel pipeline
Style calculations are the process of figuring out which CSS rules apply to which
elements based on matching selectors.
JavaScript Layout Paint
Composit
e
Style
Your Name | @Twitterhandle | #TechSEOBoost
DOM
HTML
Style
Sheets
HTML
Parser
CSS
Parser
DOM
Tree
Style
Rules
Attachment
@Jammer_volts
Step 2: Style
Add style calculations to
the DOM
Your Name | @Twitterhandle | #TechSEOBoost
The pixel pipeline
JavaScript Style
Once the browser knows which rules apply to an element it can begin to calculate
how much space it takes up and where relative to the size of the viewport.
The Core Web Vital metric Cumulative Layout Shift measures this.
Paint
Composit
e
Layout
Your Name | @Twitterhandle | #TechSEOBoost
DOM
HTML
Style
Sheets
HTML
Parser
CSS
Parser
DOM
Tree
Style
Rules
Render
Tree
Attachment
Layout
Step 3: Layout
figure out where DOM
elements end up relative
to one another
Your Name | @Twitterhandle | #TechSEOBoost
p p img h1
img ol img
Your Name | @Twitterhandle | #TechSEOBoost
The pixel pipeline
JavaScript Style Layout
Painting is the process of filling in pixels. It involves drawing out text, colors,
images, borders, and shadows, essentially every visual part of the elements.
The drawing is typically done onto multiple surfaces, often called layers.
Largest content paint occurs here
Composit
e
Paint
Your Name | @Twitterhandle | #TechSEOBoost
Painting
DOM
HTML
Style
Sheets
HTML
Parser
CSS
Parser
DOM
Tree
Style
Rules
Render
Tree
Attachment
Layout
Step 4: Paint
converts layers of styled DOM
elements into pixels
Your Name | @Twitterhandle | #TechSEOBoost
The pixel pipeline
JavaScript Style Layout Paint
Composit
e
Since the parts of the page were drawn into potentially multiple layers they need
to be drawn to the screen in the correct order so that the page renders correctly.
This is especially important for elements that overlap another, since a mistake
could result in one element appearing over the top of another incorrectly.
Your Name | @Twitterhandle | #TechSEOBoost
DOM
HTML
Style
Sheets
HTML
Parser
CSS
Parser
DOM
Tree
Style
Rules
Render
Tree
Attachment
Layout
Painting
Composite
Step 5: Composite
assembles all layers into a final
screen image
Your Name | @Twitterhandle | #TechSEOBoost
What we think
it’ll be like
Your Name | @Twitterhandle | #TechSEOBoost
What it's actually like
Your Name | @Twitterhandle | #TechSEOBoost
The end result is the
same. How we do it
matters.
Your Name | @Twitterhandle | #TechSEOBoost
CWV Pratfalls and Mitigations
Rendering Strategies
Your Name | @Twitterhandle | #TechSEOBoost
● Client Side
● Server Sider
● Static
● Dynamic
● Rehydration
Rendering Strategies
Your Name | @Twitterhandle | #TechSEOBoost
Client Side Rendering (CSR)
<!doctype html>
<head>
<script type="text/javascript"
src="/main.js?ver=1.1.0">
</script>
</head>
<body>
<app-root></app-root>
</body>
</html>
Your Name | @Twitterhandle | #TechSEOBoost
CSR Poor LCP: CSR
Source:
https://web.dev/lcp/
Your Name | @Twitterhandle | #TechSEOBoost
<rel="buyproduct.js"> =
99.5% success rate
Each script has a probability to fail.
With
JavaScrip
t
Without
JavaScrip
t
Your Name | @Twitterhandle | #TechSEOBoost
script1.js
script2.js
script3.js
script4.js
{Product name}
{Product sku}
{Product price}
{Product category}
{Product availability}
{Shipping times}
{Breadcrumbs}
{Product description}
{Product images}
{Product specs}
<!doctype html>
<head>
<script type="text/javascript"
src="/main.js?ver=1.1.0">
</script>
</head>
<body>
<app-root></app-root>
</body>
</html>
Your Name | @Twitterhandle | #TechSEOBoost
script1.js
script2.js
script3.js
script4.js
{Product name}
{Product sku}
{Product price}
{Product category}
{Product availability}
{Shipping times}
{Breadcrumbs}
{Product description}
{Product images}
{Product specs}
mainbundle.js
Your Name | @Twitterhandle | #TechSEOBoost
script1.js
script2.js
script3.js
script4.js
{Product name}
{Product sku}
{Product price}
{Product category}
{Product availability}
{Shipping times}
{Breadcrumbs}
{Product description}
{Product images}
{Product specs}
mainbundle.js
Your Name | @Twitterhandle | #TechSEOBoost
Chains are dependencies.
Each segment of the chain is
dependent on its initiator to
execute.
If a segment of the chain fails,
all of its subsequent content
fails.
Mitigation: Avoid Critical Chains
bundle.js
script1.js
script2.js
script3.js
script4.js
{Product name}
{Product sku}
{Product price}
{Product category}
{Product availability}
{Shipping times}
{Breadcrumbs}
{Product description}
{Product images}
{Product specs}
Your Name | @Twitterhandle | #TechSEOBoost
CSR Poor LCP: Render-blocking JavaScript and
CSS
Your Name | @Twitterhandle | #TechSEOBoost
2 types resources block rendering
<link rel="stylesheet">
when
● Does not have a disabled attribute.
When this attribute is present, the
browser does not download the
stylesheet.
● Does not have a media attribute
that matches the user's device.
<script>
when
● Is in the <head> of the document.
● Does not have a defer attribute.
● Does not have an async attribute.
Your Name | @Twitterhandle | #TechSEOBoost
Tell non-critical assets to wait using asynchronous or defer
attributes
<rel=”myscript.js” async>
<rel=”myscript.js” defer>
Lazy load images in Chrome with native attributes
<img src=”the-traveler.jpg” loading=”lazy”>
Mitigation: Defer non critical assets
Your Name | @Twitterhandle | #TechSEOBoost
Inline small scripts into <head> using <style>
and/or <script> tags for above the fold content
● Ideally inline CSS is immediately after critical
metadata
● Load inline scripts before third party
resources, style sheets and JS
● If the script is over 1 kB, avoid inlining it
(Inline scripts are parsed and compiled on
the main thread.)
● Remove inline functions from script bundles
Mitigation: Inline Critical Assets
Your Name | @Twitterhandle | #TechSEOBoost
CSR Poor LCP: Performance
● Google will limit CPU consumption
● Google will interrupt script
● Excessive CPU consumption negatively impacts indexing
Your Name | @Twitterhandle | #TechSEOBoost
CSR: Poor FID
Heavy JavaScript execution
const heavy = true;
While (heavy) {
console.log("FID fail")
}
Your Name | @Twitterhandle | #TechSEOBoost
Mitigation: Only ship contributing scripts
Your Name | @Twitterhandle | #TechSEOBoost
CSR Poor CLS: Image dimensions
● Images without dimensions
● Ads, embeds, and iframes without
dimensions
Mitigation: Declare dimensions
img {
width: 100%; /* or max-width: 100%; */
height: auto;
}
Your Name | @Twitterhandle | #TechSEOBoost
*
CSR Poor CLS: Loading above existing content
CLS Layout Score = impact fraction * distance fraction
Mitigation: Prioritize Above the Fold content load
Your Name | @Twitterhandle | #TechSEOBoost
CSR Poor CLS: document.write()
Modern Browsers support speculative parsing off of the main thread.
Read as: They parse ahead while scripts are being downloaded and executed.
document.write() ruins all that hard work.
Mitigation: Chances are this isn't the work of your devs. Talk to your
point of content that for "magic" third-party tool.
Your Name | @Twitterhandle | #TechSEOBoost
CSR Poor CLS: Style recalculations
Changing the DOM will cause the browser to
recalculate element styles (and possibly layouts).
Mitigation: Lessen the scope and complexity of
Style Calculations by:
● Reducing the complexity of your selectors.
● Reducing the number of elements being styled.
● Measure your Style Recalculation Cost
● Use BEM (Block, Element, Modifier) a class-
centric methodology.
Your Name | @Twitterhandle | #TechSEOBoost
CSR Poor CLS: Web Fonts causing FOIT/FOUT
A font loading late causes a full flash and re-write.
Mitigation: Preload fonts. Preload tells the browser that
you would like to fetch it sooner than the browser would
otherwise discover it because you are certain that it is
important for the current page.
<link rel="preload" href="/assets/Pacifico-Bold.woff2" as="font" type="font/woff2"
crossorigin>
Your Name | @Twitterhandle | #TechSEOBoost
At the time
of request
<!doctype html>
<head>
<title>Hello, TechSEO Boost!
</head>
<body>
<h1>Wait.This isn’t Boston :(
</h1>
<p>Wash your hands.</p>
</body>
</html>
Server Side Rendering (SSR)
Your Name | @Twitterhandle | #TechSEOBoost
● Slow server response times
● Render-blocking JavaScript and CSS
● Resource load times
● Client-side rendering
Are all the server calculations valuable?
Do they contribute to page content?
SSR: Poor LCP
<!doctype html>
<head>
<title>Hello, TechSEO Boost!
</head>
<body>
<h1>Wait.This isn’t Boston :( </h1>
<p>Wash your hands.</p>
</body>
</html>
Your Name | @Twitterhandle | #TechSEOBoost
SSR Poor LCP: Media Declarations
The default media="all" (or no
declaration) matches all viewport
sizes.
Mitigation: Dynamic media queries
evaluate the viewport when the page
is loaded.
<link href="xsmall.css"
rel="stylesheet" media="xsmall">
<link href="small.css"
rel="stylesheet" media="small">
<link href="print.css" rel="stylesheet"
media="print">
Your Name | @Twitterhandle | #TechSEOBoost
During the
build
Static Rendering
<!doctype html>
<head>
<title>Hello, TechSEO Boost!
</head>
<body>
<h1>Wait.This isn’t Boston :(
</h1>
<p>Wash your hands.</p>
</body>
</html>
Your Name | @Twitterhandle | #TechSEOBoost
Cons
● $$$
● Tricky to get "right"
● Only works for static content – not
for content that’s meant to change
(think personalization and A/B
testing)
Pros
● Low TTFB
● Delivers parsed HTML
Static Rendering: YMMV
Your Name | @Twitterhandle | #TechSEOBoost
Dynamic Rendering
Your Name | @Twitterhandle | #TechSEOBoost
2x
server costs, test
cases, and QA
½
visibility into what is
actually happening
Your Name | @Twitterhandle | #TechSEOBoost
"It is not reasonable."
Your Name | @Twitterhandle | #TechSEOBoost
Rehydration
Above the fold HTML
+
Below the fold scripts
Your Name | @Twitterhandle | #TechSEOBoost
Load what matters when it matters.
Your Name | @Twitterhandle | #TechSEOBoost
Image
credit:
John
Fowler
Your Name | @Twitterhandle | #TechSEOBoost
| ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄|
DON'T BE AFRAID
TO LEARN IN PUBLIC
|___________|
(__/) ||
(•ㅅ•) ||
/ づ

More Related Content

What's hot

Hreflang tags: everything you need to know to start implementing them
Hreflang tags: everything you need to know to start implementing themHreflang tags: everything you need to know to start implementing them
Hreflang tags: everything you need to know to start implementing them
Sara Moccand-Sayegh
 
TECHNICAL SEO QA - SHINING A LIGHT ON INVISIBLE WORK (BrightonSEO April 2022)
TECHNICAL SEO QA - SHINING A LIGHT ON INVISIBLE WORK (BrightonSEO April 2022)TECHNICAL SEO QA - SHINING A LIGHT ON INVISIBLE WORK (BrightonSEO April 2022)
TECHNICAL SEO QA - SHINING A LIGHT ON INVISIBLE WORK (BrightonSEO April 2022)
Gianna Brachetti-Truskawa 🐙
 
Developing Technical SEO Skills - Brighton SEO Sept 2021
Developing Technical SEO Skills - Brighton SEO Sept 2021Developing Technical SEO Skills - Brighton SEO Sept 2021
Developing Technical SEO Skills - Brighton SEO Sept 2021
Mike Osolinski
 
Kleecks - AI-Martech as a game changer-DEF.pdf
Kleecks - AI-Martech as a game changer-DEF.pdfKleecks - AI-Martech as a game changer-DEF.pdf
Kleecks - AI-Martech as a game changer-DEF.pdf
Kleecks
 
The Full Scoop on Google's Title Rewrites
The Full Scoop on Google's Title RewritesThe Full Scoop on Google's Title Rewrites
The Full Scoop on Google's Title Rewrites
Mordy Oberstein
 
SEO Low hanging Fruit: Identifying SEO Opportunities to Achieve Results Fast ...
SEO Low hanging Fruit: Identifying SEO Opportunities to Achieve Results Fast ...SEO Low hanging Fruit: Identifying SEO Opportunities to Achieve Results Fast ...
SEO Low hanging Fruit: Identifying SEO Opportunities to Achieve Results Fast ...
Aleyda Solís
 
SEO Tool Overload😱... Google Data Studio to the rescue
SEO Tool Overload😱... Google Data Studio to the rescueSEO Tool Overload😱... Google Data Studio to the rescue
SEO Tool Overload😱... Google Data Studio to the rescue
Nils De Moor
 
kevin Indig - Internal Link Building on Steroids (Tech SEO Boost )
kevin Indig - Internal Link Building on Steroids (Tech SEO Boost )kevin Indig - Internal Link Building on Steroids (Tech SEO Boost )
kevin Indig - Internal Link Building on Steroids (Tech SEO Boost )
Kevin Indig
 
Paige Hobart - How to do GOOD Keyword Research - Search Advertising Show 2021
Paige Hobart - How to do GOOD Keyword Research - Search Advertising Show 2021Paige Hobart - How to do GOOD Keyword Research - Search Advertising Show 2021
Paige Hobart - How to do GOOD Keyword Research - Search Advertising Show 2021
Paige Hobart
 
Machine Learning use cases for Technical SEO Automation Brighton SEO Patrick ...
Machine Learning use cases for Technical SEO Automation Brighton SEO Patrick ...Machine Learning use cases for Technical SEO Automation Brighton SEO Patrick ...
Machine Learning use cases for Technical SEO Automation Brighton SEO Patrick ...
Ahrefs
 
Goodbye SEO fck ups! Learn to set an SEO Quality Assurance Framework
Goodbye SEO fck ups! Learn to set an SEO Quality Assurance FrameworkGoodbye SEO fck ups! Learn to set an SEO Quality Assurance Framework
Goodbye SEO fck ups! Learn to set an SEO Quality Assurance Framework
Aleyda Solís
 
Core Web Vitals Audit - Sophie Gibson - PDF - BrightonSEO.pdf
Core Web Vitals Audit - Sophie Gibson - PDF - BrightonSEO.pdfCore Web Vitals Audit - Sophie Gibson - PDF - BrightonSEO.pdf
Core Web Vitals Audit - Sophie Gibson - PDF - BrightonSEO.pdf
Sophie Gibson
 
Building a Search Intent-Driven Website Architecture (SEO Mastery Summit 2022...
Building a Search Intent-Driven Website Architecture (SEO Mastery Summit 2022...Building a Search Intent-Driven Website Architecture (SEO Mastery Summit 2022...
Building a Search Intent-Driven Website Architecture (SEO Mastery Summit 2022...
LazarinaStoyanova
 
Beth Barnham Schema Auditing BrightonSEO Slides.pptx
Beth Barnham Schema Auditing BrightonSEO Slides.pptxBeth Barnham Schema Auditing BrightonSEO Slides.pptx
Beth Barnham Schema Auditing BrightonSEO Slides.pptx
BethBarnham1
 
Rendering SEO Manifesto - Why we need to go beyond JavaScript SEO
Rendering SEO Manifesto - Why we need to go beyond JavaScript SEORendering SEO Manifesto - Why we need to go beyond JavaScript SEO
Rendering SEO Manifesto - Why we need to go beyond JavaScript SEO
Onely
 
Identificando oportunidades SEO para mejorar resultados rápidamente #SEODay
Identificando oportunidades SEO para mejorar resultados rápidamente #SEODayIdentificando oportunidades SEO para mejorar resultados rápidamente #SEODay
Identificando oportunidades SEO para mejorar resultados rápidamente #SEODay
Aleyda Solís
 
Core Web Vitals and SEO: Don't Panic. Improve.
Core Web Vitals and SEO: Don't Panic. Improve.Core Web Vitals and SEO: Don't Panic. Improve.
Core Web Vitals and SEO: Don't Panic. Improve.
Ian Lurie
 
BrightonSEO - Master Crawl Budget Optimization for Enterprise Websites
BrightonSEO - Master Crawl Budget Optimization for Enterprise WebsitesBrightonSEO - Master Crawl Budget Optimization for Enterprise Websites
BrightonSEO - Master Crawl Budget Optimization for Enterprise Websites
Manick Bhan
 
BrightonSEO 2022.pdf
BrightonSEO 2022.pdfBrightonSEO 2022.pdf
BrightonSEO 2022.pdf
Ilia Markov
 
Beth Barnham Schema Auditing BrightonSEO Slides.pptx
Beth Barnham Schema Auditing BrightonSEO Slides.pptxBeth Barnham Schema Auditing BrightonSEO Slides.pptx
Beth Barnham Schema Auditing BrightonSEO Slides.pptx
BethBarnham1
 

What's hot (20)

Hreflang tags: everything you need to know to start implementing them
Hreflang tags: everything you need to know to start implementing themHreflang tags: everything you need to know to start implementing them
Hreflang tags: everything you need to know to start implementing them
 
TECHNICAL SEO QA - SHINING A LIGHT ON INVISIBLE WORK (BrightonSEO April 2022)
TECHNICAL SEO QA - SHINING A LIGHT ON INVISIBLE WORK (BrightonSEO April 2022)TECHNICAL SEO QA - SHINING A LIGHT ON INVISIBLE WORK (BrightonSEO April 2022)
TECHNICAL SEO QA - SHINING A LIGHT ON INVISIBLE WORK (BrightonSEO April 2022)
 
Developing Technical SEO Skills - Brighton SEO Sept 2021
Developing Technical SEO Skills - Brighton SEO Sept 2021Developing Technical SEO Skills - Brighton SEO Sept 2021
Developing Technical SEO Skills - Brighton SEO Sept 2021
 
Kleecks - AI-Martech as a game changer-DEF.pdf
Kleecks - AI-Martech as a game changer-DEF.pdfKleecks - AI-Martech as a game changer-DEF.pdf
Kleecks - AI-Martech as a game changer-DEF.pdf
 
The Full Scoop on Google's Title Rewrites
The Full Scoop on Google's Title RewritesThe Full Scoop on Google's Title Rewrites
The Full Scoop on Google's Title Rewrites
 
SEO Low hanging Fruit: Identifying SEO Opportunities to Achieve Results Fast ...
SEO Low hanging Fruit: Identifying SEO Opportunities to Achieve Results Fast ...SEO Low hanging Fruit: Identifying SEO Opportunities to Achieve Results Fast ...
SEO Low hanging Fruit: Identifying SEO Opportunities to Achieve Results Fast ...
 
SEO Tool Overload😱... Google Data Studio to the rescue
SEO Tool Overload😱... Google Data Studio to the rescueSEO Tool Overload😱... Google Data Studio to the rescue
SEO Tool Overload😱... Google Data Studio to the rescue
 
kevin Indig - Internal Link Building on Steroids (Tech SEO Boost )
kevin Indig - Internal Link Building on Steroids (Tech SEO Boost )kevin Indig - Internal Link Building on Steroids (Tech SEO Boost )
kevin Indig - Internal Link Building on Steroids (Tech SEO Boost )
 
Paige Hobart - How to do GOOD Keyword Research - Search Advertising Show 2021
Paige Hobart - How to do GOOD Keyword Research - Search Advertising Show 2021Paige Hobart - How to do GOOD Keyword Research - Search Advertising Show 2021
Paige Hobart - How to do GOOD Keyword Research - Search Advertising Show 2021
 
Machine Learning use cases for Technical SEO Automation Brighton SEO Patrick ...
Machine Learning use cases for Technical SEO Automation Brighton SEO Patrick ...Machine Learning use cases for Technical SEO Automation Brighton SEO Patrick ...
Machine Learning use cases for Technical SEO Automation Brighton SEO Patrick ...
 
Goodbye SEO fck ups! Learn to set an SEO Quality Assurance Framework
Goodbye SEO fck ups! Learn to set an SEO Quality Assurance FrameworkGoodbye SEO fck ups! Learn to set an SEO Quality Assurance Framework
Goodbye SEO fck ups! Learn to set an SEO Quality Assurance Framework
 
Core Web Vitals Audit - Sophie Gibson - PDF - BrightonSEO.pdf
Core Web Vitals Audit - Sophie Gibson - PDF - BrightonSEO.pdfCore Web Vitals Audit - Sophie Gibson - PDF - BrightonSEO.pdf
Core Web Vitals Audit - Sophie Gibson - PDF - BrightonSEO.pdf
 
Building a Search Intent-Driven Website Architecture (SEO Mastery Summit 2022...
Building a Search Intent-Driven Website Architecture (SEO Mastery Summit 2022...Building a Search Intent-Driven Website Architecture (SEO Mastery Summit 2022...
Building a Search Intent-Driven Website Architecture (SEO Mastery Summit 2022...
 
Beth Barnham Schema Auditing BrightonSEO Slides.pptx
Beth Barnham Schema Auditing BrightonSEO Slides.pptxBeth Barnham Schema Auditing BrightonSEO Slides.pptx
Beth Barnham Schema Auditing BrightonSEO Slides.pptx
 
Rendering SEO Manifesto - Why we need to go beyond JavaScript SEO
Rendering SEO Manifesto - Why we need to go beyond JavaScript SEORendering SEO Manifesto - Why we need to go beyond JavaScript SEO
Rendering SEO Manifesto - Why we need to go beyond JavaScript SEO
 
Identificando oportunidades SEO para mejorar resultados rápidamente #SEODay
Identificando oportunidades SEO para mejorar resultados rápidamente #SEODayIdentificando oportunidades SEO para mejorar resultados rápidamente #SEODay
Identificando oportunidades SEO para mejorar resultados rápidamente #SEODay
 
Core Web Vitals and SEO: Don't Panic. Improve.
Core Web Vitals and SEO: Don't Panic. Improve.Core Web Vitals and SEO: Don't Panic. Improve.
Core Web Vitals and SEO: Don't Panic. Improve.
 
BrightonSEO - Master Crawl Budget Optimization for Enterprise Websites
BrightonSEO - Master Crawl Budget Optimization for Enterprise WebsitesBrightonSEO - Master Crawl Budget Optimization for Enterprise Websites
BrightonSEO - Master Crawl Budget Optimization for Enterprise Websites
 
BrightonSEO 2022.pdf
BrightonSEO 2022.pdfBrightonSEO 2022.pdf
BrightonSEO 2022.pdf
 
Beth Barnham Schema Auditing BrightonSEO Slides.pptx
Beth Barnham Schema Auditing BrightonSEO Slides.pptxBeth Barnham Schema Auditing BrightonSEO Slides.pptx
Beth Barnham Schema Auditing BrightonSEO Slides.pptx
 

Similar to TechSEO Boost 2021 - Rendering Strategies: Measuring the Devil’s Details in Core Web Vitals

Rendering strategies: Measuring the devil's details in core web vitals - Jam...
Rendering strategies:  Measuring the devil's details in core web vitals - Jam...Rendering strategies:  Measuring the devil's details in core web vitals - Jam...
Rendering strategies: Measuring the devil's details in core web vitals - Jam...
Jamie Indigo
 
MongoDB.local Atlanta: MongoDB Stitch Tutorial
MongoDB.local Atlanta: MongoDB Stitch TutorialMongoDB.local Atlanta: MongoDB Stitch Tutorial
MongoDB.local Atlanta: MongoDB Stitch Tutorial
MongoDB
 
MongoDB.local Seattle 2019: MongoDB Stitch Tutorial
MongoDB.local Seattle 2019: MongoDB Stitch TutorialMongoDB.local Seattle 2019: MongoDB Stitch Tutorial
MongoDB.local Seattle 2019: MongoDB Stitch Tutorial
MongoDB
 
MongoDB.local Dallas 2019: MongoDB Stitch Tutorial
MongoDB.local Dallas 2019: MongoDB Stitch TutorialMongoDB.local Dallas 2019: MongoDB Stitch Tutorial
MongoDB.local Dallas 2019: MongoDB Stitch Tutorial
MongoDB
 
IT230-Assignment 1 Solved.pdf
IT230-Assignment 1 Solved.pdfIT230-Assignment 1 Solved.pdf
IT230-Assignment 1 Solved.pdf
Dark179280
 
Intro to mobile web application development
Intro to mobile web application developmentIntro to mobile web application development
Intro to mobile web application development
zonathen
 
Let's get accessible!
Let's get accessible!Let's get accessible!
Let's get accessible!
Tady Walsh
 
Build a game with javascript (april 2017)
Build a game with javascript (april 2017)Build a game with javascript (april 2017)
Build a game with javascript (april 2017)
Thinkful
 
Day1
Day1Day1
Mobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web DesignMobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web Design
Cantina
 
Html5 guide
Html5 guideHtml5 guide
An Introduction to Web Components
An Introduction to Web ComponentsAn Introduction to Web Components
An Introduction to Web Components
Red Pill Now
 
Beyond The MVC
Beyond The MVCBeyond The MVC
Beyond The MVC
george.james
 
Presentation Tier optimizations
Presentation Tier optimizationsPresentation Tier optimizations
Presentation Tier optimizations
Anup Hariharan Nair
 
Daniel Egan Msdn Tech Days Oc
Daniel Egan Msdn Tech Days OcDaniel Egan Msdn Tech Days Oc
Daniel Egan Msdn Tech Days Oc
Daniel Egan
 
Developing for LinkedIn's Application Platform
Developing for LinkedIn's Application PlatformDeveloping for LinkedIn's Application Platform
Developing for LinkedIn's Application Platform
Taylor Singletary
 
SummerTerm_PPT.pptx
SummerTerm_PPT.pptxSummerTerm_PPT.pptx
SummerTerm_PPT.pptx
Uday742276
 
Curtin University Frontend Web Development
Curtin University Frontend Web DevelopmentCurtin University Frontend Web Development
Curtin University Frontend Web Development
Daryll Chu
 
Rutgers - FrontPage 98 (Advanced)
Rutgers - FrontPage 98 (Advanced)Rutgers - FrontPage 98 (Advanced)
Rutgers - FrontPage 98 (Advanced)
Michael Dobe, Ph.D.
 
App engine devfest_mexico_10
App engine devfest_mexico_10App engine devfest_mexico_10
App engine devfest_mexico_10
Chris Schalk
 

Similar to TechSEO Boost 2021 - Rendering Strategies: Measuring the Devil’s Details in Core Web Vitals (20)

Rendering strategies: Measuring the devil's details in core web vitals - Jam...
Rendering strategies:  Measuring the devil's details in core web vitals - Jam...Rendering strategies:  Measuring the devil's details in core web vitals - Jam...
Rendering strategies: Measuring the devil's details in core web vitals - Jam...
 
MongoDB.local Atlanta: MongoDB Stitch Tutorial
MongoDB.local Atlanta: MongoDB Stitch TutorialMongoDB.local Atlanta: MongoDB Stitch Tutorial
MongoDB.local Atlanta: MongoDB Stitch Tutorial
 
MongoDB.local Seattle 2019: MongoDB Stitch Tutorial
MongoDB.local Seattle 2019: MongoDB Stitch TutorialMongoDB.local Seattle 2019: MongoDB Stitch Tutorial
MongoDB.local Seattle 2019: MongoDB Stitch Tutorial
 
MongoDB.local Dallas 2019: MongoDB Stitch Tutorial
MongoDB.local Dallas 2019: MongoDB Stitch TutorialMongoDB.local Dallas 2019: MongoDB Stitch Tutorial
MongoDB.local Dallas 2019: MongoDB Stitch Tutorial
 
IT230-Assignment 1 Solved.pdf
IT230-Assignment 1 Solved.pdfIT230-Assignment 1 Solved.pdf
IT230-Assignment 1 Solved.pdf
 
Intro to mobile web application development
Intro to mobile web application developmentIntro to mobile web application development
Intro to mobile web application development
 
Let's get accessible!
Let's get accessible!Let's get accessible!
Let's get accessible!
 
Build a game with javascript (april 2017)
Build a game with javascript (april 2017)Build a game with javascript (april 2017)
Build a game with javascript (april 2017)
 
Day1
Day1Day1
Day1
 
Mobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web DesignMobile Monday Presentation: Responsive Web Design
Mobile Monday Presentation: Responsive Web Design
 
Html5 guide
Html5 guideHtml5 guide
Html5 guide
 
An Introduction to Web Components
An Introduction to Web ComponentsAn Introduction to Web Components
An Introduction to Web Components
 
Beyond The MVC
Beyond The MVCBeyond The MVC
Beyond The MVC
 
Presentation Tier optimizations
Presentation Tier optimizationsPresentation Tier optimizations
Presentation Tier optimizations
 
Daniel Egan Msdn Tech Days Oc
Daniel Egan Msdn Tech Days OcDaniel Egan Msdn Tech Days Oc
Daniel Egan Msdn Tech Days Oc
 
Developing for LinkedIn's Application Platform
Developing for LinkedIn's Application PlatformDeveloping for LinkedIn's Application Platform
Developing for LinkedIn's Application Platform
 
SummerTerm_PPT.pptx
SummerTerm_PPT.pptxSummerTerm_PPT.pptx
SummerTerm_PPT.pptx
 
Curtin University Frontend Web Development
Curtin University Frontend Web DevelopmentCurtin University Frontend Web Development
Curtin University Frontend Web Development
 
Rutgers - FrontPage 98 (Advanced)
Rutgers - FrontPage 98 (Advanced)Rutgers - FrontPage 98 (Advanced)
Rutgers - FrontPage 98 (Advanced)
 
App engine devfest_mexico_10
App engine devfest_mexico_10App engine devfest_mexico_10
App engine devfest_mexico_10
 

More from Catalyst

Closing the Gap: Adopting Omnichannel Strategies for Stronger Brand-Consumer ...
Closing the Gap: Adopting Omnichannel Strategies for Stronger Brand-Consumer ...Closing the Gap: Adopting Omnichannel Strategies for Stronger Brand-Consumer ...
Closing the Gap: Adopting Omnichannel Strategies for Stronger Brand-Consumer ...
Catalyst
 
TechSEO Boost 2021 - Cultivating a Product Mindset for Success
TechSEO Boost 2021 - Cultivating a Product Mindset for SuccessTechSEO Boost 2021 - Cultivating a Product Mindset for Success
TechSEO Boost 2021 - Cultivating a Product Mindset for Success
Catalyst
 
TechSEO Boost 2021 - The Future Is The Past: Tagging And Tracking Through The...
TechSEO Boost 2021 - The Future Is The Past: Tagging And Tracking Through The...TechSEO Boost 2021 - The Future Is The Past: Tagging And Tracking Through The...
TechSEO Boost 2021 - The Future Is The Past: Tagging And Tracking Through The...
Catalyst
 
10 Trends Changing Programmatic
10 Trends Changing Programmatic10 Trends Changing Programmatic
10 Trends Changing Programmatic
Catalyst
 
New Commerce Conference: Charting a Course to Success with Your Retail Media ...
New Commerce Conference: Charting a Course to Success with Your Retail Media ...New Commerce Conference: Charting a Course to Success with Your Retail Media ...
New Commerce Conference: Charting a Course to Success with Your Retail Media ...
Catalyst
 
The New Commerce Conference: The Omni-channel Imperative
The New Commerce Conference: The Omni-channel ImperativeThe New Commerce Conference: The Omni-channel Imperative
The New Commerce Conference: The Omni-channel Imperative
Catalyst
 
New Commerce Commerce: All Things Instacart
New Commerce Commerce: All Things InstacartNew Commerce Commerce: All Things Instacart
New Commerce Commerce: All Things Instacart
Catalyst
 
The Power of SEO: Protect Your Bottom Line & Future Proof Your Brand
The Power of SEO: Protect Your Bottom Line & Future Proof Your BrandThe Power of SEO: Protect Your Bottom Line & Future Proof Your Brand
The Power of SEO: Protect Your Bottom Line & Future Proof Your Brand
Catalyst
 
The Era of Omni-Commerce: New Insights for Dominating the Digital Shelf and B...
The Era of Omni-Commerce: New Insights for Dominating the Digital Shelf and B...The Era of Omni-Commerce: New Insights for Dominating the Digital Shelf and B...
The Era of Omni-Commerce: New Insights for Dominating the Digital Shelf and B...
Catalyst
 
Reignite Your Business with Performance Marketing: 4 Ways to Fuel Your Reopening
Reignite Your Business with Performance Marketing: 4 Ways to Fuel Your ReopeningReignite Your Business with Performance Marketing: 4 Ways to Fuel Your Reopening
Reignite Your Business with Performance Marketing: 4 Ways to Fuel Your Reopening
Catalyst
 
Reignite Your Business with Performance Marketing: 4 Ways to Dial-Up Brand In...
Reignite Your Business with Performance Marketing: 4 Ways to Dial-Up Brand In...Reignite Your Business with Performance Marketing: 4 Ways to Dial-Up Brand In...
Reignite Your Business with Performance Marketing: 4 Ways to Dial-Up Brand In...
Catalyst
 
Evolve Your Social Commerce Strategy: Thinking Beyond Facebook
Evolve Your Social Commerce Strategy: Thinking Beyond FacebookEvolve Your Social Commerce Strategy: Thinking Beyond Facebook
Evolve Your Social Commerce Strategy: Thinking Beyond Facebook
Catalyst
 
B2B SEO: Increase Traffic & Leads in 2020
B2B SEO: Increase Traffic & Leads in 2020B2B SEO: Increase Traffic & Leads in 2020
B2B SEO: Increase Traffic & Leads in 2020
Catalyst
 
Keynote: Bias in Search and Recommender Systems
Keynote: Bias in Search and Recommender SystemsKeynote: Bias in Search and Recommender Systems
Keynote: Bias in Search and Recommender Systems
Catalyst
 
TechSEO Boost 2019: Research Competition
TechSEO Boost 2019: Research CompetitionTechSEO Boost 2019: Research Competition
TechSEO Boost 2019: Research Competition
Catalyst
 
NLP Powered Outreach Link Building
NLP Powered Outreach Link BuildingNLP Powered Outreach Link Building
NLP Powered Outreach Link Building
Catalyst
 
Generating Qualitative Content with GPT-2 in All Languages
Generating Qualitative Content with GPT-2 in All LanguagesGenerating Qualitative Content with GPT-2 in All Languages
Generating Qualitative Content with GPT-2 in All Languages
Catalyst
 
Automate, Create Tools, & Test Ideas Quickly with Google Apps Script
Automate, Create Tools, & Test Ideas Quickly with Google Apps ScriptAutomate, Create Tools, & Test Ideas Quickly with Google Apps Script
Automate, Create Tools, & Test Ideas Quickly with Google Apps Script
Catalyst
 
NLP for SEO
NLP for SEONLP for SEO
NLP for SEO
Catalyst
 
What I Learned Building a Toy Example to Crawl & Render like Google
What I Learned Building a Toy Example to Crawl & Render like GoogleWhat I Learned Building a Toy Example to Crawl & Render like Google
What I Learned Building a Toy Example to Crawl & Render like Google
Catalyst
 

More from Catalyst (20)

Closing the Gap: Adopting Omnichannel Strategies for Stronger Brand-Consumer ...
Closing the Gap: Adopting Omnichannel Strategies for Stronger Brand-Consumer ...Closing the Gap: Adopting Omnichannel Strategies for Stronger Brand-Consumer ...
Closing the Gap: Adopting Omnichannel Strategies for Stronger Brand-Consumer ...
 
TechSEO Boost 2021 - Cultivating a Product Mindset for Success
TechSEO Boost 2021 - Cultivating a Product Mindset for SuccessTechSEO Boost 2021 - Cultivating a Product Mindset for Success
TechSEO Boost 2021 - Cultivating a Product Mindset for Success
 
TechSEO Boost 2021 - The Future Is The Past: Tagging And Tracking Through The...
TechSEO Boost 2021 - The Future Is The Past: Tagging And Tracking Through The...TechSEO Boost 2021 - The Future Is The Past: Tagging And Tracking Through The...
TechSEO Boost 2021 - The Future Is The Past: Tagging And Tracking Through The...
 
10 Trends Changing Programmatic
10 Trends Changing Programmatic10 Trends Changing Programmatic
10 Trends Changing Programmatic
 
New Commerce Conference: Charting a Course to Success with Your Retail Media ...
New Commerce Conference: Charting a Course to Success with Your Retail Media ...New Commerce Conference: Charting a Course to Success with Your Retail Media ...
New Commerce Conference: Charting a Course to Success with Your Retail Media ...
 
The New Commerce Conference: The Omni-channel Imperative
The New Commerce Conference: The Omni-channel ImperativeThe New Commerce Conference: The Omni-channel Imperative
The New Commerce Conference: The Omni-channel Imperative
 
New Commerce Commerce: All Things Instacart
New Commerce Commerce: All Things InstacartNew Commerce Commerce: All Things Instacart
New Commerce Commerce: All Things Instacart
 
The Power of SEO: Protect Your Bottom Line & Future Proof Your Brand
The Power of SEO: Protect Your Bottom Line & Future Proof Your BrandThe Power of SEO: Protect Your Bottom Line & Future Proof Your Brand
The Power of SEO: Protect Your Bottom Line & Future Proof Your Brand
 
The Era of Omni-Commerce: New Insights for Dominating the Digital Shelf and B...
The Era of Omni-Commerce: New Insights for Dominating the Digital Shelf and B...The Era of Omni-Commerce: New Insights for Dominating the Digital Shelf and B...
The Era of Omni-Commerce: New Insights for Dominating the Digital Shelf and B...
 
Reignite Your Business with Performance Marketing: 4 Ways to Fuel Your Reopening
Reignite Your Business with Performance Marketing: 4 Ways to Fuel Your ReopeningReignite Your Business with Performance Marketing: 4 Ways to Fuel Your Reopening
Reignite Your Business with Performance Marketing: 4 Ways to Fuel Your Reopening
 
Reignite Your Business with Performance Marketing: 4 Ways to Dial-Up Brand In...
Reignite Your Business with Performance Marketing: 4 Ways to Dial-Up Brand In...Reignite Your Business with Performance Marketing: 4 Ways to Dial-Up Brand In...
Reignite Your Business with Performance Marketing: 4 Ways to Dial-Up Brand In...
 
Evolve Your Social Commerce Strategy: Thinking Beyond Facebook
Evolve Your Social Commerce Strategy: Thinking Beyond FacebookEvolve Your Social Commerce Strategy: Thinking Beyond Facebook
Evolve Your Social Commerce Strategy: Thinking Beyond Facebook
 
B2B SEO: Increase Traffic & Leads in 2020
B2B SEO: Increase Traffic & Leads in 2020B2B SEO: Increase Traffic & Leads in 2020
B2B SEO: Increase Traffic & Leads in 2020
 
Keynote: Bias in Search and Recommender Systems
Keynote: Bias in Search and Recommender SystemsKeynote: Bias in Search and Recommender Systems
Keynote: Bias in Search and Recommender Systems
 
TechSEO Boost 2019: Research Competition
TechSEO Boost 2019: Research CompetitionTechSEO Boost 2019: Research Competition
TechSEO Boost 2019: Research Competition
 
NLP Powered Outreach Link Building
NLP Powered Outreach Link BuildingNLP Powered Outreach Link Building
NLP Powered Outreach Link Building
 
Generating Qualitative Content with GPT-2 in All Languages
Generating Qualitative Content with GPT-2 in All LanguagesGenerating Qualitative Content with GPT-2 in All Languages
Generating Qualitative Content with GPT-2 in All Languages
 
Automate, Create Tools, & Test Ideas Quickly with Google Apps Script
Automate, Create Tools, & Test Ideas Quickly with Google Apps ScriptAutomate, Create Tools, & Test Ideas Quickly with Google Apps Script
Automate, Create Tools, & Test Ideas Quickly with Google Apps Script
 
NLP for SEO
NLP for SEONLP for SEO
NLP for SEO
 
What I Learned Building a Toy Example to Crawl & Render like Google
What I Learned Building a Toy Example to Crawl & Render like GoogleWhat I Learned Building a Toy Example to Crawl & Render like Google
What I Learned Building a Toy Example to Crawl & Render like Google
 

Recently uploaded

E3 ACP Shade Catalogues - Comprehensive Range of Colors and Finishes
E3 ACP Shade Catalogues - Comprehensive Range of Colors and FinishesE3 ACP Shade Catalogues - Comprehensive Range of Colors and Finishes
E3 ACP Shade Catalogues - Comprehensive Range of Colors and Finishes
E3 Group ACP
 
How AI Enables Modular Content Strategy in Pharma
How AI Enables Modular Content Strategy in PharmaHow AI Enables Modular Content Strategy in Pharma
How AI Enables Modular Content Strategy in Pharma
Ariya
 
SMM OWL Presentation- Best SMM Panel Services
SMM OWL Presentation- Best SMM Panel ServicesSMM OWL Presentation- Best SMM Panel Services
SMM OWL Presentation- Best SMM Panel Services
SMM OWL
 
Emirates : From The Desert To The World
Emirates :  From The Desert To The WorldEmirates :  From The Desert To The World
Emirates : From The Desert To The World
FjorlindaKucuqi
 
Research to Results: A Behavioral Economist's Guide to CRO
Research to Results: A Behavioral Economist's Guide to CROResearch to Results: A Behavioral Economist's Guide to CRO
Research to Results: A Behavioral Economist's Guide to CRO
VWO
 
Executives as Influencers – How Leaders Can Earn Influence to Impact Business...
Executives as Influencers – How Leaders Can Earn Influence to Impact Business...Executives as Influencers – How Leaders Can Earn Influence to Impact Business...
Executives as Influencers – How Leaders Can Earn Influence to Impact Business...
DigiMarCon - Digital Marketing, Media and Advertising Conferences & Exhibitions
 
Personalizing in the Age of AI - John Bourous
Personalizing in the Age of AI - John BourousPersonalizing in the Age of AI - John Bourous
8 Tips on Creating Compelling Content for Your Moment Marketing
8 Tips  on Creating Compelling Content for Your Moment Marketing8 Tips  on Creating Compelling Content for Your Moment Marketing
8 Tips on Creating Compelling Content for Your Moment Marketing
Maxsemo
 
The Intersection Between AI & Paid Media Management - Curtiss Gulash
The Intersection Between AI & Paid Media Management - Curtiss GulashThe Intersection Between AI & Paid Media Management - Curtiss Gulash
The Intersection Between AI & Paid Media Management - Curtiss Gulash
DigiMarCon - Digital Marketing, Media and Advertising Conferences & Exhibitions
 
How ActiveCampaign Can Grow Your Business.pptx
How ActiveCampaign Can Grow Your Business.pptxHow ActiveCampaign Can Grow Your Business.pptx
How ActiveCampaign Can Grow Your Business.pptx
Rakesh Jalan
 
Marketing Plan for The Spark Foundation
Marketing Plan for The Spark Foundation Marketing Plan for The Spark Foundation
Marketing Plan for The Spark Foundation
SyrineTouati
 
The Marketing Vunerabilities in Tech and IP-Led Companies
The Marketing Vunerabilities in Tech and IP-Led CompaniesThe Marketing Vunerabilities in Tech and IP-Led Companies
The Marketing Vunerabilities in Tech and IP-Led Companies
Bethan Vincent
 
Celebrity Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Servic...
Celebrity Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Servic...Celebrity Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Servic...
Celebrity Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Servic...
shanihomely
 
Mastering SEO for Google in the AI Era - Dennis Yu
Mastering SEO for Google in the AI Era - Dennis YuMastering SEO for Google in the AI Era - Dennis Yu
Poster Design Presentation Grip July 2024.pptx
Poster Design Presentation Grip July 2024.pptxPoster Design Presentation Grip July 2024.pptx
Poster Design Presentation Grip July 2024.pptx
The Sparks Foundation
 
Presentation on CRM - Zoho & Salesforce.pptx
Presentation on CRM - Zoho & Salesforce.pptxPresentation on CRM - Zoho & Salesforce.pptx
Presentation on CRM - Zoho & Salesforce.pptx
utkarshkhera98
 
Technical SEO Best Practices: How To Improve Discoverability, Crawlability & ...
Technical SEO Best Practices: How To Improve Discoverability, Crawlability & ...Technical SEO Best Practices: How To Improve Discoverability, Crawlability & ...
Technical SEO Best Practices: How To Improve Discoverability, Crawlability & ...
Search Engine Journal
 
Beyond Cookies Preparing for a Privacy-First Future - Steve Krull
Beyond Cookies Preparing for a Privacy-First Future - Steve KrullBeyond Cookies Preparing for a Privacy-First Future - Steve Krull
Beyond Cookies Preparing for a Privacy-First Future - Steve Krull
DigiMarCon - Digital Marketing, Media and Advertising Conferences & Exhibitions
 

Recently uploaded (20)

E3 ACP Shade Catalogues - Comprehensive Range of Colors and Finishes
E3 ACP Shade Catalogues - Comprehensive Range of Colors and FinishesE3 ACP Shade Catalogues - Comprehensive Range of Colors and Finishes
E3 ACP Shade Catalogues - Comprehensive Range of Colors and Finishes
 
How AI Enables Modular Content Strategy in Pharma
How AI Enables Modular Content Strategy in PharmaHow AI Enables Modular Content Strategy in Pharma
How AI Enables Modular Content Strategy in Pharma
 
Digital Trends 2024, Expand Your Digital Horizons - Fernando Angulo
Digital Trends 2024, Expand Your Digital Horizons - Fernando AnguloDigital Trends 2024, Expand Your Digital Horizons - Fernando Angulo
Digital Trends 2024, Expand Your Digital Horizons - Fernando Angulo
 
SMM OWL Presentation- Best SMM Panel Services
SMM OWL Presentation- Best SMM Panel ServicesSMM OWL Presentation- Best SMM Panel Services
SMM OWL Presentation- Best SMM Panel Services
 
Power of Brand Narrative in the Age of AI - Natalie Black
Power of Brand Narrative in the Age of AI - Natalie BlackPower of Brand Narrative in the Age of AI - Natalie Black
Power of Brand Narrative in the Age of AI - Natalie Black
 
Emirates : From The Desert To The World
Emirates :  From The Desert To The WorldEmirates :  From The Desert To The World
Emirates : From The Desert To The World
 
Research to Results: A Behavioral Economist's Guide to CRO
Research to Results: A Behavioral Economist's Guide to CROResearch to Results: A Behavioral Economist's Guide to CRO
Research to Results: A Behavioral Economist's Guide to CRO
 
Executives as Influencers – How Leaders Can Earn Influence to Impact Business...
Executives as Influencers – How Leaders Can Earn Influence to Impact Business...Executives as Influencers – How Leaders Can Earn Influence to Impact Business...
Executives as Influencers – How Leaders Can Earn Influence to Impact Business...
 
Personalizing in the Age of AI - John Bourous
Personalizing in the Age of AI - John BourousPersonalizing in the Age of AI - John Bourous
Personalizing in the Age of AI - John Bourous
 
8 Tips on Creating Compelling Content for Your Moment Marketing
8 Tips  on Creating Compelling Content for Your Moment Marketing8 Tips  on Creating Compelling Content for Your Moment Marketing
8 Tips on Creating Compelling Content for Your Moment Marketing
 
The Intersection Between AI & Paid Media Management - Curtiss Gulash
The Intersection Between AI & Paid Media Management - Curtiss GulashThe Intersection Between AI & Paid Media Management - Curtiss Gulash
The Intersection Between AI & Paid Media Management - Curtiss Gulash
 
How ActiveCampaign Can Grow Your Business.pptx
How ActiveCampaign Can Grow Your Business.pptxHow ActiveCampaign Can Grow Your Business.pptx
How ActiveCampaign Can Grow Your Business.pptx
 
Marketing Plan for The Spark Foundation
Marketing Plan for The Spark Foundation Marketing Plan for The Spark Foundation
Marketing Plan for The Spark Foundation
 
The Marketing Vunerabilities in Tech and IP-Led Companies
The Marketing Vunerabilities in Tech and IP-Led CompaniesThe Marketing Vunerabilities in Tech and IP-Led Companies
The Marketing Vunerabilities in Tech and IP-Led Companies
 
Celebrity Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Servic...
Celebrity Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Servic...Celebrity Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Servic...
Celebrity Girls Call Mumbai 🎈🔥9930687706 🔥💋🎈 Provide Best And Top Girl Servic...
 
Mastering SEO for Google in the AI Era - Dennis Yu
Mastering SEO for Google in the AI Era - Dennis YuMastering SEO for Google in the AI Era - Dennis Yu
Mastering SEO for Google in the AI Era - Dennis Yu
 
Poster Design Presentation Grip July 2024.pptx
Poster Design Presentation Grip July 2024.pptxPoster Design Presentation Grip July 2024.pptx
Poster Design Presentation Grip July 2024.pptx
 
Presentation on CRM - Zoho & Salesforce.pptx
Presentation on CRM - Zoho & Salesforce.pptxPresentation on CRM - Zoho & Salesforce.pptx
Presentation on CRM - Zoho & Salesforce.pptx
 
Technical SEO Best Practices: How To Improve Discoverability, Crawlability & ...
Technical SEO Best Practices: How To Improve Discoverability, Crawlability & ...Technical SEO Best Practices: How To Improve Discoverability, Crawlability & ...
Technical SEO Best Practices: How To Improve Discoverability, Crawlability & ...
 
Beyond Cookies Preparing for a Privacy-First Future - Steve Krull
Beyond Cookies Preparing for a Privacy-First Future - Steve KrullBeyond Cookies Preparing for a Privacy-First Future - Steve Krull
Beyond Cookies Preparing for a Privacy-First Future - Steve Krull
 

TechSEO Boost 2021 - Rendering Strategies: Measuring the Devil’s Details in Core Web Vitals

  • 1. Your Name | @Twitterhandle | #TechSEOBoost Rendering Strategies: Measuring the Devil's Details in Core Web Vitals Jamie Indigo Technical SEO Consultant, DeepCrawl
  • 2. Your Name | @Twitterhandle | #TechSEOBoost Rendering Strategies Measuring the Devil's Details in Core Web Vitals
  • 3. Your Name | @Twitterhandle | #TechSEOBoost Image credit: Ian Myles Core Web Vitals are coming.
  • 4. Your Name | @Twitterhandle | #TechSEOBoost ● Understand Core Web Vital metrics and measurement ● Where and how CWV occur ● Rendering strategies with their respective CWV pratfalls, and mitigation tactics Our quest
  • 5. Your Name | @Twitterhandle | #TechSEOBoost Metrics and Measurements Core Web Vitals
  • 6. Your Name | @Twitterhandle | #TechSEOBoost ⏳ Images via: The SEO's Guide to Google's Core Web Vitals
  • 7. Your Name | @Twitterhandle | #TechSEOBoost Field Data is performance data collected from real page loads your users are experiencing in the wild. AKA Real User Monitoring (RUM) Crux data will be used in the Page Experience Ranking Signal. Crux = CWV source of truth Lab Data is performance data collected within a controlled environment with predefined device and network settings. AKA Emulated Data Use Lab Data for debugging performance issues and QAing fixes in lower environments. A quick note on Lab vs Field Data
  • 8. Your Name | @Twitterhandle | #TechSEOBoost 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. Behavior: Pages using the same page templates typically share the same LCP node Largest Contentful Paint (LCP) LCP time (in milliseconds) Color-coding 0–2,500 Green (fast) 2,500-4,000 Orange (moderate) Over 4,000 Red (slow)
  • 9. Your Name | @Twitterhandle | #TechSEOBoost What can be LCP? Text blocks Images Video posters
  • 10. Your Name | @Twitterhandle | #TechSEOBoost 1. Open Chrome Dev Tools to the Performance panel 2. Tick 'Web Vitals' 3. Click the 'start profiling and reload page Define LCP using Chrome DevTools
  • 11. Your Name | @Twitterhandle | #TechSEOBoost 1. In DevTools, navigate to the Timings section of the Performance panel 2. Hover over the LCP marker 3. The element(s) that correspond to LCP is detailed in the Related Node field Define LCP using Chrome DevTools
  • 12. Your Name | @Twitterhandle | #TechSEOBoost 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. Behavior: FID is only available as field data. First Input Delay (FID)
  • 13. Your Name | @Twitterhandle | #TechSEOBoost FID is a way of measuring main thread activity
  • 14. Your Name | @Twitterhandle | #TechSEOBoost 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. Use Total Blocking Time (TBT) for lab tests
  • 15. Your Name | @Twitterhandle | #TechSEOBoost 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. Behavior: Often an element used across pages. Probably your cookie notice. Cumulative Layout Shift (CLS)
  • 16. Your Name | @Twitterhandle | #TechSEOBoost CLS is marked in the experience row as “layout shift” Details appear in the summary section Identify CLS elements using Chrome DevTools
  • 17. Your Name | @Twitterhandle | #TechSEOBoost Image credit: Joe Wue
  • 18. Your Name | @Twitterhandle | #TechSEOBoost Mobile Screen Resolution Stats Worldwide 360 x 640
  • 19. Your Name | @Twitterhandle | #TechSEOBoost Core Web Vitals measure how long it takes to complete the the script functions needed to paint the above the content.
  • 20. Your Name | @Twitterhandle | #TechSEOBoost It's a simple formula User Screen Content
  • 21. Your Name | @Twitterhandle | #TechSEOBoost the process of turning HTML into pixels Rendering:
  • 22. Your Name | @Twitterhandle | #TechSEOBoost CWV Arena Pixel Pipeline
  • 23. Your Name | @Twitterhandle | #TechSEOBoost The pixel pipeline JavaScript Style Layout Paint Composit e Handles work that will result in visual changes Examples: ● jQuery’s animate function ● Sorting a data set ● Adding DOM elements to the page
  • 24. Your Name | @Twitterhandle | #TechSEOBoost DOM HTML HTML Parser DOM Tree JavaScript modifies or adds content to the DOM. @Jammer_volts Step 1: Parsing turns a chunk of HTML into DOM nodes
  • 25. Your Name | @Twitterhandle | #TechSEOBoost Body h1 p img Before JavaScript Body h1 p img After JavaScript ol li li li p img
  • 26. Your Name | @Twitterhandle | #TechSEOBoost The pixel pipeline Style calculations are the process of figuring out which CSS rules apply to which elements based on matching selectors. JavaScript Layout Paint Composit e Style
  • 27. Your Name | @Twitterhandle | #TechSEOBoost DOM HTML Style Sheets HTML Parser CSS Parser DOM Tree Style Rules Attachment @Jammer_volts Step 2: Style Add style calculations to the DOM
  • 28. Your Name | @Twitterhandle | #TechSEOBoost The pixel pipeline JavaScript Style Once the browser knows which rules apply to an element it can begin to calculate how much space it takes up and where relative to the size of the viewport. The Core Web Vital metric Cumulative Layout Shift measures this. Paint Composit e Layout
  • 29. Your Name | @Twitterhandle | #TechSEOBoost DOM HTML Style Sheets HTML Parser CSS Parser DOM Tree Style Rules Render Tree Attachment Layout Step 3: Layout figure out where DOM elements end up relative to one another
  • 30. Your Name | @Twitterhandle | #TechSEOBoost p p img h1 img ol img
  • 31. Your Name | @Twitterhandle | #TechSEOBoost The pixel pipeline JavaScript Style Layout Painting is the process of filling in pixels. It involves drawing out text, colors, images, borders, and shadows, essentially every visual part of the elements. The drawing is typically done onto multiple surfaces, often called layers. Largest content paint occurs here Composit e Paint
  • 32. Your Name | @Twitterhandle | #TechSEOBoost Painting DOM HTML Style Sheets HTML Parser CSS Parser DOM Tree Style Rules Render Tree Attachment Layout Step 4: Paint converts layers of styled DOM elements into pixels
  • 33. Your Name | @Twitterhandle | #TechSEOBoost The pixel pipeline JavaScript Style Layout Paint Composit e Since the parts of the page were drawn into potentially multiple layers they need to be drawn to the screen in the correct order so that the page renders correctly. This is especially important for elements that overlap another, since a mistake could result in one element appearing over the top of another incorrectly.
  • 34. Your Name | @Twitterhandle | #TechSEOBoost DOM HTML Style Sheets HTML Parser CSS Parser DOM Tree Style Rules Render Tree Attachment Layout Painting Composite Step 5: Composite assembles all layers into a final screen image
  • 35. Your Name | @Twitterhandle | #TechSEOBoost What we think it’ll be like
  • 36. Your Name | @Twitterhandle | #TechSEOBoost What it's actually like
  • 37. Your Name | @Twitterhandle | #TechSEOBoost The end result is the same. How we do it matters.
  • 38. Your Name | @Twitterhandle | #TechSEOBoost CWV Pratfalls and Mitigations Rendering Strategies
  • 39. Your Name | @Twitterhandle | #TechSEOBoost ● Client Side ● Server Sider ● Static ● Dynamic ● Rehydration Rendering Strategies
  • 40. Your Name | @Twitterhandle | #TechSEOBoost Client Side Rendering (CSR) <!doctype html> <head> <script type="text/javascript" src="/main.js?ver=1.1.0"> </script> </head> <body> <app-root></app-root> </body> </html>
  • 41. Your Name | @Twitterhandle | #TechSEOBoost CSR Poor LCP: CSR Source: https://web.dev/lcp/
  • 42. Your Name | @Twitterhandle | #TechSEOBoost <rel="buyproduct.js"> = 99.5% success rate Each script has a probability to fail. With JavaScrip t Without JavaScrip t
  • 43. Your Name | @Twitterhandle | #TechSEOBoost script1.js script2.js script3.js script4.js {Product name} {Product sku} {Product price} {Product category} {Product availability} {Shipping times} {Breadcrumbs} {Product description} {Product images} {Product specs} <!doctype html> <head> <script type="text/javascript" src="/main.js?ver=1.1.0"> </script> </head> <body> <app-root></app-root> </body> </html>
  • 44. Your Name | @Twitterhandle | #TechSEOBoost script1.js script2.js script3.js script4.js {Product name} {Product sku} {Product price} {Product category} {Product availability} {Shipping times} {Breadcrumbs} {Product description} {Product images} {Product specs} mainbundle.js
  • 45. Your Name | @Twitterhandle | #TechSEOBoost script1.js script2.js script3.js script4.js {Product name} {Product sku} {Product price} {Product category} {Product availability} {Shipping times} {Breadcrumbs} {Product description} {Product images} {Product specs} mainbundle.js
  • 46. Your Name | @Twitterhandle | #TechSEOBoost Chains are dependencies. Each segment of the chain is dependent on its initiator to execute. If a segment of the chain fails, all of its subsequent content fails. Mitigation: Avoid Critical Chains bundle.js script1.js script2.js script3.js script4.js {Product name} {Product sku} {Product price} {Product category} {Product availability} {Shipping times} {Breadcrumbs} {Product description} {Product images} {Product specs}
  • 47. Your Name | @Twitterhandle | #TechSEOBoost CSR Poor LCP: Render-blocking JavaScript and CSS
  • 48. Your Name | @Twitterhandle | #TechSEOBoost 2 types resources block rendering <link rel="stylesheet"> when ● Does not have a disabled attribute. When this attribute is present, the browser does not download the stylesheet. ● Does not have a media attribute that matches the user's device. <script> when ● Is in the <head> of the document. ● Does not have a defer attribute. ● Does not have an async attribute.
  • 49. Your Name | @Twitterhandle | #TechSEOBoost Tell non-critical assets to wait using asynchronous or defer attributes <rel=”myscript.js” async> <rel=”myscript.js” defer> Lazy load images in Chrome with native attributes <img src=”the-traveler.jpg” loading=”lazy”> Mitigation: Defer non critical assets
  • 50. Your Name | @Twitterhandle | #TechSEOBoost Inline small scripts into <head> using <style> and/or <script> tags for above the fold content ● Ideally inline CSS is immediately after critical metadata ● Load inline scripts before third party resources, style sheets and JS ● If the script is over 1 kB, avoid inlining it (Inline scripts are parsed and compiled on the main thread.) ● Remove inline functions from script bundles Mitigation: Inline Critical Assets
  • 51. Your Name | @Twitterhandle | #TechSEOBoost CSR Poor LCP: Performance ● Google will limit CPU consumption ● Google will interrupt script ● Excessive CPU consumption negatively impacts indexing
  • 52. Your Name | @Twitterhandle | #TechSEOBoost CSR: Poor FID Heavy JavaScript execution const heavy = true; While (heavy) { console.log("FID fail") }
  • 53. Your Name | @Twitterhandle | #TechSEOBoost Mitigation: Only ship contributing scripts
  • 54. Your Name | @Twitterhandle | #TechSEOBoost CSR Poor CLS: Image dimensions ● Images without dimensions ● Ads, embeds, and iframes without dimensions Mitigation: Declare dimensions img { width: 100%; /* or max-width: 100%; */ height: auto; }
  • 55. Your Name | @Twitterhandle | #TechSEOBoost * CSR Poor CLS: Loading above existing content CLS Layout Score = impact fraction * distance fraction Mitigation: Prioritize Above the Fold content load
  • 56. Your Name | @Twitterhandle | #TechSEOBoost CSR Poor CLS: document.write() Modern Browsers support speculative parsing off of the main thread. Read as: They parse ahead while scripts are being downloaded and executed. document.write() ruins all that hard work. Mitigation: Chances are this isn't the work of your devs. Talk to your point of content that for "magic" third-party tool.
  • 57. Your Name | @Twitterhandle | #TechSEOBoost CSR Poor CLS: Style recalculations Changing the DOM will cause the browser to recalculate element styles (and possibly layouts). Mitigation: Lessen the scope and complexity of Style Calculations by: ● Reducing the complexity of your selectors. ● Reducing the number of elements being styled. ● Measure your Style Recalculation Cost ● Use BEM (Block, Element, Modifier) a class- centric methodology.
  • 58. Your Name | @Twitterhandle | #TechSEOBoost CSR Poor CLS: Web Fonts causing FOIT/FOUT A font loading late causes a full flash and re-write. Mitigation: Preload fonts. Preload tells the browser that you would like to fetch it sooner than the browser would otherwise discover it because you are certain that it is important for the current page. <link rel="preload" href="/assets/Pacifico-Bold.woff2" as="font" type="font/woff2" crossorigin>
  • 59. Your Name | @Twitterhandle | #TechSEOBoost At the time of request <!doctype html> <head> <title>Hello, TechSEO Boost! </head> <body> <h1>Wait.This isn’t Boston :( </h1> <p>Wash your hands.</p> </body> </html> Server Side Rendering (SSR)
  • 60. Your Name | @Twitterhandle | #TechSEOBoost ● Slow server response times ● Render-blocking JavaScript and CSS ● Resource load times ● Client-side rendering Are all the server calculations valuable? Do they contribute to page content? SSR: Poor LCP <!doctype html> <head> <title>Hello, TechSEO Boost! </head> <body> <h1>Wait.This isn’t Boston :( </h1> <p>Wash your hands.</p> </body> </html>
  • 61. Your Name | @Twitterhandle | #TechSEOBoost SSR Poor LCP: Media Declarations The default media="all" (or no declaration) matches all viewport sizes. Mitigation: Dynamic media queries evaluate the viewport when the page is loaded. <link href="xsmall.css" rel="stylesheet" media="xsmall"> <link href="small.css" rel="stylesheet" media="small"> <link href="print.css" rel="stylesheet" media="print">
  • 62. Your Name | @Twitterhandle | #TechSEOBoost During the build Static Rendering <!doctype html> <head> <title>Hello, TechSEO Boost! </head> <body> <h1>Wait.This isn’t Boston :( </h1> <p>Wash your hands.</p> </body> </html>
  • 63. Your Name | @Twitterhandle | #TechSEOBoost Cons ● $$$ ● Tricky to get "right" ● Only works for static content – not for content that’s meant to change (think personalization and A/B testing) Pros ● Low TTFB ● Delivers parsed HTML Static Rendering: YMMV
  • 64. Your Name | @Twitterhandle | #TechSEOBoost Dynamic Rendering
  • 65. Your Name | @Twitterhandle | #TechSEOBoost 2x server costs, test cases, and QA ½ visibility into what is actually happening
  • 66. Your Name | @Twitterhandle | #TechSEOBoost "It is not reasonable."
  • 67. Your Name | @Twitterhandle | #TechSEOBoost Rehydration Above the fold HTML + Below the fold scripts
  • 68. Your Name | @Twitterhandle | #TechSEOBoost Load what matters when it matters.
  • 69. Your Name | @Twitterhandle | #TechSEOBoost Image credit: John Fowler
  • 70. Your Name | @Twitterhandle | #TechSEOBoost | ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄ ̄| DON'T BE AFRAID TO LEARN IN PUBLIC |___________| (__/) || (•ㅅ•) || / づ