مراجعة عملية لـ Google AMP (Accelerated Mobile Pages)

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

باختصار ، جوهر المبادرة الجديدة كما يلي: لتحسين وتسريع تحميل صفحات المحتوى (أي المقالات والأخبار والمراجعات وتقارير الصور / الفيديو وما إلى ذلك) تقترح Google استخدام تطويرها - مكتبة AMP. في نفس الوقت ، يتم فرض عدد من القيود على الصفحة. على سبيل المثال ، لا يمكنك استخدام نصوص js أخرى ، باستثناء AMP نفسه وملحقاته. يجب عليك استخدام عناصر AMP خاصة بدلاً من العناصر المعتادة (على سبيل المثال ، علامة amp-img بدلاً من img ). لا يمكنك حتى إدراج أشرطة التمرير الخاصة بك للصور - لهذا هناك مكون خاص. ولرؤية الصورة بالحجم الكامل عند النقر على المعاينة ، يرجى استخدام إصدار Google من العرض المبسط ، وليس ما اعتدت على استخدامه هناك.

أود أيضًا تسليط الضوء على علامة جديدة للإعلانamp-ad - يسمح لك بإدراج وحدة إعلانية في الصفحة باستخدام إحدى شبكات الإعلانات المدعومة: A9 ، AdReactor ، AdSense ، AdTech ، Doubleclick. من الواضح أنه بهذه الطريقة تكتسب Google تحكمًا إضافيًا في الإعلان على المواقع ، ودعم شبكات معينة ، ولكن لحسن الحظ تم حظر جميع هذه الأشياء تمامًا بواسطة AdBlock. لا يزال محظورا.

يتم التحقق من جميع القيود المذكورة أعلاه من قبل مدقق خاص مدرج في AMP. بإضافة "# development = 1" إلى عنوان الصفحة ، يمكنك الحصول على حالة الصفحة في وحدة التحكم - لقد اجتازت عملية التحقق ، أو حدث خطأ ما. لسوء الحظ ، ناتج الخطأ غير إعلامي تمامًا. على سبيل المثال ، عند توصيل jQuery ، نحصل على وحدة التحكم هذه:



حاول تخمين الخطأ الذي حدث هنا.
إذا اجتاز المدقق الصفحة بنجاح ، فسوف نحصل على الرسالة "تم التحقق من صحة AMP بنجاح".

إذن ، ما هي الفرص التي توفرها لنا AMP؟
فيما يلي قائمة بالعناصر المعروضة للاستخدام:

المكونات
المدمجة : amp-ad Container لعرض الإعلانات
amp-img استبدال علامة img
amp-pixel Invisible pixel - hit counter
amp-video استبدال علامة HTML5 video

المكونات المتصلة باستخدام ملحقات (js منفصلة المكتبات)
amp-anim صورة متحركة (GIF)
amp-audio استبدال HTML5 بأداة amp-carousel الصوتية
عرض دائري عادي - عرض صور مصغرة
لنص amp-fit ​​- مرتبة أفقيًا تقليل حجم خط النص أو زيادته تلقائيًا بحيث يتناسب مع مساحة محدودة من
amp-iframe. استبدل iframe
amp-image-lightbox Lightbox. عرض بالحجم الكامل لصورة كبيرة عند النقر على رابط معاينة أو رابط
انستغرام يعرض منشورًا على إنستقرام
amp-lightbox صندوق إضاءة آخر
amp-twitter يعرض تغريدة
amp-youtube يعرض فيديو على YouTube

لن أعطي أمثلة على التعليمات البرمجية والعلامات والسمات - يمكن الاطلاع على كل هذا في الروابط أعلاه. الترميز مفهوم تمامًا ، والوثائق شاملة ، لذا يجب أن يكون كل شيء واضحًا جدًا.
يمكنك مشاهدة أمثلة عن طريق تنزيل الأرشيف على github ، أو هنا .
على الرغم من حقيقة أن المشروع في حالة معاينة فنية ، فقد تم الإعلان عنه للتو وكل ذلك - المكونات الخاملة تفسد الانطباع. على سبيل المثال ، لم أرغب في الحصول على مكون عرض التغريدات. يجب أن أقول أنها كانت مريحة للغاية - فقط استبدل معرف التغريدة (على سبيل المثال 652050319996780544 ) وحدد المعلمات حسب الذوق. ولكن لا يعمل. لكن Instagram يعمل بشكل جيد.

حسنًا ، هل حان الوقت للانتقال إلى الاختبارات؟
لقد قمت بإنشاء صفحتين بسيطتين ولكنها تتطلب موارد مكثفة.

الأول صالح لصفحات AMP والثاني HTML5 عادي بدون AMP.
عندما تفتح الصفحات من الهاتف ، يكون الفرق ملحوظًا حقًا. يتم تحميل صفحة AMP بشكل أسرع ، وأحمال أجمل ، وحتى الصور لها مؤشرات تحميل خاصة بها (بشكل أدق ، العنصر النائب المعتاد ، لكنها تبدو لطيفة). يتم تحميل الصفحة المعتادة ببطء ، وليست جميلة جدًا. ولكن من ناحية أخرى ، يعمل ملف gif في نهاية المستند عليه ، للأسف ليس في صفحة AMP. أعتقد أن ذلك يعتمد على المتصفح ، لذلك لن أركز على ذلك.

دعنا نجرب أداتي المفضلة من جوجل - رؤى سرعة الصفحات.

اختبار صفحة html5 عادية:
السرعة على الأجهزة المحمولة: 91/100
سهولة المشاهدة على الأجهزة المحمولة: 100/100
السرعة على أجهزة الكمبيوتر المكتبية 100/100
ليس سيئًا. أود أن أقول ممتاز. بالطبع ، يجدر وضع مقياس ياندكس هناك ، على سبيل المثال ، وعلى الفور ستنخفض المؤشرات ، لكنهم كتبوا عنها في المحور

اختبار صفحة AMP:
السرعة على الأجهزة المحمولة: 99/100
سهولة المشاهدة على الأجهزة المحمولة: 100/100
السرعة على أجهزة الكمبيوتر المكتبية 99/100
أفضل قليلاً على الأجهزة المحمولة ، والأسوأ قليلاً على أجهزة الكمبيوتر المكتبية. من حيث المبدأ ، إذا كنت تأخذ في الاعتبار ميزات القياس لإحصاءات سرعة الصفحات ، فإنها تتضح تقريبًا ، ولكن الفرق في التحميل على الأجهزة المحمولة ملحوظ تمامًا في الاختبار اليدوي.

دعونا نحاول مضاهاة في جوجل كروم. فليكن على سبيل المثال iphone6plus مع الجيل الثالث 3g.
الصفحة العادية - 17 ثانية تقريبًا نمسح



ذاكرة التخزين المؤقت ونحمّل صفحة AMP لمدة
8.82 ثانية . بجدية؟ الفرق بالفعل مرتين؟



نعم ، ولكن نظرًا لحقيقة تحميل المحتوى أثناء التمرير عبر الصفحة. على سبيل المثال ، تم تحميل gif فقط بعد التمرير إلى نهاية المستند. لن نختبر
على www.google.com/webmasters/tools/mobile-friendly ، كل شيء واضح معهم.

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

حسنا هذا كل شيء. شكرا للانتباه!
سأكون سعيدا لتعليقاتكم وملاحظاتكم.

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