20. HTML Performance & Speed Optimization
Core Web Vitals dominate karein. Browser paint timings ko manipulate karne ke extreme pro techniques.
1. Resource Hinting (Predicting the Future)
Basic: Browser ko batana ki file load hone mein priority lagao.
Pro: <head> tag parser render flow ko optimize karta hai resource hints se:
<link rel="preload" as="font" href="font.woff2">: Network waterfall mein browser JS download hone ka wait karta hai font nikalne ke liye. Preload TCP stream mein font sabse top priority par download me laga deta hai, preventing FOUT (Flash of Unstyled Text).
<link rel="preconnect" href="https://api.third-party.com">: Kisi third party domain se TCP aur TLS handshake background mein pehle hi warm up kar deta hai, future HTTP requests ka setup time bach jata hai.
2. Script Execution Directives (Async vs Defer)
Pro: Jab parser HTML padhte hue kisi <script src="bundle.js"> ko hit karta hai, toh DOM banana band kar deta hai aur tab tak waiting mein rehta hai jab tak 5MB JS download hoke compile na ho jaye (Render Blocking). Is deadlock ko resolve karte hain:
defer: Script background mein smoothly parallel download hoti hai, aur tabhi execute hoti hai jab poora HTML parse ho chuka ho. (Best for React/Vue bundles).
async: Download hoty hi execute ho jati hai parser block karke, sequence guaranteed nahi hota. (Analytics trackers ke liye used).
3. Content Delivery Network (CDN) & Minification
Pro: HTML files mein tabs, comments, returns (white space) sab extra kilobytes create karte hain. Minification tools deployment CI/CD pipeline mein inko delete karke raw garbage-like block me transform karte hain.
GZIP ya Brotli compression se server network layer par 70% choti html payload banata hai, aur edge location servers (CDN) se duniya bhar mein super fast distribute karta hai (reduce TTFB).
4. Sub-resource Integrity (SRI)
Pro: Agar aap CDN se Bootstrap ya jQuery load kara rahe hain (performance ke liye) toh kya hoga agar wo CDN provider server hack ho jaye aur file replace karde? integrity="sha384-xyz..." tag ek cryptography hash compare karta hai. Agar ek chota character bhi hacker change kare, toh browser script execution deny (block) kar dega.