يوجد حوالي 1.5 مليون صفحة جوال مسرعة (AMP) على الويب.

لا تساعد AMP في تحسين وقت التحميل فحسب ، بل تزيل أيضًا JavaScript و CSS والتحميل البطيء غير الضروريين. لقد ساعدت العديد من المؤسسات على تطوير صفحات ويب نظيفة ومبسطة ومضاعفة سرعة صفحاتها ثلاث مرات.

في هذه المقالة ، ستتعرف على مكونات AMP ، وكيف تعمل ، وفوائدها ، وقيودها ، وأين تقف مقارنة بتطبيقات الويب التقدمية (PWAs) وتصميم الويب سريع الاستجابة.

ما هو AMP؟

دعنا نفكّر ما هو AMP لفهمه بشكل أفضل.

يضمن الجمع بين المكونات الأساسية الثلاثة وتقنيات التحسين تجربة مستخدم فائقة السرعة.

المكونات الأساسية لـ AMP

تتكون AMP من ثلاثة عناصر: HTML و JavaScript وذاكرة التخزين المؤقت.

AMP HTML

يختلف AMP HTML عن علامات HTML العادية لأنه يحتوي على علامات خاصة بـ AMP أيضًا. تُعرف هذه العلامات أيضًا باسم العلامات المخصصة ، وتسهل تنفيذ AMP في الشفرة.

يقيد AMP HTML بعض أكواد HTML للحصول على أداء موثوق به لموقع الويب. يتعرف محرك بحث Google والأنظمة الأساسية الأخرى على AMP من خلال علامات HTML.

AMP JavaScript

تنفذ مكتبة AMP JavaScript أفضل ممارسات أداء AMP لضمان العرض السريع لصفحات AMP HTML. تتضمن أفضل الممارسات CSS المضمنة وتشغيل الخطوط.

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

ذاكرة التخزين المؤقت لصفحات AMP

التخزين المؤقت هو أسلوب معروف لتحسين أداء الصفحة. تستخدم AMP شبكة توصيل محتوى قائمة على الخادم الوكيل في شكل ذاكرة تخزين AMP المؤقتة لمستندات AMP الصالحة.

تأتي ذاكرة التخزين المؤقت لصفحات AMP مزودة بنظام التحقق الخاص بها. يستخدم النظام سلسلة من التأكيدات التي تتحقق من صحة ترميز الصفحة مقابل مواصفات AMP HTML.

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

تقنيات التحسين

الآن بعد أن تعرفت على المكونات الأساسية التي تشكل إطار عمل AMP ، دعنا ننتقل إلى تقنيات التحسين التي تجعل تحميل الصفحات سريعًا ممكنًا.

تنفيذ JavaScript غير متزامن

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

حجم ثابت لجميع الموارد

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

آلية التمديد

يحظر AMP الكثير من جافا سكريبت و CSS و HTML غير الضرورية للسرعة ولكنه يسمح بامتدادات لعناصر مثل Lightboxes ودمج الوسائط الاجتماعية.

لا استخدام لجهة خارجية جافا سكريبت

تعمل JavaScripts التابعة لجهات خارجية على إبطاء وقت التحميل بسبب التحميل المتزامن. تسمح صفحات AMP بجافا سكريبت ، ولكن في إطارات iframed فقط. بسبب وضع الحماية ، لا يمكن لـ Javascript منع تنفيذ الصفحة الرئيسية.

CSS مضمنة ومحددة الحجم

يميل CSS إلى التسبب في الانتفاخ كما أنه يؤخر التقديم. يستخدم AMP HTML النمط المضمَّن لإزالة العديد من طلبات HTTP لصفحات الويب. يجب أن تبقى مساحة 50 كيلوبايت مفتوحة لـ CSS المضمنة - مساحة كافية لصفحات الويب المعقدة.

تشغيل الخط الفعال

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

تشغيل الرسوم المتحركة المسرَّعة بواسطة وحدة معالجة الرسومات فقط

تتطلب الرسوم المتحركة الثقيلة تسريع GPU. تؤدي وحدة معالجة الرسومات (GPU) جميع مهامها في طبقات. ومع ذلك ، لا يمكن لـ GPU تحديث تخطيط الصفحة. إنه يعطي المهمة لمتصفح الويب ، وهي ليست فعالة من منظور السرعة.

تحديد أولويات تحميل الموارد

تتمثل إحدى الطرق التي تحافظ بها AMP على السرعات العالية في إعطاء الأولوية لتحميل الموارد. إنه يقوم فقط بتحميل الموارد حسب الحاجة ويجلب أيضًا الموارد المحملة ببطء.

التحميل الفوري للصفحات

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

فوائد AMP

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

اجذب المزيد من العملاء

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

تعظيم الإيرادات

تمامًا مثلما يمكن لثانية واحدة من التوقف عن العمل تحديد مصير القيمة السوقية للتكتل ، فإن التأخير لمدة ثانية واحدة على موقع الويب الخاص بك يقلل من معدل التحويل بنسبة 12٪. تقدم AMP تجربة مستخدم أسرع على مواقع الويب والإعلانات والصفحات المقصودة بعد النقر.

الحفاظ على المرونة

عند استخدام AMP ، تتاح لك الفرصة لاستخدام مكونات الويب المحسنة. يمكنك استخدام CSS لتصميم واسترداد البيانات من صفحات الويب ثم إجراء اختبار A / B لضمان أفضل تجربة للمستخدم.

تقليل التعقيد

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

تعظيم عائد الاستثمار

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

خلق مستقبل مستدام

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

تحسين تجربة المستخدم

يجب أن يكون هدفك النهائي هو بناء تجربة مستخدم أفضل. يمكن أن تجعل AMP وقت التحميل أسرع بنسبة 15٪ إلى 85٪. حتى لو كان ذلك يعني تحسنًا لمدة ثانية فقط ، فإن الأمر يستحق تجربة AMP - قد تتفاجأ بمدى تحسينه لـ UX الخاص بك.

تعزيز تحسين محركات البحث

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

تتميز الصفحات المحسّنة بتنسيق AMP برمز صاعقة أخضر أسفل العنوان ، مما يشير إلى سرعة التحميل السريع. تظهر الصفحات التي تدعم AMP أيضًا في شكل دائري أعلى الإعلانات المدفوعة على SERPs.

قيود AMP

لا شك في أن صفحات AMP توفر الكثير من المزايا ، ولكن هناك بعض أوجه القصور التي لا يمكن التغاضي عنها. هنا القليل منهم

لا يوجد جافا سكريبت طرف ثالث

نظرًا لأن AMPs تقيد JavaScript ، يتعذر على المطورين تتبع الإمكانات التحليلية. نتيجة لذلك ، يصبح من الصعب توفير تجربة مستخدم مخصصة.

لا تتبع تحليلات جوجل

السبب وراء سرعة AMPs بشكل أسرع يقيد أيضًا AMP من استخدام تحليلات Google. تستخدم Google نسخة مخبأة من AMPs بدلاً من تحميل الصفحات من الخادم. لا يتتبع عدد الزوار إلا إذا قمت بإجراء تكوينات GA واستخدام أكواد تتبع منفصلة.

AMP مقابل الأطر المحسّنة الأخرى

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

AMP مقابل مقالات Facebook الفورية

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

AMP مقابل تصميم الويب سريع الاستجابة

تحكم مواقع الويب للجوال تطبيقات الويب منذ عام 2015 عندما أطلقت Google خوارزمية متوافقة مع الجوّال - وهو حدث يُشار إليه باسم mobegeddon. توفر صفحات الويب للجوال التي تم إنشاؤها باستخدام تصميم ويب سريع الاستجابة تنسيقات مرنة لأحجام واتجاهات مختلفة للشاشة.

من ناحية أخرى ، جاء AMP في عام 2016 لتسريع وقت تحميل صفحات الويب. تستخدم كلتا الصفحتين جافا سكريبت و HTML لجزء الترميز ، لكن AMP تركز بشكل أكبر على السرعة وقدمت أيضًا عرضًا فوريًا للمحتوى.

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

AMP مقابل PWA

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

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

AMP حتى صفحات الجوال الخاصة بك

مع مجموعة من الأطر المحسّنة مثل AMP و Facebook Instant Articles و PWAs ، لا يوجد حقًا أي عذر للمشاركة الضعيفة ومعدلات الارتداد المرتفعة على صفحات هاتفك المحمول. استخدم تقنيات تحسين AMP لتوفير تجربة قوية وتلبية توقعات سرعة Google.

هل تستخدم AMP لتحسين موقع الويب الخاص بك؟ ستحتاج أيضًا إلى نظام أساسي لتطوير الأجهزة المحمولة . اطلع على جميع الخيارات المتاحة على G2.