يمكن معالجة بعض الرسوم المتحركة على صفحات الويب بالكامل في مرحلة "المركّب" من مسار العرض.
تتطلّب الصور المتحركة غير المركّبة المزيد من العمل ويمكن أن تظهر بجودة رديئة (غير سلسة) على الهواتف المنخفضة التكلفة أو عند تنفيذ مهام عالية الأداء في سلسلة المحادثات الرئيسية.
يمكن أن تزيد أيضًا الصور المتحركة غير المجمّعة من متغيّرات التصميم التراكمية (CLS) لصفحتك لأنّها تؤدي إلى حركة فعلية للعناصر التي تقيسها خوارزمية CLS، ما قد يؤدي إلى حدوث تغييرات متسلسلة في عناصر أخرى. لن تؤدي الصور المتحركة المركبة إلى نقل عناصر أخرى، لذا يتم استبعادها من مقياس CLS. سيؤدي تقليل CLS إلى تحسين نتيجة أداء Lighthouse.
الخلفية
تُعرف خوارزميات المتصفّح الخاصة بتحويل HTML وCSS وJavaScript إلى وحدات بكسل بشكلٍ جماعي باسم مسار العرض.
لا بأس إذا لم تفهم معنى كل خطوة من خطوات مسار العرض. إنّ النقطة الأساسية التي يجب فهمها الآن هي أنّ المتصفّح يستخدم في كل خطوة من خطوات مسار العرض نتيجة الإجراء السابق لإنشاء بيانات جديدة. على سبيل المثال، إذا كانت التعليمات البرمجية تؤدي إلى بدء عملية العرض، يجب تنفيذ خطوتَي "الرسم" و"التركيب" مرة أخرى. الصورة المتحركة غير المجمّعة هي أي صورة متحركة تؤدي إلى بدء إحدى الخطوات السابقة في مسار العرض (الأسلوب أو التنسيق أو الطلاء). تحقّق الصور المتحرّكة غير المجمّعة أداءً أسوأ لأنّها تجبر المتصفّح على بذل المزيد من الجهد.
اطّلِع على المراجع التالية للتعرّف على مسار العرض بالتفصيل:
- نظرة داخلية على متصفّحات الويب الحديثة (الجزء 3)
- تبسيط عملية الطلاء وتقليل مساحات الطلاء
- استخدام السمات المخصّصة للمركّب فقط وإدارة عدد الطبقات
كيفية رصد Lighthouse للرسومات المتحركة غير المجمّعة
عندما يتعذّر دمج صورة متحركة، يُبلغ Chrome عن أسباب التوقّف في عملية التتبع في DevTools، وهو ما يقرأه Lighthouse. يُدرج Lighthouse عقد DOM التي تحتوي على صور متحركة لم يتم دمجها معًا، بالإضافة إلى أسباب تعذُّر دمج كل صورة متحركة.
كيفية التأكّد من دمج الصور المتحركة
اطّلِع على الالتزام بالسمات المخصّصة للمركّب فقط وإدارة عدد الطبقات والرسوم المتحركة العالية الأداء.