بهینه سازی سایت برای موبایل با چند ترفند

یاد دوره کافی نت ها و لود شدن سایت ها فقط در نسخه دسکتاپ به خیر! اما با احترام به این نوستالژی دیجیتال باید بگویم که تعداد کاربران موبایلی سایت ها با سرعت چشمگیری در حال پیشی گرفتن از کاربران دسکتاپ است. این مساله آن قدر جدی است که تمام به روزرسانی های ۲۰۲۱ گوگل به نوعی کاربران موبایل را در خود جای داده اند. بنابراین هر طراح و هر بازاریاب باهوشی می داند که باید روی بهینه سازی سایت برای موبایل تمرکز کند. تا انتهای مطلب همراه آژانس دیجیتال مارکتینگ تاس باشید و ۵ ترفند ساده بهینه سازی برای موبایل را بخوانید. 

 

پیشنهاد می کنیم مطالعه کنید: ساب دامین چیست و چطور کار می کند؟

ترفندهای بهینه سازی سایت برای موبایل

۱.طراحی ریسپانسیو را رعایت کنید

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

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

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

۲. منابع، آيکون ها و تمام عناصر را بهینه کنید

اندازه تصاویر خود را تغییر دهید. ساده به نظر می رسد ، درست است؟ خوب ، نمی توانم حساب کنم که چند بار در یک سایت موبایل مرور کرده ام فقط برای اینکه تصاویر 1980 1200 1200 در پس زمینه بارگیری شود. در عوض ، در صورت لزوم ، عکسهای با اندازه کامل باید به عنوان پیوند جایگزین ارائه شوند. تغییر اندازه ، بسته به ابعاد مورد نیاز شما ، می تواند تا 80٪ از کل تصویر را اصلاح کند. برای دستگاه های تلفن همراه ، هرگز دلیلی وجود ندارد که حداکثر از محدوده 600-700px بالاتر بروید.

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

قالب های جایگزین فایل را کاوش کنید. همه در مورد قالب های فایل PNG و JPEG شنیده اند. به هر حال ، آنها استانداردترین تصاویر تصویری در وب هستند. اما ، نه برای مدت طولانی. آخرین و بهترین فناوری در تحویل تصویر دیجیتال حول قالب های فایل WebP و SVG است. به عنوان مثال SVG ، می تواند به طور خودکار به اندازه صفحه نمایش مقیاس بندی کند ، و تعداد منابع مورد نیاز برای بارگیری اجزای بصری خاص را کاهش می دهد.

۳. از ویژگی  Lazy Load استفاده کنید

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

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

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

چطور این کار را انجام بدهیم؟

به چند روش می توانید بارگذاری با تاخیر را انجام بدهید:

Prefetch

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

Prerender

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

DNS-Prefetch

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

Preconnect

این مورد هم همانطور که در بالا گفته شد کار می کند، اما همچنین اتصالات و دست دادن را با اتصالات TCP و TLS برقرار می کند.

شماره 4: بهینه سازی سایت برای موبایل با کش وب

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

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

برخی از مشهورترین ابزارهای کش وب ، Varnish ، Squid و Memcached هستند. اما مطمئن باشید که بسیاری از راه حل های دیگر در بازار وجود دارد ، به خصوص اگر کاربر وردپرس باشید.

همچنین می توانید برای CDN ثبت نام کنید.

CDN (شبکه تحویل محتوا) چیست؟

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

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

شماره 5:بهینه سازی سایت برای موبایل با AMP (صفحات شتاب دهنده موبایل)

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

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

چطور AMP را برای سایت وردپرسی فعال کنیم؟

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

قرار نیست کار دشواری انجام بدهید. تنها کافی است یک افزونه در وردپرس نصب کنید. افزونه‌ی AMP در تمامی مارکت‌های ایرانی و غیر ایرانی موجود است و تصب آن بسیار ساده است. چرا که تنظیمات خاص و پیچیده‌ای نداشته و روی تمام ورژن‌های وردپرس درست کار می‌کند.

1. افزونه‌ی AMP for WP را از مارکت دلخواه خود دانلود و فعال کنید.
2. وارد پنل مدیریتی وردپرس شوید.
3. اگر از نسخه اتومات افزونه استفاده نمی کنید تیک Static را فعال کنید.
4. از بخش تنظیمات عمومی افزونه را به آنالیتیکس اضافه کنید.
5. از یخش سئو، تنظیمات نمایش داده را روی «پرسرعت» تنظیم کنید.
6. از بخش Advertisement می‌توانید تنظیمات مربوط به تبلیغات را نیز انجام دهید.

جمع بندی

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