تجنب مشكلات الرسوم المتحركة غير المركبة

هل سبق لك أن نقرت على موقع ويب لتجده يتعثر ويتأخر أثناء التمرير؟

محبط، أليس كذلك؟

حسنًا، ماذا لو قلنا لك أن السر وراء تلك العوائق يكمن في ما يسمى بالرسوم المتحركة غير المركبة؟

هذه هي الرسوم المتحركة التي لا تتم معالجتها بكفاءة بواسطة المتصفح، مما يضع حملاً إضافيًا على المعالج الرئيسي للكمبيوتر ويؤدي إلى مشكلات في الأداء.

ولكن لا تقلق، هناك طريقة لإصلاح هذا.

في هذه المدونة سنناقش الرسوم المتحركة غير المركبة وكيفية إصلاحها. سنرشدك خلال خطوات بسيطة لتسوية هذه الرسوم المتحركة المتشنجة، مما يجعل موقع الويب الخاص بك ليس أسرع فحسب، بل يجعل أيضًا من دواعي سروري التنقل للزائرين.

هيا نبدأ.

ما هي الرسوم المتحركة غير المركبة؟

الرسوم المتحركة غير المركبة هي نوع من الرسوم المتحركة على الويب تتم معالجتها بشكل أساسي بواسطة وحدة المعالجة المركزية (CPU) بدلاً من وحدة معالجة الرسومات (GPU).

غالبًا ما يؤدي أسلوب المعالجة هذا إلى عرض أقل كفاءة، مما قد يتسبب في مشكلات في الأداء مثل معدلات الإطارات البطيئة وتأخر واجهة المستخدم، خاصة على صفحات الويب المعقدة أو الأجهزة الأقل قوة.

يعد تقليص التحول التراكمي للتخطيط (CLS) بتعزيز نقاط أداء Lighthouse الخاصة بك.

لماذا يعد تجنب الرسوم المتحركة غير المركبة أمرًا ضروريًا لأداء الويب؟

يعد تجنب الرسوم المتحركة غير المركبة أمرًا ضروريًا لأداء الويب لعدة أسباب. أولاً، يمكن أن تكون الرسوم المتحركة غير المركبة، والتي تتم معالجتها بواسطة وحدة المعالجة المركزية، أقل كفاءة وأبطأ من الرسوم المتحركة التي تتم معالجتها بواسطة وحدة معالجة الرسومات.

غالبًا ما يؤدي عدم الكفاءة هذا إلى انخفاض معدل الإطارات، مما يتسبب في ظهور الرسوم المتحركة متقطعة أو بطيئة، مما قد يؤثر سلبًا على تجربة المستخدم. تبدو صفحات الويب ذات الرسوم المتحركة الأكثر سلاسة أكثر استجابة ويكون التفاعل معها أكثر متعة بشكل عام.

ثانيًا، يمكن أن تؤدي الرسوم المتحركة التي تستهلك وحدة المعالجة المركزية بشكل مكثف إلى إجهاد موارد النظام، خاصة على الأجهزة الأقل قوة مثل الهواتف الذكية أو أجهزة الكمبيوتر القديمة. يمكن أن تؤدي هذه السلالة إلى إبطاء ليس فقط الرسوم المتحركة نفسها ولكن أيضًا العمليات الأخرى التي يتم تشغيلها على صفحة الويب.

ونتيجة لذلك، يمكن أن يتعرض الأداء العام للموقع للخطر. ليس هذا فحسب، بل يمكن أن يؤثر أداء موقع الويب المخترق سلبًا أيضًا على نجاح التسويق الرقمي. راجع هذه المدونة " تأثير سرعة موقع الويب على نجاح التسويق الرقمي " لمعرفة كيفية القيام بذلك.

ملحوظة: فيما يلي بعض النصائح السهلة لتسريع موقع WordPress الخاص بك للحصول على أداء أفضل .

كيف تؤثر الرسوم المتحركة غير المركبة على أداء الصفحة وعرض المتصفح؟

يمكن أن تؤثر الرسوم المتحركة غير المركبة بشكل كبير على أداء الصفحة وعرض المتصفح. ومن ناحية الأداء، فإنهم يميلون إلى إبطاء موقع الويب. يحدث هذا بسبب إرهاق المعالج الرئيسي للكمبيوتر (CPU)، محاولًا التعامل مع الرسوم المتحركة المعقدة بالإضافة إلى المهام الأخرى.

ونتيجة لذلك، يصبح موقع الويب أقل استجابة لتفاعلات المستخدم مثل النقر أو التمرير. ويُلاحظ هذا بشكل خاص على الأجهزة ذات طاقة المعالجة الأقل، مثل الهواتف المحمولة.

فيما يتعلق بعرض المتصفح، غالبًا ما تؤدي الرسوم المتحركة غير المركبة إلى حركة متقطعة وغير متساوية على الشاشة. نظرًا لأن وحدة المعالجة المركزية أقل كفاءة في رسم هذه الرسوم المتحركة وإدارتها من وحدة معالجة الرسومات، فقد تظهر الرسوم المتحركة متعثرة وغير سلسة.

يؤثر هذا على المظهر المرئي ويمكن أن يجعل موقع الويب يبدو أبطأ حيث يكافح المتصفح لمواكبة عرض هذه الرسوم المتحركة المطلوبة. بالإضافة إلى ذلك، يمكن أن يؤدي العبء الواقع على وحدة المعالجة المركزية إلى أوقات تحميل أطول لصفحة الويب، حيث تستغرق معالجة العناصر المتحركة وعرضها وقتًا أطول.

كيفية اكتشاف الرسوم المتحركة غير المركبة؟

يمكن اكتشاف الرسوم المتحركة غير المركبة باستخدام أدوات تحليل الأداء مثل Google PageSpeed ​​Insights وGTmetrix. فيما يلي أفضل 10 أدوات لاختبار سرعة WordPress يمكنك استخدامها لاكتشاف الرسوم المتحركة غير المركبة.

تقوم هذه الأدوات بتحليل الجوانب المختلفة لأداء موقع الويب الخاص بك، بما في ذلك كيفية عرض الرسوم المتحركة.

وإليك كيف يمكنك استخدامها:

جوجل PageSpeed ​​رؤى

• قم بزيارة موقع PageSpeed ​​Insights على الويب ، وأدخل عنوان URL لصفحة الويب الخاصة بك، ثم انقر فوق "تحليل". تقوم الأداة بتقييم صفحتك من حيث أداء الهاتف المحمول وسطح المكتب.

• بعد التحليل، توفر PageSpeed ​​Insights نتيجة وتقريرًا تفصيليًا. ابحث ضمن قسم "بيانات التشخيص" في التقرير.
• ابحث عن تحذير يقول شيئًا مثل "تجنب الرسوم المتحركة غير المركبة". يشير هذا إلى أن صفحتك تحتوي على رسوم متحركة يمكن تحسينها لتحقيق أداء أفضل.

جي تي ميتريكس

• انتقل إلى موقع GTmetrix ، وأدخل عنوان URL الخاص بموقعك، وابدأ الاختبار. تقدم GTmetrix تحليلاً شاملاً لأداء تحميل موقعك.

• بمجرد اكتمال التحليل، سوف تحصل على تقرير مفصل. يركز GTmetrix بشكل أكبر على مقاييس الأداء العامة، لذلك قد لا يشير بشكل مباشر إلى الرسوم المتحركة غير المركبة مثل PageSpeed ​​Insights.
• ابحث عن أوقات العرض ومقاييس تحميل وحدة المعالجة المركزية، مثل "إجمالي وقت الحظر" أو "وقت التفاعل".
• في حين أن GTmetrix قد لا يذكر صراحةً الرسوم المتحركة غير المركبة، إلا أن القيم العالية في هذه المناطق قد تشير إلى عمليات عرض غير فعالة، والتي قد تكون بسبب الرسوم المتحركة غير المركبة.

علاوة على ذلك، يمكنك أيضًا إجراء اختبار التحمل لتحديد أداء موقع الويب الخاص بك.

كيف تتعامل المتصفحات مع الرسوم المتحركة؟

عندما يتعلق الأمر بالتعامل مع الرسوم المتحركة، تستخدم المتصفحات جزأين رئيسيين للكمبيوتر: وحدة المعالجة المركزية (وحدة المعالجة المركزية) ووحدة معالجة الرسومات (GPU). عادةً ما تتم إدارة الرسوم المتحركة البسيطة، مثل تغيير الألوان أو النص، بواسطة وحدة المعالجة المركزية.

ومع ذلك، بالنسبة للرسوم المتحركة الأكثر تعقيدًا، خاصة تلك التي تتضمن الحركة أو التحويل، تحاول المتصفحات استخدام وحدة معالجة الرسومات. تعد وحدة معالجة الرسومات (GPU) أفضل لهذه المهام لأنها مصممة للتعامل مع الرسومات ويمكنها إنشاء رسوم متحركة سلسة وسلسة.

ولكن، إذا لم يتم إعداد الرسوم المتحركة بشكل صحيح، فقد يستمر المتصفح في استخدام وحدة المعالجة المركزية (CPU) لها، مما يجعل الرسوم المتحركة أقل سلاسة ويبطئ موقع الويب بأكمله. لذلك، يعمل مطورو الويب على التأكد من أن الرسوم المتحركة الخاصة بهم متوافقة مع وحدة معالجة الرسومات للحصول على أفضل أداء.

أسباب الرسوم المتحركة غير المركبة

للتحرك نحو حل مشكلة الرسوم المتحركة غير المركبة، من الضروري أولاً أن نفهم أسبابها. فيما يلي بعض الأسباب الشائعة:

تحريك الخصائص غير المركبة

غالبًا ما يؤدي تحريك الخصائص غير المركبة إلى رسوم متحركة غير مركبة. يحدث هذا عند استخدام خصائص مثل "العرض" أو "الارتفاع" أو "الهامش"، والتي تتطلب من المتصفح إجراء الكثير من عمليات إعادة الحساب وإعادة الرسم، في الرسوم المتحركة.

لا يتم التعامل مع هذه الخصائص بكفاءة بواسطة وحدة معالجة الرسومات، لذا فهي تضع المزيد من الحمل على وحدة المعالجة المركزية، مما يجعل الرسوم المتحركة أقل سلاسة.

استخدام جافا سكريبت لتحريك

قد يؤدي استخدام JavaScript لتحريك إلى حدوث مشكلات أيضًا. يمكن أن تتطلب الرسوم المتحركة المستندة إلى JavaScript، خاصة عندما لا يتم تحسينها، الكثير من وحدة المعالجة المركزية. على الرغم من أن JavaScript توفر المزيد من التحكم في الرسوم المتحركة، إلا أنها يمكن أن تؤدي إلى مشكلات في الأداء إذا كانت الرسوم المتحركة معقدة أو لم يتم ترميزها بكفاءة.

المناطق المطلية المعقدة

يمكن أن تكون المناطق المرسومة المعقدة في الرسوم المتحركة سببًا آخر. عندما يكون لديك مساحات كبيرة تحتاج إلى إعادة طلاء بشكل متكرر أثناء الرسوم المتحركة، فإن ذلك يضع ضغطًا كبيرًا على النظام. وينطبق هذا بشكل خاص على الرسومات المعقدة أو الصور عالية الدقة التي تتغير بسرعة.

الرسومات أو الوسائط غير الفعالة

يعد الاستخدام غير الفعال للرسومات أو الوسائط في الرسوم المتحركة سببًا شائعًا آخر. يمكن أن تؤدي الصور أو مقاطع الفيديو أو الرسومات عالية الدقة التي لم يتم تحسينها لاستخدام الويب إلى إبطاء الرسوم المتحركة. ويواجه المتصفح صعوبة أكبر في عرض هذه العناصر الثقيلة، خاصة إذا كانت جزءًا من تسلسل متحرك.

الاستخدام المفرط للظلال والمرشحات

وأخيرًا، يمكن أن يؤدي الاستخدام المفرط للظلال والمرشحات في CSS إلى رسوم متحركة غير مركبة. هذه التأثيرات، على الرغم من كونها جذابة بصريًا، إلا أنها تستهلك الكثير من الموارد. يمكن أن يؤثر تطبيقها على العناصر المتحركة بشكل كبير على الأداء، لأنها تتطلب من المتصفح إجراء الكثير من المعالجة الإضافية.

ملحوظة: تعرف على الأسباب الأخرى لبطء مواقع الويب .

كيفية تجنب الرسوم المتحركة غير المركبة

يمكن أن تؤثر الرسوم المتحركة غير المركبة بشكل كبير على أداء موقع الويب الخاص بك، مما يؤدي إلى تجربة مستخدم بطيئة. يكمن مفتاح حل هذه المشكلة في تحسين كيفية التعامل مع الرسوم المتحركة.

فيما يلي النهج خطوة بخطوة لإصلاح هذه المشكلة. قبل المضي قدمًا نحو التثبيت، سأوضح لك كيف تبدو نتيجة موقع الويب مع هذا الخطأ:

• وبالانتقال نحو التشخيص، وجدنا الخطأ "تجنب الرسوم المتحركة غير المركبة".

فيما يلي الخطوات التي يجب عليك اتباعها لإصلاح هذه المشكلة.

• انتقل إلى لوحة تحكم WordPress الخاصة بك
• حدد المظهر > تخصيص
• قد تجد رمز CSS ضمن قسم "CSS الإضافي". هناك احتمال كبير أن هذا الرمز لا يستخدم رسوم CSS المتحركة المحسنة، مما يتسبب في حدوث هذا الخطأ.

• إذا كنت مطورًا، فستعرف بالفعل أن هذا الرمز لم يتم تحسينه. وإليك التغييرات التي من شأنها أن تفعل العجائب لموقعك على الويب.

التغيير 1: إضافة خاصية Will-Change

يتعلق هذا التغيير بإعلام المتصفح بالتغييرات القادمة في الرسوم المتحركة، والتي يمكن أن تساعد في تحسين أداء العرض.

 .الرسوم المتحركة {

    العرض: 100 بكسل؛

    الارتفاع: 100 بكسل؛

    لون الخلفية: أحمر؛

    الموقف: مطلق؛

    سوف يتغير: تحويل، العتامة؛ /* تمت إضافة السطر */

    الرسوم المتحركة: حركة معقدة 5s خطية لا نهائية؛

}

/* تظل بقية الإطارات الرئيسية دون تغيير */

التغيير 2: تقليل تعقيد الرسوم المتحركة

هنا، تم تعديل تحويل المقياس بنسبة 50% من المقياس (2) إلى المقياس (1.5). وهذا يقلل من تعقيد وشدة الرسوم المتحركة.

 .الرسوم المتحركة {

    /* ... خصائص أخرى ... */

    سوف يتغير: تحويل، العتامة؛ /* بافتراض الاحتفاظ بالتغيير 1 */

    الرسوم المتحركة: حركة معقدة 5s خطية لا نهائية؛

}

@keyframes complexMove {

    /* ... إطارات رئيسية 0% و100%... */

    50% {

        تحويل: ترجمة X (300٪) تدوير (180 درجة) مقياس (1.5)؛ /* السطر المعدل */

        العتامة: 0.5؛

    }

    /* ... إطار رئيسي 100% ... */

}

إليك ما سيبدو عليه الكود النهائي الخاص بك:

 .الرسوم المتحركة {

    العرض: 100 بكسل؛

    الارتفاع: 100 بكسل؛

    لون الخلفية: أحمر؛

    الموقف: مطلق؛

    سوف يتغير: تحويل، العتامة؛ /* إعلام المتصفح بالتغييرات القادمة */

    الرسوم المتحركة: حركة معقدة 5s خطية لا نهائية؛

}

@keyframes complexMove {

    0%، 100% {

        تحويل: ترجمة X (0) تدوير (0) مقياس (1)؛

        العتامة: 1؛

    }

    50% {

        تحويل: ترجمة X (300٪) تدوير (180 درجة) مقياس (1.5)؛ /* مقياس مبسط لتقليل التعقيد */

        العتامة: 0.5؛

    }

}

• ما عليك سوى إزالة الكود السابق ونسخ هذا الكود الجديد ولصقه في ملف CSS الإضافي الخاص بك. لن يؤدي هذا إلى تغيير الرسوم المتحركة، ولكنه سيؤدي بالتأكيد إلى إزالة هذا الخطأ.

• يمكنك رؤية الخطأ لم يعد موجودًا.
• والشيء الجيد هو أنه باستخدام الكود المحسن، يمكنك زيادة درجة الأداء. لقد رأينا في بداية هذا القسم أن درجة الأداء كانت 77.
• إليك درجة الأداء المحسنة:

وبالتالي، بعض النصائح العامة التي يجب أن تضعها في اعتبارك لحل هذا الخطأ هي:

نصيحة 1: تحسين الرسوم المتحركة CSS

بدلاً من تحريك الخصائص مثل الارتفاع أو العرض أو اليسار، والتي يمكن أن تستهلك الكثير من الموارد، استخدمها
تحول
و
العتامة . يتم تسريع هذه الخصائص بواسطة GPU ويمكن للمتصفحات التعامل معها بكفاءة أكبر.

إليك رمز المثال قبل التحسين وبعده:

قبل التحسين:

 .animate-left {

    الموقف: نسبي؛

    الرسوم المتحركة: moveLeft 2s الخطية اللانهائية؛

}

@keyframes moveLeft {

    من { اليسار: 0؛ }

    إلى { اليسار: 100 بكسل؛ }

}

بعد التحسين:

 .animate-left {

    الموقف: نسبي؛

    الرسوم المتحركة: moveLeft 2s الخطية اللانهائية؛

}

@keyframes moveLeft {

    من { تحويل: ترجمة X (0)؛ }

    إلى { تحويل: ترجمة X (100 بكسل)؛ }

}

نصيحة 2: الاستفادة من قوة خاصية "Will-Change" في CSS

استخدم خاصية will-change لإعلام المتصفح بالعناصر التي ستتغير في المستقبل القريب. يتيح ذلك للمتصفح الاستعداد للتغيير وتحسينه.

إليك كيفية استخدام خاصية will-change؛

• أدخل السطر التالي في التعليمات البرمجية الخاصة بك؛

 سوف يتغير: تحويل، العتامة؛ /* تمت إضافة السطر */

نصيحة 3: تفريغ الرسوم المتحركة إلى وحدة معالجة الرسومات

يعد تفريغ الرسوم المتحركة إلى وحدة معالجة الرسومات (GPU) تقنية لتحسين الرسوم المتحركة على الويب، مما يجعلها أكثر سلاسة وأقل عبئًا على وحدة المعالجة المركزية (وحدة المعالجة المركزية).

يعد هذا الأسلوب فعالًا بشكل خاص في حل مشكلات الرسوم المتحركة غير المركبة، حيث إنه يعزز قدرة وحدة معالجة الرسومات على التعامل مع المهام الرسومية بشكل أكثر كفاءة.

يمكنك إلغاء تحميل الرسوم المتحركة إلى وحدة معالجة الرسومات باستخدام خصائص التحويل والتعتيم للرسوم المتحركة لأنها أكثر كفاءة من تحريك الخصائص مثل العرض أو الارتفاع أو الأعلى أو اليسار.

يمكنك استخدام خصائص التحويل والعتامة بدلاً من اليسار واليمين. هنا مثال:

كود غير محسن:

 @keyframes moveLeft {

    من { اليسار: 0؛ }

    إلى { اليسار: 100 بكسل؛ }

}

الكود الأمثل:

 @keyframes moveLeft {

    من { تحويل: ترجمة X (0)؛ }

    إلى { تحويل: ترجمة X (100 بكسل)؛ }

}

النصيحة الرابعة: استخدام المكتبات والأدوات الفعالة

يمكن أن يكون دمج المكتبات الفعالة مثل GreenSock Animation Platform (GSAP) أو Velocity.js فعالًا للغاية في حل أخطاء الرسوم المتحركة غير المركبة.

تم تحسين هذه المكتبات من أجل الأداء، حيث تقدم رسومًا متحركة أكثر سلاسة وكفاءة من CSS أو JavaScript القياسي.

لدمج مكتبة GSAP، اتبع الخطوات التالية؛

• حدد موقع رابط CDN لـ GSAP.
• افتح ملف HTML الخاص بك حيث تريد استخدام GSAP.
• تحتاج إلى وضع رابط CDN داخل علامة <script>. من الأفضل وضع هذه العلامة بالقرب من نهاية قسم <body> الخاص بك.

 <!DOCTYPE html>

<أتش تي أم أل>

<الرأس>

    <title>صفحة الويب الخاصة بك</title>

    <!-- عناصر الرأس الأخرى -->

</الرأس>

<الجسم>

    <!-- يظهر محتوى HTML الخاص بك هنا -->

    <!-- البرنامج النصي GSAP CDN في نهاية النص -->

    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.5.1/gsap.min.js"></script>

</الجسم>

</html>

كيف يمكن لاستضافة Cloudways أن تكمل الرسوم المتحركة المحسنة الخاصة بك

تعمل Cloudways Hosting على تحسين مواقع الويب من خلال الرسوم المتحركة المحسنة من خلال توفير سرعات عالية ووقت تشغيل طويل من كبار موفري الخدمات السحابية مثل DigitalOcean وAWS وGoogle Cloud. تضمن حلول التخزين المؤقت المتقدمة، بما في ذلك Memcached وVarnish وRedis، التحميل السريع للرسوم المتحركة. تعمل المجموعة المحسنة للمنصة، جنبًا إلى جنب مع Enterprise CDN الخاص بـ Cloudflare، على تعزيز أداء الرسوم المتحركة، خاصة أثناء ذروة حركة المرور. إلى جانب ميزات الأمان القوية، توفر Cloudways بيئة استضافة مثالية وفعالة من حيث التكلفة لمواقع الويب الغنية بالرسوم المتحركة.

ملخص

وهذا كل شيء. لقد استكشفنا الاستراتيجيات الأساسية لتجنب الرسوم المتحركة غير المركبة، مع التركيز على أفضل الممارسات في الرسوم المتحركة على الويب.

لقد ناقشنا أيضًا أسباب ظهور الرسوم المتحركة غير المركبة وكيفية تأثيرها على أداء الويب وعرض المتصفح.

إذا كان لديك أي أسئلة بخصوص هذا الموضوع، فلا تتردد في التواصل معنا.