These slides were presented at the Semrush webinar "Core Web Vitals: Do's and Don'ts". Video replay and transcript are available at https://www.semrush.com/webinars/core-web-vital-do-s-and-don-ts/
2. About Me – Shay Toder
• Page Speed Optimization Expert
• Winner of 1st place in 2019 & 3rd place in
2020
in a worldwide WordPress Performance
Contests
• Owner of a blog in this niche
• Owner of “The Page-Speed”, an online course
with over 300 course members from 35
different countries so far
• Love to help and give advices whenever I can
4. Core Web Vitals
• Subset of Web Vitals
• Several metrics Google uses to measure quality of a website to
ensure visitors get a great user experience
• It’s not just speed
• Checking:
• Loading time by checking: Largest Contentful Paint (LCP)
• Interactivity (page responsiveness) by checking: First Input Delay (FID)
/ Total Blocking Time (TBT)
• Visual stability by checking: Cumulative Layout Shift (CLS)
5. The render time of the largest content element visible within the
viewport. It can be a text or an image
6. The time from when a user first interacts with a page
(when they click a link, tap on a button)
to the time when the browser is actually able to respond to that interaction.
JavaScripts !
7. How many times the components on the page move or “shift” around
while the page is loading
8. Ways to Check Core Web Vitals
• Google PageSpeed Insights
• GTmetrix / WebPageTest
• Search Console
• SEMRUSH Core Web Vitals report
9. Examples
• LCP - Lazy Load - Before & After
• https://course.thepagespeed.com/image-lcp-normal-image-before/
• https://gtmetrix.com/reports/course.thepagespeed.com/ExK752Ex/
• https://course.thepagespeed.com/image-lcp-normal-image-after-lazy/
• https://gtmetrix.com/reports/course.thepagespeed.com/UbZYwmq0/
• LCP - Fading - Before & After
• https://course.thepagespeed.com/image-lcp-background-image-before/
• https://gtmetrix.com/reports/course.thepagespeed.com/5kKgdoq3/
• https://course.thepagespeed.com/image-lcp-background-image-after-fading/
• https://gtmetrix.com/reports/course.thepagespeed.com/8vKuSLg6/
• FID - Delay JS - Before & After
• https://course.thepagespeed.com/core-web-vitals-fid-before/
• https://gtmetrix.com/reports/course.thepagespeed.com/TQCONcNm/
• https://course.thepagespeed.com/core-web-vitals-fid-after/
• https://gtmetrix.com/reports/course.thepagespeed.com/JqARRuZS/
• CLS - Before & After
• https://course.thepagespeed.com/cls-before/
• https://gtmetrix.com/reports/course.thepagespeed.com/bwTtebZ0/
• https://course.thepagespeed.com/cls-after/
• https://gtmetrix.com/reports/course.thepagespeed.com/jBNyNTEa/
10. Course Discount
A discount for my course –
https://www.shaytoder.com/course/
With coupon code : SEMRUSH (for 1 payment)
or SEMRUSH-3 (for 3 payments)