آموزش رفع خطای CLS در جی تی متریکس

تجربه کاربری یکی از مفاهیم بسیار مهم است و برای کسب‌وکارهای اینترنتی اهمیت زیادی دارد! اگر بخواهید سرعت سایت خود را بررسی کنید و از جی تی متریکس یا لایت هاوس برای بررسی آن استفاده می‌کنید، یکی از خطاهایی که ممکن است با آن روبرو شوید، خطای CLS است. این خطا که مخفف کلمه خطای Cumulative Layout Shift است، یکی از فاکتورهای مهم لایت هاوس گوگل برای سنجش سرعت بارگذاری سایت است. این بخش در واقع الگوریتمی از گوگل است که برای سرعت سایت ارائه شده است! جی تی متریکس هم آن را در بین فاکتورهای بررسی سرعت بارگذاری سایت قرار داده است. اگر سایت شما با این مشکل مواجه است، در این مقاله همراه ما باشید تا با هم آن را بررسی کنیم.

خطای Cumulative Layout Shift و اهمیت آن

یکی از خطاهای بسیار مهم که در هر سایتی ممکن است رخ بدهد، خطای CLS است. این خطا ممکن است بارها و بارها برای هر کاربری پیش آمده باشد! شاید برای شما هم پیش آمده باشد که در یک سایت بر روی چیزی کلیک کنید اما بر روی چیز دیگری کلیک شده باشد. این مسئله زمانی رخ می‌دهد که در همان لحظه که کلیک می کنید بخش دیگری از سایت بارگذاری می شود و بر روی آن قسمت کلیک می کنید. در واقع با وجود آن که مطمئن هستید هنگام کلیک کردن بر روی گزینه موردنظر، نهایت دقت خود را کرده‌اید اما در نهایت بر روی گزینه دیگری کلیک شده است. چرا کاربران در سایت با همچین مشکلی روبرو می‌شوند؟ در ادامه به بررسی آن می‌پردازیم.

• امتیازبندی لایت هاوس گوگل و GTmetrix چگونه است؟

اگر تاکنون نام خطای CLS به گوشتان خورده است، شاید درباره آن تحقیق کرده باشید. در واقع این خطا به این دلیل است که یک بخش از سایت به صورت کامل لود نشده است و پس از کلیک کاربران، بارگذاری می‌شوند. بارگذاری بخش دیگری از سایت باعث می‌شود تا المان‌های سایت جابجا شوند و همین مسئله باعث می‌شود تا بر روی گزینه دیگری کلیک کنید. بنابراین اگر بخواهیم خطای CLS را به صورت ساده بررسی کنیم، باید بگوییم بارگذاری سریع بخش دیگر سایت منجر به تغییر المان‌های سایت خواهد شد.

برای بررسی تخصصی این مفهوم و خطا، باید بگوییم که این خطا مربوط به اندازه گیری ثبات بصری در مدت زمان مشخص برای بارگذاری سایت است. در حقیقت این مسئله به شما کمک می‌کند تا از تغییر غیر منتظره عناصر وب در زمان بارگذاری برای کاربران جلوگیری شود. هر چقدر CLS شما بهتر باشد، احتمال رخ دادن چنین اتفاقی کمتر است و هر چقدر بدتر باشد، چنین اتفاقی بیشتر رخ می‌دهد. Layout Shift بخشی از این کلمه است؛ معنای فارسی آن را می توان جابجای المان یا چیدمان در نظر گرفت! این مسئله تاثیر بسیار زیادی روی بهینه‌سازی تجربه کاربری سایت شما دارد.

بهینه بودن CLS به چه معنی است؟

در بررسی سرعت و خطاهای سایت با استفاده از جی تی متریکس، خطاهای مختلفی به شما نمایش داده می‌شود که به راحتی می‌توانید برخی از آن‌ها را بهینه‌سازی کنید. در این ابزار اگر امتیاز پایینی دریافت کنید، نشان دهنده ضعیف بودن سایت از نظر ساختار و سرعت است که باید به آن اهمیت زیادی بدهید. CLS یکی از مواردی است که GTmetrix برای بررسی هر سایت از آن استفاده می‌کند! بر اساس خبرهای جی تی متریکس، این معیار تنها 5 درصد از فاکتورهای مورد بررسی آن را شامل می‌شود و روی سرعت سایت تاثیر زیادی ندارد! اما مسئله ای که وجود دارد، CLS روی تجربه کاربری اثر بسیار زیادی دارد و اگر می‌خواهید تجربه کاربری سایت شما بهینه باشد که البته یک امر ضروری است، باید حتماً خطای مربوط به آن را رفع کنید. لیست کلی مربوط به بهینه‌سازی CLS عبارت است از:

• ۰.۱ یا کمتر : این عدد نشان دهنده خوب بودن CLS شما است و نیازمند بهینه‌سازی نیست.
• بین ۰.۱ تا ۰.۱۵ : این عدد نشان می‌دهد که CLS شما خوب است اما جای بهینه‌سازی دارد و بهتر است آن را بهینه‌تر کنید.
• بین ۰.۱۵ تا ۰.۲۵ : این معیار نشان می‌دهد که کمی‌ از حد استاندارد آن فاصله دارد و باید حتماً به بهینه‌سازی آن بپردازید.
• بیشتر از ۰.۲۵: این مقدار هم نشان دهنده فاصله بسیار زیاد از حد استاندارد است و باید آن را رفع کنید! هر چقدر بیش‌تر باشد، از حد استاندارد آن دورتر است و نیاز بیشتری به بهینه‌سازی دارد.

برای بهینه‌سازی CLS باید آن را کاهش دهید تا بخش بصری سایت شما پایدارتر باشد. اگر این عدد بالا باشد، به این معنی است که پایداری بصری شما ضعیف است. اگر بخواهید سایت خود را تا 5 درصد بهبود ببخشید، حتماً این مورد را بهینه سازی کنید. یکی از نکاتی که کاربران کمتری به آن دقت می‌کنند، این است که CLS برای تمام صفحات سایت وجود دارد و نباید فقط صفحه اول را بررسی کنید. بنابراین اگر صفحات مهم دیگری هم در سایت خود دارید که برای شما اهمیت زیادی دارند، باید حتماً CLS آن‌ها را هم بررسی کنید تا بتوانید به بهینه‌سازی پایداری بصری سایت خود کمک کنید.

• آموزش افزایش سرعت بارگذاری سایت با ابزار GTmetrix – بخش اول

چگونه CLS را کاهش دهیم؟

تا اینجای مقاله به مفهوم CLS آشنا شدید و اکنون زمان آن رسیده که با راه‌های کاهش آن آشنا شوید. در این قسمت 5 مورد از بهترین راه‌کارهای بهینه‌سازی CLS را بررسی می‌کنیم تا به بهینه‌سازی سایت خود کمک کنید. این موارد عبارتند از:

1. تعیین طول و عرض تصاویر

شاید شما هم با خطای Specify image dimensions در گزارش‌های جی تی متریکس روبرو شده باشید. این خطا زمانی رخ می‌دهد که هنگام استفاده از تصاویر برای آن طول و عرض مشخصی تعیین نکرده اید و این مسئله می تواند بارگذاری آن را با مشکل مواجه کند. در واقع هنگام کدنویسی قالب سایت باید حتماً width و  height را انتخاب کنید تا مرورگر به راحتی بداند که قرار است تصویر نمایشی در چه سایزی نمایش داده شود. این مسئله به CLS کمک می‌کند تا اندازه واقعی جایگاه تصویر را بداند. در این صورت به اندازه‌ای که سایت شما پایداری بصری داشته باشد، جای خالی می‌گذارید تا زمان بارگذاری تصاویر، سایت شما با خطای CLS روبرو نشود.

اگر سایت خود را با جی تی متریکس بررسی کنید، اگر تصاویر شما دارای سایز نباشند لینک آن تصاویر در اختیار شما قرار می‌گیرد. بنابراین با استفاده از جی تی متریکس به راحتی می توانید این خطا را رفع کنید تا یک سایت بهینه از نظر تجربه کاربری و سرعت داشته باشید. میزان سختی رفع این خطا بسیار پایین است و به راحتی می‌توانید آن را رفع کنید. این مسئله نه تنها می‌تواند به بهینه‌سازی CLS کمک کند، در نهایت باعث می‌شود تا سرعت سایت شما بیشتر شود.

2. تبلیغات داخل صفحه

استفاده از پلتفرم‌های تبلیغاتی در زمینه نمایش بنر در سایت‌های محتوامحور مدتی است که رایج شده است. این مسئله تاثیر زیادی روی بارگذاری بخش‌های مختلف سایت دارد و گاهی اوقات ممکن است باعث نمایش خطای CLS شود. این خطا روی تجربه کاربری سایت شما تاثیر منفی دارد و به همین دلیل است که باید به آن رسیدگی کنید. مهم‌ترین مشکلاتی که باعث می‌شود تا CLS سایت شما بهینه نباشد، استفاده از embeds و iframes است. به صورت کلی هر کد تبلیغاتی که با کمک اسکریپت انجام می‌شود، منجر به پرش سایت یا همان مشکل CLS می شود که به سایت شما آسیب می‌زند.

برای رفع این خطا در سایت باید از جایگاه‌های خلوت برای نمایش تبلیغات استفاده کنید تا با این خطا روبرو نشوید. مثلاً بخش فوتر که بخش انتهایی هر سایتی است، معمولاً خلوت بوده و جایگاه مناسبی برای نمایش تبلیغات است. اگر می‌خواهید در بخش‌های مختلف سایت خود از چنین تبلیغاتی استفاده کنید، بهترین راه‌کار این است که برای تبلیغات خود width و height قائل شوید تا جایگاه آن مشخص باشد و به همان اندازه در بخش موردنظر شما جای خالی باشد. این مسئله باعث می‌شود تا اگر تبلیغات شما دیر بارگذاری شد، جای آن خالی بماند، کاربر روی المان دیگر کلیک نکند که در نهایت با پرش روی المان دیگر، باعث تعجب کاربر و از بین رفتن بهینه بودن تجربه کاربری شود.

3. محتوای پویای غیرمنتظره

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

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

• رفع خطاهای GTmetrix برای افزایش سرعت بارگذاری – بخش اول

4. بارگذاری فونت و متن

کند بودن سرعت بارگذاری فونت و متن یکی از مشکلاتی است که سایت‌های مختلفی با آن روبرو هستند! شاید برای شما هم پیش آمده باشد که وارد سایتی شده باشید اما زمان بارگذاری فونت طول بکشد. این مشکل باعث می شود تا تجربه کاربری سایت با مشکل روبرو شود! گاهی اوقات تا زمانی که فونت بارگذاری نشده باشد، محتوای متنی هم نمایش داده نمی‌شود و این مسئله می‌تواند تجربه کاربری بسیار بدی برای شما ایجاد کند. 2 حالت برای بارگذاری فونت و متن وجود دارد:

• حالت FOUT: در چنین حالتی متن سایت نمایش داده می‌شود اما هنوز فونت بارگذاری نشده است! در واقع متن با فونت پیشفرض مرورگر نمایش داده می‌شود که به آن Flash of Unstyled Text گفته می‌شود. این حالت باعث می‌شود تا محتوا سریع نمایش داده شود اما فونت آن کمی‌طول بکشد تا نمایش داده شود.
• حالت FOIT: در چنین حالتی به صورت پیش‌فرض تا زمانی که فونت سایت بارگذاری نشده باشد، محتوا هم نمایش داده نمی‌شود. به چنین حالتی Flash of Invisible Text گفته می‌شود که 90 درصد سایت‌ها با چنین مشکلی روبرو هستند! البته رفع این حالت ممکن است اما بهتر است آن را انجام ندهید، چون باعث کاهش سرعت سایت می‌شود.

استفاده از قابلیت font-display به شما کمک می‌کند تا بتوانید این خطا را رفع کنید! به عبارت ساده تر، شما با استفاده از تگ rel=”preload” در هدر سایت خود، این مشکل را رفع کنید. کمک گرفتن از یک کدنویس برای افراد که آشنا نیستند، به آن ها کمک می کند تا بتوانند بدون هیچ گونه مشکلی و به بهترین شکل ممکن این مورد را پیاده سازی کنند و در نهایت یک سایت بهینه در اختیار کاربران قرار دهید.

5. استفاده از انیمیشن‌ها

سایت های زیادی وجود دارند که از انمیمیشن روی صفحات خود استفاده می‌کنند! این مسئله باعث خطای CLS می‌شود؛ البته زمانی این اتفاق می‌افتد که انیمیشن‌های مورد استفاده در سایت بهینه نباشد. معمولاً انیمیشن‌ها فضای خاصی را می‌گیرند و با استفاده از کدنویسی می‌توانید جایگاهی که نیاز دارد را مشخص کنید. بنابراین بهتر است انیمیشن‌های سایت خود را با حجم کمتر قرار دهید و باید به تعیین سایز آن بپردازید.

6. موارد حائز اهمیت دیگر!

روی CLS موارد زیادی تاثیر دارند که در بالا بررسی کردیم! با این وجود ممکن است موارد دیگری هم تاثیر داشته باشند. حتی شاید هنوز بسیاری از متخصصان از آن اطلاع ندارند اما مواردی دیگری هم هستند. با این وجود، بهتر است شما 5 مورد قبلی را بررسی کنید، زیرا مهم‌ترین دلایلی که باعث بهینه نبودن CLS می‌شوند، همین موارد هستند. به عنوان مثال گاهی اوقات با تغییر قالب به یک قالب استاندارد، بسیاری از مشکلات مربوط به بهینه نبودن سایت شما حل می‌شود و در نهایت یک سایت عالی در اختیار کاربران قرار دهید.

گاهی اوقات پیش می‌آید که یک سایت با وجود خطای CLS مشکل خاصی نداشته باشد! برای درک بهتر این موضوع، فرض کنید کاربر بر روی سوالات متداول کلیک می‌کند که پاسخ آن باز می‌شود؛ اگر پاسخ آن باز شود و سایت از نظر CLS بهینه نباشد، کاربر به صورت خودکار به جواب منتقل می‌شود. البته مفید بودن این مورد بسیار محدود است و بهتر است CLS را برای سایت خود به صورت کامل بهینه‌سازی کنید.

نتیجه‌گیری

از مهم‌ترین خطاهای تاثیرگذار روی سرعت بارگذاری سایت، CLS است که می‌تواند روی تجربه کاربری سایت شما هم تاثیر مستقیم داشته باشد. در واقع این خطا 5 درصد از امتیاز کلی جی تی متریکس را شامل می‌شود و این موضوع نشان دهنده اهمیت بسیار زیاد آن است. در این مقاله تقریباً هر چیزی که باید در مورد CLS بدانید را بررسی کردیم. اگر سوالی در مورد این معیار و راه‌کارهایی که ارائه کردیم وجود دارد، می‌توانید از طریق بخش نظرات مطرح کنید تا شما را به صورت کامل راهنمایی کنیم و پاسخ سوالات شما را بدهیم.