AMP چیست؟

صفحات موبایل عموما کند هستند و برای کاربر نهایی مشاهده برخی از این صفحات به ندرت آسان است. منظور از این مشکلات:

• دیر لود میشوند (مشاهده صفحه سفید)

• دلیل: کد های حجیم + درخواست از Origin های مختلف

• صفحه لود شده اما هنوز Loading

• دلیل: برنامه نویسی سمت کاربر بد + مشکلات شبکه

• درخواست های HTTP زیاد

• دلیل: استایل های متعدد + اسکریپت های متعدد

• کارایی پایین (Performance)

• دلیل: استایل های با RePaint زیاد + Junky Scroll + و...

• تجربه های کاربری بد و متفاوت

• دلیل: صفحات شلوغ که محتوا در آن گم شده است.

به همین منظور گوگل استاندارد جدید به نام AMP منتشر کرده است این استاندارد برای ساخت صفحاتی در موبایل است که این صفحات از سرعت بالایی برخورد هستند و در آن ها برای کاربر محتوا در ارجحیت قرار دارد. AMP بیشتر مناسب سایت ها بر پایه محتوا است.

مزایای AMP:

• استایل های یکسان و یکپارچه در همه AMP های جهان (کاربر آشنا است با محیط و نرخ تبدیل بالا میرود) AMP CSS

• تبلیغات به شدت ممنوع

• استفاده از تکنیک های PreBorwoser

• اسکریپت ها و انیمیشن های از پیش تعریف شده با سرعت بالا AMP JS

• در امپ محتوا پادشاه است و تجربه کاربری ملکه

– (منظور از این جمله اهمیت بالای محتوا برای کاربر است) ظاهر شسته و رفته و ساده که در آن محتوا در جای درست قرار گرفته است

• یک مارک آپ جدا گانه فارغ از HTML به نام AMP HTML مثلا: <amp-image/> این تگ عرض و ارتفاع عکس را به صورت یک باکس اعمال میکند و Flash Content رخ نمیدهد.

• اولویت بندی بارگذاری موارد اول متن ها لود میشود سپس عکس ها بعد استایل ها و JS ها که این کارایی بالایی در صفحه ایجاد میکند وکاربر منتظر لود شدن عکس ها یا استایل ها یا اسکریپت ها برای خواندن مطلب خود نمی ماند

• شروع به نوشتن یک AMP ساده:

• برای شروع یک صفحه HTML در هر ویرایشگری که میخواهید باز کنید و طبق اجزا زیر پیش بروید.

اجزا AMP:

امپ از سه جز کلی: AMP HTML, AMP CSS, AMP JS, AMP Cache تشکیل شده است.

قوانین و توضیحات اجزای مختلف AMP:

AMP HTML:

این جز از AMP همان HTML است اما برخی محدودیت هایی برای اطمینان از کارایی صفحه دارد. خصوصیات AMP HTML:

· تگ HTML باید شامل خصیصه amp باشد.

· یک تگ اسکریپت به آدرس https://cdn.ampproject.org/v0.js

· یک تگ link با خصیصه rel به مقدار canonical که به آدرس صفحه اصلی ارجاع داده میشود.

· متا تگ View Port

· اجزا AMP Boilerplate

· به جای تگ img از تگ <amp-img> استفاده میشود.

که در نهایت به شکل زیر در می آید کد زیر را در فایل خود قرار دهید:

<!doctype html>
<html amp>
 <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>

حال در مرورگر Chrome باید قسمت console را باز کنید عبارت زیر را می بایست مشاهده کنید:

تمام اجزا مثلcanonical و... با موارد خود جا به جا کنید.

بقیه Markup را هر طور که علاقه مندید بچینید اما عکس ها با amp-image جا به جا کنید. تگ amp-image یک خصیصه به نام layout دارد که با قرار دادن به عنوان responsive میتوان عکس را واکنش گرا کنید.

سپس در صفحه Main مطلب در سایت اصلی باید تگ:

<link rel="amphtml" href="https://www.example.com/url/to/amp/document.html">

قرار داده شود تا گوگل بداند که صفحه amp موجود است و آن را شناسایی کند. به جای href آدرس amp صفحه فعلی را وارد کنید.

AMP CSS:

می بایست تمام خصوصیات CSS را در تگ style بنویسید و به آن خصیصه amp-custom اختصاص دهید.

موارد ممنوع در نوشتن CSS:

· از !Important به هیچ عنوان استفاده نکنید.

· استایل های خارجی ممنوع است (فقط در صورتی که در آن فونت Include شده باشد)

· استفاده از خصیصه filter

مواردی که پیشنهاد میشود استفاده نشود:

· Transition

· @Keyframes

· Animation

مثلا به شکل زیر:

<style amp-custom>
  @font-face {
    font-family: "Bitstream Vera Serif Bold";
    src: url("https://somedomain.org/VeraSeBd.ttf");
  }

  body {
    font-family: "Bitstream Vera Serif Bold", serif;
  }
</style>

AMP JS:

در amp شما نمیتوانید جاوا اسکریپت اختصاصی بنویسید و می بایست از JS هایی که توسط گوگل ارائه شده است استفاده کنید.

این اسکریپت ها با بهترین روش های برنامه نویسی نوشته شده است که بالاترین کارایی را نیز دارند.

در این اسکریپت ها accordion, slider, popup, lightbox و انواع و اقسام کامپوننت ها موجود است.

لیست این JS ها در صفحه زیر آمده است: https://github.com/ampproject/amphtml/tree/master/src

مثال: اضافه کردن Accordion به صفحه خود:

تگ اسکریپت زیر را وارد کنید

<script async custom-element="amp-accordion" src="https://cdn.ampproject.org/v0/amp-accordion-0.1.js"></script>

میبینید که خصیصیه custom-element در این تگ موجود است یعنی شما باید تگی با این عنوان بسازید

<amp-accordion>
  <section expanded>
    <h4>Section 1</h4>
    <p>Bunch of awesome content.</p>
  </section>
  <section>
    <h4>Section 2</h4>
    <div>Bunch of even more awesome content. This time in a
      <code>&lt;div&gt;</code>.</div>
  </section>
  <section>
    <h4>Section 3</h4>
    <figure>
      <amp-img src="/img/amp.jpg"
        width="1080"
        height="610"
        layout="responsive"
        alt="an image"></amp-img>
      <figcaption>Images work as well.</figcaption>
    </figure>
  </section>
</amp-accordion>

عموما برای هر کامپوننت JS در AMP راهنمایی نیز موجود است که میتوانید در سایت زیر نمونه استفاده از آنها را نیز ببینید:

https://ampbyexample.com

AMP Cache:

این امکان توسط گوگل برای AMP ها فراهم شده است و برای Cache کردن صفحات AMP بروی سرور های گوگل است این سرویس از HTTP2 استفاده میکند.

اعتبار سنجی و Validate کردن AMP ها از نظر سرعت و نحوه نوشتن:

صفحه AMP خود را توسط یک وب سرور اجرا کنید (وب سرور محلی مثل Wamp یا...) سپس به انتهای url مقدار #development=1 را اضافه کنید console مرورگر Chrome را باز کنید و خطا ها را مشاهده کنید اگر خطایی موجود نباشد عبارت AMP validation successful را باید مشاهده کنید در غیر اینصورت منتظر بمانید تا عملیات به اتمام برسد.