Google Pagespeed में "ऊपर-नीचे की सामग्री" क्या है?


132

कुछ समय पहले तक, मेरी साइट (www.heatexchangers.ca) ने Google पृष्ठ गति पर 98% स्कोर किया था। वहाँ कुछ चीजें हैं जो मैं वेब फोंट से क्वेरी स्ट्रिंग के बारे में कुछ नहीं कर सकता था। मैं इस बात से बहुत खुश था क्योंकि यह उन सभी का प्रतिनिधित्व करता था जो मैं कर सकता था।

हाल ही में Google ने कुछ और जोड़ा है जो पृष्ठ गति स्कोर को प्रभावित करता है और मुझे अब केवल पृष्ठ गति पर 89% मिलता है और यह सुझाव मिलता है:

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

इसे ठीक करने का सुझाव मेरे सभी .css और .js फ़ाइलों के माध्यम से ट्रोलिंग को शामिल करने और उनमें से कुछ हिस्सों को अलग करने और मेरे html में इनलाइन जोड़ने के लिए लगता है। यह मुझे कुछ भ्रम पैदा कर रहा है क्योंकि मैं इस धारणा के तहत था कि हमें यथासंभव जेएस और सीएसएस को HTML से बाहर रखना होगा।

वास्तव में "फोल्ड द फोल्ड" सामग्री क्या है? यदि यह कुछ शैलियों जैसे कि फ़ॉन्ट, पृष्ठभूमि का रंग आदि है; फिर मैं देख सकता हूं कि इनलाइन को शामिल करना बहुत बड़ी बात नहीं है। मुझे वास्तव में यह क्या है की एक सूची नहीं मिल पाई है।


49
'फोल्ड' वह जगह है जहां स्क्रीन का निचला भाग पेज लोड पर होता है। जब आप किसी वेबसाइट पर उतरते हैं, तो बिना स्क्रॉल किए आपको दिखाई देने वाली कोई भी सामग्री 'फोल्ड के ऊपर' होती है। कुछ भी आपको इसे 'तह के नीचे' देखने के लिए नीचे स्क्रॉल करना होगा।
कारिबूकोड

21
फोल्ड के ऊपर एक शब्द है जिसे आमतौर पर समाचार पत्रों, उर्फ ​​के लिए उपयोग किया जाता है, ऊपर की सामग्री जहां पेपर को क्षैतिज रूप से मोड़ा जाता है। आमतौर पर वेब डिज़ाइन के लिए यह पहला 600px ~ या तो (जो आप पूछते हैं उसके आधार पर बहस योग्य है)। यह शैलियों (फोंट, पृष्ठभूमि आदि) की बात नहीं कर रहा है, यह सामग्री की बात कर रहा है, और जेएस का प्रकार जो उस सामग्री में रेंडरिंग को अवरुद्ध कर सकता है। मुझे संदेह है कि Google इनलाइन शैलियों का उपयोग करने का सुझाव दे रहा है, क्या आप वास्तव में आपके द्वारा दिए गए सुझावों को पोस्ट कर सकते हैं?
ईसाई

@ क्यों न केवल एक टिप्पणी के बजाय एक उत्तर दें?
कोलोब कैनियन

जवाबों:


113

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

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

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

यह इस विषय पर Google की एक वीडियो प्रस्तुति है:

http://www.youtube.com/watch?v=YV1nKLWoARQ

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

वे उन उपकरणों के लिंक भी प्रदान करते हैं जो इस में से कुछ को स्वचालित करने में सक्षम हो सकते हैं। मैंने उनकी और वाईएमएमवी की कोशिश नहीं की है।


@ जोशुआ, मैंने ऊपर-और-गुना सामग्री में "जावास्क्रिप्ट और सीएसएस को खत्म करना" <noscript> ... </ noscript> के लिए कुछ काम किया है। लेकिन केवल मोबाइल पर प्रतिबिंबित करें। डेस्कटॉप में नहीं। इसके लिए url winni.in/cake-delivery-in-bangalore
V SH

2

Google पृष्ठ की अंतर्दृष्टि आपको स्पष्ट रूप से बताएगी कि कितने% सीएसएस का जिक्र ऊपर की सामग्री को लोड करने में बहुत देर हो रही है और पृष्ठ को पहले ही प्रस्तुत किया जा सकता था। हरे रंग के परिणाम प्राप्त करने के लिए आप सीएसएस के कुछ हिस्सों को स्थानांतरित कर सकते हैं। मैं इसे आपके लिए कर सकता हूं: goo.gl/GsRxNc

Google की ओर से एक लिंक 'गुना के ऊपर' https://developers.google.com/speed/docs/insights/OptimizeCSSLelivery


क्या आप स्पष्ट कर सकते हैं कि गड़बड़ी का क्या मतलब है? मान लें कि पेजस्पीड की रिपोर्ट बताती है कि बाहरी स्टाइलशीट को लोड करने के लिए 55% से ऊपर-गुना सामग्री का इंतजार किए बिना गाया जा सकता है। जिसका मतलब है कि बाहरी स्टाइलशीट से 45% ऊपर-नीचे की सामग्री को नियमों के साथ स्टाइल किया गया है। लेकिन ऐसी बात नहीं है
x-yuri

0

पृष्ठ के पहले लोड होने पर ब्राउज़र-विंडो में दिखाई देने वाली वेब-पृष्ठ के ऊपर-ऊपर सामग्री होती है। Google आपकी मुख्य CSS फ़ाइल से निकाली गई इनलाइन CSS को देखना चाहता है और हेड टैग में इंजेक्ट किया जाता है, जिससे आप जो कुछ भी देखते हैं उसे पहले लोड किया जा सकता है।

source - https://www.c2experience.com/blog/passing-googles-abovethefold-css#:~:text=Above%2Dthe%2Dfold%20content%20is,file%20to%20be%20loaded%20first


-1

वे एनालिटिक्स या ट्रैकिंग कोड जैसे रेंडर-ब्लॉकिंग जेएस का उल्लेख करते हैं, यही कारण है कि वे फ़ुटर में उन सभी "स्क्रिप्ट्स से पहले मुझे लोड करने" का सुझाव देते हैं, जब वे उपयोगकर्ता के स्क्रीन पर साइट होने के बाद लोड हो जाएंगे।


यह सही है। उन्हें स्थगित किया जाना चाहिए या async लोड किया जाना चाहिए, या बंद करने से पहले पाद / पर ले जाया जाना चाहिए </ body> टैग, क्योंकि वे पृष्ठ के लिए महत्वपूर्ण नहीं हैं। महत्वपूर्ण कोड, जैसे कि मुख्य पृष्ठ शैली या बूटस्ट्रैप, को पृष्ठ के शीर्ष पर लोड किया जाना चाहिए या आपको FOUC (फ्लैश ऑफ़ अनस्टाइल कंटेंट) का अनुभव होगा, इसलिए इन महत्वपूर्ण घटकों के बारे में केवल इतना ही किया जा सकता है कि वे इन्हें छोटा करें और उन्हें मर्ज करें कम फ़ाइलों में, रेंडरिंग ब्लॉकिंग को कम करने के लिए। यह टिप्पणी CowboyWillie टिप्पणी के लिए समर्थन है जो गलत तरीके से अस्वीकृत है।
ताहि रेउ
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.