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

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

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

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

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

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

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

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

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

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

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

تحديد عنصر "سرعة عرض أكبر محتوى مرئي"

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

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

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

قد تجد أيضًا LCP تطبيق Bookmarklet من إعداد Annie يعتبر نظام Sullivan مفيدًا لتحديد عنصر سرعة عرض أكبر جزء من المحتوى على الصفحة (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 بشكل غير صحيح، وذلك من خلال عبارة "تم تحميل صورة أكبر من حيث الصفحة". التدقيق:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

يمكننا النقر بزر الماوس الأيمن على نص برمجي في لوحة شبكة أدوات مطوّري البرامج، ثم النقر على Block Request URL لحظره بها. هنا سنفعل ذلك لعنصر polyfill المراقب بين Intersection.

بعد ذلك، يمكننا إعادة تشغيل Lighthouse. هذه المرة يمكننا أن نرى أن نتيجة الأداء قد تحسنت (70/100) كما إجمالي وقت الحظر (400 ملي ثانية => 300 ملي ثانية).

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

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

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

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

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

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

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

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

الصورة الرئيسية من تصميم مرسيدس ميلينغ على Unسبل المساعدة