بهینه سازی وب سایت برای گوشی موبایل با جدیدترین روش‌ها

تا حالا به این فکر کردین که وب سایت خودتون رو بهینه کنین؟ آیا در جریان هستین که گوگل سیاست جدیدی رو تحت عنوان Mobile-First معرفی کرده؟ پس با این حساب دیگه باید دنبال روش‌های بهینه سازی وب سایت برای گوشی موبایل باشین و بیشتر از قبل بهش اهمیت بدین.

روز به روز کاربران وب بیشتر از کامپیوترهای رومیزی دور میشن و در عوض، با استفاده از دستگاه‌های تلفن همراه خودشون به وب گردی و خرید می‌پردازن.

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

اگه واقعاً قراره به بهینه سازی وب سایت برای گوشی موبایل بپردازین، پس باید دنبال یه سری روش‌های دیگه هم باشین!

به همین دلیله که گوگل اومده این استراتژی Mobile-First رو وارد دستور کار خودش کرده! یعنی شما طراحای محترم و وبمسترها باید تمرکز اصلی خودتون رو روی طراحی سایتی بذارین که برای کاربران تلفن همراه بهینه شده باشه و بعد برین سراغ موارد دیگه.

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

روش‌های بهینه سازی وب سایت برای گوشی موبایل

شماره ۱: طراحی سایت موبایل فرندلی

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

به جز طراحی ریسپانسیو، به نظرتون از چه روش‌های دیگه‌ای می‌تونیم کمک بگیریم که سایت خودمون برای موبایل بهینه سازی شده باشه؟

• اولویت بندی؛ صفحات موبایل محدود به فضای نمایشگر موجود هستن. همچنین، صفحه‌های موبایل محتوا رو به صورت عمودی ارائه میدن که در مقایسه با ساختار بسیار گسترده‌تر افقی دسکتاپ‌ها نیستن. پس در این صورت یعنی شما باید با استفاده از اولویت بندی طراحی کنین. دیدن کدوم عناصر برای کاربران از اهمیت بالایی برخورداره؟ اگه دکمه‌های CTA وجود داشته باشه، مشاهده اونها برای کاربر تلفن همراه چقدر آسونه؟
• اول محتوا و بعد رنگ بندی؛ شما می‌تونین کارهای جالبی رو با طراحی موبایل انجام بدین، اما مطمئناً در حوزه طراحی دسکتاپ نیستن. بنابراین، اول از همه برین سراغ محتوا. کپی و سایر قسمت‌های محتوای خودتون رو به راحتی قابل خوندن و دسترسی کنین. یه صفحه نمایش تلفن همراه در عناصر بصری منحرف کننده بسیار بخشنده است.
• پیمایش آسون (Easy Navigation)؛ در یه دستگاه تلفن همراه، نمی‌تونین روی هر جایی کلیک کنین و به صفحه اصلی برگردین. البته مگه این که از قبل برای این نوع پیمایش برنامه ریزی کرده باشین. پس شما باید با ابزارک‌های Scroll-to-Top و همچنین هدرهای چسبنده، هر زمان که ممکنه این کار رو انجام بدین.

بهترین راه برای بررسی این که ببینین آیا بهینه سازی وب سایت برای گوشی موبایل رو درست انجام می‌دین یا نه، استفاده از تلفن همراه (من این کار رو همیشه انجام میدم!) و بازدید از سایت خودتونه. پس در کل از هر فرصتی استفاده کنین و یه بررسی دقیق از چگونگی جریان پیدا کردن همه چی انجام بدین!

شماره ۲: بهینه سازی منابع، تصاویر، آیکون‌ها و غیره

خیلی وقت‌ها شده که بخاطر سلیقه شخصی خودتون از تصاویر خاصی استفاده می‌کنین، اما آیا می‌دونین برای بهینه سازی وب سایت برای گوشی موبایل باید اون تصاویر رو بهینه سازی کنین؟

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

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

بنابراین، چطوری می‌تونین برخی از KBها یا حتی MBهای اضافی رو از محتوای تصویری خودتون کوتاه کنین؟

• اندازه تصاویر خودتون رو تغییر بدین؛ خب این کار خیلی ساده به نظر می‌رسه، مگه نه؟ راستش خیلی اوقات باید چندبار تو یه سایت موبایل صفحه رو پایین و بالا کنین تا یه عکس با اندازه ۱۲۰۰ یا بیشتر بارگیری بشه! در عوض، در صورت لزوم، عکس‌های با اندازه کامل باید به عنوان پیوند جایگزین ارائه بشن. تغییر اندازه، بسته به ابعاد مورد نیاز شما، می‌تونه مثلاً تا ۸۰٪ از کل تصویر رو اصلاح کنه. برای دستگاه‌های تلفن همراه، هرگز دلیلی وجود نداره که حداکثر از محدوده ۶۰۰-۷۰۰px بالاتر برین.
• با فشرده سازی، اندازه فایل رو کم کنین؛ فشرده سازی یا بهینه سازی تصویر فرآیند استفاده از نرم افزار شخص ثالث برای کاهش تعداد رنگ‌های موجود در تصویر است که میشه این کار رو تا حدی انجام داد که عکس‌های شما کیفیت ذاتی خودش رو از دست نده اما از طرفی هم می‌تونن حجم فایل رو به شدت کاهش بدن.
• قالب‌های جایگزین فایل رو جستجو کنین؛ همه در مورد قالب‌های فایل PNG و JPEG شنیدن. به هر حال، اونها استانداردترین تصاویر تصویری در وب هستن. اما نه برای مدت طولانی!! آخرین و بهترین فناوری در تحویل تصویر دیجیتال حول قالب‌های فایل WebP و SVG است. به عنوان مثال SVG’s می‌تونه به طور خودکار به اندازه صفحه نمایش مقیاس بندی بشه و تعداد منابع مورد نیاز برای بارگیری اجزای بصری خاص رو کاهش بده.
• تجربه کاربری رو بهینه کنین؛ این کار برای اولین بار در تلفن همراه بسیار نکته آگاهانه‌ایه. طراحی بر اساس انگیزه به این معنیه که شما تأثیرات طولانی مدت تصمیمات خودتون رو در نظر نمی‌گیرین. در حالی که یه رویکرد آگاهانه به شما کمک می‌کنه از ابتدا با در نظر گرفتن کاربران موبایل، کار خودتون رو به بهترین نحو انجام بدین.

شماره ۳: Pre-loading و Lazy-loading

آیا بارگیری همه منابع رسانه‌ای در صفحاتی که مدت زمان قابل توجهی برای خوندن اونها لازمه، واجبه؟ و آیا این کار می‌تونه به ارائه صفحات خارجی قبل از بازدید کاربران از اونها کمک کنه؟

ابتدا به بررسی Pre-loading و تاثیر اون در بهینه سازی وب سایت برای گوشی موبایل می‌پردازیم.

Pre-loading روشیه که یه صفحه می‌تونه از فرصت‌های بالقوه پیمایش به مرورگر بگه. به عنوان مثال، ممکنه یک کاربر از صفحه A به صفحه B مراجعه کنه.

با بارگیری مجدد، کاربر می‌تونه صفحه B رو قبل از کلیک کردن روی پیوند ناوبری در صفحه A ارائه بده.

یادتون باشه که Pre-loading همیشه کارساز نیست و تصمیم نهایی رو به خود مرورگر می‌دین. عواملی مثل نوع دستگاه و پهنای باند به صورت جداگونه سنجیده میشن.

متداول‌ترین انواع Pre-loading کدوم‌ها هستن؟

• Prefetch؛ به احتمال زیاد یه URL خاص گزینه انتخاب ناوبری بعدی است و اگه مرورگر درخواست رو بپذیره، منابع مهم صفحه رو به طور خودکار ذخیره می‌کنه که این کار باعث میشه صفحه بعدی سریع‌تر بارگیری بشه.
• Prerender؛ در حالی که مدل قبلی فقط منابع خاصی رو به دست میاره، این یکی کل صفحه رو ذخیره می‌کنه. یعنی تمام محتوای ارائه شده در حافظه دستگاه کاربران ذخیره میشه.
• DNS-Prefetch؛ Pre-loading DNS مشخص شده رو برطرف می‌کنه. در نتیجه، اگه یه کاربر «چرخش» خاصی در سایت شما ایجاد کنه، در اصل زمان لازم برای پیمایش رو کم‌تر می‌کنین.
• Preconnect؛ همون چیزایی که درباره بهینه سازی وب سایت برای گوشی موبایل در بالا گفته شد رو انجام میده اما همچنین اتصالات رو با اتصالات TCP و TLS هم برقرار می‌کنه.

چند نمونه کد برای Pre-loading:

                            
            <link rel="dns-prefetch" href="customURL.com">

<link rel="preconnect" href="customURL.com">

<link rel="prefetch" href="folder/script.js" as="script">

<link rel="prerender" href="customURL.com/preview.html">
                            
            

از اونجایی که pre-loader ها از برچسب‌های HTML پویا استفاده می‌کنن، می‌تونین محتوایی مثل Google Fonts رو از قبل بارگیری کنین یا یه اسکریپت سفارشی برای پیش بارگیری دارایی‌های JavaScript در وردپرس ایجاد کنین.

اگه از وردپرس استفاده می‌کنین، WP Rocket می‌تونه در این زمینه به شما کمک کنه تا سایت خودتون رو شارژ کنین.

خب خب، بریم سراغ مورد بعدی…

Lazy Loading چیه؟

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

lazy-loading، به مرورگر میگه محتوایی رو که فقط در نمای دید کاربر است بارگیری (ارائه) کنه. بنابراین، اگه عکس‌ها یا فیلم‌های حساس به اندازه به صفحه خاصی اضافه شده باشن، هر وقت صفحه مرورگر شما به اون قسمت از سایت برسه، این فایل‌ها نمایش داده میشن.

و اگه نگران مسائل احتمالی SEO هستین، اصلاً بد به دلتون راه ندین! چون که Yoast تأیید کرده که Google صفحاتی رو که از Lazy-loading استفاده می‌کنن رندر می‌کنه و اون رو فقط یه سیگنال دیگه برای بهبود عملکرد می‌دونه.

شماره ۴: کش کردن وب

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

در کل پاک کردن کش همیشه می‌تونه یه راه حل عالی برای افزایش سرعت سایت باشه!!!

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

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

شماره ۵: AMP (صفحات شتاب داده شده موبایل)

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

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

به عنوان مثال JavaScript با AMP کار نمی‌کنه. البته مگه این که از کتابخونه AMP JS موجود در GitHub استفاده کنین. استفاده از کتابخونه JS به شما امکان میده به نتایج خاصی دست پیدا کنین، مثل جلوگیری از مسدودکننده‌های تبلیغات، اما اگه عملکرد واقعی می‌خواین، AMP همون راهیه که باید دنبال کنین.

در نهایت….

بهینه سازی وب سایت برای گوشی موبایل کار چندان سختی نیست، همه چیزی که بهش نیاز دارین اینه که کمر به همت ببندین و روش‌های گفته شده رو اجرا کنین و به هبترین نتیجه برسین!