سلام همراهان عزیز میزفا
از مجموعه مقالات آموزش 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 شدن صفحه شامل ۵ مرحله ست که تو تصویر زیر اونها رو به ترتیب مشاهده میکنیم.
در ابتدا فایلهای جاوا اسکریپت که قبلا همراه با 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 در جی تی متریکس صحبت خواهیم کرد.
اگه سوالی دارید، پایین همین صفحه و در قسمت نظرات بپرسید تا با کمال میل به شما پاسخ بدیم.
