6 روش رفع خطای avoid large layout shifts

زمانی که Core Web Vitals در سال ۲۰۲۱ معرفی شد، توسعه‌دهندگان و طراحان متوجه شدند که گوگل، بیشتر از آنچه که به نظر می‌رسد به تعاملات کاربر با صفحه اهمیت می‌دهد. یکی از معیارهای اصلی Core Web Vitals گوگل، Layout Shift است. با خطای avoid large layout shifts تجربه کاربری که از مهم‌ترین فاکتورهای رتبه‌بندی گوگل محسوب می‌شود، دچار ضعف خواهد‌ شد. جابه‌جایی‌های بزرگ می‌تواند آزاردهنده باشد؛ چرا‌‌که ممکن است منجر به خطاهایی برای کاربر شود یا باعث شود افراد جایگاه خود را در یک صفحه از دست بدهند. این موضوع، همچنین نمره سایت شما را کاهش خواهد داد. خوشبختانه، روش‌هایی وجود دارد تا بتوانید برای رفع ارور large layout shifts در هنگام لود صفحه اقدام کنید.

در این مقاله از نجوانت، می‌خواهیم همه چیز را درباره layout Shifts و چگونگی رفع رفع خطای avoid large layout shifts یادبگیریم.

خطای avoid large layout shifts چیست؟

 پیش از اینکه به رفع خطای خطای avoid large layout shifts بپردازیم، بیایید ببینیم که اصلاً ارور large layout shifts چیست؟ در اکثر مواقع، تغییر چیدمان باعث حواس‌پرتی می‌شود. فرض کنید زمان خواندن مطالب سایت، درست در زمانی که به یک پاراگراف خاص می‌رسید، ناگهان عناصر صفحه شروع به جابه‌جاشدن کنند و شما باید دوباره جای قبلی خود را در صفحه پیدا کنید. یا فرض کنید، دکمه‌ای در صفحه وجود دارد در هنگام کلیک به سمت پایین پرش می‌کند. این مشکل در ظاهر کوچک برای یک تجربه کاربری بد، کافی به نظر می‌رسد؛ حتی ممکن است باعث شود کاربر گمان کند که سایت شما خراب است.

همان‌طور که گفتیم، خطای avoid large layout shifts باعث افزایش CLS می‌شود و در نهایت performance سایت کاهش خواهد یافت. درواقع امتیاز CLS بدین شکل طبقه‌بندی می‌شود:

• امتیاز CLS کمتر از 0.1: خوب
• امتیاز CLS بین 0.1 و 0.25: نیاز به بهبود
• امتیاز CLS بیشتر از 0.25: ضعیف

 اما فرق Large Layout Shifts و Cumulative Layout Shift (CLS) در چیست؟ CLS به کل تغییرات چیدمان در طول زمان بازدید کاربر اشاره داشته و large Layout Shifts به تغییرات بزرگ و ناگهانی اشاره دارد و از تغییرات جزئی و کوچک چشم‌پوشی می‌کند.

راه های تشخیص خطای avoid large layout shifts

برای رفع ارور large layout shifts، شما باید اول مطمئن شوید که این خطا در صفحه شما وجود دارد. البته، این خطا بسیار واضح است و با مشاهده مستقیم نیز می‌توان به آن پی برد. اما برای یافتن دقیق المانی که باعث بروز این مشکل می‌شود، بهتر است که از ابزارهای زیر استفاده کنید:

• استفاده از ابزار Lighthouse: ابزار Lighthouse در مرورگر Chrome به شما کمک می‌کند تا مشکلات مربوط به تجربه کاربری را شناسایی و رفع کنید. با اجرای این ابزار، می‌توانید به گزارش‌های دقیقی درباره مشکلات مربوط به “Layout Shifts” دست پیدا کنید.
• استفاده از ابزار PageSpeed: یکی دیگر از ابزارهای مفید برای تشخیص و رفع خطای avoid large layout shifts، استفاده از PageSpeed Insights است. این ابزار توسط Google ارائه شده و به شما کمک می‌کند تا عملکرد وب‌سایت خود را ارزیابی و بهبود بخشید.
• استفاده از ابزار GTmetrix: یکی دیگر از ابزار‌های مفید برای تشخیص و رفع خطای avoid large layout shifts استفاده از GTmetrix است. این ابزار قدرتمند، تجزیه و تحلیل جامعی از عملکرد وب‌سایت شما ارائه می‌دهد و به شناسایی مشکلاتی که باعث تغییرات ناگهانی چیدمان می‌شوند، کمک می‌کند.

در مقاله «بهترین ابزار های تست سرعت» به طور مفصل و دقیق در این باره توضیح داده‌ایم.از این رو، برای کسب اطلاعات بیشتر و آشنایی با تکنیک‌ها و ابزارهای پیشرفته در این زمینه، مطالعه این مقاله را به شما توصیه می‌کنیم.

راهکارهای رفع خطای avoid large layout shifts چیست؟

تا به اینجا، متوجه شدید که خطای خطای avoid large layout shifts چیست و چگونه عناصری را که در وب سایت خود که در حال تغییر هستند شناسایی کنید. اما هنوز نمی‌دانید که چطور باید ارور large layout shifts را رفع کرد. ما روش‌های زیر را برای رفع خطای large Layout Shifts، پیشنهاد می‌کنیم.

1. برای تصاویر ابعاد مشخص کنید

با ظهور طراحی ریسپانسیو، طراحان وب روش‌های دیگری را جایگزین اندازه دادن به المان‌های درون صفحه کردند؛ اما این موضوع، منجر به مشکلاتی در هنگام بارگذاری تصاویر شد. بدین منظور می‌توانید بصورت inline و در تگ imag ویژگی‌های عرض و ارتفاع را تنظیم کرده و از CSS برای تغییر اندازه تصاویر در صورت نیاز استفاده کنید. این عمل به مروگرها اجازه می‌دهد تا قبل از بارگذاری کامل تصاویر، فضا را برای تصویر مورد نظر رزرو کرده و از تغییر ناگهانی چیدمان در صفحه جلوگیری کنند. البته باید بدانید که این فقط مربوط به تصاویر نمی‌شود و نیاز دارید که ابعاد فیلم‌ها و آی فریم‌ها را نیز مشخص کنید.

2. پیش بارگذاری فونت ها

Preload فونت‌های وبسایت، روش های گوناگونی را شامل می‌شود:

• استفاده از ویژگی preload در تگ link: یکی از روش‌های مؤثر برای این کار استفاده از تگ <link> با خصوصیت rel=”preload” است. این خصوصیت به مرورگر شما این پیغام را می‌دهد که  فونت مورد نظر باید پیش از دیگر منابع بارگذاری شود، حتی اگر هنوز نیازی به آن فونت در صفحه نباشد. اگر فونت‌ها به موقع بارگذاری شوند، مرورگر می‌تواند از همان ابتدا از آن‌ها برای نمایش محتوای متن استفاده کند و باعث می‌شود که محتوای صفحه بدون تاخیر و بدون پرش محتوایی نمایش داده شود.
• استفاده از font-display: ویژگی font-display در CSS به شما اجازه می‌دهد کنترل بیشتری بر روی نمایش فونت‌های وب داشته باشید. به این شکل که با قرار دادن یک فونت جایگزین درصفحه از پرش ناگهانی جلوگیری کرده و تا زمان بارگذاری کامل فونت اصلی، فونت جایگزین نمایش داده خواهد شد.

3. محتوای پویا را بهینه کنید

انیمیشن‌ها، یکی از مهمترین متخلفان CLS هستند. در حالی که این نوع محتوا می‌تواند در کمک به جذب کاربر بسیار موثر باشد، اگر سبب بی‌ثباتی بصری شود، ممکن است آنها را بترساند. ویژگی CSS Transitions معمولاً منجر به انیمیشن‌های روان‌تر با سرعت بارگذاری بهتر می‌شود و احتمال کمتری دارد که باعث تغییر در layout بندی صفحات شود، بهتر است که برای انیمیشن، بیش از پیش از آن بهره بگیرید.

4. کاهش حجم تصاویر

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

5. از ویجت‌های شخص ثالث دوری کنید (Third-Party)

ویجت‌های شخص ثالث مانند Google Maps به جهت اینکه بعد از رندر اولیه بارگذاری می شوند، باعث خواهند شد که اشیا به طور ناگهانی ظاهر شوند و موجب افزایش عدد CLS شود. به جای قرار دادن نقشه تعاملی از یک نقشه تصویر ثابت استفاده کنید. همچنین می‌توانید این ویجت‌ها را با استفاده از «async» یا «defer» بارگیری کنید تا امکان بروز مشکل کاهش یابد.

6. بهینه سازی JS و CSS

از ابزار‌های minify برای کاهش فضای خالی فایل‌های JS و CSS و افزایش سرعت سایت استفاده کنید. سعی کنید unused CSS و unused js را به حداقل برسانید. همچنین بارگیری ناهمزمان را فراموش نکنید. بهترین راه این است که هر جاوا اسکریپت غیر ضروری را به طور ناهمزمان بارگیری کنید. این موضوع اجازه می‌دهد تا اول محتواهای مهمی که اسکلت صفحه را می‌سازند، پیش از جاوا اسکریپت بارگذاری شوند.

سخن پایانی

CLS ثبات بصری را اندازه گیری می‌کند و یکی از سه شاخص اصلی عملکرد یک وب سایت است. اگر خطای خطای avoid large layout shifts جدی گرفته نشود، تاثیرات غیر قابل انکاری را بر روی رتبه بندی سایت می‌گذارد، مانند: خروج کاربران از صفحه و افزایش نرخ پرش، کاهش زمان حضور کاربر در صفحه به دلیل تجربه کاربری ضعیف و از همه مهمتر، کاهش رتبه سایت در نتایج. با دنبال کردن دستورالعمل‌های رفع ارور خطای avoid large layout shifts این مقاله، از شر خطاهای CLS خلاص شوید و به عدد صفر تغییر در طرح بندی صفحات وب‌سایت خود برسید. همچنین، جهت ارتقاء نمره Core Web Vitals سایت خود و دستیابی به عملکرد بهینه، پیشنهاد می‌کنیم نگاهی به سایر آموزش‌های ما بیندازید:

• • رفع خطای properly size images
  • رفع ارور Eliminate render-blocking resources
  • رفع ارور defer offscreen images
  • رفع ارور Use passive listeners to improve scrolling performance

سؤالات متداول