FID, CLS, LCP--WTF?

FID, CLS, LCP—WTF?
Understand, Measure and
Improve Core Web Vitals
WordCamp Northeast Ohio Region 2021 – Brenda Malone @_brendamalone

2
Google Page Experience
An initiative by Google to provide unified guidance for quality signals that,
we believe, are essential to delivering a great user experience on the web.
A set of signals that measure how users perceive the experience of
interacting with a web page, predominately based on mobile devices.

3

4
Fundamentally, Core Web Vitals measure how long it takes to complete
the script functions needed to paint the above-the-fold content. The
arena for these Herculean tasks is a 360 x 640 viewport. It fits right in
your pocket!
Mobileggedon 4.0?

5

6

7
Essential metrics for a healthy site
To ensure you're hitting this target for most of your users, a good threshold to measure is
the 75th percentile of page loads, segmented across mobile and desktop devices.
LCP
Largest Contentful Paint
GOOD
NEEDS
IMPROVEMENT
POOR
2.5 sec 4.0 sec
Measures Loading Performance
FID
First Input Delay
GOOD
NEEDS
IMPROVEMENT
POOR
100 ms 300 ms
Measures Interactivity
C L S
Cumulative Layout Shift
GOOD
NEEDS
IMPROVEMENT
POOR
0.1 0.25
Measures Visual Stability

8
Measures the render time of
the largest content element
(image or block of text) visible
within the viewport.
LCP
GOOD
NEEDS
IMPROVEMENT
POOR
4 sec
2.5 sec

9
1. SERVER RESPONSE TIME
1. Upgrade/Improve Hosting
2. Server-side caching / (maybe CDN)
2. RENDER-BLOCKING RESOURCES
1. Include critical CSS and JS inline in the HTML source
3. SLOW-LOADING RESOURCES
1. Optimize and minify images, JS and CSS Files.
2. Reconsider the use of sliders above the fold
Improving LCP- Largest Content Item

10
Measures the time from when a
user first interacts with the page
until the time when the browser
is actually able to respond to
that interaction.
FID
GOOD
NEEDS
IMPROVEMENT
POOR
300 ms
100 ms

11
1. LOOK AT YOUR THEME – Switch to a lighter, better coded theme
2. AVOID UNNECESSARY PLUGINS – Remove unused Javascript
1. Include critical CSS and JS inline in the HTML source
3. ASYNC, DEFER and DELAY JAVASCRIPT EXECUTION
Improving FID- Interactivity Delay

12
Measures the sum of all unexpected
layout shifts that occur throughout
the lifespan of the page.
layout shift score = impact fraction *
distance fraction
C L S
GOOD
NEEDS
IMPROVEMENT
POOR
0.25
0.1
0.5
0.25
0.75

13
1. Include Width and Height Size Attributes on Images and Video
elements.
2. Use srcset attributes on images
3. Preload Fonts and Serve them locally, if possible
4. Reduce the use of many different fonts and load ONLY what you
need, not all versions of the font.
5. Convert icon fonts to SVG format which load faster.
6. Manage space for Ad Slots: Use same-size place-holders.
7. Manage space for Embeds and Iframes, reserve space
8. Only load above fold items – the CLS measurements include
everything that is loaded. Loading the footer before loading content
is a recipe for disaster.
Improving CLS- Stop the shifty behavior!

14

15
Why your score will fluctuate
• A/B tests or changes in ads being served
• Internet traffic routing changes
• Testing on different devices, such as a high-performance desktop
and a low performance laptop
• Browser extensions that inject JavaScript and add/modify network
requests
• Antivirus software

16
What The Performance Score Means
Audit Weight
First Contentful Paint 15%
Speed Index 15%
Largest Contentful Paint 25%
Time to Interactive 15%
Total Blocking Time 25%
Cumulative Layout Shift 5%
https://developers.google.com/speed/pagespeed/insights/?url=https://simplicityci.com/

17
https://googlechrome.github.io/lighthouse/scorecalc/

WordCamp Northeast Ohio Region 2021 – Brenda Malone @_brendamalone 18
18
What’s in your pages?
HTML
Images
Video
Fonts
CSS
Java Script
Database queries
Links to scripts
Links to Fonts
Links to CSS
Links to video
Links to IFrames

19
Publisher and SEO Community Burdened with
Compliance
• WordPress Publishers are stuck trying to make websites conform to a standard that
those websites were never designed to comply with.
• This is the reason why so many are struggling with Core Web Vitals. Publishers and
SEOs are burdened with trying to fix something that ideally should be fixed at the code
level.
• Improving Core Web Vitals scores can feel like trying to upgrade the performance of a
Honda Civic to the standards of a Chevy Corvette.
• The developers did not build a Corvette. They built a Honda Civic.
• But Google is demanding that drivers (not the manufacturers) improve the
performance to a Corvette level. Does that seem fair to you?
• Is it reasonable to ask the users of a software to improve it rather than the developers
of the software?
-Roger Montti / 2/23/21 / Search Engine Journal

20
1. Do NOT save on Hosting (or a CDN, if needed)
2. Don’t routinely combine CSS / JS. But do defer them when possible
3. Don’t inline Critical CSS which can cause FOUT/FOUC
4. Don’t use a Heavy Page Builder
5. Don’t use a bunch of Special FX
6. Switch to a Theme built for Speed (Oxygen, Gutenberg, Kadence, etc)
7. Use Full Page Caching, in addition to good server caching (WP Rocket)
8. Good Compression of Properly-Sized Images and specify image sizes
and lazy-load below the fold images.
9. Limit number of Google/Other Special Fonts, and serve them locally
10. Watch your DOM size – limit and only choose optimized plugins
10 Tips to Improve CWV on WordPress

@_brendamalone
https://linktr.ee/cwv
All of the links to the tools I have used and more resources.

FID, CLS, LCP--WTF?

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (18)

Similaire à FID, CLS, LCP--WTF?

Similaire à FID, CLS, LCP--WTF? (20)

Dernier

Dernier (20)

FID, CLS, LCP--WTF?