𝗛𝗼𝘄 𝗧𝗼 𝗖𝗵𝗲𝗰𝗸 𝗪𝗲𝗯𝘀𝗶𝘁𝗲 𝗖𝗼𝗿𝗲 𝗪𝗲𝗯 𝗩𝗶𝘁𝗮𝗹𝘀 𝗜𝗻 𝟱 𝗠𝗶𝗻𝘂𝘁𝗲𝘀

𝗛𝗼𝘄 𝗧𝗼 𝗖𝗵𝗲𝗰𝗸 𝗪𝗲𝗯𝘀𝗶𝘁𝗲 𝗖𝗼𝗿𝗲 𝗪𝗲𝗯 𝗩𝗶𝘁𝗮𝗹𝘀 𝗜𝗻 𝟱 𝗠𝗶𝗻𝘂𝘁𝗲𝘀

Developers often check Core Web Vitals once and stop. This is a mistake. Your scores change with every update.

You need to audit LCP, INP, and CLS using Chrome DevTools.

The Metrics You Need:

• LCP (Largest Contentful Paint): Measures loading speed. Aim for under 2.5s. Use the Performance tab. • INP (Interaction to Next Paint): Measures responsiveness. Aim for under 200ms. Use the Event trace. • CLS (Cumulative Layout Shift): Measures visual stability. Aim for under 0.1. Use the Layout shift panel.

How to Audit LCP:

1. Press F12 and open the Performance tab.
2. Check the Web Vitals box at the top.
3. Press Ctrl+Shift+R to reload without cache.
4. Find the LCP marker in the timeline.

Common LCP issues:

• Large images. Use WebP instead of heavy JPEGs.
• Render-blocking CSS. Heavy stylesheets delay your first paint.
• Client-side rendering. Empty HTML shells wait too long for JavaScript.

How to Audit INP:

Google replaced FID with INP in March 2024. INP tracks the slowest interaction on your page.

1. Open the Performance tab and check Web Vitals.
2. Click buttons, type in forms, and open menus.
3. Watch the INP counter.

High INP means your main thread is busy or your event handlers do too much work.

How to Audit CLS:

1. Enable the Layout Shift Regions checkbox in the Performance tab.
2. Reload the page.
3. Watch for red highlighted areas. These show layout shifts.

Common CLS issues:

• Images without width and height attributes.
• Content like ads or modals that push text down.
• Web fonts that cause text to jump during load.

Automate your checks. Use the PageSpeed Insights API in your deployment pipeline. This catches errors before your users see them.

Set a 5-minute routine after every deployment.

Source: https://dev.to/kui_luo/how-to-check-your-websites-core-web-vitals-in-5-minutes-2k7i