सीएसएस डिलीवरी को ऑप्टिमाइज़ करना

यह नियम तब ट्रिगर होता है, जब PageSpeed Insights को पता चलता है कि किसी पेज पर बाहरी स्टाइलशीट को ब्लॉक करने वाली इमेज शामिल है, जिससे पहली बार रेंडर होने में ज़्यादा समय लगता है.

खास जानकारी

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

सुझाव

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

छोटी सीएसएस फ़ाइल को इनलाइन करने का उदाहरण

अगर एचटीएमएल दस्तावेज़ ऐसा दिखता है: 
<html>
  <head>
    <link rel="stylesheet" href="small.css">
  </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
  </body>
</html>
और रिसॉर्स small.css इस तरह का है: 
  .yellow {background-color: yellow;}
  .blue {color: blue;}
  .big { font-size: 8em; }
  .bold { font-weight: bold; }
इसके बाद, ज़रूरी सीएसएस को इस तरह इनलाइन किया जा सकता है: 
<html>
  <head>
    <style>
      .blue{color:blue;}
    </style>
    </head>
  <body>
    <div class="blue">
      Hello, world!
    </div>
    <noscript id="deferred-styles">
      <link rel="stylesheet" type="text/css" href="small.css"/>
    </noscript>
    <script>
      var loadDeferredStyles = function() {
        var addStylesNode = document.getElementById("deferred-styles");
        var replacement = document.createElement("div");
        replacement.innerHTML = addStylesNode.textContent;
        document.body.appendChild(replacement)
        addStylesNode.parentElement.removeChild(addStylesNode);
      };
      var raf = window.requestAnimationFrame || window.mozRequestAnimationFrame ||
          window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
      if (raf) raf(function() { window.setTimeout(loadDeferredStyles, 0); });
      else window.addEventListener('load', loadDeferredStyles);
    </script>
  </body>
</html>

इस बदलाव में, ज़रूरी/गैर-ज़रूरी सीएसएस को तय करना, अहम सीएसएस को इनलाइन करना, और गै़र-ज़रूरी सीएसएस की लोड होने में देरी जैसे बदलाव अपने-आप हो सकते हैं. ये बदलाव nginx, Apache, IIS, ATS, और Open Lightspeed के लिए अपने-आप होने के लिए किए जाते हैं.prioritize_critical_css

सीएसएस को एसिंक्रोनस रूप से लोड करने के लिए, loadCSS फ़ंक्शन भी देखें. यह क्रिटिकल के साथ काम कर सकता है. यह टूल, किसी वेब पेज से ज़रूरी सीएसएस को एक्सट्रैक्ट करने का एक टूल है.

फ़ोल्ड के ऊपर वाले कॉन्टेंट को स्टाइल करने के लिए, ज़रूरी ज़रूरी स्टाइल इनलाइन कर दी जाती हैं और दस्तावेज़ पर तुरंत लागू हो जाती हैं. पेज की शुरुआती पेंटिंग के बाद, पूरा छोटा छोटा सा css लोड हो जाता है. इसकी स्टाइल, पेज के लोड होने के बाद उस पर लागू हो जाती हैं. इससे ज़रूरी कॉन्टेंट के शुरुआती रेंडर पर कोई रुकावट नहीं आती.

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

बड़े डेटा यूआरआई को इनलाइन न करें

सीएसएस फ़ाइलों में डेटा यूआरआई को इनलाइन करते समय सावधानी बरतें. अपनी सीएसएस में छोटे डेटा यूआरआई को चुनिंदा तरीके से इस्तेमाल करना सही हो सकता है, लेकिन बड़े डेटा यूआरआई को इनलाइन करने से, पेज के ऊपरी हिस्से वाले सीएसएस का साइज़ बड़ा हो सकता है. इससे पेज रेंडर होने में लगने वाला समय कम हो जाएगा.

सीएसएस एट्रिब्यूट को इनलाइन न करें

एचटीएमएल एलिमेंट पर सीएसएस एट्रिब्यूट को इनलाइन करना (उदाहरण के लिए, <p style=...>) का इस्तेमाल करने से बचना चाहिए, क्योंकि इससे अक्सर ग़ैर-ज़रूरी कोड का डुप्लीकेट वर्शन बनता है. इसके अलावा, एचटीएमएल एलिमेंट पर इनलाइन सीएसएस, कॉन्टेंट की सुरक्षा के बारे में नीति (सीएसपी) की मदद से, डिफ़ॉल्ट रूप से ब्लॉक होती है.

सुझाव/राय दें या शिकायत करें

क्या इस पेज से कोई मदद मिली?