دليل المبتدئين لصفحات الجوال المتسارعة (AMP)

تسارع صفحات الجوال هي مبادرة Google التي تهدف إلى حل أكبر مشكلة على الويب للجوال - سرعة. تجربة المستخدم الرائعة التي نقوم بتصميمها بعناية فائقة ، بطيئة بشكل مؤلم على الهاتف المحمول.

البطء ليس مشكلة UX فقط ، ولكن أيضًا يقلل من معدلات التحويل, و يضر الوصول من خلال استبعاد المستخدمين الذين لديهم اتصالات إنترنت أبطأ. AMP هو جهد جماعي تم إطلاقه بهدف السماح للناشرين بذلك إنشاء محتوى محسّن للجوال مرة واحدة و الحصول عليها تحميل على الفور في كل مكان.

منذ إطلاقه ، قام العديد من الناشرين مثل BBC و The Economist و Guardian News و Financial Times بتنفيذ المبادرة ، لذلك يمكننا الآن أن نفترض أن AMP هي ابتكار يستحق أن يفكر فيه كل من يريد الحفاظ على قدرته التنافسية على الهاتف المحمول شبكة.

أمبير في العمل

قبل الغوص في التفاصيل ، وهنا AMP التجريبي, لذلك يمكنك ذلك رؤيته في العمل. يمكن الوصول إلى العرض التوضيحي على هذا الرابط.

لرؤية AMP في العمل ، عليك القيام بأمرين:

1. عرض العرض التوضيحي إما على جهاز محمول أو على جهاز محاكاة للهاتف المحمول ، على سبيل المثال كروم DevTools 'محاكي الجهاز المحمول.
2. قم بتشغيل استعلام البحث على شريط البحث. نظرًا لأن Google AMP يعمل حاليًا بشكل أساسي مع موقع الأخبار ، فإن الخيار الأفضل هو قصة أخبار جديدة.

في لقطة الشاشة أدناه ، يمكنك رؤية ما حصلت عليه عندما استخدمت عبارة البحث أولمبياد ريو.

كما ترون ، تظهر صفحات AMP كـ بطاقات جوجل الغنية, ا الصورة المحمول الأمثل دائري, أن جوجل صدر في مايو 2016.

لاحظ كيف يميز Google صفحات AMP عن الصفحات الأخرى المحسنة للجوال باستخدام تسميات مختلفة 2: AMP وصديقة للجوال. يجدر أيضًا النقر فوق بعض النتائج لمعرفة كيف تبدو صفحة الويب AMP ومدى سرعة عرضها على الهاتف المحمول.

خلفية تقنية

AMP هو معيار الويب مبنية على تقنيات الويب الحالية ، مع التركيز على المحتوى الثابت. لديها 3 أجزاء مختلفة:

1. AMP HTML: تعديل HTML مع (1) تقييد بعض ميزات HTML / CSS العادية و (2) إدخال علامات مخصصة جديدة (مكونات)
2. AMP JS: يفرض أفضل الممارسات من أجل تقليل وقت تحميل الصفحة
3. AMP CDN: ذاكرة تخزين مؤقت مع نظام تحقق مدمج ، مما يزيد من تحسين موقعك

إذا كنت ترغب في معرفة المزيد عن الخلفية التقنية لصفحات AMP ، فراجع الفيديو أدناه الذي يقدمه Paul Bakaus من Google الحديث التمهيدي على AMP.

إذا كنت ترغب في الغوص بشكل أعمق ، فمن الجدير أيضًا فهم تقنيات التحسين التي تستخدمها AMP لتسريع الأداء على الأجهزة المحمولة. في الفيديو أدناه ، يشرح Malte Ubl ، رائد AMP Engineering تشريح AMP بالتفصيل.

AMP HTML

تسارع صفحات المحمول هي صفحات HTML العادية التي تحتاج إلى اتبع مجموعة من القواعد من أجل جعل الصفحات يتم تحميلها بشكل أسرع وتقديم أداء موثوق به.

دعنا نلقي نظرة على أهم الأشياء التي تحتاج إلى معرفتها. يمكنك أيضًا إلقاء نظرة على مواصفات AMP HTML الكاملة.

تقرر ما إذا كنت تريد صفحة AMP منفصلة

لنفس صفحة المحتوى الثابت ، يمكنك الحصول عليها 2 إصدارات منفصلة - واحد لـ AMP والآخر للإصدار غير AMP. يمكنك أيضا اختيار أن يكون نسخة واحدة فقط - صفحة AMP ، واستخدامها في كل مكان. بخصوص دعم المتصفح, تدعي صفحة جيثب AMP:

إذا كنت لا تزال قلقًا بشأن دعم المتصفح ، فتحقق من وظيفة Google Irish Paul على Stackoverflow.

إذا كنت ترغب في الحصول على صفحتين (AMP وغير AMP) ، فأنت بحاجة إلى ذلك رابط لكل منهم لكي أبلغ محركات البحث عن وجود اثنان إصدارات.

أضف الكود التالي إلى قسم من صفحة غير AMP:

إضافة السطر التالي إلى قسم من صفحة AMP:

إذا كان لديك صفحة AMP واحدة فقط ، فلا يزال عليك ذلك ربطه من نفسه بالطريقة التالية:

بدء Boilerplate

يقدم AMP Project مختلفة بدء الغلايات يمكنك استخدامها للبدء. ألقِ نظرة على أبسط قواعد بيانات AMP HTML أدناه:

          مرحبا بالعالم!  

يمكنك أن ترى أن boilerplate يربط صفحة HTML العادية باستخدام العلامة. ال > يضيف علامة مكتبة AMP JS.

ال

يمكنك فقط الحصول عليها واحد ورقة الأنماط المضمنة ، وهناك أيضا الكثير قواعد أسلوب غير مسموح بها, على سبيل المثال لا يمكنك استخدام !مهم التصفيات ، و @استيراد حكم ، والطبقات الزائفة.

لا تنس التحقق من قيود ورقة الأنماط قبل البدء في كتابة CSS لصفحات AMP الخاصة بك.

هناك شيء آخر من المهم معرفته حول قواعد نمط AMP: أنت لا يمكن استخدام أي تخطيط تريده - لأنها واحدة من مبادئ AMP للسماح للمتصفح حساب مساحة كل عنصر على الصفحة مقدما.

ألقِ نظرة على المخططات المدعومة وغير المدعومة.

AMP JS

يمكن أن تشمل وثائق AMP لا يوجد أي مؤلف كتابي ولا أي جافا سكريبتس لجهة خارجية, ولكن هذا لا يعني أن صفحات الجوال المتسرعة لا تستخدم JavaScript على الإطلاق. مكتبة جافا سكريبت AMP (وقت تشغيل AMP) مسؤولة عن تحميل صفحات AMP وعرضها بسرعة فرض أفضل ممارسات الأداء.

مكونات AMP

مكونات AMP هي المعرفة من قبل وقت التشغيل AMP. هم المذكورون أعلاه علامات HTML الخاصة بـ AMP تحتاج إلى استخدام بدلا من نظيرها العادية ، مثل بدلا من ال بطاقة.

كل مكون AMP يحتوي على مورد خارجي معين (صورة ، مقطع فيديو ، تضمين ، إلخ.). الموارد الخارجية عرضة لإبطاء المواقع. الهدف الرئيسي من هذا الحل هو إدارة تحميل الموارد الخارجية بطريقة معقولة عن طريق تشغيلها داخل صناديق الرمل.

AMP يوفر لك 2 أنواع المكونات:

1. مكونات مدمجة: إنها متوفرة دائمًا في كل مستند AMP بنيت في الحق في وقت التشغيل AMP. حاليا هناك خمسة منهم:
   1. لعرض الإعلانات
   2. للصور ، يتم استخدامه بدلا من بطاقة
   3. لتتبع وحدات البكسل (تُستخدم لحساب عدد مرات عرض الصفحة)
   4. لملفات فيديو HTML5 المباشرة ، يحل محل بطاقة
   5. للعناصر المضمنة (يمكن استخدامها بدلا من في بعض الحالات)
2. المكونات الموسعة: مكونات إضافية ، يجب عليك تشمل لهم صراحة في وثيقة AMP الخاصة بك. هناك العديد منها المفيدة ، مثل و , انظر القائمة الكاملة. كثير منهم يمكن استخدامها ل تضمين المحتوى من خدمات الطرف الثالث, مثل من Twitter أو Instagram.

لاحظ أن جميع الموارد المحملة خارجيا ، مثل و يجب أن يكون معروفا و صفة، عزا من أجل تمكين المتصفح ل حساب التخطيط مقدما.

AMP CDN

ال AMP CDN هو في الأساس ذاكرة التخزين المؤقت ، ودعا Google AMP Cache. يقوم بإحضار مستندات AMP صالحة وتخزينها وتحميلها. لديه AMP CDN أيضا المدمج في نظام التحقق من الصحة.

انه يستحق اختبار صفحات AMP الخاصة بك قبل السماح لهم بالاتصال بالإنترنت من أجل الأمان تمرير المدقق. يمكنك القيام بذلك بعدة طرق مختلفة.

من الجيد أن تعرف أن AMP CDN يستخدم بروتوكول HTTP / 2 من أجل تحقيق أفضل أداء ممكن.

أدوات AMP

هناك بعض الأدوات الرائعة التي يمكن أن تساعدك في تطبيق "صفحات الجوال المتسارعة" ، دعونا نلقي نظرة على بعضها.

تزود Google مشرفي المواقع بمفيد أداة تقرير حالة AMP يُظهر عدد صفحات AMP المفهرسة بنجاح والأخطاء المرتبطة بـ AMP أيضًا.

Lullabot ل مكتبة AMP PHP يسمح لك بتحويل صفحات HTML الخاصة بك إلى AMP HTML ، وكذلك الإبلاغ عن امتثال أي مستند HTML لمعايير AMP.

إذا كنت تريد استخدام AMP على موقع WordPress الخاص بك ، فاقرأ البرنامج التعليمي Yoast حول كيفية إعداد WordPress لـ AMP ، وكيف يعمل AMP مع المكون الإضافي Yoast SEO.

يمكنك أيضا التحقق من Automattic البرنامج المساعد AMP التي تسمح لك بتمكين صفحات الجوال المتسارعة على موقع WordPress الخاص بك.

اعتبارات إضافية

إذا كنت لا تزال غير مقتنع ، فقم بإلقاء نظرة على مقطع الفيديو حول اختبار سرعة سريع أدناه.

جوناثان أبرامز ، مؤسس Nuzzel يقدم مطالبات أفضل ، لأنه يؤكد أن المواقع المحسنة للجوال مثل New York Times يتم تحميلها بشكل أسرع - بدلاً من أخذ ثلاث ثوان لتحميل الصفحة المتوسطة ، يتم تحميل الصفحة أقل من نصف ثانية عند تمكين Google Mobile Accelerated Pages.

يمكنك أيضًا قراءة مقال مثير للاهتمام في Verge حول مسابقة Google AMP ومقالات Facebook الفورية. إذا كنت لا تزال تبحث عن إجابة عن "ما هي الفائدة؟" ، تحقق من منشور Yoast الذي يذكر المخاوف من أن AMP تعيدنا بشكل أساسي إلى وقت الإنترنت قبل عام 2000 ، وأسئلة عما إذا كان معيارًا مفتوحًا حقًا.

.