What are Web Vitals, and why should you care? Scott and Wes break down metrics like LCP, FCP, CLS, and INP, explaining what they measure, how they impact your site’s performance, and how to track them yourself. <a id= "Show_Notes_2"></a>Show Notes <ul> <li class="has-line-data" data-line-start="4" data-line-end="5"> <a href="#t=00:00">00:00</a> Welcome to Syntax!</li> <li class="has-line-data" data-line-start="5" data-line-end="13"> <a href="#t=03:26">03:26</a> What each web vital means. <ul> <li class="has-line-data" data-line-start="6" data-line-end="7"> <a href="https://webvitals.com/">Web Vitals Playground</a>.</li> <li class="has-line-data" data-line-start="7" data-line-end="8"> <a href="#t=03:38">03:38</a> LCP - Largest Contentful Paint.</li> <li class="has-line-data" data-line-start="8" data-line-end="9"> <a href="#t=05:04">05:04</a> FCP - First Contentful Paint.</li> <li class="has-line-data" data-line-start="9" data-line-end="10"> <a href="#t=06:07">06:07</a> CLS - Cumulative Layout Shift.</li> <li class="has-line-data" data-line-start="10" data-line-end="12"> <a href="#t=10:58">10:58</a> INP - Interaction to Next Paint. <ul> <li class="has-line-data" data-line-start="11" data-line-end="12"> <a href="#t=13:43">13:43</a> Measuring the impact.</li> </ul> </li> <li class="has-line-data" data-line-start="12" data-line-end="13"> <a href="#t=14:22">14:22</a> TTFB - Time to First Byte</li> </ul> </li> <li class="has-line-data" data-line-start="13" data-line-end="14"> <a href="#t=15:27">15:27</a> How to track this on your own.</li> <li class="has-line-data" data-line-start="14" data-line-end="15"> <a href="#t=17:42">17:42</a> Checking the performance of <a href="https://syntax.fm">Syntax.fm</a>.</li> <li class="has-line-data" data-line-start="15" data-line-end="17"> <a href="#t=21:07">21:07</a> Brought to you by <a href="https://sentry.io/syntax">Sentry.io</a>. <ul> <li class="has-line-data" data-line-start="16" data-line-end="17"> <a href= "https://docs.sentry.io/product/insights/frontend/web-vitals/">Sentry Web Vitals</a>.</li> </ul> </li> <li class="has-line-data" data-line-start="17" data-line-end="19"> <a href="#t=21:49">21:49</a> Checking the performance of Wes’ site.</li> </ul> <a id="Hit_us_up_on_Socials_19"></a>Hit us up on Socials! Syntax: <a href="https://twitter.com/syntaxfm">X</a> <a href= "https://www.instagram.com/syntax_fm/">Instagram</a> <a href= "https://www.tiktok.com/@syntaxfm">Tiktok</a> <a href= "https://www.linkedin.com/company/96077407/admin/feed/posts/">LinkedIn</a> <a href="https://www.threads.net/@syntax_fm">Threads</a> Wes: <a href="https://twitter.com/wesbos">X</a> <a href= "https://www.instagram.com/wesbos/">Instagram</a> <a href= "https://www.tiktok.com/@wesbos">Tiktok</a> <a href= "https://www.linkedin.com/in/wesbos/">LinkedIn</a> <a href= "https://www.threads.net/@wesbos">Threads</a> Scott: <a href="https://twitter.com/stolinski">X</a> <a href= "https://www.instagram.com/stolinski/">Instagram</a> <a href= "https://www.tiktok.com/@stolinski">Tiktok</a> <a href= "https://www.linkedin.com/in/stolinski/">LinkedIn</a> <a href= "https://www.threads.net/@stolinski">Threads</a> Randy: <a href="https://twitter.com/randyrektor">X</a> <a href= "https://www.instagram.com/randyrektor/">Instagram</a> <a href= "https://www.youtube.com/@randyrektor">YouTube</a> <a href= "https://www.threads.net/@randyrektor">Threads</a>

Podurama

Home

Trending

Personal

Your Podcasts

New Episodes

My Files

Favourite Episodes

Tags (Folders)

Recently Played

Bookmarks

Followed Playlists

883: Web Vitals Explained

Syntax - Tasty Web Development Treats

AI Chapters

AI Insights

Reviews