AMP Conf 2018. Feb 13/14. Amsterdam.
AMP Conf. Feb 13/14.

يوفر أمب تجربة المستخدم كبيرة عبر العديد من المنصات

شغل الفيديو

يتم بناء صفحات أمب مع 3 مكونات أساسية.

AMP HTML

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

AMP HTML هو HTML الأساسي مع توسيعه بخصائص AMP المخصصة. يشبه أبسط ملف AMP HTML هذا:

<!doctype html>
<html >
 <head>
   <meta charset="utf-8">
   <link rel="canonical" href="hello-world.html">
   <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
   <style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
   <script async src="https://cdn.ampproject.org/v0.js"></script>
 </head>
 <body>Hello World!</body>
</html>

بالرغم من أن غالبية العلامات في صفحة AMP HTML تمثل علامات HTML العادية، لكنّ بعض علامات HTML يتم استبدالها بعلامات مخصصة لـ AMP (انظر أيضًا علامات HTML في مواصفات AMP). هذه العناصر المخصصة، التي يُطلق عليها اسم مكونات AMP HTML، تسهّل تنفيذ الأنماط الشائعة بطريقة فائقة الأداء.

على سبيل المثال، توفر العلامة amp-img الدعم الكامل لـ srcset حتى في المتصفحات التي لا تدعمها حتى الآن. تعرّف على كيفية إنشاء صفحة AMP HTML الأولى لك.

AMP JS

تضمن مكتبة AMP JS العرض السريع لصفحات AMP HTML.

تنفّذ مكتبة AMP JS أفضل ممارسات الأداء لـ AMP جميعها، وتدير تحميل الموارد، وتمنحك العلامات المخصصة المذكورة أعلاه، وهذا كله بغرض ضمان العرض السريع لصفحتك.

ومن بين أكبر التحسينات أنها تجعل كلّ ما يكون مصدره الموارد الخارجية غير متزامن؛ وبذلك لا يعيق أيُّ مكون في الصفحة عرض أيٍ من عناصرها.

كذلك، فمن بين تقنيات الأداء الأخرى توفير وضع الحماية لإطارات iframe كلها، والحساب المسبق لتنسيق كل عنصر في الصفحة قبل تحميل الموارد، وتعطيل محدّدات CSS البطيئة.

للتعرّف على المزيد بشأن التحسينات والقيود كذلك، اقرأ مواصفات AMP HTML.

AMP Cache

تعرض Google AMP Cache (اختياريًا) صفحات AMP HTML.

Google AMP Cache هي شبكة عرض محتوى تستند إلى الخادم الوكيل لعرض كل مستندات AMP الصالحة. فهي تجلب صفحات AMP HTML وتخزّنها في ذاكرة التخزين المؤقت، وتحسّن أداء الصفحة تلقائيًا. عند استخدام Google AMP Cache، يتم تحميل المستند وكل ملفات JS وكل الصور من الأصل نفسه الذي يستخدم HTTP 2.0 لتوفير أقصى حد من الفاعلية.

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

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

تعرّف على المزيد بشأن اختبار صفحات AMP HTML.

ترى ما يمكن أمب القيام به بالنسبة لك