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

यह नियम तब ट्रिगर होता है, जब 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>

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

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

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

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

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

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

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

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

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

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