مقدمة
في الوقت الحالي، أهم إجراء يمكنك اتخاذه لموقعك الإلكتروني هو التأكّد من أنّه يعمل بشكل جيد عند زيارته من هاتف أو جهاز لوحي. يمكنك مواصلة القراءة لمعرفة كيفية تحسين موقعك الإلكتروني لمتصفّح الأجهزة الجوّالة باستخدام "أدوات مطوّري البرامج في Chrome" وجهاز Android.
لماذا يُعدّ تحسين الويب على الأجهزة الجوّالة مهمًا جدًا؟
الأداء
تحصل الأجهزة المحمولة على وحدات معالجة مركزية أسرع، وذاكرة وصول عشوائي أكبر، ووحدات معالجة رسومات أسرع، ووصول أسرع إلى الشبكة أثناء انتقالنا من شبكات الجيل الثاني والثالث إلى شبكات الجيل الرابع. على الرغم من التقدم المستمر، فإن الأجهزة المحمولة ضعيفة مقارنة بأجهزة الكمبيوتر لدينا. بعبارة أخرى، يستغرق تحميل موارد الشبكة وقتًا أطول، ويستغرق فك حزم الصور وقتًا أطول، ويستغرق رسم الصفحة وقتًا أطول، ويستغرق تنفيذ النصوص البرمجية وقتًا أطول. من الآمن افتراض أن صفحتك تعمل بشكل أبطأ من 5 إلى 10 مرات على جهاز محمول.
البطارية
تعمل الأجهزة الجوّالة بالبطارية فقط. يريد مستخدمو الأجهزة الجوّالة أن تدوم البطارية لأطول فترة ممكنة. سيؤدي الموقع غير الأمثل إلى استنزاف البطارية بشكل أسرع بكثير من اللازم. تقليل حركة بيانات الشبكة وتقليل عمليات الرسم لتقليل استنزاف البطارية عند جلب مورد، يجب تشغيل شبكة Wi-Fi أو الراديو الخلوي، مما يؤدي إلى استنزاف البطارية. عندما يرسم المتصفّح عنصرًا، يرتفع استخدام وحدة المعالجة المركزية ووحدة معالجة الرسومات، ما يؤدي أيضًا إلى استنزاف البطارية.
التفاعل
تساعدك "حملات الأداء الأفضل" في تحسين المقياس الأكثر أهمية بالنسبة إليك. في Facebook، نهتم بالتمرير. في اختبار A/B، أبطأنا سرعة الانتقال من 60 إلى 30 لقطة في الثانية. تم تصغير قسم التفاعل. لذلك، قلنا إنّ التمرير مهم.
Facebook في مؤتمر Edge
يتوقّع مستخدمو الأجهزة الجوّالة أن يتمكّنوا من الدخول والخروج بسرعة. وسيحصل الموقع الإلكتروني الأسرع على أكبر قدر من التفاعل.
إدارة الأداء
يتم شحن Chrome مع مجموعة رائعة من أدوات المطوّرين. توضّح لك هذه المقالة كيفية استخدام هذه الأدوات لتحليل موقعك الإلكتروني المتوافق مع الأجهزة الجوّالة. إذا كنت على دراية بـ "أدوات مطوّري البرامج في Chrome"، فهذا رائع. إذا لم تكن على دراية بها، يمكنك الاطّلاع على هذه البرامج التعليمية الرائعة:
بعد أن اطّلعت على هذه المعلومات، لنتعرّف على كيفية تسريع موقعك الإلكتروني المتوافق مع الأجهزة الجوّالة باستخدام "أدوات مطوري البرامج". إذا كانت هذه هي المرة الأولى التي تستخدم فيها "أدوات مطوّري البرامج في Chrome" لنظام التشغيل Android، اطّلِع على دليل البدء في أسفل المقالة.
استخدام "أدوات مطوّري البرامج في Chrome" عن بُعد
مع ربط جهاز Android بالكمبيوتر في متصفّح Chrome على الكمبيوتر المكتبي، انتقِل إلى http://localhost:9222، وافتح موقعك الإلكتروني على جهاز Android. سيتم نقلك إلى قائمة بعلامات التبويب المفتوحة على جهاز Android. اختَر صفحتك من قائمة "الصفحات القابلة للفحص".
وسيتم نقلك إلى "أدوات مطوّري البرامج في Chrome" لتلك الصفحة.
رائع… شريط أدوات "أدوات مطوّري البرامج في Chrome" المألوف موجود هناك. أهم ما يجب فهمه حول "أدوات مطوّري البرامج في Chrome" عن بُعد هو أنّها "أدوات مطوّري البرامج" نفسها التي تستخدمها اليوم على الكمبيوتر المكتبي. الفرق الوحيد هو أن جهاز Android الخاص بك مسؤول فقط عن الصفحة، بينما سطح المكتب الخاص بك مسؤول عن أدوات مطوري البرامج. يتم جمع البيانات نفسها وإتاحة الوظائف نفسها في الخلفية.
على سبيل المثال، زرتُ الموقع الإلكتروني www.sfgate.com/movies على هاتفي. باستخدام "أدوات مطوّري البرامج في Chrome" على الكمبيوتر المكتبي، مرّرت مؤشر الماوس فوق div في أداة العناصر، وكما هو الحال على الكمبيوتر المكتبي، يتم تمييز div بشكل مرئي على جهاز Android.
يمكن أيضًا استخدام أداة العناصر لتبديل الأنماط بين التشغيل والإيقاف، وهو ما سيكون مفيدًا عندما نحاول التحقيق في أوقات الرسم.
تسليط الضوء على الوصول إلى الشبكة
يُعدّ أداء الشبكة مهمًا، وهو أكثر أهمية على الويب على الأجهزة الجوّالة. غالبًا ما تكون الأجهزة الجوّالة متصلة بشبكات أبطأ من أجهزة الكمبيوتر المكتبية والمحمولة. للتأكّد من أنّك تتّبع الخطوات الصحيحة، يمكنك أخذ لقطة للشبكة من خلال الانتقال إلى أداة الشبكة والضغط على "تسجيل".
تعرض لقطة الشاشة حركة بيانات الشبكة الناتجة عن بحث Google. راقِب طلبات الشبكة التي يرسلها موقعك الإلكتروني وابحث عن طرق لتقليلها. إذا كان موقعك الإلكتروني يرسل طلبات استطلاع إلى الخادم، ننصحك بالانتباه إلى نشاط المستخدم وتجنُّب الاستطلاع عندما يكون المستخدم غير نشط. تتيح لك أداة الشبكة عرض عناوين HTTP الأولية، وهي مفيدة في حال كانت شبكات الجوّال تغيّرها على الإطلاق.
تحسين أوقات العرض
من أكبر المشاكل التي تواجه متصفّحات الويب على الأجهزة الجوّالة هي عرض صفحتك. الرسم هو عملية رسم عنصر على الصفحة باستخدام النمط المحدّد. عندما يكون عرض عنصر واحد مكلفًا، يؤدي ذلك إلى إبطاء عرض الصفحة بأكملها. يحاول Chrome تخزين العناصر التي تم عرضها سابقًا في ذاكرة التخزين المؤقت خارج الشاشة. ولكن على الأجهزة الجوّالة، تكون كمية ذاكرة الوصول العشوائي (RAM) المتاحة لوحدة معالجة الرسومات محدودة، ما يحدّ من عدد العناصر التي يمكن تخزينها مؤقتًا خارج الشاشة. يتمثّل التأثير الجانبي في زيادة عمليات الرسم وبطء كل عملية رسم مقارنةً بأجهزة الكمبيوتر المكتبي. للحصول على تمرير سريع الاستجابة، يجب تقليل أوقات الرسم.
يتضمّن الإصدار 25 من Chrome وضع إعادة رسم الصفحة بشكل مستمر. لا يخزّن وضع "إعادة رسم الصفحة المستمر" العناصر المرسومة مؤقتًا، بل يرسم جميع العناصر في كل إطار. من خلال فرض عرض جميع العناصر في كل إطار، يمكن إجراء اختبارات A/B لأوقات العرض من خلال تفعيل العناصر وإيقافها، وتفعيل الأنماط وإيقافها. على الرغم من أنّ العملية يدوية، إلا أنّها أداة قيّمة لتتبُّع مدى صعوبة عرض كل عنصر على صفحتك. القاعدة الأولى في نادي التحسين هي قياس ما تحاول تحسينه للحصول على مرجع. لنستعرض مثالاً بسيطًا.
أولاً، فعِّل وضع إعادة رسم الصفحة المستمر:
بعد تفعيل هذه الميزة، سيظهر رسم بياني في أعلى يسار شاشة جهاز Android. يمثّل المحور الأفقي للرسم البياني الوقت، وهو مقسّم إلى لقطات. يقيس المحور الصادي للرسم البياني وقت الطلاء بالمللي ثانية. يمكنك أن ترى أن الصفحة تستغرق 14 مللي ثانية على جهازي لكي يتم رسمها. يتم أيضًا عرض الحد الأدنى والحد الأقصى لأوقات الرسم مع ذاكرة وحدة معالجة الرسومات المستخدمة.
كتجربة، قمت بتعيين النمط على العنصر المحدد ليكون display: none. لنرى الآن مدى تكلفة
رسم الصفحة.
وانخفضت أوقات الرسم من حوالي 14 مللي ثانية لكل إطار إلى 4 مللي ثانية لكل إطار. بعبارة أخرى، استغرق رسم هذا العنصر الواحد حوالي 10 مللي ثانية. من خلال اتباع عملية تبديل العناصر والأنماط بين التشغيل والإيقاف، يمكنك تضييق نطاق الأجزاء المكلفة من صفحتك بسرعة. تذكَّر أنّ أوقات العرض الأسرع تعني تقليل حالات التقطّع وإطالة عمر البطارية وزيادة تفاعل المستخدمين. عندما تكون مستعدًا للتعمّق أكثر، احرص على قراءة هذه المقالة الرائعة حول وضع إعادة رسم الصفحة المستمر.
الميزات المتقدمة
about:tracing
تتوفّر أيضًا العديد من ميزات المطوّرين الأكثر تقدّمًا المتاحة في Chrome لأجهزة الكمبيوتر المكتبي في Chrome لأجهزة Android. على سبيل المثال، تتوفّر الصفحات about:gpu-internals وabout:appcache-internals وabout:net-internals. عند التحقيق في مشكلة صعبة بشكل خاص، تحتاج أحيانًا إلى مزيد من البيانات من أجل تضييق نطاق سبب مشكلتك. على الكمبيوتر المكتبي، قد تستخدم about:tracing. إذا لم تكن على دراية بأداة about:tracing، يمكنك مشاهدة الفيديو الذي أعددته حول استخدام أداة تحليل الأداء about:tracing واستكشافها. يمكن الحصول على البيانات نفسها من Android Chrome، ما عليك سوى اتّباع الخطوات التالية للبدء:
- نزِّل adb_trace.py.
- تشغيل adb_trace.py من سطر الأوامر
- استخدام Chrome على أجهزة Android
- اضغط على Enter في سطر الأوامر لإيقاف النص البرمجي adb_trace.py.
بعد اكتمال adb_trace.py، ستحصل على ملف JSON يمكنك تحميله في about:tracing في Chrome على الكمبيوتر المكتبي.
دليل البدء
بعد أن راجعنا ما يمكن أن تفعله أدوات مطوري البرامج في Chrome عن بُعد، لنتناول كيفية البدء في جلسة تصحيح الأخطاء عن بُعد. إذا لم يسبق لك استخدامها، يمكنك قراءة التعليمات التفصيلية حول كيفية البدء. إذا كنت قد استخدمتها بالفعل، ولكنك نسيت كيفية استخدامها بالضبط، فقد أدرجت تعليمات مختصرة هنا أيضًا.
1. تثبيت حزمة تطوير البرامج (SDK) لنظام التشغيل Android
قد تتساءل عن سبب الحاجة إلى تثبيت حزمة تطوير البرامج (SDK) لنظام التشغيل Android عند تطوير تطبيقات الويب. تتضمّن حزمة تطوير البرامج (SDK) أداة adb (Android Debug Bridge). يجب أن يتمكّن متصفّح Chrome على الكمبيوتر من الاتصال بجهاز Android. لا يتواصل Chrome مباشرةً مع جهاز Android، بل يوجّه الاتصال من خلال adb.
2. تفعيل ميزة "تصحيح أخطاء الجهاز عبر USB" على جهازك
يمكن العثور على خيار تفعيل تصحيح أخطاء الجهاز عبر USB في إعدادات Android. فعِّلها.
3- الاتصال بالجهاز
إذا لم تكن قد فعلت ذلك، فقم بتوصيل جهاز Android بجهاز الكمبيوتر المكتبي عبر USB. إذا كانت هذه هي المرة الأولى التي تستخدم فيها تصحيح أخطاء الجهاز عبر USB، فسيظهر لك الطلب التالي:
إذا كنت ستجري جلسات تصحيح أخطاء عن بُعد بشكل متكرر، أنصحك بوضع علامة في المربّع "مسموح باستخدامه دومًا من هذا الكمبيوتر".
4. التحقّق من أنّ جهازك متصل بشكل صحيح
شغِّل أجهزة adb من موجّه الأوامر. من المفترض أن يظهر جهازك في القائمة.
5- تفعيل تصحيح أخطاء الجهاز عبر USB في Chrome
افتح الإعدادات > الإعدادات المتقدّمة > أدوات مطوّري البرامج وضَع علامة في المربّع بجانب الخيار تفعيل تصحيح أخطاء الويب عبر USB كما هو موضّح هنا:
6. إنشاء اتصال بين "أدوات مطوري البرامج" وجهاز Android
نفِّذ الأمر التالي:
adb forward tcp:9222 localabstract:chrome_devtools_remote
ينشئ جسرًا بين جهاز الكمبيوتر المكتبي وجهاز Android من خلال adb. إذا واجهت أي مشاكل في الوصول إلى هذه النقطة، فاقرأ تعليمات الإعداد التفصيلية هنا.
7. جارٍ التحقّق من أنّك جاهز للمتابعة
تأكَّد من أنّ جهازك متصل بشكل صحيح من خلال فتح Chrome على الكمبيوتر المكتبي والانتقال إلى http://localhost:9222. إذا ظهرت لك رسالة خطأ 404 أو رسالة خطأ أخرى أو لم يظهر لك شيء مثل ما يلي:
يمكنك الاطّلاع على تعليمات الإعداد المفصّلة هنا.
الخاتمة
غالبًا ما يكون مستخدمو الأجهزة الجوّالة على عجلة من أمرهم ويحتاجون إلى الحصول بسرعة على المعلومات المهمة من صفحتك. تقع على عاتقك بصفتك منشئ مواقع إلكترونية للأجهزة الجوّالة مسؤولية ضمان تحميل الصفحة بسرعة وتقديم أداء جيد على الأجهزة الجوّالة. وإذا لم يحدث ذلك، سينخفض تفاعل المستخدمين. تُعدّ "أدوات مطوّري البرامج في Chrome" عن بُعد مكافئة من الناحية الوظيفية لنظيراتها على أجهزة الكمبيوتر المكتبي. واجهة المستخدم متشابهة بما يكفي لدرجة أنك لست بحاجة إلى تعلم مجموعة جديدة من الأدوات. بعبارة أخرى، يتم نقل سير العمل. تذكَّر أنّ Facebook ليس محصّنًا ضد مشاكل الأداء، وكذلك موقعك الإلكتروني. وتجذب المواقع الإلكترونية ذات الأداء العالي المزيد من تفاعل المستخدمين.