JavaScript फ़्रेमवर्क में रिसॉर्स इनलाइनिंग

JavaScript नेटवर्क में सबसे बड़े कॉन्टेंटफ़ुल पेंट को बेहतर बनाना.

Minko Gechev

Aurora प्रोजेक्ट के हिस्से के तौर पर, Google लोकप्रिय वेब फ़्रेमवर्क के साथ काम कर रहा है, ताकि यह पक्का किया जा सके कि वे वेबसाइट की परफ़ॉर्मेंस की अहम जानकारी के मुताबिक अच्छा परफ़ॉर्म करें. Angular और Next.js में, फ़ॉन्ट इनलाइन करने की सुविधा पहले से मौजूद है. इस सुविधा के बारे में इस लेख के पहले हिस्से में बताया गया है. हम दूसरा ऑप्टिमाइज़ेशन, क्रिटिकल सीएसएस इनलाइनिंग के बारे में बताएंगे. यह सुविधा अब Angular CLI में डिफ़ॉल्ट रूप से चालू है. साथ ही, Nuxt.js में इसे लागू करने पर काम चल रहा है.

फ़ॉन्ट इनलाइन करना

सैकड़ों ऐप्लिकेशन का विश्लेषण करने के बाद, Aurora की टीम को पता चला कि डेवलपर अक्सर अपने ऐप्लिकेशन में फ़ॉन्ट शामिल करते हैं. इसके लिए, वे index.html के <head> एलिमेंट का रेफ़रंस देते हैं. यहां एक उदाहरण दिया गया है कि Material आइकॉन शामिल करने पर, यह कैसा दिखेगा:

<!doctype html>
<html lang="en">
<head>
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  ...
</html>

भले ही, यह पैटर्न पूरी तरह से मान्य और काम का है, लेकिन यह ऐप्लिकेशन के रेंडर होने को ब्लॉक करता है और एक अतिरिक्त अनुरोध भी करता है. इस समस्या को बेहतर ढंग से समझने के लिए, ऊपर दिए गए एचटीएमएल में बताई गई स्टाइलशीट का सोर्स कोड देखें:

/* fallback */
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: url(https://fonts.gstatic.com/font.woff2) format('woff2');
}

.material-icons {
  /*...*/
}

ध्यान दें कि font-face परिभाषा, fonts.gstatic.com पर होस्ट की गई बाहरी फ़ाइल का रेफ़रंस कैसे देती है. ऐप्लिकेशन लोड करते समय, ब्राउज़र को सबसे पहले हेडर में रेफ़र की गई ओरिजनल स्टाइलशीट डाउनलोड करनी होती है.

इस इमेज में दिखाया गया है कि वेबसाइट को सर्वर से अनुरोध करने और बाहरी स्टाइलशीट को डाउनलोड करने का तरीका क्या है
सबसे पहले, वेबसाइट फ़ॉन्ट स्टाइलशीट लोड करती है.

इसके बाद, ब्राउज़र woff2 फ़ाइल डाउनलोड करता है. इसके बाद, वह ऐप्लिकेशन को रेंडर कर सकता है.

फ़ॉन्ट स्टाइलशीट और फ़ॉन्ट फ़ाइल के लिए किए गए दो अनुरोध दिखाने वाली इमेज.
इसके बाद, फ़ॉन्ट लोड करने का अनुरोध किया जाता है.

ऑप्टिमाइज़ेशन का एक मौका यह है कि बिल्ड के समय शुरुआती स्टाइलशीट को डाउनलोड किया जाए और उसे index.html में इनलाइन किया जाए. इससे रनटाइम के दौरान सीडीएन के लिए पूरा राउंड ट्रिप नहीं किया जाता. इससे, ब्लॉक करने में लगने वाला समय कम हो जाता है.

ऐप्लिकेशन बनाते समय, सीडीएन को एक अनुरोध भेजा जाता है. यह स्टाइलशीट को फ़ेच करता है और एचटीएमएल फ़ाइल में इसे इनलाइन करता है. साथ ही, डोमेन में <link rel=preconnect> जोड़ता है. इस तकनीक का इस्तेमाल करने पर, हमें यह नतीजा मिलेगा:

<!doctype html>
<html lang="en">
<head>
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin >
  <style type="text/css">
  @font-face{font-family:'Material Icons';font-style:normal;font-weight:400;src:url(https://fonts.gstatic.com/font.woff2) format('woff2');}.material-icons{/*...*/}</style>
  ...
</html>

फ़ॉन्ट इनलाइन करने की सुविधा अब Next.js और Angular में उपलब्ध है

जब फ़्रेमवर्क डेवलपर, टूल में ऑप्टिमाइज़ेशन लागू करते हैं, तो मौजूदा और नए ऐप्लिकेशन के लिए इसे चालू करना आसान हो जाता है. इससे पूरे नेटवर्क में सुधार होता है.

यह सुधार, Next.js v10.2 और Angular v11 में डिफ़ॉल्ट रूप से चालू होता है. दोनों में Google और Adobe फ़ॉन्ट को इनलाइन करने की सुविधा है. Angular, v12.2 में बाद वाले वर्शन को लॉन्च करने की उम्मीद कर रहा है.

GitHub पर Next.js में फ़ॉन्ट इनलाइन करने का तरीका देखा जा सकता है. साथ ही, Angular के संदर्भ में इस ऑप्टिमाइज़ेशन के बारे में बताने वाला वीडियो भी देखा जा सकता है.

ज़रूरी सीएसएस को इनलाइन करना

ज़रूरी सीएसएस को इनलाइन करके, फ़र्स्ट कॉन्टेंटफ़ुल पेंट (एफ़सीपी) और सबसे बड़े कॉन्टेंटफ़ुल पेंट (एलसीपी) मेट्रिक को बेहतर बनाने में भी मदद मिलती है. किसी पेज की क्रिटिकल सीएसएस में, पेज के शुरुआती रेंडरिंग में इस्तेमाल की गई सभी स्टाइल शामिल होती हैं. इस विषय के बारे में ज़्यादा जानने के लिए, ग़ैर-ज़रूरी सीएसएस को बाद में लोड करने की सुविधा लेख पढ़ें.

हमें पता चला है कि कई ऐप्लिकेशन, स्टाइल को एक साथ लोड कर रहे हैं. इससे ऐप्लिकेशन को रेंडर करने में रुकावट आती है. इस समस्या को तुरंत ठीक करने के लिए, स्टाइल को एसिंक्रोनस तरीके से लोड करें. स्क्रिप्ट को media="all" के साथ लोड करने के बजाय, media एट्रिब्यूट की वैल्यू को print पर सेट करें. इसके बाद, लोडिंग पूरी होने पर, एट्रिब्यूट की वैल्यू को all से बदलें:

<link rel="stylesheet" href="..." media="print" onload="this.media='all'">

हालांकि, ऐसा करने से स्टाइल न किए गए कॉन्टेंट में फ़्लिकरिंग की समस्या आ सकती है.

स्टाइल लोड होने पर, पेज फ़्लिकर करता है.

ऊपर दिए गए वीडियो में, किसी पेज को रेंडर करने की प्रोसेस दिखाई गई है. इसमें पेज की स्टाइल, एक साथ लोड नहीं होतीं. फ़्लिकर होने की वजह यह है कि ब्राउज़र पहले स्टाइल डाउनलोड करना शुरू करता है. इसके बाद, वह एचटीएमएल को रेंडर करता है. ब्राउज़र स्टाइल डाउनलोड करने के बाद, लिंक एलिमेंट के onload इवेंट को ट्रिगर करता है. साथ ही, media एट्रिब्यूट को all पर अपडेट करता है और स्टाइल को डीओएम पर लागू करता है.

एचटीएमएल को रेंडर करने और स्टाइल लागू करने के बीच के समय में, पेज पर कुछ हद तक स्टाइल नहीं होती. जब ब्राउज़र स्टाइल का इस्तेमाल करता है, तो हमें फ़्लिकरिंग दिखती है. इससे उपयोगकर्ता अनुभव खराब होता है और कुल लेआउट शिफ़्ट (सीएलएस) में गिरावट आती है.

एसिंक्रोनस स्टाइल लोडिंग के साथ-साथ, ज़रूरी सीएसएस को इनलाइन करने से, पेज लोड होने के व्यवहार को बेहतर बनाया जा सकता है. crtters टूल यह पता लगाता है कि पेज पर किस तरह की स्टाइल इस्तेमाल की गई हैं. इसके लिए, यह स्टाइलशीट में सिलेक्टर को देखकर और उनका एचटीएमएल से मिलान करके पता लगाता है. जब इसे कोई मैच मिलता है, तो यह उससे जुड़ी स्टाइल को क्रिटिकल सीएसएस का हिस्सा मानकर उन्हें इनलाइन करता है.

आइए एक उदाहरण देखें:

यह न करें
<head>
   <link rel="stylesheet" href="/styles.css" media="print" onload="this.media='all'">
</head>
<body>
  <section>
    <button class="primary"></button>
  </section>
</body>
 
/* styles.css */
section button.primary {
  /* ... */
}
.list {
  /* ... */
}

इनलाइन करने से पहले का उदाहरण.

ऊपर दिए गए उदाहरण में, क्रिएटर्स styles.css के कॉन्टेंट को पढ़कर उसे पार्स करेंगे. इसके बाद, वे एचटीएमएल के हिसाब से दो सिलेक्टर को मैच करेंगे और यह पता लगाएंगे कि हम section button.primary का इस्तेमाल करते हैं. आखिर में, क्रिटर पेज के <head> में उससे जुड़ी स्टाइल को इनलाइन करेंगे. इससे ये नतीजे मिलेंगे:

यह करें
<head>
  <link rel="stylesheet" href="/styles.css" media="print" onload="this.media='all'">
  <style>
  section button.primary {
    /* ... */
  }
  </style>
</head>
<body>
  <section>
    <button class="primary"></button>
  </section>
</body>

इनलाइन करने के बाद का उदाहरण.

एचटीएमएल में ज़रूरी सीएसएस को इनलाइन करने के बाद, आपको पेज पर फ़्लिकरिंग की समस्या नहीं दिखेगी:

सीएसएस इनलाइन करने के बाद पेज लोड हो रहा है.

क्रिटिकल सीएसएस इनलाइन करने की सुविधा, अब Angular में उपलब्ध है. साथ ही, यह सुविधा v12 में डिफ़ॉल्ट रूप से चालू होती है. अगर आपके पास v11 वर्शन है, तो angular.json में inlineCritical प्रॉपर्टी को true पर सेट करके इसे चालू करें. Next.js में इस सुविधा को ऑप्ट-इन करने के लिए, अपने next.config.js में experimental: { optimizeCss: true } जोड़ें.

मीटिंग में सामने आए नतीजे

इस पोस्ट में, हमने Chrome और वेब फ़्रेमवर्क के बीच सहयोग के कुछ पहलुओं के बारे में बताया है. अगर आप फ़्रेमवर्क लेखक हैं और आपने उन समस्याओं के बारे में जाना है जिनका हमने आपकी टेक्नोलॉजी से जुड़ी समस्याओं को हल किया है, तो हमें उम्मीद है कि इस जानकारी से आपको परफ़ॉर्मेंस के ऐसे मिलते-जुलते ऑप्टिमाइज़ेशन लागू करने के लिए प्रेरणा मिलेगी.

बेहतर सुविधाओं के बारे में ज़्यादा जानें. Aurora की जानकारी पोस्ट में, आपको Core Web Vitals के लिए किए जा रहे ऑप्टिमाइज़ेशन के काम की पूरी सूची मिल सकती है.