उपरोक्त सामग्री में जावास्क्रिप्ट और सीएसएस को रेंडर-ब्लॉक करना हटा दें

Question

मैं एक Drupal 7 साइट बना रहा हूं। ये मेरे द्वारा उपयोग किए जाने वाले कुछ मॉड्यूल हैं: Adaptivetheme (थीम), व्यूज़ और कंटेंट पैनल्स, पैनल्स, मिनी पैनल, पैनल्स हर जगह, पेज मैनेजर, मेनू के लिए सुपरफ़िश, Addthis, चुना (ड्रॉप डाउन)।

मेरी साइट के प्रदर्शन में सुधार और सीएसएस और जेएस फाइलों से निपटने के लिए मैं एडवाग मॉड्यूल का उपयोग कर रहा हूं ।

Google के Pagespeed परीक्षण को चलाते समय मुझे निम्न त्रुटि के रूप में "चाहिए" चाहिए:

उपरोक्त
सामग्री में जावास्क्रिप्ट और सीएसएस को रेंडर-ब्लॉक करने को हटा दें आपके पेज में 6 ब्लॉकिंग स्क्रिप्ट संसाधन और 8 ब्लॉकिंग सीएसएस संसाधन हैं। यह आपके पृष्ठ को रेंडर करने में देरी का कारण बनता है।
आपके पेज पर दी गई उपरोक्त सामग्री में से कोई भी लोड किए जाने के लिए निम्न संसाधनों की प्रतीक्षा किए बिना प्रदान की जा सकती है। अवरुद्ध संसाधनों को रोकने या असिंक्रोनस रूप से लोड करने का प्रयास करें, या सीधे HTML में उन संसाधनों के महत्वपूर्ण भागों को इनलाइन करें।

यह जानकारी Google आपूर्ति है:

• रेंडर-ब्लॉकिंग जावास्क्रिप्ट निकालें
• CSS डिलीवरी को ऑप्टिमाइज़ करें

क्या कोई तरीका है जो मैं एडवाग मॉड्यूल या ड्रुपल कोर की सेटिंग्स को बदल सकता हूं, और इस मुद्दे को हल कर सकता हूं?

क्या इस लक्ष्य को पाने का एक और तरीका है?

अपडेट - mikeytown2 उत्तर के अनुसार परिवर्तन लागू करने के बाद मुझे Google के पेजस्पेड परीक्षण पर निम्न संदेश मिला:

उपरोक्त सामग्री में जावास्क्रिप्ट और सीएसएस को रेंडर-ब्लॉक करना हटा दें
आपके पेज में 6 ब्लॉकिंग स्क्रिप्ट संसाधन और 4 ब्लॉकिंग सीएसएस संसाधन हैं। यह आपके पृष्ठ को रेंडर करने में देरी का कारण बनता है।
आपके पेज पर दी गई उपरोक्त सामग्री में से कोई भी लोड किए जाने के लिए निम्न संसाधनों की प्रतीक्षा किए बिना प्रदान की जा सकती है। अवरुद्ध संसाधनों को रोकने या असिंक्रोनस रूप से लोड करने का प्रयास करें, या सीधे HTML में उन संसाधनों के महत्वपूर्ण भागों को इनलाइन करें।

Comments

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

— मोलॉट

आपका प्रश्न बहुत व्यापक है। आपकी साइट CSS और JS का उपयोग करती है - इसलिए इंटरनेट पर हर दूसरी साइट है। जब तक CSS का कैस्केड क्रम बना रहता है, तब तक कोई कारण नहीं है कि आप अपने सभी CSS को 1 फ़ाइल में एकत्र नहीं कर सकते। जब तक आपका JS ठीक है, तब तक कोई कारण नहीं है कि इसे 1 फ़ाइल (एक चरम उदाहरण के रूप में) में विलय नहीं किया जा सकता है। यदि आप पृष्ठ द्वारा आवश्यक सीएसएस और जेएस फाइलों / संसाधनों पर विवरण प्रदान कर सकते हैं; आप अधिक सूचित उत्तर प्राप्त करने में सक्षम हो सकते हैं।

— तेनकेन

@ यह कैसे व्यापक है? उसके पास CSS और JS एक रेंडर-ब्लॉकिंग तरीके से जुड़े हुए हैं और वह उन्हें नॉन-ब्लॉकिंग तरीके से चाहता है। इन तरीकों को बहुत अधिक समझाया गया है ( Google द्वारा, उदाहरण के लिए जैसे कि ओपी Google पेजस्पीड पुनर्संबंधों को संदर्भित करता है)। आपकी टिप्पणी का ओपी द्वारा पूछे गए मुद्दे से कोई लेना-देना नहीं है।

— मोलॉट

सभी लिंक किए गए css और js फाइलें ब्लॉक हो जाती हैं जब तक कि उनका इनलाइन कोड या उपयोग asyncनहीं होता है जो पुराने ब्राउज़रों द्वारा समर्थित नहीं है। उदाहरण के लिए, डिफ़ॉल्ट Drupal एकत्रीकरण में <link>आपके सभी css के टैग शामिल हैं । यदि आपकी साइट CSS या JS बहुत जटिल है, तो आपके पास हमेशा यह समस्या होगी। यदि आप अपनी साइट को सही ढंग से बनाते हैं तो आप सुरक्षित रूप से फ़ाइलों को एकत्र कर सकते हैं। फ़ाइल निर्भरता पर कोई जानकारी नहीं के साथ प्रश्न विवरण बहुत व्यापक हैं - एक मॉड्यूल कभी भी अपनी समस्या को ठीक नहीं कर सकता है ; यह सब कैसे सीएसएस और जेएस लिखा गया है और इसके शामिल करने के आदेश और जटिलता के बारे में है। उसने कभी नहीं कहा कि वह गैर-रोकना चाहता है, आपकी मान्यताओं को वह चाहता है।

— तेनकेन

@tenken मैंने अपने प्रश्न को अपडेट किया, और मॉड्यूल के संबंध में अधिक जानकारी दी - आशा है कि आपको समझने में मदद मिलेगी कि कौन सी CSS और JS मैं उपयोग करता हूं।

— EB84

Answer 1

README कैसे इस का उपयोग करते हुए वर्तमान करने के लिए पर एक गाइड है 7.x-2.31 + AdvAgg के संस्करण । उच्च प्रदर्शन समूह पर इस विकी पृष्ठ को भी देखें । अधिकांश साइटें https://developers.google.com/speed/pagespeed/insights/ पर एक पूर्ण 100/100 स्कोर प्राप्त कर सकती हैं । नीचे AdvAgg की एक ताजा स्थापना के लिए इसे कैसे प्राप्त किया जाए, इस पर दिशा-निर्देश।

सुनिश्चित करें कि परिवर्तन आपकी साइट को गड़बड़ाने के लिए हर अनुभाग के बाद साइट की जांच करना सुनिश्चित करें। AdvAgg संशोधक के तहत परिवर्तन आमतौर पर सबसे अधिक समस्याग्रस्त हैं, लेकिन वे सबसे बड़ा सुधार प्रदान करते हैं।

उन्नत सीएसएस / जेएस एकत्रीकरण

के लिए जाओ admin/config/development/performance/advagg

• "अनुशंसित (अनुकूलित) सेटिंग्स का उपयोग करें" चुनें

एडवांस कंप्रेस जावास्क्रिप्ट

अगर सक्षम नहीं है और जाने के लिए AdvAgg Compass Javascript स्थापित करें admin/config/development/performance/advagg/js-compress

• यदि उपलब्ध हो तो JSMin चुनें; अन्यथा JSMin + चुनें
• सब कुछ (सबसे छोटी फ़ाइलें) पट्टी का चयन करें
• इन फ़ाइलों को संसाधित करने के लिए बैच कंप्रेस लिंक पर क्लिक करें

AdvAgg Async फ़ॉन्ट लोडर

अगर सक्षम नहीं है और जाने के लिए AdvAgg Async फ़ॉन्ट लोडर स्थापित करें admin/config/development/performance/advagg/font

• एग्रीगेट में शामिल स्थानीय फ़ाइल का चयन करें (संस्करण: XXX)। यदि यह विकल्प उपलब्ध नहीं है, तो इसे स्थापित करने के तरीकों के विकल्पों के ठीक नीचे के निर्देशों का पालन करें।
• "स्थानीय स्तर का उपयोग करें" की जाँच करें ताकि अस्थिर पाठ (FOUT) का फ्लैश केवल एक बार हो। "
• "एक कुकी सेट करें ताकि अस्थिर पाठ (फ़्यूएस) का फ्लैश केवल एक बार हो।"

एडवाग बुंडलर

अगर सक्षम नहीं है और जाने के लिए AdvAgg Bundler स्थापित करें admin/config/development/performance/advagg/bundler

HTTP / 2.0 सेटिंग्स

• "सीएसएस बंडलों प्रति पृष्ठ की लक्ष्य संख्या" के तहत 25 का चयन करें
• "जेएस बंडलों प्रति पृष्ठ की लक्ष्य संख्या" के तहत 25 का चयन करें
• "समूहीकरण तर्क" के तहत "फ़ाइल आकार" चुनें

HTTP / 1.1 सेटिंग्स (डिफ़ॉल्ट)

• "सीएसएस बंडल प्रति पृष्ठ की लक्ष्य संख्या" के तहत 2 का चयन करें
• "जेएस बंडलों प्रति पृष्ठ की लक्ष्य संख्या" के तहत 5 का चयन करें
• "समूहीकरण तर्क" के तहत "फ़ाइल आकार" चुनें

25 बंडलों बनाम 2 और 5 को ब्राउज़र कैशिंग के साथ करना है। अधिक फाइलें ब्राउजर के बेहतर अवसर के बराबर होती हैं, जो इसके कैश में कॉम्बो होते हैं, लेकिन अधिक फाइलों का अर्थ है कि HTTP 1.1 में अधिक कनेक्शन स्थापित और खोले जा रहे हैं। सीएसएस के लिए 2 का उपयोग करें क्योंकि यह संख्या किसी भी नए कनेक्शन की प्रतीक्षा नहीं करती है; JS 5 है क्योंकि अधिकांश ब्राउज़रों की समवर्ती कनेक्शन सीमा 6 है। बंडलों के लिए इस नंबर को कई परीक्षणों के बाद चुना गया था। HTTP 2.0 में एक स्ट्रीमिंग कनेक्शन है और कई CSS और JS फ़ाइलों के लिए जुर्माना लगभग न के बराबर है; इस प्रकार ब्राउज़र कैश के लिए अनुकूलन सबसे अच्छा विकल्प है; इस प्रकार 25 को CSS / JS के लिए इस्तेमाल किया जाना चाहिए जब HTTP / 2.0 परोसना चाहिए।

एडवाग रीलोकेट

अगर सक्षम नहीं है और जाने के लिए AdvAgg Relocate स्थापित करें admin/config/development/performance/advagg/relocate

• "अनुशंसित (अनुकूलित) सेटिंग्स का उपयोग करें" चुनें

AdvAgg संशोधक

यदि सक्षम नहीं है और जाने के लिए AdvAgg संशोधक स्थापित करें admin/config/development/performance/advagg/mod

• "अनुशंसित (अनुकूलित) सेटिंग्स का उपयोग करें" चुनें

क्रिटिकल सीएसएस फ़ाइलें उत्पन्न करना

Https://www.sitelocity.com/critical-path-css-generator और इनपुट के रूप में कई लैंडिंग पृष्ठ महत्वपूर्ण सीएसएस के लिए आवश्यक के रूप में जाओ ; शीर्ष 10 आमतौर पर एक अच्छी शुरुआत है। यदि आपके पास Google Analytics है, तो यह आपको दिखाएगा कि आपके शीर्ष लैंडिंग पृष्ठ https://developers.google.com/analytics/devguides/reporting/core/v3/common-queries#top-landing-pages पर या Piw के लिए कैसे खोजें : //piwik.org/faq/how-to/faq_160/ । यदि आपको नहीं पता कि आपकी साइट के मुखपृष्ठ से किस पृष्ठ को शुरू करना है। आप हमें css https://chrome.google.com/webstore/detail/critical-style-snapshot/gkoeffcejdhhojognlonafnijfkcepob?hl=hi उत्पन्न करने के लिए भी हमसे संपर्क कर सकते हैं।

उदाहरण फ़ाइल नाम और पथ नीचे "बूटस्ट्रैप" थीम के लिए हैं; वे सभी के साथ शुरू करते हैं sites/all/themes/bootstrap/critical-css/; अपने विषय में critical-css/निर्देशिका बनाएँ । अगली निर्देशिका उपयोगकर्ता पर आधारित है; anonymous/, all/या authenticated/इस्तेमाल किया जा सकता है।

अगली निर्देशिका urls/या हो सकती है type/। देख रहा है urls/; फ्रंट पेज के लिए एक विशेष मामला है, अन्य सभी रास्तों में current_path () का उपयोग किया .cssजाता है और अंत में जोड़े गए फ़ाइल नाम के साथ ; Https://api.drupal.org/api/drupal/includes%21path.inc/function/current_path/7.x देखें

को देखते हुए type/इस नोड प्रकार के लिए एक विशेष मामला है। मशीन नाम का उपयोग करें और .cssअंत में जोड़ें । इस प्रकार के किसी भी नोड में इस महत्वपूर्ण सीएसएस फ़ाइल को लागू किया जाएगा और इनलेट किया जाएगा। नीचे कुछ उदाहरण दिखाए गए हैं कि यह कैसे काम करता है।

"सामने" पृष्ठ के लिए वैध उदाहरण फ़ाइल स्थान: sites/all/themes/bootstrap/critical-css/anonymous/urls/front.css

"नोड / 1" current_path () पृष्ठ के लिए मान्य उदाहरण फ़ाइल स्थान: sites/all/themes/bootstrap/critical-css/anonymous/urls/node/1.css

"पेज" के नोड प्रकार के लिए मान्य उदाहरण फ़ाइल स्थान: sites/all/themes/bootstrap/critical-css/anonymous/type/page.css

यदि आप इन सीएसएस फ़ाइलों को उत्पन्न करने के लिए किसी तरह का स्वचालित तरीका चाहते हैं, तो फोरकिचन्स का एक उत्कृष्ट लेख है कि कैसे सेट अप करें: https://fourword.fourkitchens.com/article/use-grunt-and-advagg-inline-critical-css -drupal-7-विषय

Comments

यह कैसे AdvAgg का उपयोग करने का एक बड़ा अवलोकन है! धन्यवाद। हो सकता है कि यह पाठ आपके प्रोजेक्ट पेज के लिए लिंक किए गए "प्रलेखन" पृष्ठ की शुरुआत हो सकती है :)

— तेनकेन

पहले ही किया था :) drupal.org/node/2189523#comment-8594829

— mikeytown2

@ mikeytown2 महान जवाब के लिए धन्यवाद। मैंने सभी परिवर्तनों को लागू किया, और प्रश्न को अद्यतन किया। मुझे थोड़ा अधिक स्कोर मिला - धन्यवाद!

— EB84

आउटपुट को देखते हुए ऐसा प्रतीत होता है कि आपने advagg/modपृष्ठ पर ऑप्टिमाइज़ जावास्क्रिप्ट आदेश के तहत सभी बक्सों की जाँच नहीं की है और / या आपने सभी जेएस को पाद लेख में स्थानांतरित नहीं किया है। इसके अलावा अगर मैं पृष्ठों को पूर्ण स्रोत देख सकता हूं जो आम तौर पर सिफारिशों के साथ मदद करता है (बस आपकी साइट पर लिंक)।

— mikeytown2

यह जानकारी देने के लिए धन्यवाद। यदि आप चाहते हैं कि पृष्ठ पर कम सीएसएस फाइलें एडवांस / बंडल में जाएं और सीएसएस मूल्य को 4 से नीचे 1 में बदल दें। इससे आपको बेहतर स्कोर मिलेगा लेकिन ऐसा करने के बारे में ऊपर दी गई टिप्पणियों को ध्यान में रखें। ऐसा लगता है कि अनुकूली विषय ब्राउज़र सशर्त js में जोड़ने के लिए drupal_add_html_head () का उपयोग करता है, मुझे यह सत्यापित करने की आवश्यकता होगी कि क्या हो रहा है; 1 से अधिक विषय का अर्थ drupal.org/node/2217451 है । इसके अलावा, मैं इस मुद्दे को अवरुद्ध css drupal.org/node/2223267

— mikeytown2

Answer 2

आपको पहले से निर्मित ड्रुपल मॉड्यूल के साथ वास्तव में उच्च स्कोर नहीं मिलेगा, इसे प्राप्त करने का एकमात्र तरीका यह है कि हम प्रत्येक को स्वतंत्र रूप से संबोधित करते हुए, Google स्पीड टूल द्वारा बनाए गए सुझावों में से प्रत्येक में भाग लेने और ध्यान से विश्लेषण करें ।

कुछ चीजें जो मैंने 95 को एक बहुत सक्रिय समाचार साइट में हासिल करने के लिए कीं , जब तक कि मैंने यह लिखा, तब तक nytimes से बेहतर स्कोर किया (अब यह नहीं है):

• [ब्लॉकिंग स्क्रिप्ट] पेज पूरी तरह से रेंडर होने के बाद ही चलने के लिए शेयरथि, फेसबुक विजेट, गूगल प्लस इत्यादि जैसी थर्ड पार्टी स्क्रिप्ट का निष्पादन। इसके लिए HTML.tpl.php के आउटपुट पर कुछ सरल स्ट्रिंग रिप्लेसमेंट की आवश्यकता थी जो उन लिपियों को पकड़ते हैं और बाद में निष्पादन के लिए उन्हें कतार में लगाते हैं।
• [लिपियों को अवरुद्ध करना] पहले पृष्ठ लोड के बाद चलने के लिए उन्हें कतारबद्ध करने के लिए जावास्क्रिप्ट स्क्रिप्ट में html.tpl.php (json_encode के साथ) के $ लिपियों चर को संग्रहीत करें। यह अप्राकृतिक है, लेकिन आवश्यक है। कुछ ब्राउज़र विशिष्ट समस्याओं को हल किया जाना था।
• [अवरुद्ध सीएसएस] कीथ क्लार्क की तकनीक के समान कुछ लागू किया गया , लेकिन rel = "prefetch" के साथ। यह FOUC को हल करने की आवश्यकता का परिचय देता है ।
• [न्यूनतमकरण और संपीडन] एक वितरण सर्वर पर संपीड़न और न्यूनतमकरण को बाहरी करें, जहां मैं उन नियमों को दूर करने के लिए छवि-निर्माण, यूआई-कंप्रेसर, पिंगप्टीम और अधिक सामान का उपयोग कर सकता हूं, बिना अनुपयोगी गड़बड़ में ड्रूपल स्थापित किए।