از زمان انتشار Google Accelerated Mobile Pages - AMP در آبان 94 در حال رصد این تکنولوژی هستیم تا بدانیم AMP چیست؟ چطور کار میکنه؟ چرا به وجود آمده و چه زمانی باید از AMP استفاده کنیم؟ در این مقاله سعی میکنیم به تعدادی از سوالات شما در این زمینه پاسخ بدیم. بنابراین ما رو تا پایان این مقاله همراهی کنید.
سرعت سایت مهم است:
یکی از نکات بسیار مهم در طراحی سایت توجه به سرعت سایت است. سرعت سایت میتواند یک تجارت رو به نابودی بکشونه. طبق تحقیقی که در این زمینه صورت گرفته فقط افزایش سرعت سایت به میزان یک ثانیه میتواند conversion Rate رو به میزان 27 درصد و نرخ خروج یا bounce rate رو به میزان 56 درصد بهبود دهد. بنابراین سرعت سایت تاثیر مستقیمی بر تجربه کاربری و اهداف تجاری داره.
حالا یک نکته مهم را در نظر بگیرید. 39 درصد کاربران موبایل از مشاهده سایت ها در موبایل راضی نیستند. یعنی به طور میانگین از هر 5 نفر که با موبایل وب گردی میکنند 2 نفر از این موضوع راضی نیستند و وب گردی با موبایل را رضایت بخش نمیدانند.
و جالب است بدانید که در حال حاضر حدودا 2 میلیارد تلفن هوشمند در دنیا وجود دارد و در حال حاضر در کشورهایی مانند آمریکا تعداد مراجعه به وب سایت ها با استفاده از موبایل در حال پیشی گرفتن از کامپیوترهای رومیزی است.
و طبق یک آمار دیگر 75 درصد از کاربران موبایل معتقدند که سرعت سایت ها در موبایل پایین است و 46 درصد از کاربران موبایل دیگر به سایت های با سرعت پایین سر نمیزنند.
این آمارها بسیار قابل توجه هستند. حالا یکبار دیگه به این جمله دقت کنید که فقط افزایش حدودا یک ثانیه ای سرعت لود شدن سایت میتواند تجارت شما را نجات دهد.
پس با بررسی آمارهای بالا یک نکته بسیار واضح میشه و آن اینکه آینده دنیای وب متعلق به موبایل های هوشمند است. بنابراین باید برای رفع مشکل سرعت سایت در موبایل ها راه حلی پیدا کرد.
به دلیل اهمیت این موضوع شرکت های مختلف راهکارهای مختلفی در این زمینه ارائه دادند. فیس بوک تکنولوژی Instant Article را معرفی کرده و اپل روی Apple News کار میکند. و گوگل AMP را معرفی کرده است. AMP یک پروژه متن باز است که برای حل مشکل سرعت در موبایل به وجود آمده است.
چطور AMP از سایت های مرسوم سریع تر است؟
حالا که میدونیم AMP بر روی افزایش سرعت سایت در تلفن های همراه تمرکز کرده باید بدونیم چطور میخواهد سرعت سایت رو افزایش بده. بدین منظور AMP قوانین سفت و محکمی رو در نظر گرفته. پایه و اساس این قوانین عبارتند از:
فقط اسکریپت های نا همگام یا async:
اسکریپت های ناهمگام آنهایی هستند که با تقدم و تاخر در سایت لود میشوند. مثلا بعد از لود کامل صفحه اجرا میشوند. تمام این اسکریپت ها توسط AMP بلاک میشوند.
ساده تر اینکه به طور کلی AMP امکان استفاده از javascript ها رو به شما نمیده. فقط اسکریپت هایی میتوانند در صفحه لود شوند که توسط خود AMP با در نظر گرفتن سرعت آماده شده باشند. اسکریپت هایی مانند گوگل آنالیتیکز و فیس بوک و توئیتر و یوتیوب از این دسته هستند.
اسکریپت های خارجی هم فقط به صورت Iframe میتونن به صفحه اضافه بشن اون هم فقط یکبار. اسکریپت هایی مانند google ads از این دسته هستند.
منابع باید حتما دارای ابعاد باشند:
اجزا مانند عکس ها و iframe ها حتما باید دارای اندازه و ارتفاع باشند تا AMP بتواند سایز آنها رو قبل از دانلود بداند.
عدم اجازه به هیچ چیز در جهت رندر شدن صفحه:
این قانون خیلی ساده است. هیچ چیز نباید باعث توقف رندر شدن صفحه شود. المان های خارجی در Ifram ها قرار میگیرند و AMP بدون اهمیت به محتوای Iframe ها آنها رو در صفحه لود میکند.
CSS ها باید به صورت inline و با حجم مشخص استفاده شود:
بر خلاف سایت های مرسوم که معتقدند فایل های css باید در درون html لینک شوند در AMP شما ملزم به استفاده از inline CSS ها هستید. دلیل این موضوع نیز مانند اسکریپت هاست. در زمان لود صفحه باید همه اجزایی که برای لود صفحه لازم هستند به صورت هم زمان لود شوند. برای اطمینان از کارکرد صحیح CSS ها حجم آنها نباید بیشتر از 50 کیلوبایت باشد.
فونت ها باید به صورت کارآمد لود شوند:
وب فونت ها میتوانند خیلی بزرگ باشند و گاها تاثیر مخربی بر روی سرعت سایت دارند. در یک موقعیت عادی مرورگرها دانلود فونت ها رو تا زمان دانلود CSS و اسکریپت ها به تعویق می اندازند. و این زمان زیادی را برای دانلود فونت ها تلف میکند.
در AMP اسکریپت ها به صورت هم زمان لود میشوند و css ها نیز به صورت inline نوشته میشوند بنابراین مرورگها برای دانلود فونت ها منتظر نمیمانند.
انیمیشن ها تنها در پردازنده های گرافیکی قابل اجرا هستند:
برخی از انیمیشن ها نیاز دارند تا قالب بندی صفحه را تغییر دهند تا اینکه این فعالیت را در پردازنده گرافیکی انجام دهند. AMP انیمیشن ها رو محدود میکند به Transform و Opacity بنابراین به تغییر قالب بندی صفحه نیاز نیست و انیمیش ها در پردازنده گرافیکی اجرا میشوند در نتیجه سرعت افزایش پیدا میکند.
اولویت بندی در لود منابع صفحه:
AMP دانلود منابع صفحه را بهینه سازی میکند به طوری که اجزای مهم تر زودتر لود میشوند. تصاویر نیز فقط در صورت دانلود میشوند که کاربر آنها را مشاهده کرده باشد.
صفحات در یک لحظه لود میشوند:
منابع صفحه که توسط کاربر مورد استفاده قرار گرفته واکشی اولیه میشود که این موضوع تاثیر مهمی در سرعت دارد.به صورت ساده تر اجزایی در صفحه که قبلا توسط کاربر مشاهده شده است برای استفاده های بعدی واکشی اولیه میشود.
اجزای AMP
در AMP تعدادی تغییر بر روی HTML های استاندارد و CSS و JavaScript ها انجام شده تا سرعت را افزایش دهد:
AMP HTML: در این بخش تگ های HTML قرار دارند که به وسیله خصوصیات AMP گسترش پیدا کرده اند.
AMP JS: یک کتابخانه برای اطمینان از رندر شدن سریع تر صفحات AMP
AMP CDN: برای بارگذاری موثر صفحات AMP از طریق HTTP 2
گام های تبدیل یک صفحه HTML مرسوم به AMP:
در صورتی که تصمیم دارید از AMP استفاده کنید باید تعدادی کار را انجام دهید که در چک لیست مشخص شده است. اما به صورت خلاصه برای تبدیل یک صفحه HTML مرسوم به AMP باید قدم های زیر را بردارید
1- افزودن amp به تگ HTML
2- افزودن المان لینک استاندارد
3- تغییر انکودینگ به UTF-8
4- افزودن تگ viewport
5- افزودن اسکریپت CDN مرتبط با AMP در پایین تگ <head>
6- تغییر تمام تگ های <img> به <amp-img> و افزودن width و height به تصاویر
پیشنهاد میشود به تصاویر خصوصیت placeholder را نیز اضافه کنید به این صورت:
7- حذف تگ های <link> برای css ها و inline کردن تمام آنها با استفاده از تگ <styleamp-custom>
آناتومی صفحات AMP:
در زیر یک صفحه ساده AMP را مشاهده میکنید:
Your actual content.
همینطور که میبینید style ها صورت inline css در فایل استفاده شده و اسکریپت های غیر همگام در CDN ها قرار گرفته اند. و ما تگ viewport ولینک استاندارد canonical را داریم.
سوال و جواب های AMP:
چطور میتوانم کدهای AMP HTML را اعتبارسنجی یا Validate کنم؟
اعتبار سنجی کدها با استفاده از ابزار Google chrome Dev tools قابل انجام است. به این طریق که با اضافه کردن هشتگ #development=1 به انتهای URL این کار انجام میشود.
استفاده از صفحات AMP چه مزیتی در سئو دارند؟
همینطور که در بالا دیدیم نسخه های AMP یک نسخه مرتبط با صفحه HTML هستند. بدین صورت موتورهای جستجو هر دو صفحه را لیست نمیکنند. زمانی که کاربر با موبایل در حال جستجو است صفحات AMP برای کاربر نمایش داده میشوند. در صورتی که دوست دارید درباره ارتباط AMP و سئو بیشتر بدانید به مطلب نوشته شده توسط مجید عابد مراجعه کنید. یا به مطلب مفید و جالب AMP و تاثیر آن بر سئو در سایت ایران سئو مراجعه کنید.
چطور یک ویدئو به صفحه اضافه کنم؟
تگ <video> در HTML5 با المان amp-video جایگزین شده است. مثلا برای نمایش ویدئو های یوتیوب در صفحه شما باید افزونه youtube را اضافه کنید. و چن نمایش ویدئو به صورت یک اسکریپت غیرهمگام است شما باید این اسکریپت را در تگ <head> و با استفاده از CDN لود کنید. مانند کد زیر:
اگر شما میخواهید یک ویدئوی واکنش گرا را به سایت اضافه کنید باید نسبت طول و ارتفاع را با نرخ 16:9 به سایت اضافه کنید مانند کد زیر:
آیا کامپوننت های دیگری هم در دسترس است؟
کامپوننت های AMP به دو دسته 1- موجود در هسته و 2- افزونه های تقسیم بندی میشوند. کامپوننت های موجود در هسته با فراخوانی اولیه اسکریپت AMP به صفحه شما اضافه میشوند و افزونه ها را باید به صفحه اضافه کنید. همینطور که در بالا دیدیم یوتیوب یک افزونه بود که به صفحه اضافه شد.
لیست فعلی کامپوننت های موجود در هسته به شرح ذیل است:
- amp-ad: برای نمایش تبلیغات در صفحه
- amp-img: یک کامپوننت برای جایگزین کردن تگ <img> در HTML
- amp-pixel: برای دنبال کردن تعداد مشاهده صفحات
- amp-video: برای جایگزین کردن تک <video> در HTML
لیست فعلی افزونه ها نیز به شرح ذیل است:
- amp-anim: برای مدیریت انیمیشن های تصاویر که بیشتر با فرمت gif مورد استفاده قرار میگیرند.
- amp-audio: برای جایگزین کردن تگ <audio> در HTML
- amp-carousel: برای نمایش قطعات مشابهی از محتوا
- amp-fit-text: بزرگ و کوچک کردن فونت محتوا برای هم اندازه شدن محتوا در فضایی که موجود است.
- amp-iframe: برای نمایش Iframe ها
- amp-image-lightbox: اجازه استفاده از ابزارهایی برای نمایش عکس به صورت پاپ آپ
- amp-instagram: برای نمایش بلوک تصاویر اینستاگرام
- amp-lightbox: برای نمایش lightbox یا نمایش محتوا در حالت پاپ آپ
- amp-twitter: نمایش یک توئیت از توئیتر
- amp-youtube: نمایش ویدئوها از یوتیوب
چطور میتوانم یک تبلیغ را با استفاده از سرویس Google Adsense نمایش دهم؟
کامپوننت amp-ad برای این منظور استفاده میشود. کد زیر یک نمونه از این کار را نشان میدهد. فراموش نکنید که پارامترهای data-ad-client و data-ad-slot را با مقادیر مختص خودتان جایگزین کنید:
در حال حاضر سرویس های A9 , Adreactor, Adsense, Adtech و doubleclick با استفاده از این کامپوننت پشتیبانی میشوند.
جطور میتوانم بازدیدکنندگان سایت را با استفاده از سرویس google analytics رهگیری کنم؟
رهگیری بازدیدکنندگان با استفاده از کامپوننت amp-pixel قابل انجام است. برای استفاده از این سرویس نمونه کد زیر میتواند به شما کمک کند:
پارامترهای CID و Page title و Page url و z را با مقادیر مناسب جایگزین کنید.
بررسی سرعت در AMP:
سایت های مهمی مانند روزنامه گاردین یا buzzfeed در حال حاضر از تکنولوژی AMP استفاده میکنند. با استفاده از webpagetest صفحات این سایت ها را در هر دو حالت AMP و حالت عادی بررسی کردیم
3g
3g fast
اینترنت کابلی
بدون در نظر گرفتن نوع اینترنت
صفحات عادی دارای 34 درخواست HTTP هستند اما این تعداد در نسخه AMP به 13 عدد کاهش پیدا کرده است. نسخه AMP همیشه سریع تر شروع به رندر کردن صفحه میکند. و همیشه صفحه حدود نیم ثانیه زودتر لود شده است. و گاهی لود کامل صفحه در نسخه AMP قبل از شروع لود صفحه در نسخه عادی به پایان رسیده است. ( در حالت 3G و اینترنت کابلی )
شما هم میتوانید با استفاده از همین ابزار نسخه سایت طراحی شده خودتان را چک کنید.
برخی از سایت های معتبر که از تکنولوژی AMP استفاده میکنند:
همیشه داشتن نمونه ها میتوانند به ما کمک کنند که در استفاده از یک تکنولوژی چگونه عمل کنیم.در زیر یک لیست کوتاه از سایت های معتبری که در حال حاضر از این تکنولوژی استفاده میکنند را مشاهده میکنیم:
- روزنامه گاردین نسخه HTML / نسخه AMP
- واشینگتن پست نسخه HTML / نسخه AMP
- روزنامه El Pais نسخه HTML / نسخه AMP
- روزنامه Folha de São Paulo نسخه HTML / نسخه AMP
- روزنامه La Stampa نسخه HTML / نسخه AMP
- روزنامه New York Times نسخه HTML / نسخه AMP
- وب سایت The Atlantic نسخه HTML / نسخه AMP
آیا AMP چیزی شبیه Twitter Bootstrap است؟
شاید بعد از خواندن این مقاله فکر کرده باشید که AMP ممکن است چیزی شبیه Twitter Bootstrap باشد. این تصور خیلی اشتباه نیست با این تفاوت که در بوت استراپ همه چیز آماده شده تا شما با اضافه کردن کلاس ها صفحات خود را چیدمان کنید اما در AMP کدهای آماده ای وجود ندارد و در نهایت شما باید کدهای مرتبط با پروژه خود را بنویسید.
اما توجه داشته باشید که تمرکز AMP بر روی موبایل است و شاید طراحی یک وب سایت فقط با استفاده از AMP خیلی منطقی نباشد. در نهایت این شما هستید که تشخیص میدهید که در کدام پروژه و به چه میزان از این تکنولوژی استفاده کنید اما متاسفانه یا خوشبختانه دیر یا زود باید به سمت AMP بروید چون این تکنولوژي در رتبه بندی نتایج جستجو در گوگل از اهیمت بالایی برخوردار خواهد شد.
شاید شما قبلا از این تکنولوژی در پروژه های خود استفاده کرده باشید. وب سایت های طراحی شده و تجربیات خودتان در استفاده از AMP را با ما به اشتراک بگذارید.