تحسين "مؤشرات أداء الويب" باستخدام أداة Lighthouse

البحث عن فرص لتحسين تجربة المستخدم من خلال أدوات الويب في Chrome.

سنتطرّق اليوم إلى ميزات أدوات جديدة في Lighthouse وPageSpeed وDevTools للمساعدة في تحديد كيفية تحسين موقعك الإلكتروني في مؤشرات أداء الويب.

لتجديد معلوماتك حول الأدوات، إنّ Lighthouse هي أداة مبرمَجة ومفتوحة المصدر لتحسين جودة صفحات الويب. يمكنك العثور عليه في مجموعة أدوات مطوري البرامج في Chrome من أدوات تصحيح الأخطاء وتشغيله على أي صفحة ويب عامة أو تتطلب مصادقة. يمكنك أيضًا العثور على أداة Lighthouse في إحصاءات PageSpeed وCI وWebPageTest.

يتضمّن الإصدار 7.x من Lighthouse ميزات جديدة، مثل لقطات شاشة للعناصر، لتسهيل الفحص البصري لأجزاء واجهة المستخدم التي تؤثر في مقاييس تجربة المستخدم (مثل العُقد التي تساهم في تغيُّر التصميم).

وتم أيضًا توفير لقطات شاشة للعناصر في إحصاءات PageSpeed، ما أتاح طريقةً لرصد المشاكل بسهولة أكبر في ما يخص عمليات التنفيذ لمرة واحدة للصفحات.

قياس "مؤشرات أداء الويب الأساسية"

ويمكن لأداة Lighthouse الاصطناعية قياس مقاييس "مؤشرات أداء الويب الأساسية"، بما في ذلك سرعة عرض أكبر جزء من المحتوى على الصفحة ومتغيّرات التصميم التراكمية وإجمالي مدة الحظر (خادم وكيل معملي لـ مهلة الاستجابة لأوّل إدخال). تعكس هذه المقاييس التحميل وثبات التصميم وجاهزية التفاعل. تتوفّر أيضًا مقاييس أخرى، مثل سرعة عرض المحتوى على الصفحة التي تم تمييزها في مستقبل "مؤشرات أداء الويب الأساسية".

يتضمّن قسم "المقاييس" في تقرير Lighthouse إصدارات مُختبَرة لهذه المقاييس. يمكنك استخدام هذا لعرض ملخص لجوانب تجربة المستخدم التي تتطلب انتباهك.

لا تفرض مقاييس الحقول، مثل تلك الواردة في تقرير تجربة المستخدم في Chrome أو RUM، هذا القيود، وهي مكمّلة قيّمة لبيانات المختبر، لأنّها تعكس التجربة التي يحظى بها المستخدمون. لا يمكن للبيانات الميدانية أن تقدم أنواع معلومات التشخيص التي تحصل عليها في المختبر، لذلك يسير الاثنان جنبًا إلى جنب.

تحديد الجوانب التي يمكنك تحسينها في "مؤشرات أداء الويب"

تحديد مقياس "سرعة عرض أكبر جزء من المحتوى على الصفحة"

إنّ LCP هو قياس لتجربة التحميل التي يتم رصدها. ويحدّد هذا العنصر النقطة أثناء تحميل الصفحة عند تحميل المحتوى الأساسي أو "الأكبر" وظهوره للمستخدم.

أجرت أداة Lighthouse عملية تدقيق بعنوان "سرعة عرض أكبر جزء من المحتوى على الصفحة" لتحديد العنصر الذي كان "سرعة عرض أكبر جزء من المحتوى على الصفحة". يؤدي تحريك مؤشر الماوس فوق العنصر إلى تمييزه في نافذة المتصفح الرئيسية.

إذا كان هذا العنصر عبارة عن صورة، تكون هذه المعلومات تلميحًا مفيدًا بأنك قد تحتاج إلى تحسين تحميل هذه الصورة. تتضمّن أداة Lighthouse عددًا من عمليات التدقيق في تحسين الصور لمساعدتك في معرفة ما إذا كان من الممكن ضغط صورك أو تغيير حجمها أو تقديمها بتنسيق صورة عصري أكثر.

وقد تجد أيضًا الإشارات المرجعية لمقياس LCP من تأليف "آني سوليفان" مفيدة لتحديد عنصر سرعة عرض أكبر جزء من المحتوى على الصفحة (LCP) باستخدام مستطيل أحمر بنقرة واحدة فقط.

تحميل الصور المكتشفة مؤخرًا لتحسين سرعة LCP

لتحسين سرعة عرض أكبر جزء من المحتوى على الصفحة، حمِّل مسبقًا صور الجزء الرئيسي المهمّة إذا تم اكتشافها متأخرًا عن طريق المتصفح. قد يحدث اكتشاف متأخر إذا احتاج إلى تحميل حزمة 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؟ نعم.

سيتم تصنيف أي صورة على أنّها صورة LCP سواء تم عرضها في خلفية CSS أو عبر <img> إذا تم اكتشافها على عمق شلال لا يزيد عن ثلاثة أو أكثر.

طريقة التحميل الكسول للصور خارج الشاشة وتجنُّب ذلك من أجل سرعة عرض أكبر جزء من المحتوى على الصفحة (LCP)

بالنسبة إلى الصور التي لا تتعلّق بتجربة المستخدم الأولية، يمكن التحميل الكسول. تعمل هذه التقنية على تأجيل تنزيل الصورة حتى ينتقل المستخدم للأسفل بالقرب منها، ما يمكن أن يقلّل من التنافس على الشبكة بالنسبة إلى مواد العرض المهمة وفي بعض الحالات تحسين سرعة عرض أكبر جزء من المحتوى على الصفحة (LCP). يمكن أن يساعدك تدقيق "تأجيل الصور خارج الشاشة" في ما يلي:

يجب عدم استخدام طريقة التحميل الكسول للصور المهمة في الجزء المرئي من الصفحة، مثل "سرعة عرض أكبر جزء من المحتوى على الصفحة". قد يؤدي ذلك إلى تأخير تحميل صورة LCP ستوضّح أداة Lighthouse ما إذا تم تحميل صورة LCP باستخدام طريقة التحميل الكسول لسرعة عرض أكبر جزء من المحتوى على الصفحة (LCP)، وذلك من خلال عملية التدقيق "تم التحميل الكسول لسرعة عرض أكبر جزء من المحتوى على الصفحة":

تحديد مساهمات متغيّرات التصميم التراكمية (CLS)

"متغيّرات التصميم التراكمية" هي قياس للثبات البصري. فهو يحدد مقدار التغيير الذي طرأ على محتوى الصفحة بصريًا. أجرت أداة Lighthouse تدقيقًا لتصحيح أخطاء متغيّرات التصميم التراكمية (CLS) باسم "تجنُّب نوبات التصميم الكبيرة".

يبرز هذا التدقيق عناصر DOM التي تساهم بأكبر قدر في تغيير محتوى الصفحة. في عمود "العنصر" على اليسار، ستظهر لك قائمة بعناصر DOM هذه، وعلى اليسار، سترى مساهمة متغيّرات التصميم التراكمية (CLS) الإجمالية.

بفضل ميزة "لقطات شاشة من Lighthouse Element" الجديدة، يمكننا رؤية معاينة مرئية للعناصر الرئيسية المذكورة في عملية التدقيق بالإضافة إلى ميزة النقر للتكبير أو التصغير للحصول على عرض أوضح:

بالنسبة إلى متغيّرات التصميم التراكمية (CLS) بعد التحميل، يمكن الاستفادة من عرض المستطيلات بشكل مستمر وهو العناصر التي ساهمت بأكبر قدر في متغيّرات التصميم التراكمية (CLS). هذه الميزة متوفّرة في الأدوات التابعة لجهات خارجية، مثل لوحة بيانات "مؤشرات أداء الويب الأساسية" في SpeedCurve، والتي تعجبني في استخدام أداة إنشاء ملفات GIF Layout Shift من Defaced من أجل:

للاطّلاع على المشاكل المتعلّقة بمتغيّرات التصميم على مستوى الموقع الإلكتروني، نجد أنَّ تقرير "مؤشرات أداء الويب الأساسية" في Search Console يتطلّب الكثير من الوقت. يتيح لي ذلك الاطّلاع على أنواع الصفحات على موقعي الإلكتروني التي لها قيمة مرتفعة متغيّرات التصميم التراكمية (CLS) (في هذه الحالة تساعدني في تحديد أجزاء من النموذج الذي أحتاج إلى قضاء وقتي عليه):

تحديد متغيّرات التصميم التراكمية (CLS) من الصور بدون أبعاد

للحدّ من متغيّرات التصميم التراكمية الناتجة عن الصور بدون أبعاد، أدرِج سمات العرض وحجم الارتفاع في الصور وعناصر الفيديو. يضمن هذا الأسلوب أن يتمكّن المتصفح من تخصيص المساحة الصحيحة في المستند أثناء تحميل الصورة.

راجِع القسم ضبط الارتفاع والعرض على الصور مهم مرة أخرى للحصول على شرح جيد لأهمية التفكير في أبعاد الصورة ونسبة العرض إلى الارتفاع.

تحديد متغيّرات التصميم التراكمية (CLS) من الإعلانات

تتيح لك أداة Publisher Ads for Lighthouse إمكانية العثور على فرص لتحسين تجربة تحميل الإعلانات على صفحتك، بما في ذلك المساهمات في متغيّرات التصميم والمهام الطويلة التي قد تؤدي إلى زيادة سرعة استخدام المستخدمين لصفحتك. في Lighthouse، يمكنك تفعيل هذه الميزة من خلال "المكوّنات الإضافية للمنتدى".

تذكَّر أنّ الإعلانات هي أحد أكبر المساهمين في تغييرات التصميم على الويب. من المهم أن:

• يجب توخي الحذر عند وضع إعلانات غير لاصقة بالقرب من أعلى إطار العرض.
• القضاء على التحولات من خلال حجز أكبر حجم ممكن للشريحة الإعلانية

تجنُّب الصور المتحركة غير المركّبة

يمكن للصور المتحركة غير المركّبة أن تعرِّف نفسها بأنّها رديئة على الأجهزة ذات التقنية البسيطة إذا كانت مهام JavaScript الثقيلة تسبب انشغال سلسلة التعليمات الرئيسية. يمكن أن تؤدي هذه الرسوم المتحركة إلى حدوث متغيّرات في التصميم.

وإذا اكتشف Chrome أنه يتعذّر إنشاء صورة متحركة، يتم إبلاغه بذلك في سجلّ "أدوات مطوري البرامج" الذي تقرأه أداة Lighthouse، ما يسمح له بإدراج العناصر ذات الصور المتحركة التي لم يتم تركيبها ولأي سبب كان. ويمكنك العثور عليها في تدقيق تجنُّب الصور المتحركة غير المركّبة.

تصحيح أخطاء تأخير الإدخال الأول / إجمالي وقت الحظر / المهام الطويلة

يقيس "الإدخال الأول" الوقت المنقضي منذ تفاعل المستخدم مع صفحة لأول مرة (مثلاً عند النقر على رابط أو النقر على زر أو استخدام عنصر تحكّم مخصّص مستند إلى JavaScript) إلى الوقت الذي يكون فيه المتصفّح قادرًا على بدء معالجة معالجات الأحداث استجابةً لهذا التفاعل. قد تؤثر مهام JavaScript الطويلة في هذا المقياس والخادم الوكيل لهذا المقياس، وهو إجمالي وقت الحظر.

تشتمِل أداة Lighthouse على عملية تدقيق بعنوان تجنُّب المهام التي تتضمّن سلسلة تعليمات رئيسية طويلة والتي تعرض قائمة بأطول المهام في سلسلة التعليمات الرئيسية. يمكن أن يكون هذا مفيدًا في تحديد أسوأ المساهمين في تأخير الإدخال. في العمود الأيمن، يمكننا رؤية عنوان URL للنصوص البرمجية المسؤولة عن مهام سلسلة التعليمات الرئيسية الطويلة.

على يسار الصفحة، يمكننا رؤية مدة هذه المهام. للتذكير، المهام الطويلة هي مهام يتم تنفيذها لمدة أطول من 50 مللي ثانية. يساعد ذلك في حظر سلسلة التعليمات الرئيسية لفترة كافية للتأثير في عدد اللقطات في الثانية أو وقت استجابة الإدخال.

إذا كنت أفكّر في استخدام خدمات تابعة لجهات خارجية للمراقبة، يعجبني أيضًا المخطط الزمني لتنفيذ سلسلة التعليمات الرئيسية الذي يوفّره Calibre لعرض هذه التكاليف بشكل مرئي، والذي يسلّط الضوء على المهام الرئيسية والفرعية التي تساهم في إنجاز مهام طويلة تؤثر في التفاعل.

حظر طلبات الشبكة للاطّلاع على التأثير السابق أو التالي في Lighthouse

تتيح أدوات مطوري البرامج في Chrome حظر طلبات الشبكة لمعرفة تأثير إزالة الموارد الفردية أو عدم توفّرها. يمكن أن يكون هذا مفيدًا في فهم تكلفة النصوص البرمجية الفردية (مثل برامج التتبّع أو التضمينات التابعة لجهات خارجية) على مقاييس مثل إجمالي وقت الحظر (TBT) و"وقت التفاعل".

تتوافق ميزة حظر طلبات الشبكة أيضًا مع Lighthouse. لنلقِ نظرة سريعة على تقرير Lighthouse لأحد المواقع. نتيجة الأداء هي 63/100 مع مقياس TBT يبلغ 400 ملي ثانية. بالتعمّق في الرمز، نجد أن هذا الموقع يحمّل رمز polyfill لتقاطع التقاطعات في Chrome وهو ليس ضروريًا. دعنا نحظره!

يمكننا النقر بزر الماوس الأيمن على نص برمجي في لوحة شبكة DevTools والنقر على Block Request URL لحظره. سنفعل هنا ذلك لتعويض تقاطع مراقبي.

بعد ذلك يمكننا إعادة تشغيل Lighthouse. يمكننا هذه المرة تحسُّن نتيجة أدائنا (70/100) كما ازدادت مدة الحظر الإجمالية (400 ملّي ثانية => 300 ملي ثانية).

استبدال التضمينات المكلفة التابعة لجهات خارجية بواجهة

من الشائع استخدام موارد تابعة لجهات خارجية لتضمين فيديوهات أو مشاركات على وسائل التواصل الاجتماعي أو التطبيقات المصغّرة في الصفحات. بشكل تلقائي، يتم تحميل معظم التضمينات بفارغ الصبر على الفور، ويمكن أن تتضمّن أحمالًا مكلفة تؤثر سلبًا في تجربة المستخدم. وهذا مضيعة للوقت إذا لم تكن الجهة الخارجية مهمة (على سبيل المثال، إذا كان المستخدم بحاجة إلى الانتقال للأسفل أو للأعلى قبل رؤيته).

يتمثل أحد الأنماط لتحسين أداء هذه الأدوات في التحميل الكسول لها عند تفاعل المستخدم. ويمكن إجراء ذلك من خلال عرض معاينة بسيطة للأداة (واجهة) وعدم تحميل النسخة الكاملة إلا إذا تفاعل المستخدم معها. أجرت أداة Lighthouse عملية تدقيق تقترح موارد تابعة لجهات خارجية يمكن تحميلها الكسول بواجهة، مثل تضمينات فيديوهات YouTube.

نذكّرك بأنّ أداة Lighthouse ستميّز رموز الجهات الخارجية التي تحظر سلسلة التعليمات الرئيسية لأكثر من 250 ملّي ثانية. ويمكن أن يكشف ذلك عن جميع أنواع النصوص البرمجية التابعة لجهات خارجية (بما في ذلك تلك التي ألفتها Google) والتي قد يكون من الأفضل تأجيلها أو التحميل الكسول إذا كان ما تعرضه يتطلب التمرير لعرضه.

خارج "مؤشرات أداء الويب الأساسية"

بالإضافة إلى إبراز "مؤشرات أداء الويب الأساسية"، تحاول أيضًا الإصدارات الحديثة من Lighthouse وPageSpeed Insights تقديم إرشادات ملموسة يمكنك اتّباعها لتحسين سرعة تحميل تطبيقات الويب التي تتضمّن كثافة JavaScript في حال تفعيل خرائط المصدر.

ويتضمّن ذلك مجموعة متزايدة من عمليات التدقيق لتقليل تكلفة JavaScript في صفحتك، مثل تقليل الاعتماد على رموز polyfills والنُسخ المكرّرة التي قد لا تكون مطلوبة لتحسين تجربة المستخدم.

لمزيد من المعلومات حول أدوات "مؤشرات أداء الويب الأساسية"، يُرجى متابعة حساب فريق Lighthouse على Twitter والميزات الجديدة في "أدوات مطوري البرامج".

صورة رئيسية من تقديم مرسيدس ميهلينغ على موقع Unsplash