العثور على فرص لتحسين تجربة المستخدم باستخدام أدوات الويب في Chrome
تاريخ النشر: 11 أيار (مايو) 2021
سنتناول اليوم ميزات الأدوات الجديدة في Lighthouse وPageSpeed وDevTools للمساعدة في تحديد كيف يمكن تحسين أداء موقعك الإلكتروني في مؤشرات أداء الويب.
للتذكير بالأدوات، Lighthouse هي أداة مبرمَجة ومفتوحة المصدر لتحسين جودة صفحات الويب. يمكنك العثور عليه في مجموعة أدوات مطوري البرامج في Chrome وتشغيله على أي صفحة ويب، سواء كانت متاحة للجميع أو تتطلّب مصادقة. يمكنك أيضًا العثور على Lighthouse في إحصاءات PageSpeed و CI و WebPageTest.
تتضمّن أداة Lighthouse 7.x ميزات جديدة، مثل لقطات شاشة للعناصر، لتسهيل الفحص البصري ل أجزاء واجهة المستخدم التي تؤثّر في مقاييس تجربة المستخدم (مثل العقد التي تساهم في تغيير التنسيق).
لقد وفّرنا أيضًا إمكانية التقاط لقطات شاشة للعناصر في PageSpeed Insights، ما يتيح إمكانية رصد المشاكل بسهولة أكبر في عمليات قياس الأداء لمرة واحدة للصفحات.
قياس "مؤشرات أداء الويب الأساسية"
يمكن لأداة Lighthouse بشكل اصطناعي قياس مقاييس Core Web Vitals، بما في ذلك سرعة عرض أكبر محتوى مرئي ومتغيّرات التصميم التراكمية وإجمالي وقت الحظر (وهو وكيل مختبر لمهلة الاستجابة لأول إدخال). تعكس هذه المقاييس سرعة التحميل وثبات التنسيق ومدى جاهزية التفاعل. تتوفّر أيضًا مقاييس أخرى، مثل سرعة عرض المحتوى على الصفحة التي تم تمييزها في مستقبل مؤشرات أداء الويب الأساسية.
يتضمّن قسم "المقاييس" في تقرير Lighthouse إصدارات تجريبية من هذه المقاييس. يمكنك استخدام هذا التقرير كملخّص يعرض الجوانب التي تستدعي اهتمامك في تجربة المستخدم.
لا تواجه مقاييس الحقول، مثل تلك الواردة في تقرير تجربة مستخدمي Chrome أو RUM، هذا المحدود ويُعدّ هذا النوع من المقاييس مكملاً قيّمًا لبيانات المختبر، لأنّه يعكس تجربة المستخدمين الفعليين. لا يمكن أن تقدّم البيانات الميدانية أنواع المعلومات التشخيصية التي تحصل عليها في المختبر، لذلك يرتبطان ببعضهما بشدّة.
تحديد الجوانب التي يمكنك تحسينها في "مؤشرات أداء الويب"
تحديد عنصر "سرعة عرض أكبر جزء من المحتوى على الصفحة"
إنّ LCP هو مقياس لتجربة التحميل التي يلاحظها المستخدم. ويحدِّد هذا المقياس النقطة أثناء تحميل الصفحة التي تم فيها تحميل المحتوى الأساسي أو "الأكثر حجمًا" وأصبح مرئيًا للمستخدم.
يتضمّن Lighthouse عملية تدقيق "عنصر سرعة عرض أكبر جزء من المحتوى على الصفحة" لتحديد العنصر الذي كان أبرز عنصر في مقياس سرعة عرض أكبر جزء من المحتوى على الصفحة. سيؤدي تمرير مؤشر الماوس فوق العنصر إلى تمييزه في نافذة المتصفّح الرئيسية.
إذا كان هذا العنصر صورة، هذه المعلومات هي تلميح مفيد يشير إلى أنّه عليك تحسين عملية تحميل هذه الصورة. يتضمّن Lighthouse عددًا من عمليات التدقيق في تحسين الصور لمساعدتك في معرفة ما إذا كان بالإمكان ضغط صورك أو تغيير حجمها أو عرضها بتنسيق ملف صور حديث ومُحسَّن بشكلٍ أفضل.
قد يكون أيضًا Bookmarklet LCP من إنشاء Annie Sullivan مفيدًا لتحديد عنصر LCP بسرعة باستخدام مستطيل أحمر بنقرة واحدة فقط.
تحميل الصور التي تم اكتشافها لاحقًا مسبقًا لتحسين مقياس LCP
لتحسين مقياس Largest Contentful Paint، يمكنك تحميل محتوى صورك المميّزة المعروضة في المقدّمة مسبقًا إذا كان المتصفّح يرصدها في وقت متأخر. يمكن أن يحدث الاكتشاف المتأخر إذا كان يجب تحميل حزمة JavaScript قبل أن تصبح الصورة قابلة للاكتشاف.
هناك بعض الأسئلة الشائعة التي يتم طرحها علينا حول التحميل المُسبَق لصور LCP والتي قد يكون من المفيد أيضًا تغطيتها بشكل موجز.
هل يمكنك تحميل الصور المتجاوبة مسبقًا؟ نعم.
لنفترض أنّ لدينا صورة رئيسية سريعة الاستجابة كما هو محدّد باستخدام srcset وsizes أدناه:
<img src="lighthouse.jpg"
srcset="lighthouse_400px.jpg 400w,
lighthouse_800px.jpg 800w,
lighthouse_1600px.jpg 1600w" sizes="50vw" alt="A helpful
Lighthouse">
بفضل السمتَين imagesrcset وimagesizes اللتين تمت إضافتهما إلى السمة link، يمكننا
تحميل صورة سريعة الاستجابة مسبقًا باستخدام منطق اختيار الصور نفسه المستخدَم في السمتَين srcset وsizes:
<link rel="preload" as="image" href="lighthouse.jpg"
imagesrcset="lighthouse_400px.jpg 400w,
lighthouse_800px.jpg 800w,
lighthouse_1600px.jpg 1600w"
imagesizes="50vw">
هل ستسلّط عملية التدقيق الضوء أيضًا على فرص التحميل المُسبَق إذا تم تحديد صورة LCP من خلال CSS background؟ نعم.
أي صورة تم وضع علامة عليها كصورة LCP، سواء من خلال خلفية CSS أو <img>، تكون مرشحة إذا تم اكتشافها عند عمق تدفق يبلغ ثلاثة أو أكثر.
التحميل الكسول للصور التي لا تظهر على الشاشة وتجنُّب ذلك في ما يتعلّق بمقياس سرعة عرض أكبر محتوى مرئي (LCP)
يمكن تحميل الصور غير المعروضة على الشاشة بشكل بطيء إذا لم تكن ضرورية لتجربة المستخدم الأولية. هذه تقنية تؤخّر تنزيل صورة إلى أن ينتقل المستخدم بالقرب منها، ما يمكن أن يقلل من ازدحام الشبكة لملفات الأصول المهمة، ويؤدي في بعض الحالات إلى تحسين مقياس LCP. يمكن أن تساعدك عملية التدقيق "تأجيل تحميل الصور خارج الشاشة" في ما يلي:
يجب عدم تحميل الصور المهمة التي تظهر في الجزء العلوي من الصفحة باستخدام طريقة التحميل الكسول، مثل صورة مقياس "سرعة عرض أكبر جزء من المحتوى على الصفحة". وقد يؤدي ذلك إلى تأخير تحميل صورة LCP. سيُبرز Lighthouse ما إذا كانت صورة LCP يتم عرضها بشكل غير صحيح من خلال التدقيق "تم عرض أكبر صورة ظاهرة في الصفحة بسرعة غير مناسبة":
تحديد المساهمات في متغيّرات التصميم التراكمية (CLS)
متغيّرات التصميم التراكمية هي مقياس للثبات البصري. ويحدّد هذا المقياس كمّية تغيُّر محتوى الصفحة بشكل مرئي. تتضمّن أداة Lighthouse عملية تدقيق لتصحيح أخطاء مقياس CLS تُسمى "تجنُّب التغيُّرات الكبيرة في التصميم".
تُبرز عملية التدقيق هذه عناصر نموذج DOM التي تساهم بشكلٍ كبير في تغييرات الصفحة. في عمود Element على يمين الصفحة، ستظهر لك قائمة بعناصر DOM هذه، وعلى يسار الصفحة، ستظهر مساهمتها الإجمالية في متغيّر التصميم التراكمية (CLS).
بفضل ميزة "لقطات شاشة العناصر" الجديدة في Lighthouse، يمكننا الاطّلاع على معاينة مرئية للعناصر الرئيسية التي تمّت الإشارة إليها في عملية التدقيق، بالإضافة إلى النقر للتكبير للحصول على عرض أوضح:
بالنسبة إلى متغيّرات التصميم التراكمية (CLS) بعد التحميل، قد يكون من المفيد بشكلٍ دائم استخدام المستطيلات لعرض العناصر التي ساهمت بشكلٍ أكبر في متغيّرات التصميم التراكمية (CLS). هذه ميزة ستجدها في أدوات تابعة لجهات خارجية، مثل لوحة بيانات "مؤشرات أداء الويب الأساسية" من SpeedCurve، والتي أحب استخدام أداة إنشاء ملفات GIF لقياس Layout Shift من Defaced من أجل:
للحصول على نظرة عامة على مشاكل تغيُّر التنسيق على مستوى الموقع الإلكتروني، أستفيد كثيرًا من تقرير "مؤشرات أداء الويب الأساسية" في Search Console. يتيح لي ذلك الاطّلاع على أنواع الصفحات على موقعي الإلكتروني التي تسجِّل قيمة عالية لمقياس CLS (في هذه الحالة، يساعدني ذلك في تحديد العناصر المكوّنة للنموذج التي يجب أن أقضي وقتي عليها):
تحديد CLS من الصور التي لا تحتوي على أبعاد
للحدّ من متغيّرات التصميم التراكمية (CLS) الناتجة عن الصور التي لا تتضمّن سمات الأبعاد، أدرِج سمتَي العرض والارتفاع في صورك وعناصر الفيديو. يضمن هذا النهج أن يتمكّن المتصفّح من تخصيص المساحة الصحيحة في المستند أثناء تحميل الصورة.
اطّلِع على المقالة أهمية ضبط الارتفاع والعرض للصور مجددًا للحصول على قراءة مفيدة عن أهمية التفكير في أبعاد الصورة ونسبة العرض إلى الارتفاع.
تحديد مقياس CLS من الإعلانات
تتيح لك ميزة إعلانات الناشرين في Lighthouse العثور على فرص لتحسين تجربة تحميل الإعلانات على صفحتك، بما في ذلك المساهمات في تغيير التنسيق والمهام الطويلة التي قد تؤدي إلى تأخير إمكانية استخدام المستخدمين لصفحتك. في Lighthouse، يمكنك تفعيل هذه الميزة من خلال "مكوّنات المنتدى".
تذكَّر أنّ الإعلانات هي أحد العوامل التي تساهم بشكلٍكبير في تغييرات التنسيق على الويب. من المهم إجراء ما يلي:
- توخي الحذر عند وضع الإعلانات غير الثابتة بالقرب من أعلى إطار العرض
- تجنُّب عمليات التحويل من خلال حجز أكبر حجم ممكن لموضع الإعلان
تجنُّب الصور المتحركة غير المركّبة
يمكن أن تظهر الصور المتحركة غير المركّبة بجودة رديئة على الأجهزة المنخفضة الأداء إذا كانت المهام المكثفة باستخدام JavaScript تشغل سلسلة المحادثات الرئيسية. ويمكن أن تؤدي هذه الرسوم المتحركة إلى تغييرات في التنسيق.
إذا اكتشف Chrome أنّه لا يمكن دمج صورة متحركة، يُبلغ عن ذلك في عملية تتبُّع DevTools التي يقرأها Lighthouse، ما يتيح له إدراج العناصر التي تتضمّن صورًا متحركة والتي لم تتم دمجها وتحديد سبب عدم الدمج. يمكنك العثور على هذه الصور في عملية تدقيق تجنُّب استخدام الصور المتحركة غير المركّبة.
تصحيح أخطاء مهلة الاستجابة لأوّل إدخال / إجمالي وقت الحظر / المهام الطويلة
يقيس مقياس "مهلة الاستجابة لأوّل إدخال" الوقت المستغرَق بدءًا من تفاعل المستخدِم مع الصفحة لأول مرة (مثلاً عندما ينقر على رابط أو زر أو يستخدم عنصر تحكّم مخصّصًا أو يستند إلى JavaScript) ولغاية وقت تمكّن المتصفّح من بدء معالجة عناصر التحكّم في الأحداث استجابةً لذلك التفاعل. يمكن أن تؤثر مهام JavaScript الطويلة في هذا المقياس ووسيط هذا المقياس، وهو "إجمالي وقت الحظر".
يتضمّن Lighthouse عملية تدقيق تجنُّب المهام التي تستغرق وقتًا طويلاً في سلسلة التعليمات الرئيسية التي تُدرج المهام التي تستغرق وقتًا أطول في سلسلة التعليمات الرئيسية. يمكن أن يكون ذلك مفيدًا لتحديد أكثر العوامل التي تسبِّب تأخيرًا في عملية الإدخال. في العمود الأيمن، يمكننا الاطّلاع على عنوان URL للنصوص البرمجية المسؤولة عن المهام الطويلة في سلسلة المحادثات الرئيسية.
على يسار الصفحة، يمكننا الاطّلاع على مدة هذه المهام. للتذكير، "المهام الطويلة" هي المهام التي تستغرق تنفيذها أكثر من 50 ملي ثانية. ويُعدّ ذلك حظرًا لسلسلة التعليمات الرئيسية لفترة طويلة بما يكفي لتأثيره في معدل عرض اللقطات أو وقت استجابة الإدخال.
في حال التفكير في استخدام خدمات تابعة لجهات خارجية للتتبّع، أُفضّل أيضًا مخطط المخطط الزمني لتنفيذ السلسلة الرئيسية المرئي في Calibre لعرض هذه التكاليف، ما يُبرز كلاً من المهام الرئيسية والمهام الفرعية التي تساهم في المهام الطويلة التي تؤثّر في التفاعل.
حظر طلبات الشبكة للاطّلاع على التأثير قبل/بعد إجراء التغييرات في Lighthouse
تتيح لك أدوات Chrome المطوّرين حظر طلبات الشبكة لمعرفة تأثير إزالة موارد فردية أو عدم توفّرها. يمكن أن يكون ذلك مفيدًا لفهم التكلفة التي تُحدثها النصوص البرمجية الفردية (مثل عمليات التضمين أو التتبُّع التابعة لجهات خارجية) على مقاييس مثل إجمالي وقت الحظر (TBT) ووقت الاستجابة.
تعمل ميزة "حظر طلبات الشبكة" أيضًا مع Lighthouse. لنلقِ نظرة سريعة على تقرير Lighthouse لأحد المواقع الإلكترونية. نتيجة الأداء هي 63/100 مع وقت استجابة للصفحة يبلغ 400 ملي ثانية. عند الاطّلاع على الرمز البرمجي، تبيّن لنا أنّ هذا الموقع الإلكتروني يحمّل polyfill Intersection Observer في Chrome، وهو أمر غير ضروري. لنقم بحظره.
يمكننا النقر بزر الماوس الأيمن على نص برمجي في لوحة "الشبكة" في "أدوات مطوّري البرامج" والنقر على Block Request URL لحظر
النص البرمجي. سنفعل ذلك هنا مع عنصر Intersection Observer polyfill.
بعد ذلك، يمكننا إعادة تشغيل Lighthouse. نلاحظ هذه المرة أنّ نتيجة الأداء قد تحسّنت (70/100) لأنّه تم تقليل إجمالي وقت الحظر (400 ملي ثانية => 300 ملي ثانية).
استبدال عمليات التضمين المكلّفة التابعة لجهات خارجية بواجهة
من الشائع استخدام مصادر تابعة لجهات خارجية لتضمين الفيديوهات أو المشاركات على وسائل التواصل الاجتماعي أو التطبيقات المصغّرة في الصفحات. يتم تلقائيًا تحميل معظم عمليات التضمين على الفور ويمكن أن تتضمّن حِزم بيانات ذات تكلفة عالية تؤثر سلبًا في تجربة المستخدم. ويُعدّ ذلك إهدارًا للموارد إذا لم تكن الجهة الخارجية ضرورية (على سبيل المثال، إذا كان على العميل التمرير للأسفل قبل الاطّلاع عليها).
من أحد الأنماط لتحسين أداء التطبيقات المصغّرة هذه هو تحميلها بشكلٍ بطيء عند تعامل المستخدمين معها. ويمكن إجراء ذلك من خلال عرض معاينة خفيفة الوزن للتطبيق المصغّر (واجهة) وتحميل النسخة الكاملة فقط إذا تفاعل المستخدم معها. يتضمّن Lighthouse عملية تدقيق تقترح الموارد التابعة لجهات خارجية التي يمكن تحميلها ببطء مع واجهة، مثل عمليات تضمين فيديوهات YouTube.
للتذكير، سيُبرز Lighthouse الرمز البرمجي التابع لجهة خارجية الذي يحظر السلسلة الرئيسية لمدة تزيد عن 250 ملي ثانية. ويمكن أن يؤدي ذلك إلى عرض جميع أنواع النصوص البرمجية التابعة لجهات خارجية (بما في ذلك النصوص البرمجية التي أنشأتها Google) التي قد يكون من الأفضل تأخير تحميلها أو تحميلها بشكل بطيء إذا كان المحتوى الذي تعرِضه يتطلّب الانتقال إلى الأسفل أو الأعلى لعرضه.
تحسين الأداء خارج نطاق "مؤشرات أداء الويب الأساسية"
بالإضافة إلى تسليط الضوء على "مؤشرات أداء الويب الأساسية"، تحاول الإصدارات الحديثة من Lighthouse و"إحصاءات PageSpeed" أيضًا تقديم إرشادات ملموسة يمكنك اتّباعها لتحسين سرعة تحميل تطبيقات الويب التي تستخدم JavaScript بشكل كبير إذا كانت خرائط المصدر مفعّلة.
وتشمل هذه المراجعات مجموعة متنامية من عمليات التدقيق لتقليل تكلفة JavaScript في صفحتك، مثل تقليل الاعتماد على polyfills والنُسخ المكرّرة التي قد لا تكون ضرورية لتجربة المستخدم.
لمزيد من المعلومات حول أدوات "مؤشرات أداء الويب الأساسية"، يمكنك متابعة حساب فريق Lighthouse على Twitter والميزات الجديدة في DevTools.
الصورة الرئيسية من تأليف Mercedes Mehling على Unsplash.