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