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