جلسه ۲۰ – رفع ارور Avoid non-composited animations

آموزش حل مشکل Avoid non-composited animations در جی تی متریکس

رفع ارور Avoid non-composited animations

سلام همراهان عزیز میزفا
از مجموعه مقالات آموزش GTmetrix میزفا همراه شما هستیم. تو مقاله قبلی درباره رفع خطای Avoid multiple page redirects صحبت کردیم و در این مقاله به آموزش رفع مشکل Avoid non-composited animations در ابزار جی تی متریکس جدید می‌پردازیم. خطای Avoid non-composited animations مثل بیشتر خطاهای GTmetrix ظاهر نسبتا ساده‌ای داره و میگه از محرک‌هایی (Animation هایی) که به‌صورت non-composited هستند استفاده نکنید. اما برای اینکه متوجه بشیم انیمیشن non-composited دقیقا چیه، باید اول مفاهیم ابتدایی‌تری مثل نحوه عملکرد مرورگر برای Render کردن صفحه رو یاد بگیریم. هرچند که در نهایت هم اگه شما برنامه نویس نباشید یا برنامه نویس نداشته باشید، قادر به برطرف کردن این خطا نخواهید بود. اما تو این مقاله سعی می‌کنیم درباره ماهیت ارور Avoid non-composited animations صحبت کنیم. در ضمن حواستون باشه که منظور از Animation در اینجا، انیمیشن کارتونی نیست. 😉
لطفا تا پایان با میزفا همراه باشید.

خلاصه خطای Avoid non-composited animations

میزان سختی: *****
روی چه مواردی تاثیر میذاره: CLS

علت ایجاد خطای Avoid non-composited animations چیست؟

همونطور که در ابتدا اشاره کردیم، برای درک دلیل خطای Avoid non-composited animations باید اول با ساز و کار مرورگر کمی بیشتر آشنا بشیم. البته فکر می‌کنم بحث جذابی باشه و از یادگیری این مطلب جدید لذت ببرید. وظیفه مرورگر اینه که کدهای نوشته شده در صفحه (که هیچ معنا و مفهومی برای کاربران عادی نداره) رو به پیکسل‌های قابل درک برای کاربران تبدیل کنه. به این فرآیند Render کردن صفحه توسط مرورگر گفته میشه.
فرآیند Render شدن صفحه شامل ۵ مرحله ست که تو تصویر زیر اونها رو به ترتیب مشاهده می‌کنیم.

مراحل Render شدن صفحه
مراحل Render شدن صفحه (منبع عکس)

در ابتدا فایل‌های جاوا اسکریپت که قبلا همراه با HTML و CSS دانلود و تجزیه (Parse) شده بودند، اجرا میشن. در مرحله دوم استایل (Style) مورد نیاز برای عناصر مختلف صفحه محاسبه میشه. سپس مرورگر به ایجاد چیدمان (Layout) عناصر صفحه می‌پردازه. در مرحله بعدی عناصر صفحه به شکل پیکسل‌هایی روی صفحه نمایش کاربر ایجاد میشن (Paint). در نهایت Composite یا ترکیب لایه‌ها با صفحه نمایش انجام میشه. به این ترتیب کدهای HTML و CSS و JavaScript به شکل پیکسل‌های دارای مفهوم برای کاربر، روی صفحه Render میشن.

نکته خیلی خیلی مهم در این فرآیند ۵ مرحله‌ای که با ارور Avoid non-composited animations مرتبطه اینه که برای اجرای هر مرحله، مرورگر از نتایج مرحله قبلی استفاده می‌کنه. به‌عبارت دیگه هر مرحله مستقیما روی مرحله بعدی اثر می‌ذاره. برای مثال اگه کدی در صفحه ما باعث اجرای مرحله سوم (Layout) بشه، مراحل Paint و Composite هم دوباره فعال میشن. در نتیجه main thread مجبور میشه کارهای بیشتری انجام بده و بیشتر درگیر بشه. این موضوع باعث اختلال در بهینه سازی سرعت سایت و در نتیجه تجربه کاربری ضعیف میشه.

حالا می‌رسیم به این سوال مهم که نکاتی که گفتیم چه ارتباطی با ارور Avoid non-composited animations داره؟ به هر محرک (Animation) که باعث به کار افتادن یکی از مراحل Style یا Layout یا Paint بشه، non-composited animation گفته میشه. میشه اینطور گفت که هر محرک (Animation) که باعث ایجاد تغییر در CSS یا JavaScript بشه، ممکنه باعث دوباره به کار افتادن مرحله دوم (یعنی Style) بشه. فعال شدن Style باعث به کار افتادن مرحله بعدی (یعنی Layout) میشه. سپس فرآیند Paint هم باید دوباره انجام بشه. همونطور که تو پاراگراف بالایی گفتیم، به کار افتادن دوباره این مراحل باعث میشه مرورگر مجبور بشه کار بیشتری انجام بده. در نتیجه non-composited animation ها اثر منفی روی سرعت لود صفحه می‌ذارند. پس نباید از اونها استفاده کنیم.

چطور خطای Avoid non-composited animations را برطرف کنیم؟

همونطور که در ابتدای مقاله هم گفتیم، حل مشکل Avoid non-composited animations ساده نیست و نیاز به تجربه و مهارت بالا در برنامه نویسی داره. با کلیک کردن روی این خطا در گزارش Structure جی تی متریکس کدهایی که مرتبط با این خطا هستند نمایش داده میشه. گاهی اوقات افزونه Elementor و یا کدهای مربوط به نماد الکترونیک (Enamad) باعث بروز خطای Avoid non-composited animations میشن. تو چنین شرایطی باید بررسی کنیم که این کدها تا چه میزان قابل بهینه سازی هستند. اما معمولا این ارور برچسب کم اهمیت یا Low داره و با توجه به سختی بهینه سازی، میشه از خیر برطرف کردن خطای Avoid non-composited animations گذشت. مگر اینکه اهمیت بیشتری داشته باشه و مشکلات جدی برای سرعت سایت ایجاد کرده باشه.

در هر صورت ارور Avoid non-composited animations جی تی متریکس روی معیار مهم CLS مستقیما اثر می‌ذاره. بنابراین اگه صفحات شما در حالت عادی نمره CLS خوبی نداره، باید به فکر بهینه سازی این خطا باشید. اما اگه امتیاز CLS خوبی دارید، شاید بشه این خطا رو تا حدی نادیده گرفت (البته اگه اهمیتش Low باشه). برای آشنایی با معیار CLS می‌تونید مقاله بهینه سازی CLS در GTmetrix رو مطالعه کنید.

همچنین جالبه که بدونید تاثیر خطای Avoid non-composited animations روی موبایل‌هایی که مدل پایین‌تری دارند بیشتره و در این دستگاه‌ها این مشکل بیشتر لمس میشه. پس با استفاده از ابزار قوی گوگل آنالیتیکس می‌تونید بررسی کنید که بیشتر کاربران موبایلی شما از چه دستگاه‌های موبایلی استفاده می‌کنند؛ اگه بیشتر اونها با گوشی‌های معمولی و ضعیف وارد صفحات شما میشن و شما هم مشکل Avoid non-composited animations رو در سایتتون دارید، احتمالا کاربران شما با تجربه کاربری ضعیفی مواجه هستند.

در مجموع برای رفع ارور Avoid non-composited animations پیشنهاد میشه فقط از Composited Animations استفاده کنید. اگه شما متخصص برنامه نویسی هستید و اطلاعات اولیه در این زمینه دارید، مطالعه این مقاله می‌تونه برای شما در زمینه استفاده از Composited Animations مفید باشه.

بسپار به متخصص سئو یا تیم سئو

مقاله رو خوندید؟ سایر سایت‌ها رو هم مطالعه کردید؟ تلاش کردید تا بتونید براساس راهنمایی که کردیم کار رو انجام بدید و این مشکل رو حل کنید؟ اگه جوابتون بله هست و بعد نتونستید، خب اجازه بدید یه تیم حرفه‌ای سئو براتون انجام بده؛ اگه تیم خوب می‌شناسید که هیچ ولی اگه دنبال یه تیم حرفه‌ای و همینطور دنبال خدمات خوب در زمینه سئو می‌گردید، می‌تونید خدمات سئو میزفا رو یک نگاهی بکنید، کلی خدمات متنوع در این صفحه هست که می‌تونه براتون خیلی مفید باشه.

جمع بندی

در این مقاله میزفا درباره حل مشکل Avoid long main-thread tasks در جی تی متریکس جدید صحبت کردیم. ما در ابتدا درباره روش کار مرورگر در Render کردن صفحات صحبت کردیم و ارتباط این موضوع رو با خطای Avoid long main-thread tasks بیان کردیم. سپس روش رفع خطا رو گفتیم. امیدوارم این مطلب برای شما مفید بوده باشه. تو جلسه ۲۱ درباره رفع ارور Avoid serving legacy JavaScript to modern browsers در جی تی متریکس صحبت خواهیم کرد.

اگه سوالی دارید، پایین همین صفحه و در قسمت نظرات بپرسید تا با کمال میل به شما پاسخ بدیم.

فیلم آموزشی افزایش سرعت سایت با gtmetrix
فیلم آموزشی افزایش سرعت سایت با gtmetrix
محمدعرفان صدری
چند سالی هست که تخصصی SEO کار می‌کنم و از این راه به توسعه و رشد کسب و کارهای مختلف کمک می‌کنم. تو این راه سعی می‌کنم دانشم رو به روز نگهدارم و همیشه دنبال یادگیری مطالب جدید هستم. از طرفی سال‌ها پیش زبان انگلیسی تدریس می‌کردم و همون موقع متوجه شدم که علاقه زیادی به معلم بودن و آموزش دادن دارم. برای همین سعی می‌کنم هر وقت فرصت پیدا کردم آموخته‌های خودم رو از طریق بلاگ میزفا با شما عزیزان هم به اشتراک بذارم. در حال حاضر علاقه به یادگیری بازاریابی و خصوصا بازاریابی دیجیتال دارم و امیدوارم بتونم تو این زمینه هم آموزش‌های خوبی رو براتون فراهم کنم.
لیست آموزش GTmetrix نسخه جدید

بدون نظر

دیدگاهتان را بنویسید

نشانی ایمیل شما منتشر نخواهد شد. بخش‌های موردنیاز علامت‌گذاری شده‌اند *

حداکثر حجم فایل برای آپلود: 1 مگابایت. فایل‌های مجاز برای آپلود: عکس, ویس, ویدیو, ورد یا پی دی اف, فایل متنی, زیپ. شما می‌تونید برای بهتر پرسیدن سوالتون، عکس یا ویس یا حتی فیلم در بخش نظرات میزفا آپلود کنید. برای ضبط ویس می‌تونید از خود واتس آپ استفاده کنید و بعد اینجا آپلود کنید و برای ارسال عکس هم کافی هست اسکرین شات بگیرید.

با موفقیت ثبت شد، میزفا از شما برای عضویت در خبرنامه هفتگی تشکر میکند.

عضویت در خبرنامه هفتگی برای دریافت:

  • فیلم و مقاله رایگان سئو
  • آموزش‌های UX ، GA و GTM
  • مقاله های تخصصی ASP.NET Core
  • اطلاع رسانی از محصولات
فیلم آموزشی asp.net core 2
ترک میزفا خوب نیست!
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر
دوره سئو، رایگان شد.
فرصتی رایگان برای یادگیری
کاراکتر اشاره گر