AMP Conf 2018. Feb 13/14.
AMP Conf.
New AMP Roadshows.
AMP Roadshows.

An open source effort to improve the content ecosystem for everyone.

AMP is an open-source library that provides a straightforward way to create web pages that are compelling, smooth, and load near instantaneously for users. AMP pages are just web pages that you can link to and are controlled by you.

AMP builds on your existing skill sets and frameworks to create web pages. AMP is supported by many different platforms, and it's compatible across browsers.

AMP's ecosystem includes 25 million domains, 100+ technology providers, and leading platforms, that span the areas of publishing, advertising, e-commerce, local and small businesses, and more!

Learn more from this introductory video

يتم بناء صفحات أمب مع 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.

Learn AMP's design principles

Explore Design Principles

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