एएमपी कैसे काम करता है
निम्नलिखित अनुकूलन संयुक्त रूप से एएमपी पृष्ठों के इतने तेज़ होने का कारण हैं कि वे तुरंत लोड होते प्रतीत होते हैं। कुल मिलाकर 7 कारण हैं - लेकिन यदि यह अभी भी पढ़ने के लिए बहुत अधिक है, तो बस व्याख्याकार वीडियो देखें:
सभी एएमपी जावास्क्रिप्ट को अतुल्यकालिक रूप से निष्पादित करें
जावास्क्रिप्ट शक्तिशाली है, यह पेज के लगभग हर पहलू को संशोधित कर सकता है, लेकिन यह DOM निर्माण को भी अवरुद्ध कर सकता है और पेज रेंडरिंग में देरी कर सकता है (यह भी देखें जावास्क्रिप्ट के साथ अन्तरक्रियाशीलता जोड़ना)। जावास्क्रिप्ट को पेज रेंडरिंग में देरी से बचाने के लिए, एएमपी केवल एसिंक्रोनस जावास्क्रिप्ट की अनुमति देता है।
एएमपी घटकों में हुड के नीचे जावास्क्रिप्ट हो सकता है, लेकिन उन्हें यह सुनिश्चित करने के लिए सावधानीपूर्वक डिज़ाइन किया गया है कि वे प्रदर्शन में गिरावट का कारण नहीं बनते हैं।
जबकि ABC-script में कस्टम JS की अनुमति है, और तृतीय-पक्ष JS है आईफ्रेम में अनुमति है, यह रेंडरिंग को ब्लॉक नहीं कर सकता। उदाहरण के लिए, यदि तृतीय-पक्ष JS super- Bad-for-performance का उपयोग करता है document.write API, यह मुख्य पृष्ठ के रेंडरिंग को अवरुद्ध नहीं करता है।
सभी संसाधनों को स्थिर रूप से आकार दें
छवियों, विज्ञापनों या आईफ़्रेम जैसे बाहरी संसाधनों को HTML में अपना आकार अवश्य बताना चाहिए ताकि ABC संसाधनों को डाउनलोड करने से पहले प्रत्येक तत्व का आकार और स्थिति निर्धारित कर सके। एएमपी किसी भी संसाधन के डाउनलोड होने की प्रतीक्षा किए बिना पृष्ठ के लेआउट को लोड करता है।
एएमपी दस्तावेज़ लेआउट को संसाधन लेआउट से अलग कर देता है। संपूर्ण दस्तावेज़ को लेआउट करने के लिए केवल एक HTTP अनुरोध की आवश्यकता है (+fonts)। चूंकि एएमपी को ब्राउज़र में महंगी शैली पुनर्गणना और लेआउट से बचने के लिए अनुकूलित किया गया है, इसलिए संसाधन लोड होने पर कोई पुन: लेआउट नहीं होगा।
एक्सटेंशन तंत्र को रेंडरिंग को अवरुद्ध न करने दें
एएमपी एक्सटेंशन तंत्र को पेज रेंडरिंग को अवरुद्ध नहीं करने देता। एएमपी lightboxes, इंस्टाग्राम एंबेड, ट्वीट्स, आदि। जबकि इनके लिए अतिरिक्त की आवश्यकता होती है HTTP अनुरोध, वे अनुरोध पृष्ठ लेआउट और रेंडरिंग को अवरुद्ध नहीं करते हैं।
कोई भी पेज जो कस्टम स्क्रिप्ट का उपयोग करता है, उसे एएमपी सिस्टम को बताना होगा कि अंततः उसमें एक कस्टम टैग होगा। उदाहरण के लिए, ABC-iframe स्क्रिप्ट सिस्टम को बताती है कि एक होगा ABC-iframe टैग. एएमपी यह जानने से पहले ही आईफ्रेम बॉक्स बनाता है कि इसमें क्या शामिल होगा:
<script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js"></script>
सभी तृतीय पक्ष जावास्क्रिप्ट को महत्वपूर्ण पथ से दूर रखें
तृतीय-पक्ष JS सिंक्रोनस JS लोडिंग का उपयोग करना पसंद करता है। वे document.write को अधिक सिंक स्क्रिप्ट भी पसंद करते हैं। उदाहरण के लिए, यदि आपके पृष्ठ पर पांच विज्ञापन हैं, और उनमें से प्रत्येक तीन सिंक्रोनस लोड का कारण बनता है, प्रत्येक 1 सेकंड विलंबता कनेक्शन के साथ, तो आप केवल जेएस लोडिंग के लिए 15 सेकंड के लोड समय में हैं।
एएमपी पेज तीसरे पक्ष के जावास्क्रिप्ट की अनुमति देते हैं लेकिन केवल सैंडबॉक्स वाले आईफ्रेम में। उन्हें आईफ्रेम तक सीमित करके, वे मुख्य पृष्ठ के निष्पादन को अवरुद्ध नहीं कर सकते। भले ही वे एकाधिक शैली पुनर्गणना को ट्रिगर करते हों, उनके छोटे आईफ़्रेम में बहुत कम DOM होता है।
शैली-पुनर्गणना और लेआउट करने में लगने वाला समय DOM आकार द्वारा प्रतिबंधित है, इसलिए पृष्ठ के लिए शैलियों और लेआउट की पुनर्गणना की तुलना में आईफ़्रेम पुनर्गणना बहुत तेज़ है।
सभी सीएसएस इनलाइन और आकार-बद्ध होने चाहिए
सीएसएस सभी रेंडरिंग को ब्लॉक कर देता है, यह पेज लोड को ब्लॉक कर देता है और यह फूला हुआ हो जाता है। एएमपी HTML पृष्ठों में, केवल इनलाइन शैलियों की अनुमति है। यह अधिकांश वेब पेजों की तुलना में महत्वपूर्ण रेंडरिंग पथ से 1 या अक्सर अधिक HTTP अनुरोधों को हटा देता है।
साथ ही, इनलाइन स्टाइल शीट का अधिकतम आकार 50 किलोबाइट है। हालाँकि यह आकार बहुत परिष्कृत पृष्ठों के लिए काफी बड़ा है, फिर भी इसके लिए पृष्ठ लेखक को अच्छी सीएसएस स्वच्छता का अभ्यास करना आवश्यक है।
फ़ॉन्ट ट्रिगरिंग कुशल होनी चाहिए
वेब फ़ॉन्ट बहुत बड़े हैं, इसलिए वेब फ़ॉन्ट अनुकूलन महत्वपूर्ण है प्रदर्शन के लिए। एक विशिष्ट पृष्ठ पर जिसमें कुछ सिंक स्क्रिप्ट और कुछ बाहरी स्टाइल शीट होती हैं, ब्राउज़र इन विशाल फ़ॉन्ट्स को डाउनलोड करना शुरू करने के लिए इंतजार करता है जब तक कि यह सब नहीं हो जाता।
फ़ॉन्ट डाउनलोड शुरू होने तक एएमपी सिस्टम शून्य HTTP अनुरोध घोषित करता है। यह केवल इसलिए संभव है क्योंकि ABC में सभी JS में async विशेषता होती है और केवल इनलाइन स्टाइल शीट की अनुमति होती है; ब्राउज़र को फ़ॉन्ट डाउनलोड करने से रोकने वाला कोई HTTP अनुरोध नहीं है।
शैली पुनर्गणना कम से कम करें
हर बार जब आप कुछ मापते हैं, तो यह शैली पुनर्गणना को ट्रिगर करता है जो महंगा होता है क्योंकि ब्राउज़र को पूरे पृष्ठ को लेआउट करना होता है। एएमपी पेजों में, सभी डीओएम रीड सभी राइट्स से पहले होते हैं। यह सुनिश्चित करता है कि प्रति फ्रेम शैलियों की अधिकतम एक पुनर्गणना हो।
रेंडरिंग परफॉर्मेंस पर स्टाइल और लेआउट पुनर्गणना के प्रभाव के बारे में अधिक जानें।
केवल GPU-त्वरित एनिमेशन चलाएँ
तेज़ अनुकूलन का एकमात्र तरीका उन्हें GPU पर चलाना है। GPU परतों के बारे में जानता है, यह जानता है कि इन परतों पर कुछ चीजें कैसे निष्पादित करनी हैं, यह उन्हें स्थानांतरित कर सकता है, यह उन्हें फीका कर सकता है, लेकिन यह पेज लेआउट को अपडेट नहीं कर सकता है; यह उस कार्य को ब्राउज़र को सौंप देगा, और यह अच्छा नहीं है।
एनीमेशन-संबंधित सीएसएस के नियम यह सुनिश्चित करते हैं कि एनिमेशन को जीपीयू-त्वरित किया जा सकता है। विशेष रूप से, एएमपी केवल ट्रांसफॉर्मेशन और अपारदर्शिता पर एनिमेटिंग और ट्रांज़िशन की अनुमति देता है ताकि पेज लेआउट की आवश्यकता न हो। ट्रांसफ़ॉर्म का उपयोग करने के बारे में और जानें एनिमेशन परिवर्तन के लिए अपारदर्शिता।
संसाधन लोडिंग को प्राथमिकता दें
एएमपी सभी संसाधन डाउनलोड को नियंत्रित करता है: यह संसाधन लोडिंग को प्राथमिकता देता है, केवल वही लोड करता है जो आवश्यक है, और आलसी-लोड किए गए संसाधनों को प्रीफ़ेच करता है।
जब एएमपी संसाधनों को डाउनलोड करता है, तो यह डाउनलोड को अनुकूलित करता है ताकि वर्तमान में सबसे महत्वपूर्ण संसाधन पहले डाउनलोड हो जाएं। छवियाँ और विज्ञापन केवल तभी डाउनलोड किए जाते हैं यदि उन्हें उपयोगकर्ता द्वारा फोल्ड के ऊपर देखे जाने की संभावना हो, या यदि उपयोगकर्ता द्वारा उन्हें तुरंत स्क्रॉल करने की संभावना हो।
एएमपी आलसी-लोडेड संसाधनों को भी प्रीफ़ेच करता है। संसाधनों को यथासंभव देर से लोड किया जाता है, लेकिन जितनी जल्दी हो सके प्रीफ़ेच किया जाता है। इस तरह चीजें बहुत तेजी से लोड होती हैं लेकिन सीपीयू का उपयोग केवल तभी किया जाता है जब संसाधन वास्तव में उपयोगकर्ताओं को दिखाए जाते हैं।
तुरंत पेज लोड करें
नए preconnect API का उपयोग यह सुनिश्चित करने के लिए किया जाता है कि HTTP अनुरोध यथासंभव तेज़ हों। वे इससे बने होते हैं। इसके साथ, उपयोगकर्ता द्वारा स्पष्ट रूप से यह बताने से पहले कि वे उस पर नेविगेट करना चाहते हैं, एक पृष्ठ प्रस्तुत किया जा सकता है; जब तक उपयोगकर्ता वास्तव में इसे चुनता है तब तक पृष्ठ पहले से ही उपलब्ध हो सकता है, जिससे तुरंत लोडिंग हो जाती है।
जबकि प्रीरेंडरिंग को सभी वेब सामग्री पर लागू किया जा सकता है, यह बहुत अधिक बैंडविड्थ और सीपीयू का भी उपयोग कर सकता है। एएमपी को इन दोनों कारकों को कम करने के लिए अनुकूलित किया गया है। प्रीरेंडरिंग केवल संसाधनों को फोल्ड के ऊपर डाउनलोड करता है और प्रीरेंडरिंग उन चीज़ों को रेंडर नहीं करता है जो सीपीयू के संदर्भ में महंगी हो सकती हैं।
जब एएमपी दस्तावेज़ तत्काल लोडिंग के लिए पहले से रेंडर किए जाते हैं, तो केवल तह के ऊपर के संसाधन ही वास्तव में डाउनलोड होते हैं। जब एएमपी दस्तावेज़ तत्काल लोडिंग के लिए पहले से रेंडर किए जाते हैं, तो ऐसे संसाधन जो बहुत अधिक सीपीयू का उपयोग कर सकते हैं (जैसे तृतीय-पक्ष आईफ़्रेम) डाउनलोड नहीं होते हैं।
एएमपी के बारे में अधिक जानें HTML प्रीलोड स्कैनरका पूरा लाभ नहीं उठाता।