شرح Accelerated Mobile Pages واضافة AMP لموقعك
شرح كامل عن تسريع صفحات الجوال AMP
ماهو AMP ؟ ما وظيفته ؟ لماذا قامت جوجل بتطوير هذا المشروع ؟ وكيف استخدم AMP في موقعي ؟
هذه الاسئلة سنجيب عليها في هذا الموضوع
أهتمت جوجل مؤخرا بمشروع AMP وتطويره وشارك في هذا المشروع اكبر المواقع والمنصات العالمية مما شهد انتشار واسعاً بشكل سريع.
لذلك لا يمكن لأي صاحب موقع إهمال AMP والتغاضي عن استخدامها فهي إن لم تكن اليوم عامل ترتيب في محرك البحث فإنها في المستقبل القريب ستكون ذلك خصوصاً بعد ان ظهور شعار AMP بجانب النتائج في محرك البحث وإظهار أرشفة وأخطاء الصفحات التي تستخدم AMP في ادوات مشرفي المواقع.
وبما أن مشروع AMP في بدايته والكثير من اصحاب المواقع ما زالت تجهل ماهية AMP وكيف يعمل وظهور الكثير من الأسئلة في ذهن المهتمين لذلك قمت بعمل فيديو قصير أشرح فيه كل شيء عن AMP وأجيب عن كل الاسئلة ونقدم لكم كل المعلومات عن AMP وطريقة اضافة AMP لموقعك ووردبريس.
الموقع الرسمي لمشروع Accelerated Mobile Pages هو: ampproject.org
ستجد فيه كل ماتريد معرفته عن AMP كما ستجد رأي المساهمين في هذا المشروع ومشاهدة فيديوهات تعريفية عن AMP.
ماهو AMP؟
هو مشروع من جوجل يعمل بلغة HTML مفتوحة المصدر (Open Source) تجعل سرعة الموقع كبيرة جداً تصل إلى 10 أضعاف سرعة الصفحة العادية مما يجعل تجربة التصفح من الجوال سريعة وممتعة حيث تعودنا ان التصفح من الجوال بطيء ولكن مع AMP التجربة مختلفة.
وفي تجربة عملية وبسيطة افتح الموقع الرسمي لمشروع AMP وشاهد السرعة الرهيبة التي يتم تحميل الموقع بها, وقم بعمل اختبار للموقع من خلال اداة pingdom لقياس حجم الصفحة والوقت المستغرق لتحميل الصفحة.
لاحظ ان حجم الصفحة ليس بالخفيف “554.3 kB” وتم تحميلها في 2.86 s فقط ونحن اعتدنا ان مثل هذا الحجم يتم تحميله في 5-6 ثواني على الاقل ولكن مع AMP التجربة مختلفة واعتقد انك الان فهمت ما هو AMP والية عمله.
( معلومه هامه : موقع ومنتدى شركة جلاكسو لايستخدم AMP ولكن تم الاستخدام للشرح ولان سرعة تحميل المواقع بشركة جلاكسو لاستضافة وتصميم المواقع سريعه جدآ بسبب السيرفرات ذات الامكانيات الجباره وعلى اى حال هذه هى اداة تثيم السرعه https://tools.pingdom.com ويمكنكم عمل مقارنه بين سرعة منتدى جلاكسو او اى منتدى على استضافة شركة جلاكسو واى شركة استضافه أخرى )لماذا قامت جوجل بعمل هذا المشروع؟مع الازدياد والانتشار الواسع والكبير لأستخدام الجوال في العالم لتصفح الانترنت أصبح من الضروري جعل تجربة التصفح من الجوال فريدة وذلك في البداية بجعل المواقع متوافقة مع الجوال ثم بجعلها سريعة وهذا كان هدف جوجل الاساسي في تحسين تجربة المستخدم فمن خلال شاشة صغيرة يجب ان يرى المستخدم محتوى الصفحة ولا ينتظر طويلاً كي تظهر الصفحة له.
كيف اضيف AMP لموقعي؟هذا هو الجزء الأهم في الموضوع بالنسبة لبلوجر والمنتديات والمنصات الاخرى ليس من السهل جعل موقعك يعمل بالAMP لأن المشروع في بدايته ومازال التطوير جاري عليه وتأكد أن جميع المشاكل ستحل في المستقبل القريب بأذن الله وإذا كان لديك خبرة التطوير يمكنك زيارة شروحات جوجل حول تصميم صفحة AMP HTML بخطوات سهلة وبسيطة.
أما لو كنت تستخدم ووردبريس فالأمر بسيط جداً وسوف نشرح لكم طريقة جعل موقعك يعمل بالـAMP بسهولة.
توجه إلى لوحة التحكم ثم اذهب إلى أضافات>>أضف جديد ثم ابحث عن AMP ستظهر لك الاضافة الرسمية في أول نتيجة وهذه هي صفحة الاضافة AMP WordPress
بعد تنصيب الاضافة وتفعيلها اذهب الى (الروابط الدائمة) ثم أضغط على حفظ التغييرات وذلك لأعادة توليد قاعدة بيانات جديدة تحوي على روابط AMP.
الآن اصبحت AMP جاهزة في موقعك وتعمل بشكل سليم, ويمكنك تجربة اي صفحة من خلال اضافة AMP الى اخر الرابط وكمثال على ذلك:
رابط الصفحة الاصلي هو :
https://sitesuccessful.com/vary-anchor-textرابط الصفحة التي تعمل بالـamp هو :
https://sitesuccessful.com/vary-anchor-text/ampملاحظة: اضافة AMP تقوم بتهئية المقالات فقط, ولا تقوم بعمل AMP للصفحة الرئيسية والصفحات والتاجات والتصنيفات.
كيف تتاكد ان AMP تعمل بشكل سليم في موقعك؟للتأكد بأن صفحة AMP تعمل بشكل سليم استخدم متصفح جوجل كروم ثم قم بوضع #development=1 في نهاية الرابط وادخل الى الصفحة من جديد ليكون الرابط أستكمالاً للمثال في الاعلى:
https://sitesuccessful.com/vary-anchor-text/amp/#development=1الآن أضغط F12 ستظهر لك هذه الرسالة: (AMP Validation Successful) كما في الصورة.
بهذا تكون قد أتممت تهيئة موقعك للـAMP بشكل كامل مع التحقق بأن AMP تعمل بشكل جيد وسليم.
تحويل الزائر القادم من الجوال الى صفحات AMP
الان تعمل صفحات AMP في موقعك ولكن الزائر لا يمكنه الوصول لها مباشرة الا عن طريق كود تحويل سنضعه داخل ملف .htaccess وهو:
RewriteEngine On
RewriteCond %{REQUEST_URI} !/amp$ [NC]
RewriteCond %{HTTP_USER_AGENT} (android|blackberry|googlebot\-mobile|iemobile|iphone|ipod|\#opera\ mobile|palmos|webos) [NC]
RewriteRule ^([a-zA-Z0-9-]+)([\/]*)$ https://www.glaxu.com/$1/amp [L,R=302]
وظيفة هذا الكود هي تحويل كل زائر قادم من الجوال إلى صفحات AMP بشكل اتوماتيكي واحرص على وضع رابط موقعك بدل
https://www.glaxu.com الموجودة في داخل الكود.
هذا كل شيء عن AMP أو Accelerated Mobile Pages حتى الآن, فالمشروع مازال قيد التطوير والعمل من جوجل وأي جديد ستجده في هذه المقالة بأذن الله
