Core Web Vitals is a guidance from Google to delivering a great user experience on the web. There're three new metrics to define the website has a good experience or not. The metrics are Largest Contentful Paint, First Input Delay, and Cumulative Layout Shift.

2. CAKRA DANU SEDAYU
cakra.ds@gmail.com
@cakrads
Al Ihsan
ihksansanhas@gmail.com
@Ihsan_dev
CORE WEB VITALS
The Modern Web
Experience
DIGITALK - 27 August 2020

3. TABLE OF
CONTENT
Introduction
What is Web Vitals & Why?
The New Matriks
LCP, FID and CLS
How to Measure
Tools to measure Core Web Vitals
How To Improve?
Conclusion
The conclusion of Core Web Vitals
1
2
3
4
5
Simple Implementation: PRPL

4. WHAT IS
CORE WEB VITALS
& WHY?
INTRODUCTION

5. WHAT IS CORE WEB VITALS?
image source: https://www.youtube.com/watch?v=yDHfrhCGFQw | https://web.dev/vitals/
Now, 2020, There are three aspects of the user experience (will evolve over time)
A Guidance from GOOGLE to deliver a great USER EXPERIENCE

6. WHAT IS CORE WEB VITALS?
Ex: Loading Experience
image source: https://www.youtube.com/watch?v=yDHfrhCGFQw | https://web.dev/vitals/

7. https://webmasters.googleblog.com/2020/05/evaluating-page-experience.html

8. LCP, FID & CLS
THE NEW METRICS

9. CORE WEB VITALS

10. Largest Contentful Paint (LCP)
will Measure Loading Performance
To provide a good user
experience, pages
should have a LCP of
less than 2.5 seconds

12. THE HERO CONTENT
image source: https://web.dev/lcp/
The Most Meaningful Content

13. First Input Delay (FID)
will Measure Interactivity
To provide a good user
experience, pages
should have a FID of
less than 100 milliseconds

14. Cumulative Layout Shift (CLS)
will Measure Visual Stability
To provide a good user
experience, pages
should maintain a CLS of
less than 0.1

15. image source : https://web.dev/cls/

16. RECAP
image source: https://web.dev/vitals/ | https://initiate.alphacoders.com/images/669/cropped-500-300-669047.png?7893 |

17. INTRO MEASURING
CORE WEB VITALS
TOOLS

18. Measurement Tools for Core Web Vitals
lab
tools
field
tools
image source: https://web.dev/vitals-tools/

20. WEB VITALS EXTENSION
visit: https://chrome.google.com/webstore/detail/web-vitals/

21. CORE WEB VITALS
HOW TO IMPROVE

22. Optimize Largest Contentful Paint
For additional guidance on individual performance techniques
Optimize Your Images Optimizing Web Font
Apply PRPL Techniques
* you can use just one of them either all techniquest together
Optimize Your CSS
Optimize Your JavaScript (Client)
Image source: https://developers.google.com/ | https://web.dev/
Push, Render, Pre-Cache, Lazy Load
Optimizing the Critical Rendering Path

24. IMPLEMENT PRPL - PRELOAD

26. Filmstrip - default configuration
1 2
1
Filmstrip - Preload Image banner
FILMSTRIP WEBSITE

27. 0s 1s 2s 3s
login.html
font
main.css
bundle.js
image
>2.5s
without Preload
<2.5s
Using Preload0s 1s 2s 3s
login.html
image (preload)
font
main.css
bundle.js
* using preload will change PRIORITY of our asset and give us MORE CHANCE to get good LCP

28. What’s Next?
- Core Web Vitals : https://web.dev/vitals/
- How to Measure : https://web.dev/vitals-tools/
- Learn More From :
- https://web.dev/blog/
- https://dev.to/
- https://medium.com
-
-
HAPPY LEARNING

29. SUMMARY
- Good Experience Website has a Good:
- Loading Performance
- Fast Interactivity
- Visual Stability
- Loading Performance - LCP (<2500ms)
- Interactivity - FID (<100ms)
- Visual Stability - CLS (<0.1)
- Measure Core Web Vitals via :
- Core Web Vital Extension, Lighthouse (development stage)
- PageSpeed Insight, Search Console (Post-launch)
- etc
- Start with LCP and use PRPL Technique
- Start now, maybe nobody can’t reach your site in 2021

30. THANK YOU