व्यावहारिक Google AMP (त्वरित मोबाइल पृष्ठ) समीक्षा

कल , जीटी पर समाचार दिखाई दिए कि Google ने मोबाइल उपकरणों पर वेब पेजों को गति देने के लिए अपनी स्वयं की जेएस लाइब्रेरी की घोषणा की। यह घटना मुझे उदासीन नहीं छोड़ सकती थी, और मैंने इस पुस्तकालय की क्षमताओं पर थोड़ा गौर करने का फैसला किया, साथ ही डाउनलोड की गति की एक छोटी तुलना की, और यह पता लगाया कि क्या इस दृष्टिकोण के कोई लाभ हैं।

संक्षेप में, नई पहल का सार इस प्रकार है: सामग्री पृष्ठों (यानी लेख, समाचार, समीक्षा, फोटो / वीडियो रिपोर्ट, आदि) के लोड को अनुकूलित और तेज करने के लिए) Google उनके विकास का उपयोग करने का सुझाव देता है - एएमपी पुस्तकालय। उसी समय, पृष्ठ पर कई प्रतिबंध लगाए जाते हैं। उदाहरण के लिए, आप AMP और इसके एक्सटेंशन को छोड़कर, अन्य js स्क्रिप्ट्स का उपयोग नहीं कर सकते हैं। आप हमेशा की तरह लोगों के बजाय विशेष एएमपी तत्वों का उपयोग करना चाहिए (उदाहरण के लिए, amp-img टैग के बजाय img )। आप फ़ोटो के लिए अपने स्लाइडर भी नहीं डाल सकते हैं - इसके लिए एक विशेष घटक है। और जब आप पूर्वावलोकन पर क्लिक करते हैं तो पूर्ण आकार की तस्वीर देखने के लिए, कृपया लाइटबॉक्स के Google संस्करण का उपयोग करें, और न कि आप वहां उपयोग करने के लिए क्या उपयोग किए जाते हैं।

मैं विज्ञापन के लिए एक नया टैग भी उजागर करना चाहूंगाamp-ad - यह आपको समर्थित विज्ञापन नेटवर्क में से एक का उपयोग करके किसी पृष्ठ पर एक विज्ञापन इकाई सम्मिलित करने की अनुमति देता है: A9, AdReactor, AdSense, AdTech, Doubleclick। यह स्पष्ट है कि इस तरह से Google कुछ नेटवर्क का समर्थन करते हुए साइटों पर विज्ञापन पर अतिरिक्त नियंत्रण हासिल कर लेता है, लेकिन सौभाग्य से यह सब सामान पहले से ही AdBlock द्वारा पूरी तरह से अवरुद्ध है। यह अभी भी अवरुद्ध है।

उपरोक्त सभी प्रतिबंधों की जाँच एएमपी में शामिल एक विशेष सत्यापनकर्ता द्वारा की जाती है। पृष्ठ पते में "# विकास = 1" जोड़कर, आप कंसोल में पृष्ठ की स्थिति प्राप्त कर सकते हैं - यह सत्यापन पारित कर दिया, या कुछ गलत हो गया। दुर्भाग्य से, त्रुटि आउटपुट पूरी तरह से असंक्रामक है। उदाहरण के लिए, jQuery कनेक्ट करते समय, हमें यह कंसोल मिलता है: यह



अनुमान लगाने की कोशिश करें कि यहां क्या गलत हुआ।
यदि सत्यापनकर्ता पृष्ठ को सफलतापूर्वक पास करता है, तो हमें संदेश "एएमपी सत्यापन सफल" मिलता है।

तो, AMP हमें क्या अवसर प्रदान करता है?
यहां उन वस्तुओं की सूची दी गई है जो उपयोग के लिए पेश की गई हैं:

अंतर्निहित घटक:
विज्ञापन प्रदर्शित करने के लिए amp-ad कंटेनर
amp-img img टैग
amp- पिक्सेल की जगह ले रहा है अदृश्य पिक्सेल - हिट काउंटर
एम्पी-वीडियो एचटीएमएल 5 टैग वीडियो

घटकों की जगह एक्सटेंशन (अलग js) से जुड़े घटक पुस्तकालयों)
amp-anim एनिमेटेड छवि (GIF)
amp- ऑडियो ऑडियो amp- हिंडोला के साथ HTML5 की जगह
साधारण हिंडोला - क्षैतिज रूप से व्यवस्थित
amp-फिट-पाठ के प्रदर्शन थंबनेल स्वचालित रूप से पाठ के फ़ॉन्ट आकार को कम या बढ़ाते हैं ताकि यह
amp-iframe के सीमित क्षेत्र में iframe
amp-image-lightbox लाइटबॉक्स में फिट हो । पूर्वावलोकन या
amp- इंस्टाग्राम लिंक पर क्लिक करने पर एक बड़ी छवि का पूर्ण आकार देखना इंस्टाग्राम
amp-lightbox पर एक पोस्ट प्रदर्शित करता है एक अन्य
amp-twitter लाइटबॉक्स एक
amp-youtube ट्वीट प्रदर्शित करता है एक YouTube वीडियो प्रदर्शित करता है

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

खैर, यह परीक्षणों पर आगे बढ़ने का समय है?
मैंने दो सरल लेकिन संसाधन-गहन पृष्ठ बनाए।

पहला एएमपी-वैध है, दूसरा एएमपी के बिना नियमित एचटीएमएल 5 है।
जब आप फ़ोन से पृष्ठ खोलते हैं, तो अंतर वास्तव में ध्यान देने योग्य होता है। एएमपी पृष्ठ बहुत तेजी से लोड होता है, प्रेटियर लोड होता है, यहां तक ​​कि छवियों का अपना लोडिंग संकेतक भी होता है (अधिक सटीक, सामान्य प्लेसहोल्डर, लेकिन यह अच्छा दिखता है)। सामान्य पृष्ठ धीरे-धीरे लोड होता है, और इतना सुंदर नहीं। लेकिन दूसरी ओर, दस्तावेज़ के अंत में gif उस पर काम करता है, दुर्भाग्य से एएमपी पृष्ठ में नहीं। मुझे लगता है कि यह ब्राउज़र पर निर्भर करता है, इसलिए मैं इस पर ध्यान केंद्रित नहीं करूंगा।

आइए Google से मेरा पसंदीदा टूल आज़माएं - पेजस्पीड इनसाइट्स।

एक नियमित HTML5 पृष्ठ का परीक्षण:
मोबाइल उपकरणों पर गति: 91/100
मोबाइल उपकरणों पर देखने में आसानी: 100/100
डेस्कटॉप पर स्पीड 100/100
खराब नहीं। मैं उत्कृष्ट कहूंगा। बेशक, यह वहाँ एक यैंडेक्स मीट्रिक लगाने के लायक है, उदाहरण के लिए, और तुरंत संकेतक गिर जाएंगे, लेकिन उन्होंने हब के बारे में लिखा

एएमपी पृष्ठ का परीक्षण:
मोबाइल उपकरणों पर गति: 99/100
मोबाइल उपकरणों पर देखने में आसानी: 100/100
डेस्कटॉप पर गति 99/100
थोड़ा मोबाइल पर बेहतर, डेस्कटॉप पर थोड़ा खराब। सिद्धांत रूप में, अगर हम पेजस्पीड इनसाइट्स की माप सुविधाओं को ध्यान में रखते हैं, तो यह लगभग समान हो जाता है, लेकिन मैन्युअल परीक्षण में मोबाइल उपकरणों पर लोड करने में अंतर काफी ध्यान देने योग्य है।

चलिए google chrome में emulation को try करते हैं। इसे 3 जी के साथ iphone6plus उदाहरण के लिए दें।
सामान्य पृष्ठ - लगभग 17 सेकंड हम



कैश को साफ़ करते हैं, एएमपी पृष्ठ को
8.82 सेकंड के लिए लोड करते हैं । गंभीरता से? अंतर पहले से ही दो बार है?



हां, लेकिन इस तथ्य को देखते हुए कि पृष्ठ के माध्यम से स्क्रॉल करते समय सामग्री लोड होती है। उदाहरण के लिए, दस्तावेज़ के अंत तक स्क्रॉल करने के बाद ही जिफ़ को लोड किया गया था। हम www.google.com/webmasters/tools/mobile-friendly
पर परीक्षण नहीं करेंगे, उनके साथ सब कुछ स्पष्ट है।

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

अच्छा यही सब है। ध्यान देने के लिए आपको धन्यवाद!
मुझे आपकी टिप्पणियों और टिप्पणियों के लिए खुशी होगी।

Source: https://habr.com/ru/post/hi385047/