HTML Performance

वेब परफॉर्मेंस को ऑप्टिमाइज़ करना

वेब परफॉर्मेंस यूज़र्स को आपकी साइट पर बनाए रखने और अपनी सर्च इंजन रैंकिंग सुधारने के लिए ज़रूरी है। अपने कोड स्ट्रक्चर को व्यवस्थित करना और एसेट्स को कारगर तरीके से लोड करना तेज़ लोड टाइम की कुंजी है।

उदाहरण: Optimizing Web Performance

<link rel="stylesheet" href="styles.min.css">

Deferred और Async स्क्रिप्ट लोडिंग

डिफ़ॉल्ट रूप से, ब्राउज़र स्क्रिप्ट फाइल्स को डाउनलोड और रन करने के लिए आपके वेबपेज लेआउट को लोड होने से रोकते हैं, जो आपकी साइट की लोड स्पीड को धीमा कर सकता है।

defer या async एट्रिब्यूट्स का उपयोग करने से ब्राउज़र लेआउट रेंडरिंग को ब्लॉक किए बिना बैकग्राउंड में स्क्रिप्ट्स डाउनलोड कर सकता है।

उदाहरण: Deferred and Async Script Loading

<script src="app.js" defer></script>

Lazy Loading एसेट्स

अगर आपके वेबपेज में कई इमेजेज़ हैं, तो उन सभी को एक साथ डाउनलोड करना आपकी साइट की लोड स्पीड को धीमा कर सकता है। loading="lazy" एट्रिब्यूट ब्राउज़र को यह निर्देश देता है कि पेज में नीचे मौजूद इमेजेज़ को तब तक डाउनलोड न करे जब तक यूज़र उनके पास स्क्रॉल न कर ले।

उदाहरण: Lazy Loading Assets

<img src="offscreen.jpg" alt="Offscreen image" loading="lazy">

Pre-fetching और Resource Hints

पेज ट्रांज़िशन्स को तुरंत महसूस कराने के लिए, आप अपने head में link टैग्स के अंदर resource hints (जैसे dns-prefetch या preload) का उपयोग कर सकते हैं, ताकि ब्राउज़र को डोमेन रिज़ॉल्व करने या ज़रूरी एसेट्स पहले से डाउनलोड करने के लिए बताया जा सके।

उदाहरण: Pre-fetching and Resource Hints

<link rel="dns-prefetch" href="https://fonts.example.com">
<link rel="preload" href="logo.png" as="image">

Cumulative Layout Shifts को कम करना

जब कोई इमेज लोड होती है, तो उसे डाउनलोड होने में कुछ सेकंड लगते हैं। अगर आप उसकी width और height नहीं बताते, तो ब्राउज़र को यह पता नहीं होता कि कितनी जगह रिज़र्व करनी है, जिससे पेज लेआउट इधर-उधर उछलने लगता है।

इन डायमेंशन्स को स्पष्ट रूप से सेट करना ब्राउज़र को पहले से बताता है कि कितनी जगह पहले ही रिज़र्व कर लेनी है।

उदाहरण: Minimizing Cumulative Layout Shifts

<img src="photo.jpg" width="600" height="400" alt="Photo">

Core Web Vitals (LCP, FID, CLS)

Core Web Vitals तीन मेट्रिक्स हैं जिन्हें Google असली यूज़र अनुभव मापने के लिए इस्तेमाल करता है। LCP, यानी Largest Contentful Paint, यह मापता है कि सबसे बड़ा दिखने वाला एलिमेंट कितनी जल्दी लोड होता है।

FID, यानी First Input Delay, यह मापता है कि पेज यूज़र के पहले इंटरैक्शन पर कितनी जल्दी प्रतिक्रिया देता है। CLS, यानी Cumulative Layout Shift, यह मापता है कि लोड होते समय कंटेंट कितना अप्रत्याशित रूप से इधर-उधर उछलता है।

उदाहरण: Core Web Vitals (LCP, FID, CLS)

<img src="hero.jpg" width="1200" height="600" alt="Hero banner">

इमेज ऑप्टिमाइज़ेशन तकनीकें

सही फॉर्मैट चुनना, जैसे uncompressed PNG के बजाय WebP या AVIF, अपलोड करने से पहले इमेजेज़ को कंप्रेस करना, और डिस्प्ले साइज़ के हिसाब से उचित साइज़ वाली इमेजेज़ सर्व करना, ये सब मिलकर पेज वेट को काफी कम कर देते हैं।

ज़्यादातर वेबसाइट्स पर इमेजेज़ आमतौर पर पेज लोड टाइम में सबसे बड़ा योगदान देती हैं।

उदाहरण: Image Optimization Techniques

<img src="photo.webp" alt="Compressed photo">

Minification समझाया गया

Minification, CSS और JavaScript फाइल्स से गैर-ज़रूरी कैरेक्टर्स, जैसे व्हाइटस्पेस, लाइन ब्रेक्स, और कमेंट्स हटा देता है, बिना यह बदले कि कोड असल में क्या करता है।

इससे फाइल्स छोटी और डाउनलोड करने में तेज़ हो जाती हैं, बिना पेज के व्यवहार पर असर डाले।

उदाहरण: Minification Explained

<link rel="stylesheet" href="styles.min.css">
<script src="app.min.js"></script>

ब्राउज़र कैशिंग की बुनियादी बातें

ब्राउज़र कैशिंग विज़िटर के ब्राउज़र को पहली विज़िट के बाद इमेजेज़, CSS, और JavaScript जैसी फाइल्स लोकल रूप से स्टोर करने देती है, ताकि उसी साइट के भविष्य के पेज लोड्स सब कुछ फिर से डाउनलोड करने के बजाय उन्हें दोबारा इस्तेमाल कर सकें।

इसे सर्वर से भेजे गए Cache-Control जैसे HTTP रिस्पॉन्स हेडर्स नियंत्रित करते हैं।

उदाहरण: Browser Caching Basics

<!-- Server response header: Cache-Control: max-age=31536000 -->
<img src="logo.png" alt="Logo">