العثور على فرص لتحسين تجربة المستخدم من خلال أدوات الويب في Chrome
تاريخ النشر: 11 مايو 2021
سنتناول اليوم ميزات الأدوات الجديدة في Lighthouse وPageSpeed وأدوات مطوري البرامج للمساعدة في تحديد كيفية تحسين موقعك الإلكتروني في Web Vitals.
للتذكير، Lighthouse هي أداة مبرمَجة ومفتوحة المصدر لتحسين جودة صفحات الويب. ويمكنك العثور عليها في مجموعة أدوات تصحيح الأخطاء أدوات مطوّري البرامج في Chrome وتشغيلها على أي صفحة ويب، سواء كانت متاحة للجمهور أو تتطلب مصادقة. يمكنك أيضًا العثور على Lighthouse في إحصاءات PageSpeed وCI وWebPageTest.
يتضمّن Lighthouse 7.x ميزات جديدة، مثل لقطات شاشة للعناصر، لتسهيل الفحص المرئي لأجزاء من واجهة المستخدم التي تؤثر في مقاييس تجربة المستخدم (مثل العُقد التي تساهم في متغيّرات التصميم).
أضفنا أيضًا ميزة تتيح أخذ لقطات شاشة للعناصر في إحصاءات PageSpeed، ما يسهّل رصد المشاكل في عمليات تشغيل الأداء لمرة واحدة للصفحات.
قياس مؤشرات Core Web Vitals
يمكن لأداة Lighthouse قياس مقاييس Core Web Vitals بشكل اصطناعي، بما في ذلك سرعة عرض أكبر محتوى مرئي ومتغيّرات التصميم التراكمية وإجمالي وقت الحظر (وهو مقياس بديل في المختبر لـ مهلة الاستجابة الأولى). وتعكس هذه المقاييس سرعة التحميل وثبات التصميم ومدى الاستعداد للتفاعل. تتوفّر أيضًا مقاييس أخرى، مثل سرعة عرض أول محتوى مرئي، والتي تم تسليط الضوء عليها في مقالة Core Web Vitals.
يتضمّن قسم "المقاييس" في تقرير 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 بشكل بطيء":
تحديد المساهمات في متغيّرات التصميم التراكمية
"متغيّرات التصميم التراكمية" هي مقياس للثبات البصري. ويقيس مقدار التغيير المرئي في محتوى الصفحة. تتضمّن أداة Lighthouse تدقيقًا لتصحيح أخطاء متغيّرات التصميم التراكمية (CLS) يُعرف باسم "تجنُّب متغيّرات التصميم التراكمية الكبيرة".
تسلّط عملية التدقيق هذه الضوء على عناصر DOM التي تساهم بشكل أكبر في متغيّرات الصفحة. في عمود "العنصر" (Element) على اليمين، ستظهر لك قائمة بعناصر DOM هذه، وإلى اليسار، ستظهر لك مساهمتها الإجمالية في متغيّرات التصميم التراكمية (CLS).
بفضل ميزة "لقطات شاشة العناصر" الجديدة في Lighthouse، يمكننا الاطّلاع على معاينة مرئية للعناصر الرئيسية المذكورة في التدقيق، بالإضافة إلى النقر للتكبير من أجل الحصول على عرض أوضح:
بالنسبة إلى متغيّرات التصميم التراكمية (CLS) بعد التحميل، قد يكون من المفيد بشكل مستمر عرض العناصر التي ساهمت أكثر في متغيّرات التصميم التراكمية (CLS) باستخدام مستطيلات. هذه الميزة متوفّرة في أدوات خارجية، مثل لوحة بيانات مؤشرات أداء الويب الأساسية من SpeedCurve، وأحبّ استخدامها في أداة إنشاء صور GIF لتغيُّر التصميم من Defaced للأسباب التالية:
للحصول على نظرة عامة على مستوى الموقع الإلكتروني حول مشاكل تغيُّر التصميم، أستفيد كثيرًا من تقرير Core Web Vitals في Search Console. يتيح لي ذلك الاطّلاع على أنواع الصفحات على موقعي الإلكتروني التي تتضمّن متغيّرات التصميم التراكمية (CLS) عالية (في هذه الحالة، يساعدني ذلك في تحديد أجزاء النماذج التي أحتاج إلى قضاء وقتي فيها):
تحديد متغيّرات التصميم التراكمية (CLS) من الصور التي لا تتضمّن أبعادًا
للحدّ من متغيّرات التصميم التراكمية الناتجة عن الصور التي لا تتضمّن أبعادًا، أضِف سمات حجم العرض والارتفاع إلى عناصر الصور والفيديوهات. يضمن هذا النهج أن يتمكّن المتصفّح من تخصيص المساحة المناسبة في المستند أثناء تحميل الصورة.
يمكنك الاطّلاع على مقالة أهمية ضبط الارتفاع والعرض على الصور للحصول على شرح وافٍ حول أهمية التفكير في أبعاد الصور ونسبة العرض إلى الارتفاع.
تحديد متغيّرات التصميم التراكمية (CLS) من الإعلانات
تتيح لك أداة Publisher Ads for Lighthouse العثور على فرص لتحسين تجربة تحميل الإعلانات على صفحتك، بما في ذلك المساهمات في تغيير التصميم والمهام التي يستغرق تنفيذها وقتًا طويلاً والتي قد تؤدي إلى تأخير إمكانية استخدام صفحتك من قِبل المستخدمين. في Lighthouse، يمكنك تفعيل هذه الميزة من خلال "المكوّنات الإضافية للمنتدى".
يُرجى العِلم أنّ الإعلانات هي أحد أكبر العوامل المساهمة في تغييرات التصميم على الويب. من المهم:
- توخّي الحذر عند وضع الإعلانات غير الثابتة بالقرب من أعلى إطار العرض
- تجنُّب التغييرات من خلال حجز أكبر حجم ممكن للخانة الإعلانية
تجنُّب الصور المتحركة غير المركّبة
يمكن للصور المتحركة غير المركّبة أن تظهر بجودة رديئة على الأجهزة المنخفضة المواصفات إذا كانت مهام JavaScript الثقيلة تُبقي سلسلة التعليمات الرئيسية مشغولة. يمكن أن تؤدي هذه الصور المتحركة إلى حدوث تغييرات في التنسيق.
إذا اكتشف Chrome أنّه تعذّر تركيب صورة متحركة، يبلّغ عن ذلك في تتبُّع "أدوات مطوري البرامج" الذي يقرأه Lighthouse، ما يسمح له بإدراج العناصر التي تحتوي على صور متحركة لم يتم تركيبها وسبب ذلك. ويمكنك العثور عليها في تدقيق تجنُّب استخدام الصور المتحركة غير المركّبة.
تصحيح أخطاء "مهلة الاستجابة الأولى" / "إجمالي وقت الحظر" / "المهام التي يستغرق تنفيذها وقتًا طويلاً"
يقيس مقياس "مهلة الاستجابة لأوّل إدخال" الوقت المستغرَق بدءًا من تفاعل المستخدم مع صفحة لأول مرة (مثلاً عندما ينقر على رابط أو زر أو يستخدم عنصر تحكّم مخصّصًا مستندًا إلى JavaScript) ولغاية استجابة المتصفّح لذلك التفاعل. يمكن أن تؤثر مهام JavaScript الطويلة في هذا المقياس وفي مقياس "إجمالي وقت الحظر" الذي يمثّل بديلاً له.
تتضمّن أداة Lighthouse تدقيقًا بعنوان تجنُّب المهام الطويلة في سلسلة التعليمات الرئيسية، والذي يسرد المهام التي تستغرق وقتًا أطول في سلسلة التعليمات الرئيسية. يمكن أن يساعد ذلك في تحديد أكثر العوامل التي تسبِّب تأخيرًا في عملية الإدخال. في العمود الأيمن، يمكننا رؤية عنوان URL للنصوص البرمجية المسؤولة عن مهام سلسلة المحادثات الرئيسية الطويلة.
على اليسار، يمكننا رؤية مدة هذه المهام. للتذكير، المهام الطويلة هي المهام التي يتم تنفيذها لمدة تزيد عن 50 مللي ثانية. يؤدي ذلك إلى حظر سلسلة التعليمات الرئيسية لفترة طويلة بما يكفي للتأثير في عدد اللقطات في الثانية أو وقت استجابة الإدخال.
إذا كنت تفكّر في استخدام خدمات تابعة لجهات خارجية للمراقبة، يعجبني أيضًا المخطط الزمني لتنفيذ سلسلة التعليمات الرئيسية الذي يوفّره Calibre لتصوّر هذه التكاليف، والذي يبرز كلاً من المهام الرئيسية والفرعية التي تساهم في المهام التي يستغرق تنفيذها وقتًا طويلاً والتي تؤثر في التفاعل.
حظر طلبات الشبكة للاطّلاع على التأثير قبل وبعد في Lighthouse
تتيح "أدوات مطوري البرامج في Chrome" حظر طلبات الشبكة لمعرفة تأثير إزالة الموارد الفردية أو عدم توفّرها. يمكن أن يساعد ذلك في فهم التكلفة التي تفرضها النصوص البرمجية الفردية (مثل عمليات التضمين أو أدوات التتبُّع التابعة لجهات خارجية) على مقاييس مثل "إجمالي وقت الحظر" و"سرعة الاستعداد للتفاعل".
يمكن أيضًا استخدام ميزة "حظر طلبات الشبكة" مع Lighthouse. لنلقِ نظرة سريعة على تقرير Lighthouse لموقع إلكتروني. نتيجة الأداء هي 63/100 مع وقت إجمالي لحظر المحتوى يبلغ 400 ملي ثانية. بالتعمّق في الرمز، نجد أنّ هذا الموقع الإلكتروني يحمّل polyfill لواجهة Intersection Observer في Chrome، وهو أمر غير ضروري. لنحظرها!
يمكننا النقر بزر الماوس الأيمن على نص برمجي في لوحة الشبكة في "أدوات مطوري البرامج" والنقر على Block Request URL لحظره. سنقوم هنا بذلك من أجل polyfill لواجهة Intersection Observer.
بعد ذلك، يمكننا إعادة تشغيل Lighthouse. يمكننا أن نرى هذه المرة أنّ نتيجة الأداء قد تحسّنت (70/100) وكذلك إجمالي وقت الحظر (400 ملي ثانية => 300 ملي ثانية).
استبدال العناصر المضمّنة المكلفة التابعة لجهات خارجية بواجهة
من الشائع استخدام موارد تابعة لجهات خارجية لتضمين الفيديوهات أو منشورات وسائل التواصل الاجتماعي أو التطبيقات المصغّرة في الصفحات. بشكل تلقائي، يتم تحميل معظم عمليات التضمين على الفور، ويمكن أن تتضمّن حمولات مكلفة تؤثر سلبًا في تجربة المستخدم. ويُعدّ ذلك هدرًا للموارد إذا لم تكن الجهة الخارجية مهمة (على سبيل المثال، إذا كان على المستخدم الانتقال للأسفل قبل رؤيتها).
ومن الأنماط التي يمكن اتّباعها لتحسين أداء هذه التطبيقات المصغّرة هو تحميلها بشكل كسول عند تفاعل المستخدم. ويمكن إجراء ذلك من خلال عرض نسخة حصرية خفيفة من التطبيق المصغّر (واجهة) وتحميل النسخة الكاملة فقط إذا تفاعل المستخدم معها. تتضمّن أداة Lighthouse تدقيقًا يقترح موارد تابعة لجهات خارجية يمكن تحميلها باستخدام "التحميل الكسول" مع واجهة، مثل الفيديوهات المضمّنة على YouTube.
للتذكير، ستعمل أداة Lighthouse على تمييز الرموز البرمجية التابعة لجهات خارجية التي تحظر سلسلة التعليمات الرئيسية لأكثر من 250 ملي ثانية. يمكن أن يكشف ذلك عن جميع أنواع النصوص البرمجية التابعة لجهات خارجية (بما في ذلك تلك التي أنشأتها Google) والتي قد يكون من الأفضل تأجيلها أو تحميلها ببطء إذا كان ما تعرضه يتطلب التمرير لعرضه.
ما بعد "مؤشرات أداء الويب الأساسية"
بالإضافة إلى تسليط الضوء على مؤشرات Core Web Vitals، تحاول الإصدارات الحديثة من Lighthouse و"إحصاءات PageSpeed" أيضًا تقديم إرشادات ملموسة يمكنك اتّباعها لتحسين سرعة تحميل تطبيقات الويب التي تستخدم JavaScript بشكل مكثّف إذا كانت خرائط المصدر مفعّلة لديك.
وتشمل هذه المجموعة المتزايدة من عمليات التدقيق لتقليل تكلفة JavaScript في صفحتك، مثل تقليل الاعتماد على polyfills والنسخ المكررة التي قد لا تكون ضرورية لتجربة المستخدم.
لمزيد من المعلومات حول أدوات Core Web Vitals، يمكنك متابعة حساب فريق Lighthouse على Twitter والاطّلاع على الميزات الجديدة في "أدوات مطوري البرامج في Chrome".