آموزش amp

آموزش سرویس AMP گوگل (Accelerated Mobile Pages)

سرویس AMP گوگل یا Accelerated Moblie Pages که از فوریه 2016 جز پارامتر های سئو سایت در نتایج رتبه بندی گوگل در نظر گرفته شد. در این مقاله، ما قصد داریم تا بیان کنیم که ای ام پی (amp) چیست؟ و اثر آن برروی نتایج گوگل چگونه است و برای استفاده از این تکنولوژی باید چه کاری انجام دهیم با شرکت ساخت سایت همراه باشید.

AMP چیست؟

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

تنها در ایالات متحده روزانه 30 میلیارد نفر در آنِ واحد با تلفن خود مشورت می کند و منتظر پاسخ فوری هستند. این بدان معناست که هر روز برند شما 30 میلیارد فرصت از تلفن همراه دارد تا چیزی را به کاربران ارائه دهد که آنها می خواهند.

AMP چیست؟
AMP چیست؟

آموزش سرویس AMP (Accelerated Mobile Pages)

و همچنان هزینه تبلیغات موبایلی نسبت به مصرف رسانه تلفن همراه عقب است:

دلیلی وجود دارد که چرا کاربران به جای خرید، زمان بیشتری را صرف مرور در تلفن همراه می‌کنند – کاربران در هنگام استفاده از دستگاه‌های تلفن همراه خود بیشتر میل به لذت فوری دارند.

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

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

سه ثانیه :

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

خبر بد اینکه واقعیت دارد که طبق داده‌ها، بارگذاری بیشتر سایت‌های خرده‌ فروشی موبایل حدود 6.9 ثانیه طول می‌کشد، که این بیش از دو برابر مدت زمانی است که 40 درصد کاربران قبل از رها کردن صفحه منتظر می‌مانند، این یعنی فاجعه…

چگونه سرعت صفحه وب روی نرخ پرش تأثیر می گذارد

سرعت بارگذاری صفحات شما یا به طور کلی پارامتر “سرعت” یک فاکتور مهم هنگام اندازه گیری نرخ پرش برای صفحات وب تلفن همراه است.

قبل از اینکه بیشتر به این موضوع بپردازیم، مهم است توضیح دهیم که سرعت با دو جنبه برای نرخ پرش سایت های تلفن همراه در نظر گرفته میشود، یعنی زمان آماده شدن DOM و زمان بارگذاری تمام صفحه:

????DOM؟؟؟؟ اوه چه اسمای عجیب و غریبی ولی اصلا نگران نباشید من اینجام تا برای تو شفاف سازی کنم دوست عزیز

DOM چیست؟

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

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

زمان بارگذاری تمام صفحه: زمان بارگذاری تمام صفحه شامل زمانی است که تصاویر، فونت ها، کدهای CSS و غیره برای بارگذاری در یک صفحه وب طول می کشد. هر چخ بارگذاری تمام صفحه سریعتر باشد منجر به نرخ پرش کمتر کاربران می شود.

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

زیاد بودن زمان بارگذاری صفحه یکی از قوی‌ترین دلایل پرش کاربر از صفحه است، بدتر از آن این است که کاربران نه تنها صفحه را رها می‌کنند، بلکه تحقیقات نشان می‌دهد 79 درصد از کاربران پس از تجربه کندی در یک صفحه وب، دیگر برنمی‌گردند.

این نکات شگفت انگیز در مورد سرعت بارگذاری صفحه را در نظر بگیرید:

به طور متوسط ​​یک سایت تلفن همراه 19 ثانیه طول می کشد تا از طریق اتصال 3G بارگیری شود و 77٪ از سایت های تلفن همراه بیش از 10 ثانیه بارگذاری می شوند.
گوگل دریافت که به ازای هر ثانیه اضافی که طول می کشد تا یک صفحه وب بارگذاری شود، تبدیل ها 20 درصد کاهش می یابد. برای مقایسه، سایت هایی که در 5 ثانیه بارگذاری می شوند، 2 برابر بیشتر از سایت هایی که در 19 ثانیه بارگذاری می شوند، درآمد تبلیغات موبایلی داشتند.
بعید است 61 درصد از کاربران به سایت تلفن همراهی که در دسترسی به آن مشکل داشتند بازگردند.
این یعنی چی؟

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

AMP (Accelerated Mobile Pages) چیست؟

گوگل پروژه منبع باز Accelerated Mobile Pages را راه اندازی کرد تا اطمینان حاصل کند که صفحات وب موبایل با سرعت مطلوب کار می کنند.

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

سرویس AMP با همکاری هزاران توسعه دهنده از جمله ناشران وب سایت، شرکت های توزیع و شرکت های فناوری ساخته شده است. بیش از 1.5 میلیارد صفحه AMP تا به امروز ایجاد شده است و بیش از 100 ارائه دهنده پیشرو تجزیه و تحلیل فناوری، تبلیغات و CMS از فرمت AMP پشتیبانی می کنند.

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

  1. AMP عملکرد و تعامل صفحات را بالا میبرد: صفحات ایجاد شده در پروژه منبع باز AMP تقریباً بلافاصله بارگیری می شوند و به کاربران تجربه ای روان و جذاب تر در تلفن همراه و دسکتاپ خود می دهند.
  2. انعطاف‌پذیری و نتایج: کسب‌وکارها این فرصت را دارند که تصمیم بگیرند که چگونه محتوای خود را ارائه دهند و فروشندگان از چه فناوری استفاده کنند، در حالی که KPI را حفظ و بهبود می‌بخشند.

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

در اینجا نحوه تشخیص AMP در نتایج جستجو آمده است: اسکرین شات نشان می دهد که یک AMP در یک نتیجه جستجو چگونه به نظر می رسد

————————————————————-

دلیل بارگیری فوری صفحات AMP به این دلیل است که AMP HTML/CSS و جاوا اسکریپت را محدود می‌کند و امکان ارائه سریع‌تر صفحات وب تلفن همراه را فراهم می‌کند. برخلاف صفحات معمولی تلفن همراه، صفحات AMP به طور خودکار توسط Google AMP Cache برای بارگذاری سریعتر در جستجوی Google ذخیره می شوند.

کاربران هنگام استفاده از دستگاه‌های تلفن همراه خود انتظارات خاصی دارند، آنها خواهان تجربیات معنی‌دار، مرتبط و سریع‌تر هستند – برای اطمینان از برآورده شدن انتظارات مخاطبان هدف AMP بهترین گزینه برای شماست.

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

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

بخش 2: AMP چگونه کار می کند؟
گوگل چارچوب منبع باز Accelerated Mobile Pages (AMP) را در فوریه 2016 راه اندازی کرد. این چارچوب به این دلیل ساخته شد که نیاز به ایجاد تجربیات کاربر بهینه و کاملاً یکپارچه وجود داشت، به جای تجارب بی نظم و کندی که کاربران روزانه با آن سروکار دارند. اساس

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

از زمان راه اندازی تقریباً دو سال پیش، 25 میلیون دامنه بیش از 4 میلیارد صفحه AMP منتشر کرده اند:

اسکرین شات نشان می دهد که چند صفحه AMP از زمان راه اندازی منتشر شده است

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

AMP منجر به افزایش 10٪ در ترافیک وب سایت با افزایش 2 برابری زمان صرف شده در صفحه می شود. وب‌سایت‌های تجارت الکترونیکی که از AMP استفاده می‌کنند، 20 درصد افزایش فروش و تبدیل را در مقایسه با صفحات غیرAMP تجربه می‌کنند:

AMP به کسب‌وکارها کمک می‌کند تا نسخه‌های ساده، تمیز و مرتبط از صفحات وب خود را ایجاد کنند و تجربه وب موبایل سریع‌تری را به کاربران ارائه دهند.

Chartbeat داده های 360 وب سایت با استفاده از AMP را از ژوئن 2016 تا مه 2017 تجزیه و تحلیل کرد تا متوجه شود که ناشر معمولی که از صفحات AMP استفاده می کند، 16 درصد از کل ترافیک تلفن همراه را در محتوای AMP خود مشاهده می کند.

صفحات AMP تقریباً چهار برابر سریعتر از صفحات وب استاندارد بارگیری می شوند، به علاوه کاربران 35٪ بیشتر از صفحات وب استاندارد تلفن همراه با صفحات AMP درگیر می شوند:

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

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

AMP HTML
AMP HTML اساساً HTML است فقط با برخی محدودیت‌ها برای عملکرد قابل اعتماد. ساده ترین فایل AMP HTML به شکل زیر است:

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

می توانید انتخاب کنید که یک نسخه غیر AMP و یک نسخه AMP از صفحه خود یا فقط یک نسخه AMP داشته باشید.

AMP JavaScript (JS)
کتابخانه AMP JS رندر سریع صفحات AMP HTML را تضمین می کند. کتابخانه JS تمامی بهترین شیوه های عملکرد AMP مانند CSS درون خطی و راه اندازی فونت را اجرا می کند، این کار بارگیری منابع را مدیریت می کند و تگ های HTML سفارشی را برای اطمینان از ارائه سریع صفحه به شما می دهد.

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

حافظه پنهان AMP
Google AMP Cache برای ارائه صفحات HTML ذخیره شده AMP استفاده می شود. AMP Cache یک شبکه تحویل محتوا مبتنی بر پروکسی است که برای ارائه تمام اسناد معتبر AMP استفاده می شود. کش صفحات AMP HTML را واکشی می کند، آن ها را کش می کند و عملکرد صفحه را به طور خودکار بهبود می بخشد.

برای حفظ حداکثر کارایی، AMP Cache سند، فایل‌های JS و همه تصاویر را از همان مبدایی که از HTTP 2.0 استفاده می‌کند بارگیری می‌کند.

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

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

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

تمام جاوا اسکریپت AMP به صورت ناهمزمان اجرا می شود
جاوا اسکریپت می تواند تمام جنبه های صفحه را تغییر دهد، این قدرت را دارد که ساخت DOM را مسدود کند و رندر صفحه را به تاخیر بیندازد – هر دو عامل منجر به بارگذاری کند صفحه می شود. برای اطمینان از اینکه جاوا اسکریپت رندر صفحه را به تاخیر نمی اندازد، AMP فقط به جاوا اسکریپت ناهمزمان اجازه می دهد.

صفحات AMP شامل هیچ جاوا اسکریپت نوشته شده ای نیستند، در عوض همه ویژگی های صفحه تعاملی توسط عناصر AMP سفارشی مدیریت می شوند. این عناصر AMP سفارشی ممکن است شامل جاوا اسکریپت باشند، اما به دقت طراحی شده‌اند تا اطمینان حاصل شود که باعث کاهش عملکرد نمی‌شوند.

AMP جاوا اسکریپت شخص ثالث را در iframes انجام می دهد، اما نمی تواند رندر صفحه را مسدود کند.

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

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

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

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

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

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

CSS باید درون خطی و محدود به اندازه باشد
CSS رندر را مسدود می کند، همچنین تمام بارگذاری صفحه را مسدود می کند و تمایل به ایجاد نفخ دارد. AMP HTML فقط به سبک های درون خطی اجازه می دهد، این 1 یا اکثراً چندین درخواست HTTP را از مسیر رندر حیاتی به اکثر صفحات وب حذف می کند.

استایل شیت درون خطی باید حداکثر اندازه 75 کیلوبایت داشته باشد، اگرچه این اندازه برای صفحات بسیار پیچیده به اندازه کافی بزرگ است، اما همچنان نیاز به رعایت بهداشت CSS توسط نویسنده صفحه دارد.

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

چارچوب AMP هیچ درخواست HTTP را تا زمانی که همه فونت ها شروع به دانلود کنند، اعلام نمی کند. این تنها به این دلیل امکان پذیر است که همه جاوا اسکریپت در AMP دارای ویژگی async هستند و فقط برگه های درون خطی مجاز هستند، هیچ درخواست HTTP وجود ندارد که مرورگر را از بارگیری فونت ها مسدود کند.

محاسبات مجدد سبک به حداقل می رسد
در صفحات AMP، تمام خواندن‌های DOM قبل از همه نوشتن‌ها انجام می‌شوند، این تضمین می‌کند که فقط یک محاسبه مجدد سبک‌ها در هر فریم وجود دارد – بنابراین هیچ اثر منفی بر عملکرد رندر صفحه وجود ندارد.

اجرای فقط انیمیشن های با شتاب GPU
برای اجرای بهینه سازی های سریع باید آن ها را روی GPU اجرا کنید. GPU در لایه‌ها کار می‌کند، می‌داند چگونه برخی از کارها را روی این لایه‌ها انجام دهد – لایه‌ها می‌توانند جابجا شوند و محو شوند. با این حال، زمانی که GPU نمی تواند طرح بندی صفحه را به روز کند، این وظیفه را به مرورگر می دهد و این برای زمان بارگذاری صفحه خوب نیست.

قوانین مربوط به CSS مربوط به انیمیشن تضمین می‌کند که انیمیشن می‌تواند به GPU تسریع شود، این بدان معناست که AMP فقط امکان انیمیشن و انتقال را در تبدیل و شفافیت می‌دهد تا طرح‌بندی صفحه مورد نیاز نباشد.

بارگذاری منابع در اولویت قرار دارد
AMP تمام بارگیری منابع را کنترل می کند، بارگیری منابع را در اولویت قرار می دهد و فقط موارد مورد نیاز را بارگیری می کند و همه منابع بارگذاری شده را از قبل واکشی می کند.

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

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

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

AMP به گونه ای بهینه شده است که از پهنای باند و CPU زیادی در هنگام پیش نمایش محتوای وب استفاده نکند. هنگامی که اسناد AMP برای بارگذاری فوری از قبل رندر می شوند، منابع بالای صفحه در واقع دانلود می شوند و منابعی که ممکن است CPU زیادی مصرف کنند، مانند iframe های شخص ثالث، دانلود نمی شوند.

همچنین می‌توانید از ویدیوی زیر برای اطلاع از «۷ روشی که AMP صفحات شما را سریع می‌کند» استفاده کنید:

اکنون که می‌دانیم AMP چگونه کار می‌کند، بیایید ببینیم که AMP چگونه با مقالات فوری، طراحی وب واکنش‌گرا و برنامه‌های وب پیشرو فیس‌بوک مقایسه می‌شود.

AMP در مقابل مقالات فوری فیس بوک
فیس بوک Instant Articles را در سال 2015 راه اندازی کرد تا به ناشران کمک کند تجربه خواندن فوق العاده سریع و همه جانبه ای را برای مردم فیس بوک ارائه دهند. مقالات فوری فیس بوک عبارتند از:

10 برابر سریعتر از مقالات استاندارد وب موبایل
به طور متوسط ​​20٪ مقالات فوری بیشتر خوانده می شوند
70 درصد از خوانندگان احتمال کمتری دارند که یک مقاله فوری را رها کنند
Instant Articles به ناشران کمک می کند مقالات سریع و تعاملی را در فیس بوک ایجاد کنند. آنها مزایای زیر را در اختیار شما قرار می دهند:

سریع و پاسخگو: مقالات فوری بدون توجه به اتصال یا دستگاهی که کاربر روی آن باشد، فورا بارگذاری می شوند. استفاده از مقالات آسان است زیرا آنها را برای تجربه داستان سرایی تلفن همراه تغییر می دهند.
تعاملی و جذاب: تجربه همه جانبه مقالات آنها را تعاملی تر می کند، به همین دلیل است که مقالات فوری 30٪ بیشتر از مقالات وب تلفن همراه به اشتراک گذاشته می شوند. کمک به افزایش دسترسی داستان‌های شما در News Feed.
کسب درآمد آسان و انعطاف پذیر: کسب درآمد بخشی جدایی ناپذیر از مقالات فوری است. برای رشد کسب‌وکارتان با مقالات، می‌توانید آگهی‌های فروش مستقیم را گسترش دهید، و موجودی آگهی‌های موجود را با شبکه مخاطبان فیس‌بوک پر کنید، و حتی محتوای مارک بومی ایجاد کنید.
صفحات AMP و مقالات فوری هر دو زمان بارگذاری سریعی را در اختیار کاربران قرار می دهند که به کاهش نرخ پرش صفحه و افزایش تعامل کمک می کند. در واقع، مقالات فوری فیس بوک حتی سریعتر از صفحات AMP بارگیری می شوند:

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

به گفته Parsley ، گوگل از فیس بوک به عنوان منبع اصلی ترافیک خارجی برای ناشران پیشی گرفته است. گوگل اکنون 42 درصد از ترافیک خارجی ناشران را به خود اختصاص داده است:

هنگامی که فیس بوک Instant Articles را راه اندازی کرد، از گوگل به عنوان منبع اصلی ترافیک به وب سایت های رسانه و محتوا پیشی گرفت، اما با راه اندازی و موفقیت AMP ، گوگل دوباره پیشتاز شد.

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

AMP در مقابل طراحی وب پاسخگو (RWD)
از زمانی که Google Mobilegeddon را در اوایل سال 2015 راه اندازی کرد، ایجاد وب سایت های سازگار با موبایل یک اولویت برای بازاریابان بوده است. طراحی وب پاسخگو با هدف کمک به ایجاد صفحات وب با تمرکز بر انعطاف پذیری. یک صفحه وب پاسخگو روی هر دستگاه یا صفحه‌ای کار می‌کند که تجربه وب تلفن همراه بهتر و جذاب‌تری را ارائه می‌دهد.

در هسته خود، AMP و طراحی وب پاسخگو هر دو تقریباً از بلوک های ساختمانی اصلی برای ایجاد یک صفحه تلفن همراه مانند HTML و جاوا اسکریپت استفاده می کنند. با این حال، آنها مجموعه ای از تفاوت های خود را دارند که آنها را متمایز می کند، مانند:

  1. RWD بر انعطاف‌پذیری متمرکز است: طراحی وب واکنش‌گرا انعطاف‌پذیری را به وب‌سایت شما می‌افزاید. شما می توانید صفحه ای ایجاد کنید که به طور خودکار به اندازه صفحه نمایش بازدیدکنندگان پاسخ دهد، این به صفحه شما امکان دسترسی و توانایی ارائه تجربه تلفن همراه خوب را در طیف وسیعی از اندازه های صفحه نمایش به کاربران می دهد. طراحی وب ریسپانسیو صرفاً بر روی موبایل متمرکز نیست، بلکه برای همه دستگاه ها و همه تجربیات کاربر کار می کند.
  2. AMP روی سرعت متمرکز است: چارچوب منبع باز AMP روی سرعت به ویژه سرعت صفحه موبایل متمرکز است. AMP رندر فوری را برای محتوای وب موبایل معرفی کرده است. با استفاده از شیوه نامه های درون خطی، بارگذاری تنبل، منابع اولیه و سایر تکنیک های بهینه سازی، این فریم ورک قادر است صفحات موبایل را فورا بارگیری کند.
  3. AMP با یک صفحه وب کار می کند، RWD جایگزین یک صفحه وب می شود: اگرچه می توان از AMP به طور انحصاری در صفحات خود استفاده کرد، AMP را می توان بدون طراحی مجدد وب سایت به یک وب سایت غیر پاسخگو یا واکنش گرا نیز اضافه کرد. با این حال، برای ریسپانسیو کردن یک صفحه وب، باید صفحه را دوباره طراحی کنید.
  4. AMP تجربه کاربری بهتری را ارائه می‌کند: دو عامل اصلی وجود دارد که تجربه کاربر تلفن همراه را تعیین می‌کند، یعنی عناصر صفحه سازگاری با موبایل و سرعت. اگرچه طراحی وب ریسپانسیو با مقیاس بندی عناصر صفحه برای مطابقت با صفحه کاربر به خوبی عمل می کند، اما در مقایسه با صفحات AMP با سرعت وحشتناکی شکست می خورد.
  5. AMP دارای محدودیت های جاوا اسکریپت است: طراحی وب پاسخگو از همه اسکریپت های شخص ثالث و کتابخانه های رسانه ای حمایت می کند، این را نمی توان در مورد صفحات AMP گفت. برای بارگذاری سریع صفحات، چارچوب AMP دارای عملکردهای جاوا اسکریپت و CSS بسیار محدودی است.

AMP برای صفحات استاتیک به خوبی کار می کند – صفحاتی که محتوای پویا زیادی ندارند، در حالی که RWD را می توان برای هر نوع صفحه ای استفاده کرد. با این حال، بارگذاری صفحات وب واکنش‌گرا کمی بیش از حد طول می‌کشد که باعث می‌شود بازدیدکنندگان پرش کنند و احتمالاً دیگر هرگز بازنگردند. اگر به دنبال ارائه یک تجربه سریع و پاسخگوی تلفن همراه به کاربران هستید، باید از صفحات AMP استفاده کنید.

AMP در مقابل برنامه‌های وب پیشرفته (PWA)
Progressive Web Apps یک برنامه وب تلفن همراه است که از طریق وب ارائه می شود، مانند یک برنامه بومی عمل می کند، تفاوت اصلی بین PWA و برنامه های بومی این است که PWA نیازی به دانلود از Google یا App Store ندارد.

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

نیاز به برنامه‌های وب پیشرفته از این واقعیت ناشی می‌شود که 1000 وب‌سایت برتر تلفن همراه ، 4 برابر بیشتر از 1000 برنامه بومی برتر، به افراد دسترسی دارند. با این حال، این وب سایت ها به طور متوسط ​​20 برابر کمتر از برنامه های تلفن همراه کاربران را درگیر می کنند.

که اساساً به این معنی است که در حالی که وب سایت های تلفن همراه در جذب بازدیدکنندگان مستعد هستند اما آنها را جذب نمی کنند.

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

PWA عبارتند از:

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

اینها تفاوت های اصلی بین AMP و PWA هستند :

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

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

  1. AMP به عنوان یک برنامه وب مترقی
    اگر محتوای شما در درجه اول ثابت است و می توانید به عملکرد محدود AMP بسنده کنید، این گزینه به شما امکان می دهد تا به عنوان یک برنامه وب پیشرو تجارب سریع برق آسا ایجاد کنید. AMP به عنوان مثال ، به این صورت ساخته شده است – برنامه وب پیشرفته کاملاً با شارژ AMP. دارای یک سرویس دهنده است که دسترسی آفلاین را امکان پذیر می کند، و همچنین یک مانیفست که بنر «افزودن به صفحه اصلی» را نشان می دهد.
  2. AMP به یک برنامه وب مترقی
    راه دیگر برای استفاده از AMP و یک برنامه وب پیشرفته این است که صفحه AMP خود را به عنوان قلاب وب سایت خود در نظر بگیرید. کاربر را با یک بار آنی جذب می کند، سپس آنها را به برنامه وب مترقی شما می برد. این به شما امکان می دهد صفحات AMP با بارگذاری سریع را با یک PWA پویاتر از گزینه اول ترکیب کنید.
  3. AMP در یک برنامه وب مترقی
    همانطور که در مورد AMP در مقابل PWA بود، لازم نیست همه یا هیچ باشد. شما نیازی به ساخت تمام صفحات خود با AMP ندارید. شما همچنین نیازی به جدا کردن AMP و PWA به عنوان قلاب و میله ندارید. اکنون، در واقع می‌توانید تنها بخش کوچکی از یک صفحه را AMP کنید، در نتیجه اندازه آن را کاهش دهید و زمان بارگذاری آن را بدون معاوضه کامل با عملکرد پویا کاهش دهید.

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

واشنگتن پست یک نمونه ایده آل از PWA و AMP را به نمایش می گذارد که با هم کار می کنند تا تعامل بهتر و زمان بارگذاری سریع تر را به ارمغان بیاورند. هنگامی که واشنگتن پست در ابتدا وب سایت خود را پاسخگو کرد، سرعت آنها 3500 میلی ثانیه بود. زمانی که آنها AMP را پذیرفتند، زمان بارگذاری صفحه به 1200 میلی ثانیه کاهش یافت، سپس با کمک فناوری AMP CDN به 400 میلی ثانیه کاهش یافت.

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

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

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

بخش 3: مزایا و محدودیت های AMP
AMP تضمین می کند که صفحات وب سریعتر بارگیری می شوند که به تجربه کاربر کمک می کند و بازدیدکنندگان را برای مدت طولانی تری در صفحه نگه می دارد. AMP از AMP HTML استفاده می‌کند که به بارگذاری سریع‌تر صفحات موبایل کمک می‌کند، در واقع طبق گفته‌های Gary Illayes گوگل، میانگین زمان بارگذاری صفحات AMP 1 ثانیه است که 4 برابر سریع‌تر از متوسط ​​صفحه HTML استاندارد است.

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

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

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

AMP مزایای زیر را برای صفحات تلفن همراه شما ارائه می دهد .

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

درآمد را به حداکثر می رساند
هر ثانیه اضافی که صفحه شما برای بارگذاری طول می کشد، 12% کاهش می یابد. این بدان معناست که اگر می‌خواهید مخاطبان را جذب کنید و بازگشت سرمایه خود را افزایش دهید، باید مطمئن شوید صفحه موبایل شما انتظارات سرعت بازدیدکنندگان را برآورده می‌کند.

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

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

همچنین می توانید از تست A/B برای آزمایش و ایجاد بهترین تجربه کاربری موبایل برای مشتریان خود استفاده کنید.

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

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

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

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

تجربه کاربری بهتری را ارائه دهید
البته، بارزترین مزیت استفاده از صفحات فرود پس از کلیک سریع موبایل این است که رضایت بسیار بیشتری را برای کاربر فراهم می‌کنند. وقتی از هر دو نفر یک نفر نمی تواند فقط 10 ثانیه صبر کند تا یک وب سایت بارگذاری شود، سرعت بخشیدن به فرآیند بین 15 تا 85 درصد می تواند تأثیر زیادی بر شادی بازدیدکنندگان داشته باشد.

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

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

اگرچه استفاده از صفحات AMP مزایای زیادی را برای شما به ارمغان می آورد، اما معایبی نیز برای AMP وجود دارد.

جاوا اسکریپت شخص ثالث وجود ندارد
از آنجایی که شما توانایی استفاده از جاوا اسکریپت شخص ثالث را ندارید، باید با قابلیت های تجزیه و تحلیل و ردیابی خداحافظی کنید که به شما امکان می دهد تجارب تبلیغاتی بسیار هدفمند را ارائه دهید.

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

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

در اینجا نحوه ردیابی صفحات AMP در Google Analytics با Google Tag Manager آورده شده است.

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

بخش بعدی، مطالعات موردی کسب‌وکارهایی را که از AMP برای تکمیل KPI و افزایش ROI استفاده کرده‌اند، برجسته می‌کند.

بخش 4: داستان های موفقیت آمیز AMP
وقتی در مورد صفحات وب موبایل صحبت می کنیم، سرعت برابر است با درآمد. تحقیقات SOASTA نشان می دهد که حتی 100 میلی ثانیه تاخیر در زمان بارگذاری صفحه می تواند منجر به تبدیل کمتر شود:

برای برجسته کردن تأثیری که AMP می‌تواند بر صفحات وب تلفن همراه داشته باشد، Google Forrester Consulting را مأمور کرد تا یک مطالعه کلی Economic Impact™ بین ناشران و وب‌سایت‌های تجارت الکترونیک با استفاده از AMP انجام دهد.

این تحقیق 4 شرکت وب را که از فرمت AMP استفاده کرده اند، برجسته می کند. با نگاهی به نتایج 4 شرکت، Forrester مدلی را برای پیش بینی بازده مورد انتظار از اجرای AMP در یک دوره سه ساله ایجاد کرد.

با استفاده از این مدل، یک وب سایت با تعداد بازدید ماهانه سایت 4 میلیون و حاشیه سود 10 درصد می تواند انتظار داشته باشد که هزینه های کاشت صفحات AMP را پس بگیرد و در یک دوره زمانی کمتر از 6 ماه شاهد سود مثبت باشد:

اینها نتایج اولیه به دست آمده از این مطالعه هستند:

افزایش 20 درصدی نرخ تبدیل فروش. آزمایش A/B انجام شده توسط دو وب‌سایت تجارت الکترونیکی که برای این مطالعه مصاحبه شده‌اند، افزایش 20 درصدی نرخ تبدیل را در صفحات AMP آنها نشان می‌دهد که بر اساس مدل Forrester، سود سالانه بیش از 200 هزار دلار را به همراه خواهد داشت.
10٪ افزایش سالانه در ترافیک سایت AMP. افزایش ترافیک سایت منجر به فروش بیشتر و بازدیدهای تبلیغاتی می شود که بر اساس مدل، بیش از 75 هزار دلار سود سالانه برای یک سایت در سال اول ایجاد می کند.
افزایش 60 درصدی صفحات در هر بازدید. صفحات AMP برای تجارت الکترونیک و ناشران اخبار عملکرد مثبتی داشتند که هر دو گفتند 60٪ افزایش در بازدیدکنندگان به سایت وجود دارد و این افراد دو برابر بیشتر در سایت با افزایش کمی در بازدیدکنندگان بازگشتی 0.3٪ افزایش یافته است.
AMP فرمت نسبتا جدیدی است و بدیهی است که با پذیرش آن باید هزینه هایی را متحمل شوید. با این حال، بازده اجرای قالب AMP بیشتر از هزینه اولیه است.

Gizmodo از صفحات AMP برای سریعتر شدن 3 برابر در تلفن همراه استفاده می کند
Gizmodo بر تجربه کاربر تمرکز دارد و نیمی از ترافیک آنها از وب سایت تلفن همراه آنها می آید، و اطمینان از اینکه وب سایت سریع و واضح است اگر می خواهند خوانندگان با محتوای آنها در تلفن همراه تعامل داشته باشند ضروری است.

این وبلاگ تعدادی از تکنیک‌های بهینه‌سازی را به منظور افزایش تعامل تلفن همراه خود پیاده‌سازی کرد، مانند بهبود زمان بارگذاری صفحه، حذف اسکریپت‌های غیر ضروری صفحه، بارگذاری تنبل برای عناصر صفحه زیر تاشو، و تنظیم فونت بازگشتی برای فونت‌های وب. هنوز هم تیم Gizmodo فکر می‌کرد که می‌توان کارهای بیشتری برای بهبود تجربه کاربری برای کاربران تلفن همراه انجام داد.

رئیس بخش تجزیه و تحلیل داده های Gizmodo، جاش لوریتو احساس کرد که این چالش اصلی آنهاست:

ما همان بارهای جاوا اسکریپت و CSS (بزرگ) را در تلفن همراه و دسکتاپ به کاربران تحویل دادیم، که بهبود یک تجربه را بدون تحقیر تجربه دیگر دشوار می کند.

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

Gizmodo اکنون بیش از 24000 صفحه AMP منتشر کرده است و روزانه 100 هزار بازدید از این صفحات دریافت می کند:

AMP کمک کرده است تا صفحات موبایل Gizmodo 3 برابر سریعتر از وب سایت معمولی تلفن همراه باشد و بیش از 80٪ از ترافیک Gizmodo از صفحات AMP در مقایسه با کمتر از 50٪ از کل جلسات تلفن همراه، ترافیک جدید است. بعلاوه، این وبلاگ 50 درصد افزایش نمایش در هر نمایش صفحه در AMP دارد.

TransUnion تبدیل ها را با AMP افزایش می دهد
TransUnion در بارگذاری کند صفحات موبایلی که باعث نرخ پرش بالاتر و نرخ تبدیل موبایل کمتری در مقایسه با نرخ تبدیل دسکتاپ می‌شد، مشکل داشت. آژانس گزارش‌دهی اعتباری می‌خواست بهترین وب‌سایت موبایلی در کلاس خود را در CMS خود، HP TeamSite ایجاد کند تا تجربه کاربر را بهبود بخشد و بازده سرمایه‌گذاری بالایی را دریافت کند.

TransUnion شروع به استفاده از AMP با امید به افزایش تبدیل تلفن همراه با هزینه کارآمد برای هر سفارش کرد. از آنجایی که وب‌سایت آن‌ها قبلاً سازگار با موبایل بود، TransUnion نیازی به طراحی مجدد محتوا نداشت – آنها در عرض یک هفته با صفحات AMP آنلاین شدند.

صفحات AMP که در 1.6 ثانیه در اتصال 3G بارگیری می شوند، صفحات غیرAMP را که در 7.1 ثانیه بارگیری می شوند، مقایسه کردند. صفحات AMP TransUnion به سرعت شروع به 3٪ تبدیل بیشتر کردند، نرخ پرش تا 26٪ کاهش یافت و کاربران 2.5 برابر زمان بیشتری را در وب سایت صرف کردند:

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

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

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

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

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

برای اطمینان از اینکه تجربه کاربران تلفن همراه محدود به وب‌سایت‌ها نمی‌ماند، چارچوب AMP صفحات فرود پس از کلیک AMP Ad را معرفی کرده است – صفحاتی که در AMP HTML ایجاد شده‌اند و در کمتر از یک ثانیه بسیار سریع بارگیری می‌شوند.

صفحه فرود پس از کلیک تسریع شده یا (ALP) به دلیل تکنیک های بهینه سازی زیر به سرعت بارگیری می شود:

پیش اتصال به صفحه فرود پس از کلیک: تبلیغات معمولی URL صفحه فرود پس از کلیک واقعی را نمی دانند. با این حال، تبلیغات مرتبط با ALP همیشه URL را می شناسند، این یک درخواست پیش از اتصال به صفحه فرود پس از کلیک مربوطه را آغاز می کند و صفحه بلافاصله بارگیری می شود.
پیش واکشی صفحات فرود پس از کلیک: منابع غیر فشرده CPU که در اولین نمای صفحه فرود پس از کلیک قابل مشاهده هستند، قبل از کلیک کاربر روی تبلیغ دانلود می شوند، بنابراین صفحه فورا بارگیری می شود.
استفاده از نشانی اینترنتی حافظه پنهان Google: وقتی یک URL مقصد متعارف را برای یک خلاقیت وارد می‌کنید، سرور آگهی می‌تواند با استفاده از AMP URL API آن را به نسخه AMP نشانی اینترنتی (با رضایت قاچاقچی) تغییر دهد . سرور تبلیغات همچنین می‌تواند کد مورد نیاز خلاق را برای واکشی و از قبل اتصال به صفحه فرود پس از کلیک، جاسازی کند. سرورهای تبلیغاتی مانند DoubleClick for Publishers (DFP) در چند سه ماهه آینده چنین ویژگی هایی را ادغام می کنند تا تجارت صفحات فرود پس از کلیک AMP را آسان کنند.
بدون تغییر مسیر: AMP تغییر مسیرها را به سرور تبلیغات حذف می کند، AMP تنها زمانی درخواست تغییر مسیر را آغاز می کند که کاربر در صفحه فرود پس از کلیک فرود آید. این فرمت از مؤلفه amp-pixel برای تغییر مسیرهای ردیابی شخص ثالث پشتیبانی می کند که می تواند در صفحه فرود پس از کلیک انجام شود.
صفحات فرود پس از کلیک ساخته شده توسط AMP با چارچوبی طراحی شده اند تا تجربه کارآمدی از تلفن همراه را که کاربران هنگام کلیک کردن بر روی تبلیغ AMP تلفن همراه شروع می کنند، ادامه دهند.

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

به این صورت است که یک ALP پس از کلیک بر روی تبلیغ با چه سرعتی بارگیری می شود، نه تنها این، بلکه کاربر می تواند به راحتی به محتوایی که قبل از کلیک روی تبلیغ خوانده بود بازگردد:

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

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

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

کسب‌وکارهایی که از صفحات AMP استفاده می‌کنند در حال حاضر بازدهی عظیمی را مشاهده کرده‌اند، بنابراین چه چیزی شما را از ایجاد صفحات فرود پس از کلیک شتاب‌دهی بازمی‌دارد؟

نحوه ایجاد صفحات AMP با Instapage
در فوریه 2018 ، همکاری خود را با Google برای توسعه عملکرد صفحات موبایل شتاب (AMP) در پلتفرم Instapage اعلام کردیم. آنها از ما دعوت کردند تا در کنفرانس جهانی AMP خود صحبت کنیم، جایی که در مورد چگونگی متعادل کردن محدودیت های AMP با ویژگی های بهینه سازی بحث کردیم .

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

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

مرحله 1: یک صفحه جدید ایجاد کنید
صفحه AMP را از حالت Modal انتخاب کنید:

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

مرحله 2: عناصر را به صفحه اضافه کنید
دومین تفاوتی که مشاهده خواهید کرد این است که ویجت های Timer و HTML در نوار ابزار وجود ندارند، اما شما همچنان ابزارک های باقی مانده را دارید:

AMP از HTML/CSS یا جاوا اسکریپت پشتیبانی نمی کند، بنابراین نمی توانید آن تنظیمات را در سازنده Instapage AMP پیدا کنید. با این حال، همچنان این گزینه ها را خواهید دید:

توجه: همکاری (“Comment”) و Instablocks™ هر دو در سازنده AMP کاربردی هستند. متأسفانه، نقشه های حرارتی و بلوک های جهانی قابل اجرا نیستند.

صفحات فرود پس از کلیک AMP دارای محدودیت 75 کیلوبایتی هستند و هر ویجت در سازنده AMP Instapage وزن دارد. همانطور که یک صفحه را می سازید، یک اعتبارسنجی در پس زمینه کار می کند تا صفحه شما از محدودیت 75 کیلوبایت تجاوز نکند. اگر به 80 درصد از حد مجاز برسید، این نشانگر هشدار در پایین صفحه ظاهر می شود:

مرحله 3: یک تغییر در آزمون A/B ایجاد کنید
روی «ایجاد آزمون A/B» کلیک کنید و یک نسخه جدید اضافه کنید یا یکی از خود را وارد کنید:

با تغییر جدید، می‌توانید هر زمان که بخواهید آن را کپی، مکث، تغییر نام، انتقال یا حذف کنید:

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

در صورتی که صفحه تأیید اعتبار کند، این پیام را روی صفحه خواهید دید:

پس از اتمام کار و کلیک بر روی انتشار، در صورت تجاوز از حد مجاز 75 کیلوبایت به شما اطلاع داده می شود:

پس از تأیید اعتبار، صفحه شما آماده انتشار است.

مرحله 5: انتشار
وردپرس و دامنه های سفارشی می توانند صفحات فرود پس از کلیک AMP را در Instapage منتشر کنند. پس از کلیک بر روی دکمه آبی انتشار، می توانید یکی از روش ها را انتخاب کنید:

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

در غیر این صورت دامنه و ساب دامنه خود را وارد کنید:

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

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

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

Instapage در حال حاضر تنها پلتفرم صفحه فرود پس از کلیک است که به شما امکان می دهد صفحات فرود پس از کلیک را با استفاده از چارچوب AMP گوگل ایجاد کنید. صفحات فرود پس از کلیک ایجاد شده با AMP تقریباً بارگذاری آنی و پیمایش روان دارند.

ایجاد صفحات AMP را با Instapage از امروز شروع کنید تا تجربه بهتری از مرور تلفن همراه ایجاد کنید، امتیازات کیفی خود را بهبود بخشید و تبدیل‌های بیشتری ایجاد کنید.

4.7/5 - (3 امتیاز)

1 دیدگاه دربارهٔ «آموزش سرویس AMP گوگل (Accelerated Mobile Pages)»

دیدگاه‌ خود را بنویسید

نشانی ایمیل شما منتشر نخواهد شد.