إجعل تصفح موقعك سريع مع تقنية الصفحات السريعة AMP

Dmitrii Susloparov

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

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

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

على الرغم من الإشارات والتحذيرات السابقة من Google ، لا يزال هذا الحدث يثير صدمة كبيرة بين مشرفي المواقع وكان يلقب بـ Mobilegeddon بسبب حجم تأثيره. باختصار ، إذا اعتبرت Google صفحة الويب غير ملائمة للجوّال (وليس هناك حل وسط) ، فسيتم تصنيفها بشكل أقل حتى إذا كان محتواها استثنائيًا.

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

علاوة على ذلك ، أظهرت الدراسات أن 40٪ من مستخدمي أجهزة الكمبيوتر المكتبية سيتخلون عن صفحة ويب بطيئة التحميل ، في حين أن مستخدمي الهواتف المحمولة كانوا يتركون بمعدل أعلى (50٪) ، وفقًا للمستهلكين في Micro-Moment ، في مايو 2015.

كاستجابة مباشرة لتحدي سرعة الإنترنت عبر الهاتف النقال، جوجل بعرض مشروع AMP في عام 2015. غاري Illyes، وهو محلل الاتجاهات المسؤول عن الموقع في جوجل، و ذكرت أن AMP صفحات الويب تحميل 4 مرات أسرع من المتوسط.

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

 

نظرة عامة على التكنولوجيا

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

يتم إنشاء صفحات AMP باستخدام AMP HTML و AMP JavaScript. AMP HTML عبارة عن مجموعة فرعية من HTML 5 وتم تصميمها بشكل مباشر بواسطة CSS 3.

يسترشد تصميم AMP بمبدأ حظر الميزات التي قد تعيق التحميل السريع للصفحة. لا تدعم AMP جميع علامات HTML ، على سبيل المثال ، يُحظر استخدام الإطار ومجموعة الإطارات. بالإضافة إلى ذلك ، يتم استبدال بعض علامات وسائط HTML 5 (مثل img والفيديو والفيديو والصوت) بعلامات AMP HTML المقابلة (amp-img و amp-video و amp-audio). تتم إدارة وتحسين تحميل صفحات AMP باستخدام مكتبة AMP Javascript. تفرض مكتبة JS هذه أفضل الممارسات لتحسين الأداء لعرض الصفحة. لتحسين أداء تحميل الصفحات بشكل أكبر ، يمكن تخزين صفحات AMP في ذاكرة التخزين المؤقت على أنظمة وكيل الشبكة مثل Google AMP Cache.

 

تطبيقات الويب

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

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

على الرغم من أن AMP ليس موجودًا في كل مكان في شبكة الجوّال ، إلا أنه يكتسب زخمًا من خلال دعمه على LinkedIn و Medium و Pinterest و Reddit و Twitter و WordPress و Drupal.

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

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

 

تثبيت دعم Drupal AMP

 

نظرة عامة

 

يتطلب دعم AMP على Drupal تثبيت المكونات التالية.

 

  1. وحدة AMP
    تدير وحدة AMP تحويل صفحات HTML التقليدية من Drupal إلى صفحات شكوى AMP. ينتهي عنوان URL لصفحات AMP بالسلسلة "؟ amp".

  2. مكتبة AMP PHP
    مكتبة AMP PHP هي المحرك وراء تحويل HTML. يتحقق من صحة HTML الذي يدخله المستخدم مقابل معيار AMP ويقوم بالتصحيحات اللازمة لضمان الامتثال.

  3. مظهر AMP
    يتكون مظهر AMP من المظهر الأساسي لـ AMP والموضوع الفرعي ExAMPle. يجب عرض جميع صفحات Drupal AMP باستخدام موضوع فرعي لموضوع AMP الأساسي. يمكنك إنشاء مظهر فرعي AMP جديد من البداية أو تعديل السمة الفرعية الافتراضية ExAMPle.

يدعم كل من Drupal 7 و Drupal 8 AMP. يوضح ما يلي كيفية إعداد دعم AMP لـ Drupal 8 على نظام Linux الأساسي.

 

كيف تضيف AMP إلى موقع دروبال الخاص بك؟

الشرط الأساسي هو وجود نظام دروبال عامل بالفعل. يستخدم إجراء التثبيت التالي أدوات سطر الأوامر Composer و Drush.

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

 

تنزيل وتثبيت Composer

الملحن هو مدير التبعية لتنزيل حزم PHP. قم بتنزيل وتثبيت Composer باستخدام هذا الأمر:

curl -sS https://getcomposer.org/installer | بي أتش بي


انقل البرنامج المثبت إلى دليل نظام يمنحك إذنًا بالتنفيذ ، مثل / usr / local / bin.

mv composer.phar / usr / local / bin / الملحن 

 

تنزيل وحدة AMP

قم بتنزيل وحدة AMP وتوابعها ، بما في ذلك مكتبة AMP PHP ، باستخدام أمر الملحن أدناه. لاحظ أنه يجب تشغيل أمر الملحن داخل دليل جذر المستند الخاص بخادم الويب. يعتمد موقع الدليل الجذر للمستند بالضبط على خادم الويب وتوزيع Linux. بالنسبة لهذا المثال ، جذر المستند هو / var / www.

cd / var / www
يتطلب الملحن دروبال / أمفيتيم

 

تنزيل سمة AMP

قم بتنزيل نسق AMP بما في ذلك السمة الفرعية الافتراضية لـ ExAMPle إلى دليل جذر المستند (على سبيل المثال ، / var / www).

cd / var / www
يتطلب الملحن دروبال / أمفيتيم

 

تفعيل المظهر الفرعي لصفحات AMP

يجب تمكين المظهر الفرعي لصفحات AMP قبل تمكين وحدة AMP. في هذا المثال ، نقوم بتمكين السمة الفرعية الافتراضية لـ ExAMPle (ampsubtheme_example). بدلاً من ذلك ، يمكنك تمكين مظهر فرعي AMP مخصص.

إذا كان Drush ، سطر الأوامر لإدارة Drupal ، مثبتًا بالفعل على نظامك ، يمكنك تمكين السمة الفرعية باستخدام الأمر Drush التالي. لاحظ أنه يجب تنفيذ الأمر Drush داخل الدليل الجذر للمستند.

cd / var / www
drush en ampsubtheme_example 

يمكنك أيضًا تمكين السمة الفرعية من خلال واجهة الويب Drupal باستخدام الإجراء التالي:

 

  1. قم بتسجيل الدخول كمسؤول دروبال.

 

2. حدد صفحة المظهر.

 

  1. حدد الموضوع الفرعي ExAMPle في قسم السمات غير المثبتة ، وانقر على تثبيت.
    يتوفر خياران للتثبيت: تثبيت وتثبيت وتعيين كافتراضي. حدد تثبيت. يجب استخدام السمة الفرعية فقط على صفحات AMP ، وبالتالي يجب عدم تعيينها كموضوع افتراضي.

 

تمكين وحدة AMP

يمكن تمكين وحدة AMP باستخدام Drush أو واجهة الويب Drupal.
لتمكين وحدة AMP باستخدام Drush ، قم بتنفيذ الأمر Drush أدناه داخل الدليل الجذر للمستند:

cd / var / www
سحق أون أمبير 

 

لتمكين AMP باستخدام واجهة الويب:

  1. قم بتسجيل الدخول كمسؤول دروبال.

 

2. حدد توسيع الصفحة.

 

  1. مرر لأسفل إلى القسم "آخر" ، وحدد كل من وحدتي Accelerated Mobile Pages (AMP) و Token.

  2. انقر فوق تثبيت.

 

هيئ AMP

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

 

  1. قم بتسجيل الدخول كمسؤول دروبال.

 

  1. حدد صفحة التكوين.

 

  1. انقر على تهيئة AMP في قسم تأليف المحتوى.
    يتم عرض صفحة تكوين AMP.

 

  1. حدد ExAMPle Subtheme كموضوع AMP ، وانقر على زر حفظ التهيئة.
    يسرد الجزء العلوي من صفحة تهيئة AMP حالة AMP حسب نوع المحتوى. مبدئيًا ، يتم تعطيل AMP لجميع أنواع المحتوى ، مثل المقالة والصفحة الأساسية.

 

  1. مكّن AMP لنوع المحتوى ، على سبيل المثال ، المقالة بالنقر على الرابط تمكين AMP المقابل في إعدادات العرض المخصص.
    ونتيجة لذلك ، يتم عرض صفحة إدارة العرض.

 

  1. انقر لفتح إعدادات العرض المخصصة.

  2. حدد وضع عرض AMP ، وانقر فوق حفظ.
    يُرجعك حفظ الإعداد إلى صفحة تهيئة AMP.

 

  1. انقر على تكوين وضع عرض AMP لنوع المحتوى الذي مكّنته للتو.
    يتم سرد جميع الحقول المتاحة للعرض لنوع المحتوى.

 

  1. حدد تنسيق AMP للحقول ، وانقر فوق Save.
    تعتمد الحقول المتاحة على نوع المحتوى. بالنسبة إلى حقل النص ، حدد نص AMP باعتباره التنسيق. للصورة ، حدد صورة AMP.

 

  1. حدد صفحة الهيكل.

  2. انقر فوق تخطيط التخطيط.

 

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

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

 

  1. قم بتحرير الصفحة.
    عدّل الصفحة ضمن دروبال ، وبدلاً من تحديد حفظ والاستمرار في النشر ، حدد حفظ وعرض صفحة AMP.

 

  1. إلحاق لاحقة AMP بعنوان URL.
    تصفّح للوصول إلى نسخة الصفحة العادية غير بتنسيق AMP. قم بإلحاق اللاحقة '؟ amp' يدويًا في نهاية عنوان URL للصفحة ، واضغط على Enter.

 

الملخص والخاتمة

على الرغم من النتائج الملموسة ، إلا أن AMP ليست سوى واحدة من العديد من تقنيات الويب للجوّال التي تهدف إلى تقليل وقت تحميل الصفحة. تشمل منافسيها المقالات الفورية Facebook و Apple News. تتميز AMP بكونها المنصة الوحيدة مفتوحة المصدر بين الثلاثة.

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

اقرأ المزيد: لماذا تهيمن تقنيات المصادر المفتوحة على السوق

 

مزايا AMP

  • تحسين محركات البحث
    على الرغم من أن AMP في حد ذاته ليس عامل ترتيب في عمليات بحث Google حتى الآن ، فإن صفحات AMP ، بحكم وقت التحميل الأسرع ، تساهم في تحسين نتائج تحسين محركات البحث لعمليات البحث عبر الجوال. تعد الرؤية الأفضل لمحرك البحث ، ومعدلات الارتداد الأقل ، ومعدلات النقر الأعلى ، كلها مزايا يمكن تحقيقها من AMP. يمكن العثور على نصائح حول كيفية تحسين موقع دروبال لتحسين محركات البحث هنا .

 

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

 

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

 

  • ضغط أقل على خوادم الويب
    تشغل صفحات AMP مساحة أقل ويمكن أن تستفيد من التخزين المؤقت على خوادم AMP Cache. ونتيجة لذلك ، يتم تقليل الضغط على خوادم الويب بشكل نسبي.

 

  • الحل المحتمل للمواقع الأصغر


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

 

عيوب AMP

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

 

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

 

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

 

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