آیا تنها ریسپانسیو بودن در طراحی یک سایت کافی می باشد؟ سوالی که این روز ها بسیار زیاد شده و خیلی از افراد فکر میکنند اگر سایت خود را ریسپانسیو کنند کافی است.
در این مقاله توضیح میدهیم که چرا داشتن یک طراحی سایت واکنشگرا برای اولین گام عالی است اما ترکیب AMP با یک طراحی PWA بهتر است.
در طی سال‌های گذشته این اولین بار است که نیاز به بهینه سازی صفحات سایت برای موبایل انقدر ضروری میباشد.
حتی در تکرار فعلی، جستجوی تلفن همراه برای تبلیغ کنندگان و مشاغل بسیار مهم است. این آمار را در نظر بگیرید:
- بیشتر جستجوهای Google در تلفن هوشمند یا رایانه لوحی انجام میشود.
- 50 درصد جستجوهای محلی برای اطلاعات تماس با مشاغل از طریق تلفن همراه انجام میشود.
- طبق گفته BrightEdge، 69 درصد از جستجوكنندگان تلفن همراه اظهار داشتند كه بیشتر از یك برند با یك سایت همراه استفاده میكنند كه نگرانی‌های آن‌ها را برطرف كرده است.
- در حال حاضر، با طراحی وب تلفن همراه، سرعت بیش از هر عامل رتبه بندی دیگر تقدم دارد. متأسفانه نیمی از وب سایت‌ها برای جستجوی موبایل به طور جدی بهینه نشده اند.
- 70 درصد صفحات وب موبایل 7 ثانیه طول میکشد تا محتوای آن‌ها کاملا بارگیری شود.
خطاهای رایج در بهینه سازی سایت برای موبایل
خطاهای رایج سایت‌ها در بهینه سازی برای تلفن همراه شامل موارد زیر است:
- پرونده‌های JavaScript و شیوه‌های آبشار (CSS) مسدود شده است.
- تغییر مسیرها انجام نشد
- رابط‌های گرافیکی ضعیف (به عنوان مثال، متن ریز یا عکس‌ها بی‌کیفیت میباشد)
- توابع جستجوی Clunky
- Obtrusive interstitials
رفع بسیاری از این موارد نیاز به سرمایه گذاری در یک سیستم مدیریت محتوای پاسخگو (CMS) و پیکربندی مناسب برای سایت تلفن همراه شما دارد. با این وجود بسیاری از سؤالات در مورد این که پیکربندی واقعاً برای وب سایت شما چه کار میکند، باقی مانده است. طراحی وب سایت واکنش گرا به عنوان پیکربندی ارجح بر صنعت حاکم شده است، اما با افزایش رقابت بیشتر وب سایت، آیا صنعت هم باید حرکت کند؟
آیا در طراحی وب سایت ریسپانسیو بودن کافی است؟
اکنون ایجاد یک وب سایت موبایل مستقل از دید کاربر نهایی خوب است، اما از دیدگاه بهینه سازی موتور جستجو (سئو) به میزان قابل توجهی حق وب سایت شما را کاهش میدهد. فراتر از این، دامنه‌های تلفن همراه میتواند یک سرمایه گذاری پرهزینه برای حفظ آن باشد.
شرکت‌های طراحی وب سایت ها در طراحی خود از ریسپانسیو (RWD) استفاده میکنند اما باید به خاطر داشته باشیم که طراحی سایت و بهینه سازی صفحات برای موبایل، سرعت را در نظر نمی گیرند و ریسپانسیو یک قابلیت طراحی برای طراحان میباشد و شما باید خود بارعایت نکات سرعت آن را هم بهینه کنید. احتمالاً CMS شما دارای افزونه طراحی ریسپانسیو است.
صفحات وب RWD از شبکه‌های سیال برای ارائه تصاویر و عناصر روی صفحه متناسب با دستگاه‌های کاربران استفاده میکند. تیم‌های فنی، مزایای خوبی را برای طراحی موبایل ارائه میدهد، از جمله:
- ریسپانسیو بودن صفحات سایت برای دستگاه‌های مختلف
- حفظ تمام مطالب در یک منبع یاب (URL) برخلاف دامنه
- مقرون به صرفه تر از ایجاد یک سایت موبایل مستقل است
- با استفاده از زبان نشانه گذاری‌هایپرتکست 5 (HTML5) به سایت‌ها میتوان آفلاین دسترسی پیدا کرد.
در حالی که RWD مزایای زیادی دارد ولی بیشتر به عنوان روشی کم هزینه برای بهینه سازی سایت ها برای دستگاه‌های جستجوی تلفن همراه ایجاد شده است. همچنین راهی برای تکمیل این کار با کمی تلاش تا حد ممکن میباشد.
مشکلات وب سایت‌های RWD یا سایت‌های ریسپانسیو
مشکلات استفاده از ریسپانسیو در سایت هنوز مشاهده میشود:
- سرعت بارگذاری کند، بالای 10 ثانیه بدون بهینه سازی مناسب در محل
- بر خلاف رابط‌های پیمایش و کلیک، طراحان هنوز هم برای لمس بهینه هستند
- تجسم داده‌ها برای صفحه‌های کوچک (به عنوان مثال، نمودارها و نمودارها) باید بهینه سازی شوند
پس چرا انجام این کار مهم است؟ در حالی که RWD یک راه حل مؤثر برای مشاغل کوچک و صرفه جویی در هزینه‌ها میباشد ولی بسیاری از مشاغل تأسیس شده در حال حاضر سوئیچ را به تنظیمات با سرعت بالاتر مانند صفحات موبایل شتاب و برنامه‌های کاربردی وب مترقی (PWA) ترچیح میدهند.
یعنی اگر سایت ریسپانسیو باشد ولی سرعت خوبی نداشته باشد، مورد پسند کاربر نمی باشد و کاربران ترجیح میدهند بتوانند در کوتاه ترین زمان به صفحات یک سایت دسترسی داشته باشند.
AMP یا Accelerated Moblie Pages چیست؟
AMP نمایانگر فشار بزرگ گوگل برای سرعت بخشیدن به اینترنت است. AMP یکی از پروژه‌های مهم تحت نظر گوگل میباشد که هدف آن افزایش سرعت ارائه محتوا به کاربر با استفاده از کد‌های ساده میباشد. AMP با آنالیز کاربر یک راهی برای ایجاد صفحات وب برای محتوای استاتیک میباشد که بسته به رفتار کاربر تغییر نمی کند و همین باعث افزایش سرعت میشود.
به عنوان یک آغازگر سریع، AMP در واقع یک چارچوب HTML است که همانند یک شبکه تحویل محتوا کار میکند و نسخه‌های از صفحات وب را برای افزایش سرعت صفحه ارائه میدهد. AMP برای ناشرانی که مطالب خبری و پست‌های وبلاگ را ارائه میدهند، ایده آل است. بسیار شبیه به قالب مقالات فوری فیس بوک است.
AMP در حال حاضر توسط موتورهای جستجوگر متعدد و حتی تبلیغات AdWords به کار گرفته شده است. با استفاده از برچسب "" Fast Fetch ، AMP همچنان سریعتر و آسانتر اجرا میشود. طبق گفته‌های گوگل، بیش از 900،000 دامنه قبلاً AMP را پذیرفته اند و این تعداد همچنان در حال رشد است.
در حقیقت، ناشران متعددی پس از استفاده از AMP، موفقیت حیرت انگیزی را گزارش داده اند:
گوگل همچنین پنهان نکرده است که سایتی‌هایی که از AMP در طراحی صفحات خود استفاده میکنند را در اولیت قرار داده است.
سرعت وب موبایل بدیهی است که تأثیر زیادی در تجربه کاربر و نرخ تبدیل شما دارد.
با استفاده از حافظه پنهان Google، صفحات وب با AMP 2 برابر سریعتر میباشند نسبت به صفحات وب سایت‌های سنتی و تاخیر کمتری هم دارند. در حال حاضر گوگل سرعت بارگذاری سریع را به عنوان تجربه کاربر، نکته ای با ارزش در نظر میگیرید.
از آنجا که AMP با استفاده از حافظه نهان Google بارگیری شده است و به عنوان نسخه متفاوتی از سند اصلی ارائه میشود، کلیک‌ها دشوار است زیرا از نظر فنی در وب سایت ناشر کلیکی رخ نمی دهند. این تأثیر معنی داری در تعامل دارد. با ارائه یک نسخه از یک صفحه وب، AMP برای ارائه پست‌های آموزنده وبلاگ بسیار عالی است، اما کلیک اولیه و تعامل بیشتر با سایت، ارتباط وجود ندارد.
این بدان معنی است که ناشران و فروشگاه‌های تجارت الکترونیک باید از لحاظ تئوریک دو نسخه مختلف از پیشنهادات خود را ارائه دهند. AMP در اصل کپی آگهی نتیجه جستجو است.
به عنوان یک یادداشت جانبی، چیز دیگری که در پذیرش AMP تأثیر میگذارد، عدم توانایی گوگل در برقراری ارتباط با مشتریان است.
-4358.jpg)
برنامه‌های وب progressive چیست؟
ممکن است شما با PWAها آشنا باشید گرچه سایت‌های بسیار کمی در واقع از این فناوری بهره میبرند. PWA وب سایت‌هایی هستند که از هر طریق مانند یک برنامه عمل میکنند اما نیازی به بارگیری ندارند. PWAها از طریق مرورگر وب قابل دسترسی هستند و از Javascript یا CSS به همراه HTML برای ایجاد سرعت بار تقریباً لحظه ای استفاده میکنند. با استفاده از شناسه‌های منابع جهانی (URI) ، PWAها هنگام نشانه گذاری یا به اشتراک گذاری توسط یک کاربر وب، قابل اتصال هستند.
مزایای استفاده از PWA
مهم ترین مزایای آن عبارتند از:
- امکان کار آفلاین
- دسترسی جهانی به همه دستگاه‌ها و مرورگرهای وب
- سرعت بار قابل مقایسه با AMP
- انتقال سریعتر بین صفحات وب و ناوبری نسبت به دامنه‌های سنتی موبایل
- رابط‌های بومی مانند برنامه ها
- غیرقابل توصیف و پیوند
- امکان ارسال اعلان‌ها از طریق notifications
در درجه اول PWAها توسط فروشگاه‌های تجارت الکترونیکی مورد استفاده قرار میگیرند تا زمان پرداخت سریعتر و تجربه کاربر نهایی را ایجاد کنند. PWAها میتوانند درگیر شدن کاربر را در سایت شما را افزایش داده و از طریق توانایی آن‌ها برای بهره گیری از منابع آفلاین و تبدیل اعلان‌ها به ارتباط مداوم با کاربران را افزایش دهند.
اما اشکالاتی در رابطه با PWA نیز وجود دارد. این یک سرمایه گذاری بسیار پر هزینه و اجرای آن بسیار دشوار است. به این معنی که برای انجام این کار احتمالاً باید یک طراح وب حرفه ای را استخدام کنید.
نگرانی بزرگتر این خواهد بود؛ چرا فقط در یک برنامه سرمایه گذاری نکنید؟ کاربران هفتگی از صدها وب سایت بازدید میکنند و برنامه‌های بی شماری را در تلفن خود ذخیره میکنند. مهم ترین و تقاضای اصلی آن‌ها سرعت بارگذاری است که AMP آن را میتواند فراهم میکند.
کدام پیکربندی سایت برای بهینه سازی صفحات موبایل بهترین است؟
با توجه به این نکته به نظرتان کدام پیکربندی موبایل برای وب سایت شما بهترین گزینه است؟
AMP برای ناشرانی که فقط به دنبال هدایت ترافیک بیشتر به وبلاگ یا انتشار مطالب خود هستند، ایده آل میباشد. بسیاری از دارندگان وب سایت برای پیاده سازی AMP تلاش کرده اند زیرا بسیاری از سیستم‌های مدیریت محتوا هنوز افزونه در دسترس ندارند. از طرف دیگر PWA در تمام مرورگرها کار میکند و پیشرفت‌های مترقی باعث شده تا از ویروس‌ها و محتوای ناخواسته ایمن شوند. از نظر سرعت، PWA و AMP هر دو تقریباً بار آنی دارند. بزرگترین تفاوت در اینجا سرعت ناوبری است که از PWA حاصل میشود، زیرا بر خلاف AMP، تمام صفحات وب در این قالب میزبانی میشوند.
از دیدگاه رتبه بندی، AMP ممکن است یک سیگنال رتبه بندی باشد (هنوز کسی نمی داند)، اما اگر PWA میزبان سرعت بارگذاری تقریباً یکسان باشد، AMP مزیت قابل توجه ای نسبت به PWA ندارد.
از دیدگاه طراحی وب، AMP کابوس است، زیرا بسیاری از عناصر گرافیکی و رابط کاربری طراحی بومی را از بین میبرد. از طرف دیگر، PWAها قادرند در یک صفحه نمایش مانند اپلیکیشن، تمام عناصر طراحی شما را ارائه دهند و این باعث میشود آن‌ها کاربرپسند تر باشند.
پس از جابجایی پروتکل انتقال hypertext (HTTPS) PWA ، AliExpress نرخ تبدیل خود را 104 درصد در کلیه مرورگرها بهبود بخشید.
سرانجام، PWAها به مرورگرهای مختلفی پاسخگو هستند و میتوانند به مجوزهای کاربر واکنش نشان دهند تا یک تجربه پرداخت ساده ایجاد کنند.
در پایان، بهترین راه حل ترکیب هر دو برای یک تجربه واقعاً سریع و همگن است. برند‌های معروف مانند واشنگتن پست قبلاً این کار را انجام داده اند. با دید بیشتر و سرعت جستجو در مقالات AMP و رابط کاربری مشابه PWA ها، ترکیب هر دو میتواند سیگنال‌های کاربر شما را به میزان قابل توجهی افزایش داده و تجربه بهتری را برای کاربران ارائه دهد.
نتیجه گیری
طراحی سایت ریسپانسیو اولین قدم برای موفقیت میباشد. برای سیستم عامل‌های تجارت الکترونیکی، ترکیب AMP با طراحی PWA بهترین پیکربندی موبایل موجود امروز را ارائه میدهد. تنها چیزی که میتوانم بگویم این است که قبل از اینکه خیلی دیر شود، وب سایت خود را برای تلفن‌های همراه بهینه کنید.