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

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

Addy Osmani

تاريخ النشر: 11 أيار (مايو) 2021

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

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

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

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

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

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

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

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

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

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

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

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

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

قد تجد أيضًا LCP Bookmarklet من إعداد آني سوليفان مفيدًا في تحديد عنصر 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 background؟ نعم.

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

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

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

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

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

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

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

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

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

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

تحديد CLS من الصور التي لا تحتوي على أبعاد

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

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

تحديد مقياس CLS من الإعلانات

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

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

• توخي الحذر عند وضع الإعلانات غير الثابتة بالقرب من أعلى إطار العرض
• تجنُّب عمليات التحويل من خلال حجز أكبر حجم ممكن لموضع الإعلان

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

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

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

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

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

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

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

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

حظر طلبات الشبكة للاطّلاع على التأثير قبل/بعد إجراء التغييرات في Lighthouse

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

تعمل ميزة "حظر طلبات الشبكة" أيضًا مع 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 في صفحتك، مثل تقليل الاعتماد على رموز polyfill والرموز المكرّرة التي قد لا تكون مطلوبة لتجربة المستخدم.

للحصول على مزيد من المعلومات حول أدوات Core Web Vitals، ننصحك بالتحقق بانتظام من حساب فريق Lighthouse على Twitter والميزات الجديدة في أدوات مطوري البرامج.

الصورة الرئيسية من تأليف Mercedes Mehling على Unsplash.