مقدمه
امروزه، مهم‌ترین کاری که می‌توانید برای سایتتان انجام دهید این است که مطمئن شوید هنگام بازدید از تلفن یا رایانه لوحی عملکرد خوبی دارد. ادامه مطلب را بخوانید و با نحوه بهینه‌سازی سایتتان برای مرورگر تلفن همراه بااستفاده از Chrome DevTools و دستگاه Android آشنا شوید.
چرا بهینه‌سازی برای وب تلفن همراه بسیار مهم است؟
عملکرد
دستگاه‌های همراه با پردازنده‌های سریع‌تر، حافظه دسترسی تصادفی بیشتر، واحدهای پردازش گرافیکی سریع‌تر، و دسترسی سریع‌تر به شبکه (به‌دلیل انتقال از نسل دوم و سوم به نسل چهارم) عرضه می‌شوند. باوجود پیشرفت‌های مداوم، دستگاه‌های همراه درمقایسه با رایانه‌ها قدرت کمتری دارند. به‌طور دقیق‌تر، بار کردن منابع شبکه بیشتر طول می‌کشد، باز کردن تصاویر بیشتر طول می‌کشد، رنگ‌آمیزی صفحه بیشتر طول می‌کشد، اجرای اسکریپت‌ها بیشتر طول می‌کشد. می‌توان فرض کرد که صفحه شما در دستگاه همراه ۵ تا ۱۰ برابر کندتر اجرا می‌شود.
باتری
دستگاه‌های همراه منحصراً با باتری کار می‌کنند. کاربران دستگاه‌های همراه می‌خواهند شارژ باتری تا حد امکان بیشتر دوام بیاورد. سایت غیربهینه باتری را بسیار سریع‌تر از حد نیاز خالی می‌کند. ترافیک شبکه را به‌حداقل برسانید و رنگ‌ها را کاهش دهید تا مصرف باتری کاهش یابد. وقتی منبعی را واکشی می‌کنید، Wi-Fi یا رادیو سلولی باید روشن باشد که این کار باتری را خالی می‌کند. وقتی مرورگر عنصری را رنگ‌آمیزی می‌کند، مصرف CPU و GPU به‌شدت افزایش می‌یابد که این امر باعث تخلیه باتری نیز می‌شود.
تعامل
«عملکرد» برای افزایش سنجه‌ای است که برای شما بیشترین اهمیت را دارد. در Facebook، پیمایش برای ما مهم است. در آزمایش A/B، سرعت پیمایش را از ۶۰ فریم در ثانیه به ۳۰ فریم در ثانیه کاهش دادیم. تعامل جمع شد. گفتیم بسیار خوب، پس پیمایش مهم است.
Facebook در کنفرانس Edge
کاربران تلفن همراه انتظار دارند که بتوانند به‌سرعت وارد و خارج شوند. سریع‌ترین سایت بیشترین تعامل را دریافت خواهد کرد.
مدیریت عملکرد
Chrome با مجموعه عالی ابزارهای توسعه‌دهنده عرضه می‌شود. این مقاله به شما آموزش می‌دهد که چگونه از این ابزارها برای نمایه کردن سایت تلفن همراه خود استفاده کنید. اگر ازقبل با Chrome DevTools آشنایی دارید، عالی است! اگر نه، این آموزش‌های عالی را بررسی کنید:
اکنون که با این موضوع آشنا شدید، بیایید ببینیم چگونه می‌توانید با DevTools سرعت سایت تلفن همراه خود را افزایش دهید. اگر اولین‌بار است که از Chrome DevTools برای Android استفاده می‌کنید، راهنمای شروع به کار را در پایین مقاله بررسی کنید.
استفاده از Chrome DevTools از راه دور
درحالی‌که دستگاه Android شما به رایانه‌تان متصل است. در Chrome رایانه، به http://localhost:9222 بروید و در دستگاه Android، سایتتان را باز کنید. به فهرستی از برگه‌های باز در دستگاه Android خود هدایت خواهید شد. صفحه‌تان را از فهرست «صفحه‌های قابل‌بازرسی» انتخاب کنید.
و به Chrome DevTools برای آن صفحه هدایت خواهید شد.
آه… آن نوارابزار آشنای Chrome DevTools درست آنجا است. مهم‌ترین چیزی که باید درباره Chrome DevTools از راه دور بدانید این است که این ابزارها همان DevTools هستند که امروزه در رایانه خود استفاده می‌کنید. تنها تفاوت این است که دستگاه Android شما فقط مسئول صفحه است، درحالی‌که رایانه شما مسئول DevTools است. در پشت صحنه، همان داده‌ها جمع‌آوری می‌شود و همان عملکرد دردسترس است.
به‌عنوان مثال، من در تلفنم از www.sfgate.com/movies بازدید کردم. بااستفاده از Chrome DevTools در رایانه‌ام، نشانگر را روی یک div در ابزار Elements نگه داشتم و درست مثل رایانه، div به‌صورت بصری در دستگاه Android من برجسته شد.
از ابزار Elements همچنین می‌توان برای روشن و خاموش کردن سبک‌ها استفاده کرد که هنگام بررسی زمان‌های رنگ‌آمیزی مفید خواهد بود.
شفاف‌سازی درباره دسترسی به شبکه
عملکرد شبکه مهم است و در وب تلفن همراه اهمیت بیشتری دارد. دستگاه‌های همراه اغلب اتصال‌های کندتری نسبت به رایانه‌های رومیزی و رایانه‌های کیفی دارند. برای اطمینان از اینکه کار درست را انجام می‌دهید، با رفتن به ابزار شبکه و فشار دادن دکمه ضبط، یک عکس آنی از شبکه بگیرید.
این نماگرفت ترافیک شبکه ناشی از جستجوی Google را نشان می‌دهد. درخواست‌های شبکه‌ای را که سایتتان ایجاد می‌کند مشاهده کنید و راه‌هایی برای به‌حداقل رساندن آن‌ها پیدا کنید. اگر سایتتان درخواست‌های نظرسنجی به سرور ارسال می‌کند، شاید بهتر باشد به فعالیت کاربر توجه کنید و وقتی کاربر غیرفعال است، نظرسنجی نکنید. ابزار شبکه به شما امکان می‌دهد سرایندهای HTTP خام را مشاهده کنید، که درصورت تغییر آن‌ها توسط شبکه‌های تلفن همراه مفید است.
درحال بهینه‌سازی کردن زمان‌های نقاشی
یکی‌از بزرگ‌ترین گلوگاه‌ها در مرورگرهای وب تلفن همراه، رنگ‌آمیزی صفحه شما است. رنگ‌آمیزی فرایند کشیدن یک عنصر در صفحه با سبک مشخص‌شده است. وقتی نقاشی کردن یک عنصر پرهزینه باشد، نقاشی کردن کل صفحه را کند می‌کند. Chrome تلاش می‌کند عناصر قبلاً رنگ‌شده را در میان‌گیر خارج از صفحه ذخیره کند. اما در تلفن همراه، مقدار RAM GPU دردسترس محدود است، که تعداد عناصری را که می‌توانند خارج از صفحه ذخیره شوند محدود می‌کند. اثر جانبی رنگ‌آمیزی بیشتر و هر رنگ‌آمیزی کندتر از رایانه است. برای داشتن پیمایش واکنش‌گرا، باید زمان‌های رنگ‌آمیزی را به حداقل برسانید.
Chrome 25 شامل حالت رنگ‌آمیزی مجدد صفحه به‌طور مداوم است. حالت بازرسم صفحه پیوسته هرگز عناصر رسم‌شده را ذخیره نمی‌کند و درعوض، همه عناصر را در هر فریم رسم می‌کند. با اجبار کردن همه عناصر به پرداز زدن در هر فریم، می‌توان با روشن و خاموش کردن عناصر و سبک‌ها، آزمایش A/B زمان‌های پرداز زدن را انجام داد. اگرچه این فرایند دستی است، اما ابزاری بسیار ارزشمند برای ردیابی هزینه پرداز زدن هر عنصر در صفحه شما است. اولین قانون باشگاه بهینه‌سازی این است: آنچه را که می‌خواهید بهینه‌سازی کنید اندازه‌گیری کنید تا یک خط مبنا به‌دست آورید. بیایید یک مثال ساده را با هم بررسی کنیم.
ابتدا، حالت بازرسم صفحه پیوسته را فعال کنید:
پس‌از فعال کردن، نموداری در گوشه بالا سمت راست دستگاه Android شما قابل‌مشاهده خواهد بود. محور x نمودار زمان است که به قاب‌ها تقسیم شده است. محور y نمودار زمان رنگ‌آمیزی را برحسب میلی‌ثانیه اندازه‌گیری می‌کند. می‌توانید ببینید که در دستگاه من، ۱۴ میلی‌ثانیه طول می‌کشد تا صفحه رنگ‌آمیزی شود. حداقل و حداکثر زمان‌های رنگ‌آمیزی نیز به‌همراه حافظه GPU استفاده‌شده نشان داده می‌شود.
به‌عنوان آزمایش، سبک عنصر انتخاب‌شده را روی display: none تنظیم کردم. بیایید ببینیم اکنون رنگ‌آمیزی صفحه
چقدر هزینه دارد.
زمان‌های رنگ‌آمیزی از حدود ۱۴ میلی‌ثانیه در هر فریم به ۴ میلی‌ثانیه در هر فریم کاهش یافت. به عبارت دیگر، رنگ‌آمیزی آن عنصر تقریباً ۱۰ میلی‌ثانیه طول کشید. با دنبال کردن فرایند روشن و خاموش کردن عناصر و روشن و خاموش کردن سبک‌ها، می‌توانید به‌سرعت بخش‌های پرهزینه صفحه‌تان را محدود کنید. به‌یاد داشته باشید که زمان‌های رنگ‌آمیزی سریع‌تر به‌معنای لرزش کمتر، باتری طولانی‌تر و تعامل بیشتر ازسوی کاربران شما است. وقتی آماده بودید که عمیق‌تر کاوش کنید، حتماً این مقاله عالی درباره حالت بازرسم صفحه پیوسته را بخوانید.
ویژگی‌های پیشرفته
about:tracing
بسیاری از ویژگی‌های پیشرفته‌تر توسعه‌دهنده که در Chrome رایانه دردسترس است، در Chrome Android نیز دردسترس است. برای مثال، about:gpu-internals، about:appcache-internals، و about:net-internals دردسترس هستند. هنگام بررسی یک مشکل بسیار پیچیده، گاهی اوقات به داده‌های بیشتری نیاز دارید تا بتوانید علت مشکل خود را محدود کنید. در رایانه، ممکن است از about:tracing استفاده کنید. اگر هنوز با about:tracing آشنا نیستید، ویدیو من درباره استفاده و کاوش ابزار نمایه‌سازی about:tracing را تماشا کنید. می‌توانید همان داده‌ها را از Chrome Android ضبط کنید، برای شروع این مراحل را دنبال کنید:
- adb_trace.py را بارگیری کنید
- adb_trace.py را از خط فرمان اجرا کنید
- استفاده از Chrome در Android
- در خط فرمان، کلید Enter را فشار دهید تا اسکریپت adb_trace.py بسته شود.
پس‌از تکمیل adb_trace.py، فایل JSON خواهید داشت که می‌توانید آن را در about:tracing Chrome رایانه بار کنید.
درحال شروع راهنما
اکنون که آنچه را Chrome DevTools از راه دور می‌تواند انجام دهد مرور کردیم، بیایید نحوه شروع جلسه اشکال‌زدایی از راه دور را پوشش دهیم. اگر قبلاً از آن‌ها استفاده نکرده‌اید، دستورالعمل‌های دقیق درباره نحوه شروع به کار را بخوانید. اگر قبلاً از آن‌ها استفاده کرده‌اید اما دقیقاً نحوه استفاده از آن‌ها را فراموش کرده‌اید، دستورالعمل‌های خلاصه را نیز در اینجا فهرست کرده‌ام.
۱. نصب کیت توسعه نرم‌افزار Android
شاید برایتان سؤال باشد که چرا باید کیت توسعه نرم‌افزار Android را نصب کنید درحالی‌که برای وب توسعه می‌دهید. adb (پل اشکال‌زدایی Android) در کیت توسعه نرم‌افزار گنجانده شده است. Chrome در رایانه باید بتواند با دستگاه Android شما ارتباط برقرار کند. Chrome مستقیماً با دستگاه Android ارتباط برقرار نمی‌کند، بلکه ارتباط را ازطریق adb هدایت می‌کند.
۲. فعال کردن اشکال‌زدایی USB در دستگاه
گزینه فعال کردن اشکال‌زدایی USB را می‌توانید در «تنظیمات Android» پیدا کنید. آن را فعال کنید.
۳. متصل شدن به دستگاه
اگر قبلاً این کار را نکرده‌اید، دستگاه Android خود را ازطریق USB به رایانه رومیزی متصل کنید. اگر اولین‌بار است که از اشکال‌زدایی USB استفاده می‌کنید، پیام‌واره زیر را دریافت خواهید کرد:
اگر به‌طور مکرر جلسات اشکال‌زدایی از راه دور انجام می‌دهید، توصیه می‌کنم «همیشه از این رایانه اجازه داده شود» را علامت بزنید.
۴. بررسی کنید دستگاهتان به‌درستی متصل شده باشد
دستگاه‌های adb را از خط فرمان اجرا کنید. باید دستگاهتان را در فهرست ببینید.
۵. فعال کردن اشکال‌زدایی USB در Chrome
تنظیمات > پیشرفته > DevTools را باز کنید و گزینه فعال کردن اشکال‌زدایی وب USB را همان‌طور که در اینجا نشان داده شده است علامت بزنید:
۶. درحال ایجاد اتصال DevTools به دستگاه Android شما
فرمان زیر را اجرا کنید:
adb forward tcp:9222 localabstract:chrome_devtools_remote
ازطریق adb پلی بین رایانه رومیزی و دستگاه Android شما ایجاد می‌کند. اگر برای رسیدن به این مرحله با مشکلی مواجه شدید، دستورالعمل‌های راه‌اندازی دقیق را در اینجا بخوانید.
۷. درحال درستی‌سنجی اینکه آماده‌اید
با باز کردن Chrome در رایانه و رفتن به http://localhost:9222، مطمئن شوید دستگاهتان به‌درستی متصل شده است. اگر خطای ۴۰۴ یا خطای دیگری دریافت کردید یا چیزی شبیه به موارد زیر را نمی‌بینید:
دستورالعمل‌های راه‌اندازی دقیق را اینجا بخوانید.
نتیجه‌گیری
کاربران تلفن همراه اغلب عجله دارند و باید به‌سرعت اطلاعات مهم را از صفحه شما دریافت کنند. به‌عنوان سازنده سایت تلفن همراه، وظیفه شما است که مطمئن شوید صفحه به‌سرعت بار می‌شود و در تلفن همراه عملکرد خوبی دارد. اگر این‌طور نباشد، تعامل کاربر کاهش خواهد یافت. Chrome DevTools ازراه‌دور ازنظر عملکردی معادل همتایان رایانه‌ای خود هستند. رابط کاربری آن‌قدر مشابه است که نیازی به یادگیری مجموعه جدیدی از ابزارها ندارید. به‌عبارت دیگر، گردش کارتان منتقل می‌شود. به‌خاطر داشته باشید، Facebook دربرابر مشکلات عملکردی آسیب‌ناپذیر نیست و سایت شما هم همین‌طور. سایت‌های کارا تعامل کاربر بیشتری دریافت می‌کنند.