گوگل به تازگی یکی از ابزار ها جدید خود، به نام AMP را در سال 2016  برای راحتی استفاده کاربران خود از صفحات وب منتشر کرده است.  از آنجا که امروزه اکثر مردم برای وب گردی از گوشی های تلفن همراه خود استفاده می کنند و این آمار روزانه روبه افزایش است. هدف  گوگل ازارائه این فناوری راهکاری سریع و بهینه برای کاربران می باشد تا به راحتی بتوانند, محتوای صفحات وب, خصوصا سایت هایی که دارای متن زیادی می باشند( مانند سایت های خبری) را به راحتی مشاهده کنند.

.

فریم ورک AMP چیست؟

AMP یا  Accelerated Mobile Page  به معنی افزایش سرعت لود شدن صفحات در موبایل می باشد. پروژه AMP یک فریم ورک جدید و متن باز است که به طور کامل از فناوری های موجود در وب ساخته شده است. این پروژه که به وسیله گوگل و توییتر انجام شده است، به برنامه نویسان کمک می کند  صفحات HTML با حجم کم ایجاد کنند. این کد ها به راحتی در صفحات موبایل لود می شوند، تا با لود سریع محتوای صفحات وب به راحتی برای کاربران قابل مشاهده باشد.

به طور ساده می توان گفت که صفحات موبایلی پرشتاب در واقع نسخه ای از صفحات وب موبایل هستند که بر روی یک نسخه ابداعی HTML اجرا می شوند که در این HTML اکثر عناصری که باعث کاهش سرعت بار گذاری صفحات وب در گوشی های تلفن همراه می شوند (مانند Java Script و …) را حذف می کند .

شرکت های مختلفی از جمله WordPress.com، Pinterest  ، APPLE، LinkedIn و دیگر شرکت هایی که در فناوری های وب فعالیت می کنند در این پروژه شرکت کرده اند تا همگام با این فناوری گوگل در جهت سهولت کاربران گام بردارند.

چرا AMP موجب افزایش سرعت لود صفحات موبایل می شود؟

همان طور که گفته شد AMP یک فریم ورک متن باز است که موجب بهینه سازی کد های HTML می شود. کد های AMP سرعت لود بسیار بالایی دارند و باعث بار گذاری سریع صفحات وب می شوند و خواندن صفحات وب را برای کاربران تسهیل می بخشند.

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

آیا استفاده از AMP در سئو تاثیر گذار است ؟

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

چگونگی نمایش AMP در نتایج جستجو

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

چگونه سایت خود را بر مبنای استاندارد های AMP استاندارد کنیم؟

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

شما با مراجعه به وب سایت رسمی AMP یا  صفحه رسمی  AMP  بر روی Github  می توانید در راستای بهینه سازی صفحات سایت خود بر مبنای این فریم ورک گام بردارید.

قوانین اجرایی AMP 

1-فقط اسکریپت های نا همگام یا ASync قابل اجرا هستند

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

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

اسکریپت های خارجی هم فقط به صورت Iframe میتوانند به صفحه اضافه بشوند آن هم فقط یکبار . اسکریپت هایی مانند Google ads از این دسته هستند.

2-  منابع باید حتما دارای ابعاد باشند

اجزا مانند عکس ها و iframe ها حتما باید دارای اندازه و ارتفاع باشند تا AMP بتواند سایز آنها را قبل از دانلود بداند .

3 – عدم اجازه به هیچ چیز در جهت رندر شدن صفحه

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

4- CSS ها باید به صورت inline و با حجم مشخص استفاده شود

بر خلاف سایت های مرسوم که معتقدند فایل های CSS باید در درون html لینک شوند در AMP شما ملزم به استفاده از inline CSS ها هستید . دلیل این موضوع نیز مانند اسکریپتهاست . در زمان لود صفحه باید همه اجزایی که برای لود صفحه لازم هستند به صورت هم زمان لود شوند . برای اطمینان از کارکرد صحیح CSS ها حجم آنها نباید بیشتر از ۵۰ کیلوبایت باشد .

5 – فونت ها باید به صورت کارآمد لود شوند

وب فونت ها میتوانند خیلی بزرگ بوده و گاها تاثیر مخربی بر روی سرعت سایت داشته باشند . در یک موقعیت عادی مرورگرها دانلود فونت ها رو تا زمان دانلود CSS و اسکریپت ها به تعویق می اندازند و این زمان زیادی را برای دانلود فونت ها تلف میکند .

در AMP اسکریپت ها به صورت هم زمان لود میشوند و CSS ها نیز به صورت inline نوشته میشوند بنابراین مرورگها برای دانلود فونت ها منتظر نمی مانند.

 6- انیمیشن ها تنها در پردازنده های گرافیکی قابل اجرا هستند

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

7– اولویت بندی در لود منابع صفحه

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

8– صفحات در یک لحظه لود میشوند

منابع صفحه که توسط کاربر مورد استفاده قرار گرفته واکشی اولیه میشود که این موضوع تاثیر مهمی در سرعت دارد.به صورت ساده تر اجزایی در صفحه که قبلا توسط کاربر مشاهده شده است برای استفاده های بعدی واکشی اولیه میشود.

در پست های بعدی نحوه  تبدیل یک صفحه HTML مرسوم به AMP را بیان خواهیم کرد.