راهنمای کامل برای سرعت بخشیدن به صفحات موبایل

[sitedesign 0]

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

صفحات موبایل سریع چی هستند؟

صفحات موبایل سریع که بطور خلاصه بهشون AMP هم میگیم یکی از پروژه های گوگله که با هدف ارسال محتوا بر روی وب موبایل، اونهم با سرعتی 4 برابر سریعتر و استفاده از داده های کمتر به نسبت صفحات قدیمی راه اندازی شده. با توجه به افزایش تعداد کاربرهایی که با استفاده از گوشی های همراهشون وب گردی میکنند، نیاز به وب موبایل سریع افزایش پیدا کرده. بنابراین AMP قصد داره بعنوان استانداردی عمل کنه که مدیران سایتها رو به داشتن سایتی با صفحات سریع و سبک تشویق کنه، طوری که صفحات وب ظرف کمتر از 2 ثانیه باز بشن.
پس AMP دقیقا چیه؟ یه نسخه در حال تکمیل از وب موبایل که روی نسخه های جدید HTML اجرا میشه. این فریم-ورک منبع باز، HTML رو دوبله میکنه و عناصری که سرعت بارگذاری صفحات رو روی موبایل کند میکنند، مثل جاوااسکریپت و اسکریپت های غیرمعتبر رو حذف میکنه.
 AMP HTML روش جدیدیه که میشه باهاش کاری کرد که صفحات وب روی موبایل کاربر بلافاصله باز بشن. این پروژه برای پشتیبانی از کش هوشمند و عملکرد مدرن و قابل پیش بینی و محتوای موبایلی زیبا طراحی شده.
گوگل تأیید کرده که صفحه ای که با AMP HTML ساخته شده باشه میتونه همه جا از 15 تا 85% سریع تر از نسخه صفحات غیر AMP انجام بشه. یعنی وقتی کاربرها روشون ضربه میزنند، این صفحات سریعتر از سایر لینکها باز میشن.
AMP اول از همه، ناشران و سایتهایی رو هدف میگیره که پر از محتوای خبری، مقاله و پست وبلاگند. گوگل با این پروژه میخواد به ناشران کمک کنه تا محتوایی با سرعت نور به کاربرهای موبایل عرضه کنند.

چرا حتی با وجود داشتن سایت واکنشگرا، باز هم باید از AMP استفاده کنیم؟

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

AMP چطوری روی سرچ طبیعی و سرچ پولی اثر میذاره؟

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

AMP چطور کار میکنه؟

HTML هم شامل عناصری میشه که سریع لود میشن و هم عناصری رو در بر میگیره که کند لود میشن. AMP میخواد عناصر کند رو از بین ببره، به خصوص جاوااسکریپت. تگ های HTML خاصی هم ممنوع میشن، مثل iframe، embed، شی، به علاوه تگ های چند رسانه ای HTML5، تصاویر، فیلمها و فایلهای صوتی، همه با عناصر معمول مثل  amp-imgو amp-video.
CSS در  AMP HTML به شدت محدود شده. بین عناصر ممنوع شده میتونیم امکانات معمول CSS رو که برای انیمیشن استفاده میشدند ببینیم. در ضمن با اینکه امکان استفاده از فونتهای سفارشی وجود داره، در عین حال یه سری محدودیت هایی هم هست. 
میشه چیزهایی رو روی صفحه  AMP اعمال کرد اما باید از افزونه هایی مثل amp-youtube و amp-twitter که قبلا تأیید شده اند استفاده کنید. به علاوه نمیتونید در AMP نقشه های تعاملی یا داده های بصری بسازید. پس AMP برای سایتهایی خوبه که محتواشون به صورت مطلب نوشته شده باشه.

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

مشخصات AMP رو دنبال کنید

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

sitedesign.joomir.com/