⚡ Web Performance, Core Web Vitals & CDN Architecture
1️⃣ The Critical Rendering Path (CRP) & Browser Internals
Definition: Critical Rendering Path (CRP) un sequential steps ka execution pipeline hai jise browser HTML, CSS aur JavaScript bytes receive karne ke baad screen par physical pixels paint karne ke liye execute karta hai.
HTML Bytes → Characters → Tokens → Nodes → DOM Tree
\
+--> Render Tree → Layout (Reflow) → Paint → Composite
/
CSS Bytes → Characters → Tokens → Nodes → CSSOM Tree| CRP Stage | Browser Execution Work | Performance Bottleneck Risk |
|---|---|---|
| DOM / CSSOM Construction | HTML parser incremental DOM banata hai; <link rel="stylesheet"> CSSOM parser ko block karta hai. |
CSS render-blocking hota hai. CSSOM complete hone tak page display zero rehta hai. |
| JavaScript Execution | Inline ya external synchronous <script> HTML parsing ko pause kar deta hai. |
JS parser-blocking hota hai jab tak defer ya async attributes na hon. |
| Layout (Reflow) | Viewport dimensions ke according har element ki exact geometry ($x, y$, width, height) calculate karna. | DOM layout thrashing (e.g. loops me offsetWidth read/write karna). |
| Paint & Composite | Visual elements (colors, shadows) ko layers me draw karna aur GPU compositing engine ko handover karna. | Non-composited properties (e.g. top/left animations vs GPU-accelerated transform). |
2️⃣ Google Core Web Vitals: LCP, INP & CLS
Google dwara standardized metrics jo user experience aur search engine ranking factors ko directly impact karte hain:
| Core Web Vital | User Experience Measured | Good Target (75th Percentile) | Key Remediation Strategies |
|---|---|---|---|
| Largest Contentful Paint (LCP) | Loading Speed: Viewport ka sabse large visible content (hero image, heading text) kab render hua. | ≤ 2.5 seconds | Hero images par fetchpriority="high" set karna, CDN edge caching, server TTFB optimize karna. |
| Interaction to Next Paint (INP) | Responsiveness: Click, tap ya keypress ke baad browser kab agla visual frame paint kar paya. | ≤ 200 milliseconds | Main thread long tasks (>50ms) break karna via scheduler.yield(), heavy tasks Web Workers me shift karna. |
| Cumulative Layout Shift (CLS) | Visual Stability: Page loading ke dauran elements ka unexpected dynamic jump ya shift hona. | ≤ 0.1 score | Images/Ads ke liye explicit width aur height reserve karna, dynamic content inject hone se pehle placeholders dena. |
3️⃣ Network Protocols Evolution: HTTP/1.1 to HTTP/3
| Feature | HTTP/1.1 | HTTP/2 | HTTP/3 (QUIC) |
|---|---|---|---|
| Transport Layer | TCP (Requires 3-way handshake + TLS) | TCP with TLS 1.2 / 1.3 | UDP with QUIC (Integrated TLS 1.3 encryption) |
| Multiplexing | None (Sequential head-of-line blocking; domain sharding used). | Binary framing (Multiple streams over single TCP connection). | True stream multiplexing (Single dropped packet does not stall other streams). |
| Connection Migration | No (IP change terminates TCP connection). | No (TCP 4-tuple bound). | Connection ID (CID): Wi-Fi se Mobile 5G shift hone par zero reconnection latency. |
| Handshake Latency | 2-3 Round Trips (RTT) | 1-2 RTT | 0-RTT / 1-RTT connection setup |
4️⃣ Edge CDN Architecture: Anycast & PoPs
CDN (Content Delivery Network) static assets aur dynamic content ko user ke geographically nearest edge server (Point of Presence - PoP) se serve karta hai:
Anycast BGP Routing:
Duniya bhar ke saare CDN edge PoPs ek identical IP address advertise karte hain. Internet routing routers BGP (Border Gateway Protocol) shortest AS-path ke through traffic ko closest physical edge node (e.g. Mumbai, Delhi, Frankfurt) par route kar dete hain.
Duniya bhar ke saare CDN edge PoPs ek identical IP address advertise karte hain. Internet routing routers BGP (Border Gateway Protocol) shortest AS-path ke through traffic ko closest physical edge node (e.g. Mumbai, Delhi, Frankfurt) par route kar dete hain.
User in Indore → Anycast IP → Mumbai Edge PoP [Latency: 8ms]
| (If Cache Miss)
v
Origin Shield (Mid-Tier PoP) [Latency: 20ms]
| (Aggregates multiple edge requests)
v
Central Backend Origin Server (AWS us-east-1) [Latency: 180ms]
Live Edge CDN Cache Hit & Core Web Vitals Simulator
[Performance Engine]: Edge Node: bom-01 (Mumbai Anycast) | Core Web Vitals Auditor: Ready. Select a test scenario...
5️⃣ HTTP Caching Headers & Stale-While-Revalidate
Browser aur Edge CDNs ko precise caching instructions communicate karne ke headers:
# 1. Immutable Static Assets (Fingerprinted files: bundle.a89f12.js)
Cache-Control: public, max-age=31536000, immutable
# 2. Dynamic Content with Stale-While-Revalidate (Instant response + background update)
Cache-Control: public, max-age=60, stale-while-revalidate=300
# 3. Conditional Request Validation (Etag / If-None-Match)
ETag: "33a64df551425fcc3"
# Client sends: If-None-Match: "33a64df551425fcc3"
# Server returns: HTTP 304 Not Modified (Zero payload transfer!)6️⃣ Modern Asset Compression: Brotli & AVIF
| Asset Type | Legacy Format | Modern Standard | Bandwidth Savings |
|---|---|---|---|
| Text (HTML/JS/CSS) | Gzip (Deflate) | Brotli (br) | 15% to 25% smaller than Gzip at identical compression speeds. |
| Photographic Images | JPEG / PNG | AVIF / WebP | 50% to 70% smaller than JPEG with superior perceptual quality. |
| Web Fonts | TTF / OTF | WOFF2 | 30% smaller due to custom Brotli table compression. |
7️⃣ Resource Hints & Speculative Loading
Browser network stack ko critical resources ke baare me advance signal dena:
<!-- 1. DNS Pre-resolution for external origins -->
<link rel="dns-prefetch" href="https://fonts.googleapis.com">
<!-- 2. Early TCP + TLS Handshake (Save 1-2 RTTs before request) -->
<link rel="preconnect" href="https://api.fresherjobsalert.com" crossorigin>
<!-- 3. High-Priority Hero Image Preload to Optimize LCP -->
<link rel="preload" as="image" href="/hero.avif" type="image/avif" fetchpriority="high">
<!-- 4. Speculation Rules API for Next-Page Pre-rendering (Sub-second navigations) -->
<script type="speculationrules">
{
"prerender": [
{
"where": { "href_matches": "/jobs/*" },
"eagerness": "moderate"
}
]
}
</script>