इस पेज का अनुवाद Cloud Translation API से किया गया है.

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 पर अपडेट करता है और स्टाइल को डीओएम पर लागू करता है.

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

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

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

यह न करें

<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 के लिए किए जा रहे ऑप्टिमाइज़ेशन के काम की पूरी सूची मिल सकती है.