مقدمة
في الوقت الحالي، أهم ما يمكنك فعله لموقعك هو التأكد من أدائه الجيد عند الانتقال إليه من الهاتف أو الجهاز اللوحي. تابع القراءة وتعرَّف على كيفية تحسين موقعك الإلكتروني للمتصفّح المتوافق مع الأجهزة الجوّالة باستخدام "أدوات مطوري البرامج في Chrome" وجهاز Android.
ما أهمية تحسين الويب على الأجهزة الجوّالة؟
عروض أداء
في ظل انتقالنا من شبكة الجيل الثاني والجيل الثالث إلى شبكة الجيل الرابع، تزيد سرعة أداء الأجهزة المحمولة على وحدات المعالجة المركزية (CPU) وذاكرة الوصول العشوائي (RAM) ووحدات معالجة الرسومات الأسرع وإمكانية الوصول إلى الشبكات بشكل أسرع. وعلى الرغم من ازدياد طبول التقدم، فإن الأجهزة المحمولة ضعيفة عند مقارنتها بأجهزة الكمبيوتر لدينا. بتعبير أدق، يستغرق تحميل موارد الشبكة وقتًا أطول، ويستغرق فك ضغط الصور وقتًا أطول، ويستغرق طلاء الصفحة وقتًا أطول، ويستغرق تنفيذ النصوص البرمجية وقتًا أطول. من الآمن افتراض أنّ صفحتك تعمل بشكل أبطأ من 5 إلى 10 مرات على الجهاز الجوّال.
البطارية
ولا تعمل الأجهزة الجوّالة إلّا على البطارية. يريد مستخدمو الأجهزة المحمولة أن تدوم البطارية لأطول فترة ممكنة. سوف يستنزف الموقع دون المستوى الأمثل البطارية بشكل أسرع بكثير مما يجب. قم بتقليل حركة بيانات الشبكة وتقليل الطلاء لتقليل استنزاف البطارية. عند جلب مورد، يجب أن يكون شبكة WiFi أو الراديو الخلوي قيد التشغيل، مما يؤدي إلى استنزاف البطارية. عندما يعرض المتصفح عنصرًا، يرتفع استخدام وحدة المعالجة المركزية ووحدة معالجة الرسومات، مما يؤدي أيضًا إلى استنزاف البطارية.
تفاعل
يساهم الأداء في تعزيز المقياس الأكثر أهمية بالنسبة إليك. وفي 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 في أداة Elements، وتمّ تمييز div بشكل مرئي على جهاز Android كما هو الحال على الكمبيوتر المكتبي.
يمكن أيضًا استخدام أداة Elements (لتشغيل الأنماط وإيقافها)، وهو ما سيكون مفيدًا عندما نحاول التحقّق من أوقات عرض الألوان.
تسليط الضوء على الوصول إلى الشبكة
يجب أن يكون أداء الشبكة في الوقت نفسه، وهو الآن أكثر أهمية على الويب على الأجهزة الجوّالة. غالبًا ما تكون الأجهزة المحمولة على اتصالات أبطأ من أجهزة الكمبيوتر المكتبية والكمبيوتر المحمول. للتأكّد من أنّك تتصرف بالطريقة الصحيحة، التقِط لقطة للشبكة بالانتقال إلى أداة الشبكة والضغط على "تسجيل".
تعرض لقطة الشاشة حركة بيانات الشبكة الناتجة من بحث Google. راقِب طلبات الشبكة التي يجريها موقعك الإلكتروني واعثر على طرق لتقليلها. إذا كان موقعك الإلكتروني يقدّم طلبات استطلاع إلى الخادم، ننصحك بالانتباه إلى نشاط المستخدم وتجنُّب الاستطلاع عندما يكون المستخدم غير نشِط لفترة قصيرة. تسمح لك أداة الشبكة بعرض عناوين HTTP الأولية، وهي مفيدة في حال كانت شبكات الجوّال تغيّرها.
تحسين أوقات عرض المحتوى
من أكبر المؤثِّرات السلبية في متصفحات الويب على الأجهزة الجوّالة طلاء صفحتك. الطلاء هو عملية رسم عنصر على الصفحة بالنمط المحدد. عندما يكون طلاء أحد العناصر مكلفًا، يؤدي إلى إبطاء طلاء الصفحة بأكملها. ويحاول Chrome تخزين العناصر التي تم رسمها سابقًا في مخزن مؤقت خارج الشاشة. ولكن على الأجهزة الجوّالة تكون سعة ذاكرة الوصول العشوائي المتوفرة لوحدة معالجة الرسومات محدودة، ما يحدّ من عدد العناصر التي يمكن تخزينها مؤقتًا خارج الشاشة. والأثر الجانبي هو عرض المزيد من الألوان وكل عملية عرض محتوى أبطأ من أجهزة سطح المكتب. من أجل الحصول على تمرير سريع الاستجابة، يجب عليك تقليل أوقات الطلاء.
يتضمن Chrome 25 وضع إعادة عرض الصفحات بشكل مستمر. إنّ وضع إعادة عرض الصفحة المتواصل لا يخزن أبدًا العناصر المرسومة مؤقتًا، وبدلاً من ذلك، يرسم جميع العناصر في كل إطار. من خلال فرض طلاء جميع العناصر في كل إطار، يمكن إجراء اختبار A/B لأوقات الطلاء عن طريق التبديل بين تشغيل العناصر وإيقافها، وتفعيل الأنماط وإيقافها. وعلى الرغم من أن هذه العملية يدوية، فهي أداة لا تقدر بثمن لتتبع مدى غلاء طلاء كل عنصر على صفحتك. والقاعدة الأولى لنادي التحسين هي قياس ما تحاول تحسينه للحصول على لنتناول مثالاً بسيطًا.
أولاً، عليك تفعيل وضع إعادة عرض الصفحات باستمرار:
بعد التفعيل، سيظهر رسم بياني في الزاوية العلوية اليسرى من جهاز Android. المحور x للرسم البياني هو الوقت، مقسمًا إلى إطارات. يقيس المحور ص في الرسم البياني زمن الطلاء بالمللي ثانية. يمكنك أن ترى أن عرض الصفحة على جهازي يستغرق 14 ميلي ثانية. ويتم أيضًا عرض الحد الأدنى والأقصى لأوقات الرسم مع ذاكرة وحدة معالجة الرسومات المستخدمة.
على سبيل التجربة، تم ضبط النمط على العنصر المحدّد ليكون display: none. لنرى مدى تكلفة
طلاء الصفحة الآن.
انخفضت مدة الطلاء من 14 ملي ثانية تقريبًا لكل إطار إلى 4 ملي ثانية لكل إطار. بعبارة أخرى، استغرق طلاء هذا العنصر ما يقرب من 10 ملي ثانية. ومن خلال اتباع عملية التبديل بين تشغيل العناصر وإيقافها وتشغيل الأنماط وإيقافها، يمكنك تضييق نطاق القسمة سريعًا على الأجزاء المكلفة لصفحتك. تذكر أن مدة الطلاء الأسرع تؤدي إلى تقليل الفاقد وإطالة عمر البطارية وزيادة تفاعل المستخدمين. عندما تكون مستعدًا للاطّلاع على مزيد من التفاصيل، احرص على قراءة هذه المقالة الرائعة حول وضع إعادة عرض الصفحات بشكل متواصل.
الميزات المتقدّمة
لمحة عن:التتبّع
والعديد من ميزات المطوّرين الأكثر تقدمًا والمتاحة في Chrome لأجهزة سطح المكتب متوفّرة أيضًا في متصفّح Android Chrome أيضًا. على سبيل المثال، 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 ليس منيعًا من المشاكل المتعلّقة بالأداء، كما أنّ موقعك الإلكتروني ليس كذلك. تزيد المواقع الإلكترونية العالية الأداء من تفاعل المستخدمين.