त्वरित गाइड करने के लिए त्वरित मोबाइल पेज (AMP)

त्वरित मोबाइल पेज Google की पहल है जो मोबाइल वेब की सबसे बड़ी समस्या को हल करने का इरादा रखता है - गति. भयानक उपयोगकर्ता अनुभव जो हम बड़ी सावधानी से डिजाइन कर रहे हैं, मोबाइल पर दर्द कम कर रहे हैं.

सुस्ती केवल एक UX समस्या नहीं है, बल्कि यह भी है रूपांतरण दरों को कम करता है, तथा पहुंच को हानि पहुँचाता है धीमे इंटरनेट कनेक्शन वाले उपयोगकर्ताओं को छोड़कर. एएमपी एक टीम प्रयास है जिसका लक्ष्य प्रकाशकों को अनुमति देना है एक बार मोबाइल अनुकूलित सामग्री बनाएं, और यह हर जगह तुरंत लोड है.

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

एएमपी एक्शन में

विवरण में गोता लगाने से पहले, यहाँ है एएमपी डेमो, तो तुम कर सकते हो इसे कार्रवाई में देखें. इस लिंक पर डेमो को एक्सेस किया जा सकता है.

एएमपी को कार्रवाई में देखने के लिए, आपको दो काम करने होंगे:

1. डेमो या तो मोबाइल डिवाइस पर देखें, या मोबाइल सिम्युलेटर पर, उदा। क्रोम DevTools 'मोबाइल डिवाइस सिम्युलेटर.
2. खोज बार पर खोज क्वेरी चलाएँ। जैसा कि Google AMP वर्तमान में मुख्य रूप से समाचार साइट के साथ काम करता है, सबसे अच्छा विकल्प एक ताजा समाचार है.

नीचे दिए गए स्क्रीनशॉट पर, आप देख सकते हैं कि जब मैंने खोज शब्द का उपयोग किया तो मुझे क्या मिला रियो ओलंपिक्स.

जैसा कि आप देख सकते हैं, एएमपी पृष्ठ के रूप में दिखाई देते हैं Google रिच कार्ड, ए मोबाइल-अनुकूलित छवि हिंडोला, मई 2016 में Google जारी किया गया.

ध्यान दें कि Google AMP पृष्ठों को अन्य मोबाइल-अनुकूलित पृष्ठों से कैसे अलग करता है 2 अलग-अलग लेबल का उपयोग करके: एएमपी और मोबाइल के अनुकूल। यह देखने के लिए भी कुछ परिणामों पर क्लिक करने के लायक है कि एएमपी वेब पेज कैसा दिखता है, और यह मोबाइल पर कितनी तेजी से चलता है.

तकनीकी पृष्ठभूमि

एएमपी एक है वेब मानक मौजूदा वेब तकनीकों पर बनाया गया है, और स्थैतिक सामग्री पर ध्यान केंद्रित कर रहा है। यह है 3 विभिन्न भागों:

1. AMP HTML: के साथ संशोधित HTML (1) कुछ नियमित HTML / CSS सुविधाओं का प्रतिबंध और (2) नए कस्टम टैग (घटक) की शुरूआत
2. एएमपी जेएस: पृष्ठ लोड समय को कम करने के लिए सर्वोत्तम प्रथाओं को लागू करता है
3. एएमपी CDN: एक अंतर्निहित सत्यापन प्रणाली के साथ एक कैश, जो आपकी साइट को और अधिक अनुकूलित करता है

यदि आप एएमपी पृष्ठों की तकनीकी पृष्ठभूमि के बारे में अधिक जानना चाहते हैं, तो नीचे दिए गए वीडियो की जांच करें जिसमें Google के पॉल बाकॉस ए परिचयात्मक बात AMP पर.

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

AMP HTML

त्वरित मोबाइल पेज हैं नियमित HTML पृष्ठ की जरूरत है नियमों का एक सेट का पालन करें विश्वसनीय प्रदर्शन के साथ पृष्ठों को तेज़ी से लोड करने और रेंडर करने के लिए.

आइए एक नजर डालते हैं उन सबसे महत्वपूर्ण बातों पर जिनके बारे में आपको जानना जरूरी है। आप पूर्ण एएमपी एचटीएमएल विनिर्देश पर एक नज़र डाल सकते हैं.

यदि आप एक अलग AMP पेज चाहते हैं तो निर्णय लें

उसी स्थिर सामग्री पृष्ठ के लिए, आपके पास हो सकता है 2 अलग संस्करण - एक एएमपी के लिए और एक गैर एएमपी संस्करण के लिए। आप भी चुन सकते हैं केवल एक संस्करण - एएमपी पृष्ठ, और हर जगह इसका उपयोग करें। विषय में ब्राउज़र का समर्थन, एएमपी के गितुब पृष्ठ का दावा:

यदि आप अभी भी ब्राउज़र समर्थन के बारे में चिंतित हैं, तो Stackoverflow पर Google के पॉल आयरिश की पोस्ट देखें.

यदि आप दो पृष्ठ (एएमपी और गैर-एएमपी) चाहते हैं, तो आपको इसकी आवश्यकता होगी उनमें से प्रत्येक के लिए लिंक के लिए के अस्तित्व के बारे में खोज इंजन को सूचित करें दो संस्करणों.

निम्न कोड को इसमें जोड़ें गैर-एएमपी पृष्ठ का अनुभाग:

निम्न पंक्ति को भी जोड़ें एएमपी पृष्ठ का अनुभाग:

यदि आपके पास केवल एक एएमपी पृष्ठ है, तो आपको अभी भी जरूरत है इसे निम्नलिखित तरीके से स्वयं से लिंक करें:

बॉयलरप्लेट शुरू करना

एएमपी प्रोजेक्ट अलग ऑफर करता है बॉयलर शुरू करना आप आरंभ करने के लिए उपयोग कर सकते हैं। नीचे दिए गए सरलतम AMP HTML बॉयलरप्लेट पर एक नज़र डालें:

          नमस्ते दुनिया!  

आप देख सकते हैं कि बॉयलरप्लेट नियमित HTML पेज को लिंक करके उपयोग करता है टैग। > टैग जोड़ता है एएमपी जेएस पुस्तकालय.

आप ही कर सकते हैं एक एम्बेडेड स्टाइलशीट, और भी कई हैं शैली नियमों को अस्वीकृत कर दिया, उदाहरण के लिए आप का उपयोग नहीं कर सकते हैं !जरूरी अर्हक @आयात नियम, और छद्म वर्ग.

अपने एएमपी पृष्ठों के लिए सीएसएस लिखना शुरू करने से पहले स्टाइलशीट प्रतिबंधों की जांच करना न भूलें.

एएमपी शैली के नियमों के बारे में जानने के लिए एक और चीज है: आप अपने इच्छित किसी भी लेआउट का उपयोग नहीं कर सकते - क्योंकि यह AMP के सिद्धांतों में से एक है जो ब्राउज़र को अनुमति देता है प्रत्येक तत्व के स्थान की गणना करें पेज पर अग्रिम रूप से.

समर्थित और गैर-समर्थित लेआउट पर एक नज़र डालें.

एएमपी जेएस

एएमपी दस्तावेजों में शामिल हो सकते हैं न तो कोई लेखक-लिखित, न ही कोई तृतीय-पक्ष जावा स्क्रिप्ट, हालाँकि इसका मतलब यह नहीं है कि त्वरित मोबाइल पेज जावास्क्रिप्ट का उपयोग बिल्कुल नहीं करते हैं। एएमपी की जावास्क्रिप्ट लाइब्रेरी (एएमपी रनटाइम) एएमपी पृष्ठों को तेजी से लोड और रेंडर करने के लिए जिम्मेदार है सर्वश्रेष्ठ प्रदर्शन प्रथाओं को लागू करना.

एएमपी अवयव

एएमपी घटक हैं एएमपी रनटाइम द्वारा परिभाषित. वे उपर्युक्त हैं AMP- विशिष्ट HTML टैग आपको उनके नियमित समकक्ष के बजाय उपयोग करने की आवश्यकता है, जैसे कि के स्थान पर टैग.

प्रत्येक एएमपी घटक में ए विशेष रूप से बाहरी संसाधन (एक छवि, एक वीडियो, एक एम्बेड, आदि)। बाहरी संसाधन वेबसाइटों को धीमा करने के लिए प्रवण हैं। इस समाधान का मुख्य लक्ष्य है बाहरी संसाधनों के लोडिंग का प्रबंधन करें उन्हें चलाकर उचित तरीके से सैंडबॉक्स के अंदर.

AMP आपको प्रदान करता है घटकों के 2 प्रकार:

1. निर्मित में घटक: वे हमेशा हर एएमपी दस्तावेज़ में उपलब्ध हैं, वे हैं AMP रनटाइम में सही बनाया गया. वर्तमान में उनमें से पाँच हैं:
   1. विज्ञापन दिखाने के लिए
   2. छवियों के लिए, इसके बजाय इसका उपयोग किया जाता है टैग
   3. ट्रैकिंग पिक्सल के लिए (पृष्ठ विचारों की गिनती के लिए उपयोग)
   4. प्रत्यक्ष HTML5 वीडियो फ़ाइल एम्बेड के लिए, की जगह टैग
   5. एम्बेडेड तत्वों के लिए (के बजाय इसका इस्तेमाल किया जा सकता है कुछ मामलों में)
2. विस्तारित घटक: अतिरिक्त घटक, आपको चाहिए स्पष्ट रूप से उन्हें शामिल करें अपने एएमपी दस्तावेज़ में। कई उपयोगी हैं, जैसे कि तथा , पूरी सूची देखें उनमें से कई का उपयोग किया जा सकता है तृतीय पक्ष सेवाओं से सामग्री एम्बेड करें, जैसे ट्विटर या इंस्टाग्राम से.

ध्यान दें कि सभी बाहरी रूप से भरे हुए संसाधन, जैसे कि तथा एक ज्ञात होना चाहिए तथा गुण ब्राउज़र को सक्षम करने के लिए अग्रिम में लेआउट की गणना करें.

एएमपी सीडीएन

एएमपी सीडीएन मूल रूप से एक कैश है, जिसे कहा जाता है Google एएमपी कैश. यह वैध एएमपी दस्तावेज, कैश और उन्हें लोड करता है। एएमपी सीडीएन भी एक है अंतर्निहित सत्यापन प्रणाली.

इसकी कीमत है अपने AMP पृष्ठों का परीक्षण इससे पहले कि वे सुरक्षित रूप से ऑनलाइन जाने दें सत्यापनकर्ता को पास करें. आप इसे कई अलग-अलग तरीकों से कर सकते हैं.

यह जानना अच्छा है कि एएमपी सीडीएन सबसे अच्छा संभव प्रदर्शन प्राप्त करने के लिए HTTP / 2 प्रोटोकॉल का उपयोग करता है.

एएमपी उपकरण

कुछ महान उपकरण हैं जो त्वरित मोबाइल पेजों को लागू करने में आपकी सहायता कर सकते हैं, आइए उनमें से कुछ पर एक नज़र डालें.

Google वेबमास्टर्स को एक काम देता है एएमपी स्थिति रिपोर्ट उपकरण जो सफलतापूर्वक अनुक्रमित AMP पृष्ठों और AMP से संबंधित त्रुटियों की एक संख्या दिखाता है.

Lullabot के एएमपी PHP लाइब्रेरी आपको अपने HTML पृष्ठों को AMP HTML में बदलने की अनुमति देता है, और AMP मानकों के साथ किसी भी HTML दस्तावेज़ के अनुपालन की भी रिपोर्ट करता है.

यदि आप अपनी वर्डप्रेस साइट पर एएमपी का उपयोग करना चाहते हैं, तो एएमपी के लिए वर्डप्रेस सेट करने के तरीके पर योस्ट के ट्यूटोरियल को पढ़ें, और एएमपी योस्ट एसईओ प्लगइन के साथ कैसे काम करता है.

आप आटोमैटिक की भी जांच कर सकते हैं एएमपी प्लगइन इससे आप अपनी WordPress साइट पर त्वरित मोबाइल पेज सक्षम कर सकते हैं.

इसके अलावा विचार

यदि आप अभी भी आश्वस्त नहीं हैं, तो एक के बारे में वीडियो देखें त्वरित गति परीक्षण नीचे.

जोजनाथन अब्राम्स के संस्थापक जोनाथन अब्राम्स और भी बेहतर दावे करता है, क्योंकि वह दावा करता है कि न्यूयॉर्क टाइम्स जैसी मोबाइल-अनुकूलित साइटें भी काफी तेजी से लोड होती हैं - औसत पृष्ठ लोड करने के लिए तीन सेकंड लेने के बजाय, एक पृष्ठ लोड होता है आधे सेकंड से भी कम जब Google का त्वरित मोबाइल पेज सक्षम होता है.

आप Google AMP और Facebook के झटपट लेखों की प्रतियोगिता के बारे में Verge में एक दिलचस्प लेख भी पढ़ सकते हैं। यदि आप अभी भी "व्हाट द कैच" के लिए एक उत्तर की तलाश कर रहे हैं, तो Yoast की पोस्ट देखें, जिसमें यह आशंका है कि AMP मूल रूप से 2000 से पहले हमें एक इंटरनेट समय पर वापस ला रहा है, और सवाल करता है कि क्या यह वास्तव में एक खुला मानक है.

.