"उपरोक्त सामग्री में सीएसएस को रेंडर-ब्लॉक करना समाप्त करें"

Question

मैं अपनी साइट के प्रदर्शन को बेहतर बनाने के लिए Google PageSpeed ​​अंतर्दृष्टि का उपयोग कर रहा हूं, और अब तक यह बेहद सफल साबित हुआ है। स्क्रिप्ट्स को डिफरेंट करने जैसी चीजों ने खूबसूरती से काम किया, क्योंकि मेरे पास पहले से ही jQuery का इन-हाउस वर्जन था, .ready()स्क्रिप्ट्स को डिफर करने के लिए जब तक पेज पूरी तरह से लोड नहीं हो गया, मुझे बस इतना करना था कि उस खास फंक्शन को इनलाइन करें और पूरी स्क्रिप्ट्स को पेज के अंत तक ले जाएं। वह महान काम किया।

लेकिन अब मैं अपने आप को चेकलिस्ट पर एक पीले रंग की शेष बिंदु पर चमकता हुआ पा रहा हूं: "उपरोक्त सामग्री में सीएसएस को प्रस्तुत करना-अवरुद्ध करना समाप्त करें"।

जिस तरह से मेरा सीएसएस स्थापित किया गया है, उसमें एक वैश्विक _.cssफ़ाइल वाली शैलियाँ हैं जो सामान्य रूप से पृष्ठ संरचना पर लागू होती हैं, या साइट पर एक या दो से अधिक स्थानों पर उपयोग की जाती हैं। अधिकांश पृष्ठों तो एक संबद्ध सीएसएस फ़ाइल है (उदाहरण के लिए, party.phpहै party.cssकि विशेष पेज के लिए शैलियों विशिष्ट युक्त)। सभी सीएसएस फाइलें अनिश्चित काल के लिए कैश की जाती हैं, जैसा कि मैं /t=FILEMTIMEफ़ाइलनाम (और बाद में उन्हें .htaccess के साथ हटा देता हूं) इस बात की गारंटी देता हूं कि जब वे बदले जाते हैं तो फाइलें अपडेट की जाती हैं।

तो वैसे भी, Google उपरोक्त सामग्री के लिए आवश्यक महत्वपूर्ण शैलियों को सम्मिलित करने की अनुशंसा करता है। परेशानी है ... ठीक है, इस स्क्रीनशॉट पर एक नज़र डालें: http://prntscr.com/1qt49e

जैसा कि आप देख सकते हैं ... सभी सामग्री ऊपर-नीचे है! लोग स्क्रॉलिंग से नफरत करते हैं, खासकर एक ऐसे गेम पर जिसमें कई पेज लोड करना शामिल है। इसलिए मैंने साइट को एक स्क्रीन पर फिट करने के लिए डिज़ाइन किया (एक अच्छा पर्याप्त रिज़ॉल्यूशन मानकर)। तो इसका मतलब है कि ... सभी शैलियाँ उपरोक्त सामग्री पर लागू होती हैं! तो ... क्या इसका कोई हल है? या क्या मैं एक अन्यथा निकट-पूर्ण स्कोर पर उस पीले निशान के साथ फंस गया हूं?

Comments

इसकी विडंबना यह है कि स्क्रीनशॉट के लिए उपरोक्त सामग्री लोड होने में लंबा समय ले रही है :) वास्तव में, मेरे लिए, स्क्रीनशॉट कभी भी लोड नहीं हुआ

— अनुपम

@ अनुपम शायद हटा दिया गया। Prntscr वास्तव में स्थायित्व के लिए नहीं है, और मुझे उम्मीद नहीं थी इस सवाल होने के लिए काफी इतना लोकप्रिय।

— नीट द डार्क एबसोल

हाँ, सब अच्छा है, सिर्फ एक हल्की टिप्पणी थी

— अनुपम

Answer 1

इससे पहले एक संबंधित प्रश्न पूछा गया है: Google पेजपीड में "उपरोक्त सामग्री" क्या है?

सबसे पहले आपको ध्यान देना होगा कि यह सब ' मोबाइल पेज ' के बारे में है ।
इसलिए जब मैंने आपके प्रश्न और स्क्रीनशॉट की सही व्याख्या की, तो यह आपकी साइट के लिए नहीं है!

इसके विपरीत - Google द्वारा अपने दिशानिर्देशों में बताई गई कुछ चीजें करने से चीजें 'सामान्य' वेबसाइटों के लिए बेहतर से बदतर हो जाएंगी।
और सब कुछ जो Google से आता है वह सिर्फ "पवित्र कब्र" नहीं है क्योंकि यह Google से आता है। और वे स्वयं एक अच्छे रोल मॉडल नहीं हैं यदि आपके एचटीएमएल मार्कअप पर एक नज़र है।

सबसे अच्छी सलाह जो मैं आपको दे सकता हूं:

• अपने CSS में प्रतिस्थापित तत्वों पर चौड़ाई और ऊँचाई सेट करें, ताकि ब्राउज़र तत्वों को लेआउट कर सके और प्रतिस्थापित सामग्री का इंतज़ार न करना पड़े!

इसके अतिरिक्त आप केवल एक के बजाय विभिन्न सीएसएस फाइलों का उपयोग क्यों करते हैं?
अतिरिक्त अनुरोध डेटा मात्रा की छोटी मात्रा से भी बदतर है। और पहले अनुरोध के बाद सीएसएस फ़ाइल को वैसे भी कैश किया जाता है।

जिन बातों का हमेशा ध्यान रखना चाहिए वे हैं:

• जितना संभव हो उतना अनुरोधों की संख्या कम करें
• अपने समग्र पृष्ठ का वजन यथासंभव कम रखें

और Google के पेजस्पीड इनसाइट्स टूल का 100% प्राप्त करने के तरीके के बारे में अपने दिमाग में पहेली न लगाएं ...! ;-)

जोड़ 1: यहां वह पृष्ठ है जिस पर Google हमें दिखाता है, वे सीएसएस ऑप्टिमाइज़ करने के लिए क्या सलाह देते हैं ।

जैसा कि पहले कहा गया है, मुझे नहीं लगता कि यह न तो यथार्थवादी है और न ही यह "सामान्य" वेबसाइट के लिए समझ में आता है! क्योंकि मुख्य रूप से जब आपके पास एक उत्तरदायी वेब डिज़ाइन होता है तो यह सबसे निश्चित है कि आप मीडिया के प्रश्नों और अन्य लेआउट शैलियों का उपयोग करें। इसलिए यदि आप पहले अपने CSS को लोड नहीं करने जा रहे हैं और ब्लॉकिंग तरीके से आपको FOUT ( फ्लैश ऑफ अनस्टाइलड टेक्स्ट ) मिलेगा । मैं वास्तव में विश्वास नहीं करता कि यह पेज को रेंडर करने के लिए कम से कम कुछ और मिलीसेकंड से "बेहतर" है!

Imho Google एक नया "प्रचार" शुरू कर रहा है (जब मेरे पास स्टाकोरफ्लो पर इसके बारे में सभी प्रश्नों पर एक नज़र है) ...!

Comments

बहुत बढ़िया जवाब। परेशानी यह है कि यदि आपके पास एक धीमा पृष्ठ है तो Google आपको दंडित करता है। इसलिए वे आपको अपने विचारों का पालन करने के लिए लागू करते हैं यह महान या पूरी तरह से बेवकूफ होना चाहिए। :(

— स्टीव होर्वाथ

@ नेटसर्फर कभी नहीं जो कि Google से आता है "पवित्र कब्र" LOL है। मैं 100 हासिल करने के लिए अपना सिर खुजला रहा था, लेकिन इस टिप्पणी को पढ़ने के बाद 92 पर रुक गया।

— किरणिंग

आपको अधिक जोर देना चाहिए, तथ्य यह है कि Google अपने स्वयं के सुझावों का पालन नहीं करता है ।

— श्री स्मिथ

अतिरिक्त अनुरोध HTTP / 2 और SPDY के साथ विकिपीडिया की समस्या से कम हो जाएंगे , "HTTP / 2 (जो SPDY की एक प्रति थी) के पहले मसौदे में अतिरिक्त प्रदर्शन में सुधार सिर से बचने के लिए अनुरोधों और प्रतिक्रियाओं के बहुसंकेतन से आते हैं- HTTP 1 में लाइन की समस्या को रोकने (भले ही HTTP पाइपलाइनिंग का उपयोग किया जाता है), हेडर संपीड़न और अनुरोधों की प्राथमिकता। "

— रेशनलडेव

मेरे पेज को 72 मोबाइल और 80 डेस्कटॉप से ​​प्राप्त करने की कोशिश कर रहा था, लेकिन एक ही मुद्दा था। मैंने Fss दिखाते हुए अपने css को कहीं कम और संभवतः उपयोगकर्ता के अनुभव को कम करने से मना कर दिया!

— युवावस्था

Answer 2

मुझे Google पृष्ठ गति (मोबाइल के लिए) पर 99/100 कैसे मिला

TLDR: अपने <style></style>टैग के बीच अपनी पूरी सीएसएस स्क्रिप्ट को संपीड़ित और एम्बेड करें ।

---

मैं उस मायावी 100/100 स्कोर का पीछा कर रहा हूं जो अब लगभग एक सप्ताह के लिए है। आप की तरह, अंतिम शेष आइटम "फोल्ड सामग्री के ऊपर प्रस्तुत करना-अवरुद्ध सीएसएस" को समाप्त कर रहा था।

निश्चित रूप से एक आसान हल है ?? नहीं। मैंने फिलामेंट समूह के loadCSS समाधान की कोशिश की । मेरी पसंद के लिए बहुत .js

asyncसीएसएस के लिए विशेषताओं के बारे में क्या है (जैसे जेएस)? वे मौजूद नहीं हैं।

मैं हार मानने को तैयार था। तब यह मुझ पर थोपा गया। यदि स्क्रिप्ट को लिंक करना रेंडर को ब्लॉक कर रहा है, तो क्या होगा अगर मैं इसके बजाय अपने पूरे सीएसएस को सिर में एम्बेड करता हूं। इस तरह से ब्लॉक करने के लिए कुछ भी नहीं था।

यह बिल्कुल गलत लग रहा था कि मेरी शैली टैग में सीएसएस की 1263 लाइनों को एम्बेड करना है। लेकिन मैंने उसे एक चक्कर दिया। मैंने इसे पहली बार प्रयोग करके इसे संकुचित किया (और इसे उपसर्ग किया):

postcss -u autoprefixer --autoprefixer.browsers 'last 2 versions' -u cssnano --cssnano.autoprefixer false *.css -d min/ एनपीएम पोस्टपैक पैकेज देखें ।

अब यह स्पेस-लेस सीएसएस की सिर्फ एक लंबी लाइन थी। मैंने <style>your;great-wall-of-china-long;css;here</style>अपने होम पेज पर टैग में सीएसएस को बंद कर दिया । फिर मैंने पृष्ठ गति अंतर्दृष्टि के साथ फिर से विश्लेषण किया।

मैं मोबाइल पर 90/100 से 99/100 तक चला गया !!!

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

YMMV (आपका माइलेज भिन्न हो सकता है) आपकी सीएसएस की लंबाई पर लंबित है। Google आपको सामग्री से बहुत अधिक ऊपर डिंग कर सकता है। लेकिन मान नहीं; परीक्षा!

टिप्पणियाँ

1. मैं अब केवल अपने होम पेज पर यह कर रहा हूं ताकि लोगों को मेरे सबसे महत्वपूर्ण पेज पर FAST रेंडर मिल जाए।

2. आपका सीएसएस कैश नहीं होगा। हालांकि मैं बहुत चिंतित नहीं हूं। दूसरे वे मेरी साइट पर एक और पेज हिट करते हैं, .cs को कैश किया जाएगा (नोट 1 देखें)।

Comments

अपने समर्पण और शोध के लिए धन्यवाद, हालांकि मैं व्यक्तिगत रूप से ऐसा करने का सपना नहीं

— देखूंगा

तो क्या बात है, एक ऐसे अंक को हासिल करने की कोशिश को छोड़कर जो वास्तव में कुछ भी मदद नहीं करेगा?

— लैरीबड

नीट कि आपको अपना स्कोर अधिक मिला, लेकिन अब आपकी साइट के प्रत्येक पृष्ठ का वजन अधिक होगा। हालांकि, अच्छा लगता है।

— एडवर्डएम

@EdwardM धन्यवाद! पोस्ट में मेरा नोट 2 देखें। एक बार जब वे एक दूसरे पृष्ठ पर आते हैं, तो सीएसएस कैश हो जाता है, और वजन का मुद्दा दूर हो जाता है।

— elbowlobstercowstand

@LarryBud उच्च स्कोर का बिंदु? मेरे लिए और पैसा। मेरी वेबसाइट Google में जितनी ऊंची है, उतनी ही संभव है कि कोई उस पर क्लिक करे और ग्राहक बने। क्योंकि Google रैंकिंग निर्धारित करने के लिए पृष्ठ गति का उपयोग करता है , इसलिए मैंने अपने स्कोर में सुधार करने का निर्णय लिया।

— एल्बोलोब्स्टर्कोवॉस्ट

Answer 3

कुछ सुझाव जो मदद कर सकते हैं:

• मैं कल सीएसएस ऑप्टिमाइज़ेशन में इस लेख पर आया था: सीएसएस प्रोफाइलिंग फॉर ... ऑप्टिमाइज़ेशन
  सीएसएस पर बहुत सारी उपयोगी जानकारी और सीएसएस सबसे अधिक प्रदर्शन नालियों का कारण बनता है।

• मैं "छिपा हुआ रहस्य" जिसके द्वारा Google क्रोम (कैनरी) देव उपकरण में पर jQueryUK पर निम्न प्रस्तुतिकरण देखा: DevTools कि कर सकते हैं । टाइम टू फर्स्ट पेंट , रिपीट और महंगा सीएसएस पर सेक्शन देखें ।

• इसके अलावा, यदि आप आवश्यकता जेआरएस जैसे लोडर का उपयोग कर रहे हैं, तो आप सीएसएस लोडर प्लगइन्स में से एक पर एक नज़र डाल सकते हैं, जिसे आवश्यकता-सीएसएस कहा जाता है , जो सीएसएसओ का उपयोग करता है - एक अनुकूलन जो संरचनात्मक अनुकूलन भी करता है, जैसे। समान गुणों वाले ब्लॉक को मर्ज करना। मैंने इसे कई बार इस्तेमाल किया और यह बहुत सीएसएस को केस से केस में बचा सकता है।

बंद प्रश्न: मैं आपके द्वारा लोड किए जा रहे सभी छोटे चिह्नों के लिए स्प्राइट बनाने में दूसरा @Enzino। फ़ाइल का आकार इतना छोटा है कि यह वास्तव में प्रत्येक आइकन के लिए सर्वर राउंडट्रिप का वारंट नहीं करता है। यह भी ध्यान रखें कि समवर्ती HTTP अनुरोधों की कुल संख्या ब्राउज़र कर सकता है। तो बड़ी संख्या में छोटे आइकन के लिए अनुरोध "रेंडर-ब्लॉकिंग" भी हैं। हालाँकि एक खाली पृष्ठ आपकी तुलना करता है, लेकिन मुझे पसंद है कि उदाहरण के लिए duckduckgo कैसे लोड होता है।

Comments

लगता है कि duckduckgo को भी अपने पेज स्कोर की परवाह नहीं है, यहाँ देखें

— चेतबाहन

Answer 4

कृपया निम्नलिखित पृष्ठ https://varvy.com/pagespeed/render-blocking-css.html पर देखें । इससे मुझे "रेंडर ब्लॉकिंग सीएसएस" से छुटकारा पाने में मदद मिली । " रेंडर ब्लॉकिंग सीएसएस " को हटाने के लिए मैंने निम्नलिखित कोड का उपयोग किया । अब Google पृष्ठ गति अंतर्दृष्टि में मुझे रेंडरिंग ब्लॉकिंग सीएसएस से संबंधित समस्या नहीं मिल रही है।

<!-- loadCSS -->
<script src="https://cdn.rawgit.com/filamentgroup/loadCSS/6b637fe0/src/cssrelpreload.js"></script>
<script src="https://cdn.rawgit.com/filamentgroup/loadCSS/6b637fe0/src/loadCSS.js"></script>
<script src="https://cdn.rawgit.com/filamentgroup/loadCSS/6b637fe0/src/onloadCSS.js"></script>
<script>
      /*!
      loadCSS: load a CSS file asynchronously.
      */
      function loadCSS(href){
        var ss = window.document.createElement('link'),
            ref = window.document.getElementsByTagName('head')[0];

        ss.rel = 'stylesheet';
        ss.href = href;

        // temporarily, set media to something non-matching to ensure it'll
        // fetch without blocking render
        ss.media = 'only x';

        ref.parentNode.insertBefore(ss, ref);

        setTimeout( function(){
          // set media back to `all` so that the stylesheet applies once it loads
          ss.media = 'all';
        },0);
      }
      loadCSS('styles.css');
    </script>
    <noscript>
      <!-- Let's not assume anything -->
      <link rel="stylesheet" href="styles.css">
    </noscript>

Comments

जब मैं उल्लिखित फ़ंक्शन का उपयोग करता हूं तो यह पेजस्पीड स्कोर कम कर देता है। फ़ंक्शन मैंने लिखा है: jsfiddle.net/kvfzbxxo क्या आप मेरी मदद कर सकते हैं?

— मेष

मैंने निम्न url पर इसी फ़ंक्शन को कार्यान्वित किया है और कृपया यहां " whitecashback.in " गति पर एक नज़र है। आप स्रोत url को देख सकते हैं और पाद लेख में "loadCSS" फ़ंक्शन पा सकते हैं। इससे आपको यह समझने में मदद मिलेगी कि मैंने कोड को कैसे लागू किया। पृष्ठ की गति बढ़ रही है क्योंकि पृष्ठ के बाद css लोड हो रहा है।

— अमुक सक्सेना

मैंने इस कोड का उपयोग किया है: jsfiddle.net/sbpa1hun। अब वेबसाइट में CSS लोड नहीं किया जा रहा है।

— अर्शो

मैंने उल्लेख किया है कि इस कोड को जोड़ने के बाद: jsfiddle.net/sbpa1hun जो आपकी वेबसाइट में उपयोग किया जा रहा है, मेरी वेबसाइट ने सभी शैलियों को खो दिया है। यह पृष्ठ गति को कम कर देता है लेकिन CSS अब काम नहीं कर रहा है! क्या आप मेरी कुछ मदद कर सकते हैं? मुझे पेज स्पीड में लगभग 40 मिल रहे हैं। लेकिन आपका कोड जोड़ने पर मुझे लगभग 70 मिलेंगे। लेकिन सीएसएस काम नहीं कर सका।

— अर्शो

यदि आप इसे jsfiddle में करने का प्रयास कर रहे हैं तो यह काम नहीं करेगा, कृपया अपनी वेबसाइट में इस कोड को आज़माएं, jsfiddle बाहरी वेबसाइटों के लिए लोडिंग सीएसएस को रोक देगा। क्योंकि आप जावास्क्रिप्ट का उपयोग करके बाहरी स्रोतों का सीएसएस लोड कर रहे हैं। तो कृपया अपनी वेबसाइट में ऐसा करने का प्रयास करें। इसके अलावा jquery फ़ाइलों को शामिल करने का प्रयास करें, वे आपकी स्क्रिप्ट में गायब हैं। Js फ़ाइलों को शामिल करने के बाद, यह काम कर सकता है। कृपया ध्यान दें, https साइटें jsfiddle में काम कर सकती हैं। आपको यह त्रुटि मिल रही है: "मिश्रित सक्रिय सामग्री अवरुद्ध लोडिंग"। आपको इसे पहले हल करने की आवश्यकता है।

— अमुक सक्सेना

Answer 5

मैंने भी इस नए पेजस्पीड मेट्रिक से संघर्ष किया है।

हालाँकि मुझे अपना स्कोर% 100 तक वापस लाने का कोई व्यावहारिक तरीका नहीं मिला है लेकिन कुछ चीजें हैं जो मुझे मददगार लगी हैं।

सभी सीएसएस को एक फ़ाइल में मिलाने से बहुत मदद मिली। मेरी सभी साइटें% 95 -% 98 पर वापस आ गई हैं।

मीठी उच्च स्कोर प्राप्त करने के लिए पहले पृष्ठ पर केवल दूसरी चीज जो मैं सोच सकता था, वह सभी आवश्यक सीएसएस (जो कि इसमें से अधिकांश - मेरे पृष्ठों के लिए कम से कम प्रतीत होती है) को इनलाइन करना था। यद्यपि यह आपके गति स्कोर में मदद कर सकता है, लेकिन यह संभवतः आपके पृष्ठ को लोड धीमा कर देगा।

Comments

मुंहतोड़ पत्रिका के पास पेजस्पीड टेस्ट डेवलपर्स

— Mo.

Answer 6

इसके लिए 2019 का इष्टतम समाधान HTTP / 2 सर्वर पुश है ।

आप किसी भी हैवी जावास्क्रिप्ट समाधान या इनलाइन शैलियों की जरूरत नहीं है। हालाँकि, आपको एक सर्वर की आवश्यकता है जो HTTP 2.0 (कोई भी आधुनिक सर्वर संस्करण) का समर्थन करता है, जिसे स्वयं आपके सर्वर को SSL चलाने की आवश्यकता होती है। हालाँकि, चलो एनक्रिप्ट के साथ वैसे भी एसएसएल का उपयोग नहीं करने का कोई कारण नहीं है।

मेरी साइट https://r.je/ में मोबाइल और डेस्कटॉप दोनों के लिए 100/100 स्कोर है।

इन त्रुटियों का कारण यह है कि ब्राउज़र को एचटीएमएल मिलता है, फिर पेज रेंडर होने से पहले सीएसएस के डाउनलोड होने का इंतजार करना पड़ता है। HTTP2 का उपयोग करके आप HTML और CSS दोनों को एक ही समय में भेज सकते हैं।

आप लिंक हेडर सेट करके HTTP / 2 पुश का उपयोग कर सकते हैं।

अपाचे उदाहरण (.htaccess):

Header add Link "</style.css>; as=style; rel=preload, </font.css>; as=style; rel=preload"

NGINX के लिए आप हेडर को सर्वर कॉन्फ़िगरेशन में अपने स्थान टैग में जोड़ सकते हैं:

location = / {
    add_header Link "</style.css>; as=style; rel=preload, </font.css>; as=style; rel=preload";
}

इस हेडर सेट के साथ, ब्राउज़र उसी समय HTML और CSS प्राप्त करता है जो CSS को ब्लॉकिंग रेंडरिंग से रोकता है।

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

एक विस्तृत चर्चा के लिए, मेरी पोस्ट यहां देखें: HTTP / 2 पुश का उपयोग करके रेंडर ब्लॉकिंग सीएसएस को हटा दें

Comments

मैं गलत समझ सकता था, लेकिन सर्वर पुश करने के कारण सीएसएस को हर बार जब आप पृष्ठ को लोड करते हैं, तो इसे भेजने से पहले सिर्फ एक बार भेजा जाएगा?

— नीट द डार्क एबसोल

हां, कुकीज़ जैसी कुछ तकनीकें हैं जो इससे बचने में मदद कर सकती हैं। यहां सेलेक्टिवली पुश करने वाले सेक्शन पर एक नजर डालें: nginx.com/blog/nginx-1-13-9-http2-server-push

— Tom B

Answer 7

स्वचालित रूप से अपनी सीएसएस फ़ाइलों से इनलाइन शैलियों को उत्पन्न करने के लिए एक पैकेज का उपयोग करने पर विचार करें। लारवेल के लिए एक अच्छा ग्रंट क्रिटिकल या क्रिटिकल सीएसएस है ।

Answer 8

हाय jQuery के लिए आप केवल इस तरह का उपयोग कर सकते हैं

Async और type = "text / javascript" का ही प्रयोग करें