چگونه وب سایت خود را برای کاربران موبایل بهینه کنیم؟

آیا مطمئن شدید سایت شما از نظر موبایل مناسب است?


آیا می دانید که Google خط مشی جدیدی به نام Mobile-First را معرفی کرده است؟ بیشتر و بیشتر کاربران وب از رایانه های رومیزی دور می شوند, و در عوض ، با استفاده از دستگاه های تلفن همراه خود فهرست و خریداری کنید.

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

اگر می خواهید بهینه سازی عملکرد واقعی باشید ، باید گزینه های دیگری را نیز در نظر بگیرید.

به همین دلیل است که بر ساخت سایت شما به عنوان یک تأکید جدی وجود دارد اولین تجربه موبایل. به عبارت ساده ، موبایل به این معنی است که ابتدا طرح و محتوای شما برای کاربران موبایل ابتدا بهینه شده است.

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

شماره 1: طراحی با تلفن همراه در ذهن

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

غیر از طراحی پاسخگویی عقل سلیم ، چه عناصر طراحی دیگری را که باید در طراحی وب اول موبایل خود پیاده کنید?

  • اولویت بندی. صفحه های موبایل به فضای نمایشگر موجود محدود می شوند. همچنین ، صفحه های موبایل محتوا را به صورت عمودی مخالف با ساختار بسیار وسیع تر – افقی برای دسکتاپ ها قرار می دهند. این بدان معنی است که شما باید با استفاده از اولویت بندی طراحی کنید. کدام عناصر برای دیدن کاربران از اهمیت ویژه ای برخوردار است؟ اگر دکمه های CTA وجود دارد ، دیدن آنها برای کاربر تلفن همراه آسان است?
  • محتوای اول. رنگ دوم. شما می توانید با طراحی موبایل کارهای جالب انجام دهید ، اما مطمئناً در محدوده طراحی دسکتاپ نیست. بنابراین ، ابتدا به محتوا بپردازید. کپی و سایر قسمت های محتوا را به راحتی قابل خواندن و در دسترس قرار دهید. یک صفحه نمایش تلفن همراه در مورد منحرف کردن عناصر بصری بسیار بخشنده تر است.
  • ناوبری آسان. در دستگاه تلفن همراه ، شما فقط نمی توانید در هر نقطه کلیک کنید و به صفحه اصلی برگردید. مگر در مواردی که مطمئناً برای این نوع پیمایش پیش از موعد برنامه ریزی کنید. و شما باید با ابزارک های پیمایش به بالا ، اما همچنین هدرهای چسبنده بدون درز هر زمان ممکن آزمایش کنید.

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

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

شماره 2: بهینه سازی منابع؛ تصاویر ، نمادها و غیره.

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

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

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

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

بنابراین ، چگونه می توانید مقداری KB یا حتی MB را از محتوای تصویری خود جدا کنید?

  • تغییر اندازه تصاویر. به نظر می رسد ساده است ، درست است؟ خوب ، من نمی توانم به تعداد بارهایی که یک سایت موبایل را مرور کرده ام ، توجه داشته باشم فقط برای بارگذاری تصاویر 1920 x 1200 در پس زمینه. در عوض ، عکسهای با اندازه کامل در صورت لزوم باید به عنوان پیوندهای جایگزین ارائه شوند. بسته به ابعاد مورد نیاز ، اندازه تغییر اندازه می تواند تا 80٪ از کل تصویر را اصلاح کند. اگرچه برای دستگاه های تلفن همراه ، هیچگاه دلیلی وجود ندارد که حداکثر از محدوده 600-700px بروید.
  • سایز پرونده را با فشرده سازی کاهش دهید. فشرده سازی / بهینه سازی تصویر فرایند استفاده از نرم افزار شخص ثالث برای کاهش تعداد رنگ های موجود در یک تصویر است. این می تواند تا حدی انجام شود که عکسهای شما کیفیت ذاتی خود را از دست ندهند ، اما می توانند اندازه پرونده آنها به شدت کاهش یابد. اگر در فشرده سازی تصاویر به کمک نیاز دارید ، بیشتر از جمع آوری ابزارهای فشرده سازی تصویر به دنبال ما نباشید.
  • قالبهای پرونده جایگزین را کاوش کنید. همه از فرمت های فایل PNG و JPEG شنیده اند. گذشته از این ، آنها استانداردهای تصویر de facto در وب هستند. اما ، مدت طولانی نیست. جدیدترین و بهترین فناوری در زمینه ارسال تصویر دیجیتال حول محور است وب و فرمت های فایل SVG. به عنوان مثال ، SVG می تواند به طور خودکار مقیاس به اندازه صفحه, کاهش تعداد منابع مورد نیاز برای بارگیری اجزای بصری خاص.

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

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

شماره 3: بارگیری قبل و بارگذاری تنبل

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

بیایید ابتدا به preloaders نگاه کنیم ، همچنین به عنوان شناخته می شود نکات مرورگر.

Preloaders روش هایی برای نمایش یک صفحه در مورد فرصت های بالقوه پیمایش به مرورگر است. به عنوان مثال. ممکن است کاربر از صفحه A به صفحه B مراجعه کند.

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

بخشنامه پیش بارگذاری

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

رایج ترین انواع پیش لودر کدام است?

  • مقدمه. این نوع نشان می دهد که یک URL خاص به احتمال زیاد انتخاب ناوبری بعدی خواهد بود. و اگر مرورگر درخواست را تأیید کند ، به طور خودکار منابع مهم صفحه را ذخیره می کند ، که به نوبه خود باعث می شود بارگذاری صفحه بعدی بسیار سریع تر شود.
  • تسلیم شدن. در حالی که نوع فوق فقط منابع خاصی را به دست می آورد ، prerender کل صفحه را ذخیره می کند. کلیه محتوای ارائه شده در حافظه دستگاه کاربران ذخیره می شود.
  • DNS-prefetch. پیش فرض DNS DNS مشخص شده و هیچ چیز دیگری را برطرف نمی کند. در نتیجه ، اگر کاربر چرخش خاصی را در سایت شما ایجاد کند ، شما در واقع مدت زمان لازم برای حرکت را خاموش می کنید.
  • مقدمه. همانند بالا ، بلکه اتصالات TCP و TLS را برقرار می کند.

چند نمونه کد برای پیش بارگذاری چیست؟?

از آنجا که preloader ها از برچسب های HTML پویا استفاده می کنند ، می توانید محتوا را مانند فونت های Google بارگیری کنید یا یک اسکریپت سفارشی برای پیش بارگذاری دارایی های JavaScript در وردپرس ایجاد کنید.

BTW ، اگر از WordPress استفاده می کنید پس از آن موشک WP می تواند به شما در جهت شارژ بیشتر سایت خود کمک کند.

اکنون که اطلاعات بیشتری درباره پیش لودرها می دانید ، اجازه دهید در مورد موضوع داغ دیگری صحبت کنیم: بارگذاری تنبل.

Lazy Loading چیست؟?

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

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

و اگر نگران مسائل احتمالی سئو هستید ، نباشید. Yoast این را تأیید کرده است Google صفحاتی را ارائه نمی دهد که از بارگیری تنبل استفاده می کنند, و آن را فقط یک سیگنال بهبود عملکرد می بیند.

لایزر جی

توصیه من برای استفاده از یک کتابخانه است Layzr.js – بارگذاری ساده و مؤثر برای بارگذاری تصاویر شما! فیلمنامه در صفحه اصلی پروژه نیز فعال شده است ، بنابراین می توانید آن را در زمان واقعی اجرا کنید. کاربران وردپرس می توانند ده ها پلاگین بارگذاری تنبل در repo افزونه عمومی پیدا کنند.

شماره 4: ذخیره سازی وب

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

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

حافظه پنهان وب

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

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

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

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

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

اگر تجربه قبلی با CDN ندارید ، توصیه می کنیم این را امتحان کنید Cloudflare – آنها برنامه ای برای همیشه رایگان ارائه می دهند ، و این یک بستر عالی برای شروع یادگیری است. و اگر Cloudflare به انتظارات شما عمل نمی کند ، پست ما را برای بهترین ارائه دهندگان رایگان CDN در بازار بررسی کنید.

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

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

Google AMP (صفحات تلفن همراه شتاب)

خوب ، همه آن کلمات کلیدی بسیار عالی به نظر می رسند ، اما AMP چگونه کار می کند?

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

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

AMP به عنوان مثال

اگر کاربر WordPress هستید ، در اکثر موارد اضافه کردن AMP به وبلاگ شما با کمک یک افزونه انجام می شود. اما اگر با یک سایت ساخته شده سفارشی کار می کنید ، اضافه کردن AMP برای اولین بار می تواند کمی چالش برانگیز باشد.

AMP را به عنوان مثال بیاموزید

اینجاست AMP به عنوان مثال در دسترس است یک پروژه جانبی به سکوی واقعی ، این سایت جزئیات هر قلاب و قلاب ممکن برای دستیابی به AMP را شرح می دهد. هر مؤلفه و جلوه با نمایشی ارائه شده ارائه می شود ، بنابراین می توانید ببینید که چه شکلی است.

مطالعات موردی جالب برای AMP:

  1. ترا با AMP بینایی موبایل را بالا می برد
  2. تایمز هند از درآمد 1.5 برابر بیشتر گزارش می کند
  3. Fastcommerce با ساخت AMP-first تبدیل برای مشتری را هدایت می کند

شماره 6: قبل از انجام آزمایش تست کنید

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

قبل از انجام آزمایش

یک محیط صحنه?

خوب ، سریعترین راه برای توضیح این امر با مراجعه به وب سایت زنده فعلی شما است.

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

من همیشه به پست اشلی هارپ فکر می کنم, وقت خود را تلف نکنید – قبل از انجام آزمایش ، آزمایش کنید.

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

تست به همان اندازه که به نظر می رسد ترسناک نیست. اما مطمئناً هنگامی که کل پایگاه داده خود را بر روی یک سرور تولید حذف می کنید ، هک ترسناک است!

جمله ی پایانی

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

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

برچسب ها:

  • سئو

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map