LCP and FID / INP and CLS

LCP measures how fast the main content of the page becomes visible to the user. “To improve LCP, I optimize hero images, preload critical assets, and reduce render-blocking scripts.” Common causes of poor LCP Large unoptimized images Slow server response Render-blocking CSS/JS Client-side heavy rendering How to improve LCP Optimize & compress images Preload critical images/assets Reduce JS bundle size Use SSR / SSG / edge caching FID / INP (First Input Delay / Interaction to Next Paint) What it is Measures how fast the page responds when a user interacts (click, tap, input). “To improve FID/INP, I reduce main-thread work by splitting JS bundles and deferring non-critical scripts.” Common causes of poor FID / INP Heavy JavaScript execution Long main-thread tasks Large synchronous scripts CLS: Measures visual stability — how much the layout shifts unexpectedly. “To prevent CLS, I reserve layout space and ensure all images have fixed dimensions.” Common causes of poor CLS Images without width/height Dynamically injected content Ads, banners, fonts loading late How to improve CLS Always define image dimensions Reserve space for dynamic content Use skeleton loaders Avoid inserting content above existing content