"Amp" مخفف عبارت "Accelerated Mobile Pages" است که یک فریمورک وب برای ساخت صفحات وب سریع برای دستگاه های تلفن همراه است. با استفاده از فریمورک AMP، می توان صفحات وبی با سرعت بالا و بارگذاری سریع برای کاربران تلفن همراه ارائه داد. فریمورک AMP شامل مجموعه ای از تکنولوژی های وب مانند HTML، CSS و JavaScript است که به صورت خاص برای بهبود عملکرد و سرعت صفحات وب برای دستگاه های تلفن همراه طراحی شده است. AMP توسط گوگل معرفی شده و در حال حاضر توسط بسیاری از سایت های معتبر استفاده می شود.
( AMP ( Accelerated Mobile Pages
گوگل به تازگی یکی از ابزار ها جدید خود، به نام AMP را در اوایل سال 2016 منتشر کرده است. با توجه به افزایش استفاده از تلفن همراه بسیاری از افراد برای دست یابی به اطلاعات دنیای وب از تلفن همراه خود استفاده می کنند و آمار استفاده از موبایل روند صعودی خود را می پیماید. در نتیجه سرعت لود صفحات در موبایل از اهمیت ویژه ای برخوردار است.
هدف از ارائه این ابزار بهبود عملکرد صفحات وب حاوی متن, تصویر، فیلم، انیمیشن و…. در موبایل می باشد. هدف از این فناوری گوگل ارائه راهکاری سریع و بهینه برای کاربران می باشد تا به راحتی بتوانند, محتوای صفحات وب, خصوصا سایت هایی که دارای متن زیادی می باشند( مانند سایت های خبری) را به راحتی مشاهده کنند.
فریم ورک AMP چیست؟
AMP یا Accelerated Mobile Page به معنی افزایش سرعت لود شدن صفحات در موبایل می باشد. پروژه AMP یک فریم ورک جدید و متن باز است که به طور کامل از فناوری های موجود در وب ساخته شده است. این پروژه که به وسیله گوگل و توییتر انجام شده است، به برنامه نویسان کمک می کند صفحات HTML با حجم کم ایجاد کنند. این کد ها به راحتی در صفحات موبایل لود می شوند، تا با لود سریع محتوای صفحات وب به راحتی برای کاربران قابل مشاهده باشد.
شرکت های مختلفی از جمله WordPress.com، Pinterest، APPLE، LinkedIn و دیگر شرکت هایی که در فناوری های وب فعالیت می کنند در این پروژه شرکت کرده اند تا همگام با این فناوری گوگل در جهت سهولت کاربران گام بردارند.
مطالعه بیشتر: راهنمای صفر تا صد راه اندازی فروشگاه اینترنتی و مارکت پلیس
سیستم AMP چگونه کار می کند؟
سیستم AMP از سه بخش اساسی تشکیل شده است که به عنوان یک چارچوب برای ایجاد صفحات وب در موبایل استفاده می شود:
۱-AMP HTML : یک زیر مجموعه از HTML می باشد که این زبان علامت گذاری برخی برچسب ها و مشخصات ویژه دارد و از طرفی نیز دارای محدودیت هایی نیز می باشد. اما اگر با HTML معمول آشنا باشید، مشکلی با سازگاری صفحات موجود با AMP HTML نخواهید داشت.
۲-AMP JS : از سری چارچوب های JavaScript در صفحات موبایل می باشد. در اغلب بخش ها وظیفه مدیریت و کنترل منابع و بارگذاری غیر همزمان را بر عهده دارد. این نکته شایان ذکر است که استفاده از JavaScript طرف سوم همراه با AMP مجاز نمی باشد.
۳-AMP CDN : یک شبکه تحویل داده اختیاری می باشد ، این شبکه از صفحات AMP شما استفاده کرده ، آنها را ذخیره می کند و برخی عملیات بهینه سازی خودکار بر روی آنها انجام می دهد.
چرا AMP موجب افزایش سرعت لود صفحات موبایل می شود؟
همان طور که گفته شد AMP یک فریم ورک متن باز است که موجب بهینه سازی کد های HTML می شود. کد های AMP سرعت لود بسیار بالایی دارند و باعث بار گذاری سریع صفحات وب می شوند و خواندن صفحات وب را برای کاربران تسهیل می بخشند.
شما به عنوان یک برنامه نویس فقط تگ های خاصی از HTML را می توانید استفاده کنید و مجاز به استفاده از همه تگ ها نیستید. همچنین شما فقط می توانید کد های ساده CSS و آن هایی که دارای کاربرد بسیار هستند را استفاده کنید. استفاده از کد های جاوا اسکریپ نیز در همه جا مجاز نمی باشد. در واقع AMP استایل خاصی را برای کد های شما در نظر می گیرند و کد های CSS شما را نادیده می گیرد و آن کد هایی که حجم صفحات شما را افزایش می دهد را به عنوان عامل غیر مجاز در نظر می گیرد.
مطالعه بیشتر: چگونه از اپلیکیشن های موبایل کسب درآمد کنیم؟
چگونگی نمایش AMP در نتایج جستجو
حال که با AMP آشنا شده ایم به چگونگی نمایش این صفحات در موتور های جستجو می پردازیم. در حال حاضر AMP روی تلفن همراه هدف گذاری کرده است و بنا بر دمو نشان داده شده در سایت رسمی گوگل سایت هایی که توسط فریم ورک AMP نوشته شده اند دارای لینک آبی می باشند. با انتخاب لینک به راحتی به صفحه مورد نظر می روید و جابجایی در صفحات و مطالعه محتوای صفحه به راحتی صورت می گیرد. به طور قطع گوگل در نسخه رسمی در سال 2016 طراحی مناسبی برای صفحاتی که با AMP نوشته شده اند در نظر میگیرد.
AMP در گوگل شبیه به چه چیزی می باشد؟
با توجه به اینکه سایت های خبری مانند CNN و BBC هم اکنون به این سیستم مجهز شده اند کافیست عبارت iran را بوسیله موبایل خود در گوگل جستجو کنید تا در بخش Top Stories نمونه هایی از نحوه نمایش AMP را مشاهده نمایید. در این بخش یک اسلایدر قرار داده شده که اطلاعات خود را مستقیما از صفحاتی با ساختار کدنویسی AMP دریافت میکند.
مطالعه بیشتر: راهنمای جامع نوشتن بیزینس پلن برای اپلیکیشن موبایل
چگونه سایت خود را بر مبنای استاندارد های AMP استاندارد کنیم؟
در مرحله اول شما باید صفحات AMP سایت خود را بسازید و صفحه سایت خود را بر اساس استاندارد های AMP طراحی کنید. شما به راحتی می توانید با ابزار developer tools گوگل کروم از استاندارد کدهای خود بر اساس فریم ورک AMP آگاه شوید. پلاگین های وردپرس که برای ایجاد صفحات AMP نوشته شده اند به شما کمک می کنند به راحتی صفحات داینامیکی بر مبنای استاندارد های AMP بسازید.
برای تازه کاران ، شما باید حداقل ۲ نسخه از صفحات موضوعی خود را باز نگه دارید: صفحه نسخه اصلی که کاربران عموما آن را می بینند و نسخه AMP صفحه مورد نظر.
از انجایی که AMP اجازه استفاده از المان های فرم دهی و Java Script طرف سوم را نمی دهد شما ممکن است نتوانید فرم های پیشران در صفحات و بخش پیشنهادات داشته باشید و مجبور به استفاده از المان های دیگر برای کاربری استاندارد صفحات خود هستید.
(اگرچه هنوز چارچوب های مورد استفاده برای هک کردن برای حل این مشکل موجود می باشند ، باید از Conrad O’Connell برای کمک به تائید موضوع هک تشکر کرد)
ممکن است شما برای قرار دادن محدودیت ها مجبور به بازنویسی الگوی سایت خود باشید. به عنوان مثال، تمامی CSS های درون AMP باید در یک خط بوده و کمتر از ۵۰۰ کیلوبایت باشند. به علت فشردگی بارگذاری فونت های رایج ، آنها باید با استفاده از گسترش amp-font ویژه بارگذاری شوند که باعث افزایش کنترل بر روی بارگذاری آنها می شود.
برنامه های چند رسانه ای باید به صورت ویژه ای کنترل شوند. به عنوان مثال، تصاویر باید از المان رایج amp-img که دارای عرض و ارتفاع مشخص می باشند استفاده کنند (به هنگام تبدیل یک سایت قدیمی به الگوی AMP در صورتیکه مشخصات عرض و ارتفاع مشابه موارد مورد استفاده فعلی نباشند ، این کار نیازمند صرف زمان و زحمت زیادی خواهد بود) به علاوه اگر تصاویر شما به فرمت GIF و انیمیشن درآمده اند شما باید از یک فاکتور گسترش دهنده جداگانه دیگر به نام amp-anim استفاده کنید.
مشابه با تصاویر، یک برچسب رایج برای قرار دادن و بارگذاری ویدئوها از طریق HTML5 وجود دارد که تحت عنوان amp-video شناخته می شوند. اما برای قرار دادن ویدئوهای یوتیوب که بخش اعظمی از ویدئوهای وبسایت ها را شامل می شود یک فاکتور گسترش دیگر تحت عنوان amp-youtube موجود می باشد.
همچنین پشتیبانی از مسائلی همچون نمایش اسلاید از طریق amp-carousel و جعبه های خرید تصاویر از طریق amp-image-lightbox همچون رسانه های ارتباط جمعی مانند توئیتر، اینستاگرام ، فیسبوک و پینترست و واین از طریق فاکتورهای گسترش آنها موجود می باشد.
این برچسب ها و فاکتورهای گسترش دهنده به راحتی قابل استفاده هستند و تنها نیازمند برنامه ریزی در طراحی سایت شما می باشند. به منظور کمک به شرکت Google یا سایر شرکت های پشتیبان تکنولوژی و پروژه AMP ، برای شناسایی نسخه AMP صفحه شما ، تنها نیازمند اصلاح نسخه اصلی صفحه خود خواهید بود. صفحه اصلی شما باید شامل برچسب های زیر باشد که به ویژه برچسب canonical برای صفحات AMP ضروری است:
صفحه جستجوی AMP همچنین یادآور می شود که سکوهای پشتیبانی کننده AMP نیازمند طرح و تم از Schema.org است که مشخص کننده محتویات و نوع صفحه می باشد (در حال حاضر نمونه های “مقاله”، “رسید”، “مرور” و “ویدئو” در لیست نوع صفحات ذکر شده در GitHub آورده شده اند.)
به علاوه این امر همچنین نشان می دهد که Schema.org یک پیش نیاز برای این موضوع است که محتویات صفحه شما واجد شرایط برای حضور در نسخه آزمایشی چرخه جستجوی خبر Google می باشند. بنابراین اگر به دنبال دریافت مزایای آتی Google با به کارگیری AMP هستید اطمینان حاصل کنید که طرح و تم درستی برای آن انتخاب کرده اید.
آیا AMP دارای قدرت تجزیه و تحلیل است؟
بله در حقیقت این قدرت سیستم AMP بسیار قوی و هوشمند می باشد. به منظور اجتناب از تجزیه و تحلیل چندگانه که منجر به کاهش سرعت سایت می شود از فلسفه “اندازه گیری یکباره و گزارش دهی چندباره” استفاده شده است. ۲ راه برای ایجاد امکان تجزیه و تحلیل AMP برای وبسایت شما وجود دارد:
• المان Amp-Pixel: این یک برچسب ساده برای شمارش تعداد بازدید از صفحات تحت عنوان پیکسل با استفاده از دستور GET می باشد.
تعداد زیادی متغیر برای عبور از این مسیر وجود دارد به عنوان مثال: استفاده از دستور های DOCUMENT_REFERRER و عنوان دهی آن.
• فاکتور گسترش Amp-Analytics : این راه کمی پیشرفته تر از amp-pixel می باشد. این تقریبا چیزی است که شما به عنوان کاربری تجزیه و تحلیل وبسایت خود از آن استفاده می کنید چرا که برای شما امکان ایجاد سطوح قابلیتی بیشتر برای تجزیه و تحلیل اندرکنش ها را فراهم می کند.
اگر به دنبال استفاده از تحلیلگر Google نیستید ، amp-analytics راهی است که می توانید انتخاب کنید. شما ملزم به استفاده از کتابخانه JavaScript در قسمتو سپس پیکربندی آن از طریق نشانه گذاری JSON در قسمتصفحه شما می باشد.
اما اگر مایل به استفاده از تحلیلگر Google در AMP خود هستید از بخش تحلیلگر AMP در سایت Google و صفحه منتشر کننده آن بازدید کنید که در آن مثالهای زیادی از نحوه عملکرد آنها آورده شده است.
محصول مرتبط: طراحی اپلیکیشن موبایل
ثبت نظر