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

طراحی AMP چیست؟

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

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

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

AMP چه مزایایی برای وبسایت شما به همراه دارد؟

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

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

افزایش سرعت لود صفحات وبسایت

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

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

بالا بردن آمار نمایش وبسایت در موبایل

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

بهبود رتبه‌ سایت در گوگل

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

امکان نمایش تبلیغات با انعطاف بیشتر

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

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

امکان پیگیری سریع و راحت کاربران سایت

پلتفورم AMP قابلیت تحلیل داده‌های مختلف از سوی کاربران را به شما ارائه خواهد کرد. این داده ها همانند نقشه راه موفقیت سایت شما را حتمی خواهد کرد. حالا منظور از این داده‌ها چیست؟

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

بخش‌های مختلف AMP و نحوه عملکرد آنها

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

AMP HTML

این بخش درواقع همان HTML استاندارد می‌باشد؛ با این تفاوت که مختص نسخه AMP است و همه ویژگی‌های آن را در یک جا جمع کرده است. بیشتر تگ‌هایی که در  AMP HTML بکار رفته است با HTML استاندارد مشابه است اما برخی از تگ‌های آن برای سازگاری بیشتر با اجزای AMP تغییر کرده‌اند. این عناصر همگام با هم در تلاش هستند تا نسخه ساده و سریع سایت را در اختیار کاربران قرار دهند.

AMP Java Script

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

Google AMP Cache

Google AMP Cache یک شبکه دلیوری بر پایه پروکسی می‌باشد که وظیفه آن توزیع اسناد معتبر AMP است.  زمانی که از این کَش در طراحی AMP استفاده شود، مدارک لازم شامل تمام فایل‌های جاوا اسکریپت و تصاویر، از منبعی بارگذاری می‌شوند که از HTTP 2.0 استفاده می‌کنند؛ این موضوع عملکرد وبسایت را بهبود می‌بخشد. جالب است بدانید که در کنار این کش، یک سیستم اعتبارسنجی هم وجود دارد که مشخص می‌کند آیا صفحه وبسایت، بدون وابسته بودن به منابع خارجی، کار می‌کند یا خیر.

نحوه فعالسازی AMP برای وردپرس

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

نصب پلاگین

ساده‌ترین راه‌ برای ساخت صفحات  AMPاین است که روی وردپرس پلاگین مدنظر را نصب کنید. توجه داشته باشید که پلاگین‌ها فقط روی wordpress.org قابل نصب و راه اندازی است؛ درواقع پلاگین ها را نمی‌توانید رویwordpress.com  نصب و راه اندازی کنید. در این مرحله اولین قدم این است که وارد صفحه وردپرس شده و گزینه Plugin  را انتخاب کنید. پس از انتخاب Plugin مدنظر وارد صفحه دیگری خواهید شد. در این صفحه گزینه دانلود را انتخاب کنید تا پلاگین نصب شود. پس از نصب پلاگین لزوماً فعال نخواهد شد؛ از این رو بایستی آن را فعاسازی کنید.

زمانی که مراحل نصب و فعالسازی پلاگین AMP را روی وردپرس به خوبی انجام دادید، می‌توانید با انتخاب گزینه Appearance  وضعیت نمایش وبسایت را در صفحه موبایل مشاهده کنید. به علاوه می‌توانید تغییراتی در ظاهر وبسایت خود ایجاد کنید؛ مثلاً تم، رنگ‌ها یا تصاویر هدر را تغییر دهید. توجه کنید که بایستی این تغییرات را ذخیره کنید. در انتها کافیست به آدرس هریک از پست‌های خود عبارت /amp/ را اضافه کنید.

تائید AMP

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

به کارگیری اکستنشن بر روی مرورگر کروم یا اپرا

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

وب اینترفیس  Web Interface

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

AMP چه معایب و محدودیت‌هایی دارد

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

اختلال در روند تحلیل و بررسی آمار سایت

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

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

محدودیت در بکارگیری کدهای HTML

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

طراحی AMP یا ریسپانسیو، کدامیک برای طراحی سایت شما انتخاب درستی است

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

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

سخن آخر

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

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