كيف تؤثر الرسوم المتحركة على مؤشرات الويب الأساسية (LCP وINP وCLS)
كيف تؤثر الرسوم المتحركة وأوقات تشغيل الرسوم المتحركة على LCP وINP وCLS، وطرق عملية للحفاظ على ثراء الحركة دون الإضرار بعناصر الويب الأساسية.
الوجبات الجاهزة الأساسية
يمكن أن تؤدي الرسوم المتحركة إلى الإضرار بجميع عناصر الويب الأساسية الثلاثة: يمكن لملفات الرسوم المتحركة الثقيلة وأوقات التشغيل تأخير LCP، ويمكن أن تؤدي الرسوم المتحركة التي تعتمد على JavaScript إلى حظر الخيط الرئيسي وتفاقم INP، كما أن تحريك خصائص التخطيط أو تحميل الرسوم المتحركة بدون مساحة محجوزة يؤدي إلى CLS. حافظ على محتوى البطل مستقلاً عن الرسوم المتحركة، وأوقات التشغيل ذات التحميل البطيء أسفل الجزء المرئي من الصفحة، وتحريك التحويل والتعتيم، وحجز مساحة لكل عنصر متحرك.
المقاييس الثلاثة وأهدافها
تقيس مؤشرات الويب الأساسية من Google، الموثقة على web.dev، التحميل (أكبر رسم محتوى، جيد في 2.5 ثانية أو أقل)، والاستجابة (التفاعل مع الرسم التالي، جيد في 200 مللي ثانية أو أقل) والاستقرار البصري (إزاحة التخطيط التراكمي، جيد عند 0.1 أو أقل)، ويتم قياسه عند المئين الخامس والسبعين من تحميل الصفحات الحقيقية.
LCP: لا تجعل البطل ينتظر الرسوم المتحركة
إذا كان أكبر عنصر على الشاشة عبارة عن رسم متحرك يحتاج إلى وقت تشغيل وملف ليتم تحميله أولاً، فإن LCP ينتظر كليهما. قم بعرض صورة ثابتة أو نص حقيقي أولاً، ثم قم بتحسينها، وقم بتحميل أوقات تشغيل الرسوم المتحركة فقط للمحتوى الموجود بالقرب من الجزء المرئي أو أسفله عند الحاجة إليه.
INP: حافظ على الخيط الرئيسي حرًا
يقيس INP مدى سرعة استجابة الصفحة للضغطات والنقرات. يوضح Web.dev أن المهام الطويلة في الموضوع الرئيسي تؤخر الاستجابة للإدخال. الرسوم المتحركة التي تقوم بتشغيل JavaScript المعقدة في كل إطار، أو العديد من الرسوم المتحركة التي تبدأ مرة واحدة، يمكن أن تسبب ذلك بالضبط. تفضل انتقالات CSS على التحويل والتعتيم للحصول على تأثيرات بسيطة، وإيقاف الرسوم المتحركة خارج الشاشة مؤقتًا، وتجنب بدء العمل الشاق استجابة للتفاعل.
CLS: حجز المساحة وتحويل الرسوم المتحركة
يوصي Web.dev باستخدام خاصية التحويل CSS للتحريك دون إحداث تغييرات في التخطيط: قم بالقياس بدلاً من تغيير العرض والارتفاع، وترجم بدلاً من التغيير إلى الأعلى أو اليسار. امنح كل عنصر متحرك، بما في ذلك الرسوم المتحركة المستندة إلى لوحة الرسم، أبعادًا ثابتة قبل تحميله، حتى لا تقفز الصفحة عند ظهورها.
أوقات تشغيل القماش
أوقات التشغيل المستندة إلى Canvas مثل عارض قماش Lottie وRive وExodeUI ترسم خارج DOM، مما يتجنب عمل التخطيط لكل إطار ولكنه يضيف وقت تشغيل للتنزيل والتشغيل. قم بقياس المقايضة لصفحتك: قم بتحميل وقت التشغيل ببطء، وقم بتغيير حجم اللوحة القماشية في CSS مقدمًا، واختبرها على الهواتف متوسطة المدى.
مفتاح Principle للتذكر
- الأهداف: LCP ≥ 2.5 ثانية، INP ≥ 200 مللي ثانية، CLS ≥ 0.1 عند النسبة المئوية الخامسة والسبعين
- لا تجعل عنصر LCP يعتمد على وقت تشغيل الرسوم المتحركة
- حافظ على الموضوع الرئيسي مجانيًا أثناء التفاعلات
- تحريك التحويل والتعتيم؛ حجز مساحة للعناصر المتحركة
- أوقات تشغيل بطيئة التحميل واختبارها على الهواتف متوسطة المدى
الأسئلة المتداولة
المصادر
- Web Vitals — web.dev
- Interaction to Next Paint (INP) — web.dev
- Cumulative Layout Shift (CLS) — web.dev