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

تقریبا مهر 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 برای سایتهایی خوبه که محتواشون به صورت مطلب نوشته شده باشه.
برای اطلاعات بیشتر به مقاله، بهبود سئو با AMP مراجعه کنید.

چطور روی وب سایتتون AMP رو اجرا کنید؟

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

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

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

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

<link rel="canonical" href="https://www.example.com/url/to/regular-html-version.html" />

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

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

صفحات AMP رو تأیید کنید

تو کتابخونه JS یه تأییدیه AMP هست. برای اطلاعات بیشتر، راهنمای AMP رو بخونید.

داده های ساختاریافته رو درست اجرا کنید تا صفحات AMP بتونن در carousel نمایش داده بشن

باید مقاله هاتونو بعنوان صفحات AMP نشونه گذاری (مارک-آپ) کنید. برای فیلتر کردن مقاله های AMP هم میتونید از ابزار تست داده های ساختاریافته گوگل استفاده کنید که مارک-آپ های کامل نشده رو پیدا میکنه.
در زیر، یک مثال از مارک-آپ رو میبینید که روی وب سایت رسمی AMP ارائه شده بود و میتونید برای شروع از همین استفاده کنید:

<!doctype html>

<html amp lang="en">

<head>

<meta charset="utf-8">

<title>Hello, AMPs</title>

<link rel="canonical" href="https://example.ampproject.org/article-metadata.html" />

<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

<script type="application/ld+json">

{

"@context": "https://schema.org",

"@type": "NewsArticle",

"headline": "Open-source framework for publishing content",

"datePublished": "2015-10-07T12:02:41Z",

"image": [

"logo.jpg"

]

}

</script>

<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>

<h1>Welcome to the mobile web</h1>

</body>

</html>

چطور درستی اجرای AMP رو بررسی کنیم؟

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

نتیجه

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