K.Boopathi
BlogNotesSecond BrainProjectsHire MeYour reading file0 pts

Front End Advanced

May 06, 20255 min read

Core Web Vitals

  1. FCP (First Contentful Paint) Time taken to render the first piece of DOM content.

  2. LCP (Largest Contentful Paint) Time taken to render the largest visible content element in the viewport.

  3. CLS (Cumulative Layout Shift) Measures the visual stability. Layout shifts occur when visible elements change position between frames (e.g., image loads late and pushes paragraph).

    Best Practice: Set explicit width and height for images and other dynamic content to prevent layout shifts.

  4. FID (First Input Delay) Measures the delay from user interaction to the browser processing the event.

  5. INP (Interaction to Next Paint) (New from March 2024) Measures the time from user interaction to the next visual change. Captures UI responsiveness better than FID.

Best Practices & Tips

  • Disable Chrome Extensions & Eject Dev Tools when using Lighthouse for accurate metrics.

  • Use Priority Hints (importance="high") to prioritize critical resources.

  • CSS Loading is Render-Blocking

  • Avoid Base64 Images in CSS: Increases CSS parsing time.

  • Use Specific CSS Selectors: .nav > ul > li > a is faster than .nav ul li a

  • Script Tag Placement:

    • Scripts after CSS ensure CSS loads and applies before script parsing.
    • Use async or defer as needed.

Async Loading CSS (Shopify Pattern)

<link rel="stylesheet" href="my.css" media="print" onload="this.media='all'">
<noscript>
  <link rel="stylesheet" href="my.css">
</noscript>
  • Reduces CSS load priority until it’s needed.

Networking & Resource Optimization

Page Load Sequence

[DNS] → [TCP] → [TLS] → [HTTP Request]

Hints

HintCostBenefit
DNS PrefetchLowLow
Link PrefetchMidHigh
PrerenderVery HighVery High
  • DNS Prefetch: Resolve DNS early.
  • Preconnect: Prepares TCP, TLS early.
  • Preload: Forces immediate load; console warns if misused.
  • Prerender: Use in login to preload dashboard.

Avoid Layout Thrashing

  • Happens when styles are updated and immediately read.
  • Forces sync layout calculations. (Purple bar in Chrome Perf tab)

Optimizing LCP (Source)

  1. Use poster attribute in video tags.
  2. Avoid background images in CSS for key visuals. Use <img> with preload.

Memory Usage Monitoring

  • Use measureUserAgentSpecificMemory() to monitor memory.

RequestAnimationFrame (rAF)

  1. Most screens update at 60Hz; rAF aligns with display refresh.
  2. setTimeout(fn, 0) executes ~4.7ms later.
  3. setTimeout(fn, 100/60) is roughly one frame.
  4. requestAnimationFrame(fn) fires before style and layout.

Correct Usage Example:

button.addEventListener("click", () => {
  box.style.transform = "translateX(1000px)";
  box.style.transition = "transform 1s ease-in-out";
 
  // One rAF is not enough, use two
  requestAnimationFrame(() => {
    requestAnimationFrame(() => {
      box.style.transform = "translateX(500px)";
    });
  });
 
  // OR use computed style to force layout
  // getComputedStyle(box).transform;
});

Execution Order: [JavaScript] → [rAF] → [Style] → [Layout] → [Paint]

Some browsers process rAF after layout; test accordingly.

Microtasks vs Macrotasks

// Won't block UI
function loop() {
  setTimeout(loop, 0);
}
loop();
 
// Will block UI (runs in microtask queue)
function loop() {
  Promise.resolve().then(loop);
}
loop();
  • Microtasks (e.g., Promises) can block rendering if used recursively.

Performance APIs

  • performance.getEntries() — captures up to 150 resources by default.

Speed Index

  1. Average time at which visible content appears.
  2. JS threads assigned per domain.
  3. Use requestIdleCallback() to defer non-critical tasks.

Web Performance Resources

Articles & Guides

  1. Browser Rendering Optimization - Udacity
  2. Rendering Performance Guide - web.dev
  3. Runtime Performance Checklist - Perfplanet
  4. A Developer Guide to Rendering Performance - Vimeo
  5. High Performance Animations - HTML5 Rocks
  6. CSS Triggers
  7. Beginner’s Guide to Chrome Tracing - Nolan Lawson
  8. CSS Runtime Performance - YouTube
  9. Fixing Memory Leaks in Web Applications - Nolan Lawson
  10. Fuite - Memory Leak Detection Tool
  11. Why our build got 15x slower with Webpack 5 - Tines
  12. Keep Webpack Fast - Slack Engineering
  13. CSS Runtime: Style → Layout → Paint → Composite - YouTube
  14. Speeding Up the JS Ecosystem - ESLint
  15. Dropbox TTVC - Visual Completion Metric
  16. Calibre Blog - Web Performance & SEO
  17. Large File Upload with Web Workers
  18. DOM Size and Interactivity - web.dev
  19. WebP for Faster Page Loads - Meesho
  20. Doordash Frontend Performance Lessons
  21. Extracting JS Source Code from Source Maps
  22. Performance Chapter - HTTP Archive Almanac
  23. Booking.com’s Multi-Platform Design System
  24. Priority Hints - MacArthur
  25. Send HTTP Request on Page Exit
  26. Facebook Frontend Optimization
  27. Perfume.js - Web Performance Library
  28. Web Performance Starter Guide
  29. Initial Web Performance Audit Tips

Tools

CSS

Performance Tips

Blogs

Dev Tools

Core Web Vitals & INP

Tips & Tricks

Speeding Up JavaScript Ecosystem (Series)

https://www.developerway.com/posts/client-side-rendering-flame-graph

Graph View