This document discusses various rendering strategies and their impact on Core Web Vitals metrics. It begins by defining the Core Web Vitals metrics - Largest Contentful Paint, First Input Delay, and Cumulative Layout Shift. It then examines different rendering strategies like client-side rendering, server-side rendering, static rendering, and rehydration. For each strategy, it outlines potential issues that could lead to poor Core Web Vitals and provides mitigation tactics to address those issues. The goal is to help understand how rendering strategies affect page speed and provide ways to optimize for Core Web Vitals.
How To Utilize Calculated Properties in your HubSpot Setup
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
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;
}
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
|___________|
(__/) ||
(•ㅅ•) ||
/ づ