j4flmao Web Performance
Core Web Vitals
- LCP (Largest Contentful Paint): Measures loading performance (target < 2.5s).
- INP (Interaction to Next Paint) / FID: Measures interactivity and responsiveness (target < 200ms).
- CLS (Cumulative Layout Shift): Measures visual stability (target < 0.1).
Mermaid Diagram
%%{init: {"theme": "default", "flowchart": {"useMaxWidth": true}}}%%
flowchart TD
A[Performance Optimization] --> B[Improve LCP]
A --> C[Improve INP]
A --> D[Improve CLS]
B --> B1[Preload Critical Images]
B --> B2[Optimize Server Response]
C --> C1[Defer Non-Critical JS]
C --> C2[Web Workers]
D --> D1[Set Image Dimensions]
D --> D2[Reserve Space for Ads]
Best Practices & Code Snippets
1. Optimizing LCP (Preloading)
<!-- Preload the hero image to improve LCP -->
<link rel="preload" as="image" href="/hero-image.webp" />
2. Optimizing CLS (Image Dimensions)
Always specify width and height to prevent layout shifts when images load.
/* CSS fallback for responsive images */
img {
max-width: 100%;
height: auto;
}
<img src="/hero-image.webp" width="1200" height="600" alt="Hero" />
3. Optimizing INP (Yielding to Main Thread)
// Break up long tasks using setTimeout or scheduler.yield
function processLargeArray(items) {
let i = 0;
function chunk() {
const end = Math.min(i + 50, items.length);
while (i < end) {
process(items[i++]);
}
if (i < items.length) setTimeout(chunk, 0); // Yield to main thread
}
chunk();
}