آموزش سئو پیشرفتهآموزش سئو فنیخطاهای GTMetrixسئو داخلیسئو وردپرسمقالات سئو

جلسه ۵ – Cumulative Layout Shift چیست + بهبود آن

CLS چست و چطور خطای Avoid large layout shifts بهبود بدیم؟

در این آموزش قصد داریم به زبان ساده بگیم Cumulative Layout Shift یا CLS داخل ابزار Gtmetrix چیست و با این خطا چه کنیم؟ چطور بهبود بدیم؟ آیا این خطا هست؟

نویسنده این مقاله من پوریا آریافر از میزفا هستم، این یک مقاله ترجمه از سایر سایت‌ها نیست، سعی کردیم از دانش و تجربه ی که خودمون داشتیم به همراه یک سری سایت‌های معتبر یک مقاله خوب رو برای شما جمع آوری کنیم. خوشحال میشیم همراهمون باشید.

فاکتور Cumulative Layout Shift در ابتدا توسط گوگل داخل Lighthouse Google بود و بعد از مدتی ابزار Gtmetrix هم این مورد رو جزء فاکتورهاش در نظر گرفت. کلا گوگل هر کاری کنه بقیه چه بخوان چه نخوان تابع اون رفتار میکنن.

نکته قابل توجه این هست که دیگه مثل گذشته فاکتورهای سرعت ساده نیست و برای حل کردن خیلی از فاکتورهای جدید نیاز به تخصص بالا (در زمینه برنامه نویسی و سئو و گاهی UX) هست و صرفا با خوندن چند مقاله فارسی و خارجی کار خاصی نمیشه کرد. اینو ابتدا گفتم تا یک وقت انتظار زیادی از خودمون یا مقاله نداشته باشیم 😉
شبیه معجزه: مثلا یک کد بدیم و بعد اجی مجی کنیم و بذارید تو سایتتون و این فاکتور بهبود پیدا کنه و سبز بشه (قبلا در میزفا یک سری کاربرها از ما چنین انتظاراتی داشتن).

نکته مهم: در بخش خطاهای Structure خطایی با عنوان Avoid large layout shifts داریم که دقیقا مربوط به همین مقاله هست، پس با خوندن این مقاله هم گزارش خطاهای Structure  و هم گزارش Performance در جی تی متریکس شما بهود پیدا میکنه.

Cumulative Layout Shift دقیقا چی هست؟

تا حالا برات پیش اومده که وارد یک سایت شدی و منتظر لود شدن یک بخشی از سایت هستی ولی یهو بعد از لود شدن سایت اون بخش از سایت میره پایین؟ و یا میخوای روی یک دکمه مثلا “بله” داخل یک سایت کلیک کنی تا دستت میخواد بخوره به اون دکمه یک متن بالای دکمه ظاهر میشه و ممکنه ناخواسته روی “خیر” بزنی و یک تجربه کاربری بد برات رخ بده.

Cumulative Layout Shift که مخفف اون میشه CLS اومده میگه این موارد بالا رو حل کنیم و توی سایت نباشه، به همین سادگی.

هر چی عدد CLS کمتر باشه بهتره و هر چی بیشتر باشه یعنی سایت شما به بهینه سازی بیشتری نیاز داره.

پخش ویدیو

ویدیو بالا رو نگاه کنید، ابتدا بخش سبز وسطی لود میشه درحالی که بخش سبز بالا لود نشده ولی جاش خالی هست و کم کم لود میشه و هیچ جابه‌جایی بین بخش‌های مختلف در عکس بالا نداریم. (منبع ویدیو)

پخش ویدیو

در ویدیو بالا اول قرمز وسطی لود میشه ولی چون قرمز بالایی هنوز لود نشده این قرمز وسطی بالاتر هست و وقتی قرمز بالایی لود میشه یهو کاربر شاهد این میشه که قرمز وسطی بپره پایین تر و این تجربه کاربری منفی داره.

پخش ویدیو

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

به زبان تخصصی CLS چیست؟

حالا اگر کمی تخصصی بگیم CLS چیست باید بگیم CLS معیاری برای اندازه گیری ثبات بصری در زمان بارگذاری یک صفحه گفته میشه یا یک تعریف دیگه اینه یک معیار و اندازه گیری برای تغییر غیرمنتظره عناصر وب در زمان لودن شدن برای کاربر هست.

CLS (Cumulative Layout Shift) یکی از فاکتورهای مهم داخل معیار Web Vitals هست. معیار Web Vitals یکی از بخش های مهم در گزارش Performance جی تی متریکس هست.

درضمن به Layout Shift به فارسی جابجایی چیدمان هم گفته میشه.

معیار خوب و بد در Cumulative Layout Shift

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

  • ۰.۱ یا کمتر : خوب
  • بین ۰.۱ تا ۰.۱۵ : قابل قبول، اما نیازمند بهینه سازی
  • بین ۰.۱۵ تا ۰.۲۵ : کمی طولانی‌تر از حد استاندارد
  • بیشتر از ۰.۲۵: خیلی طولانی‌تر از حد استاندارد

اگر یک وبسایتی CLS پایین داشته باشه یعنی دارای صفحه نمایش پایداری است که عناصر رو به اطراف منتقل نمیکنه و بارگیری ثابت و قابل پیش بینی تمام محتوای وب سایت را تضمین میکنه. طبیعتا شما اگر CLS رو بهبود بدید نهایتا Performance سایت شما ۵ درصد بهبود پیدا میکنه.

هشدار: ما انسان‌ها کلا خیلی توی تست گیری هامون اشتباه می‌کنیم یک نمونه اشتباه اینکه ذهن خوب انعطاف پذیر خودمون رو سپردیم به ابزارها و اعداد (برخی ها اشتباهات ابزارها رو داخل مقاله علت متفاوت بودن گزارش های GTMetrix گفتم)، یا یک نمونه اشتباه دیگه اینکه فکر میکنیم این فاکتور سرعت سایت یعنی CLS فقط برای صفحه اصلی سایت هست، به عبارت دیگر دوستان فقط صفحه اصلی رو باهاش بررسی و آنالیز میکنن درحالی که سایر صفحات هم بسیار مهم هست.

چطور کاهش Cumulative Layout Shift بدیم؟

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

۱ – خطای Specifying image dimensions

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

ویدیو زیر حتما نگاه کنید تا بهتر درک کنید.

پخش ویدیو

۲ – تبلیغات داخل صفحه

تبلیغات که الان بسیار بسیار داخل سایت‌ها زیاد شده، مخصوصا از زمانی که آژانس‌های تبلیغات کلیکی آومدن. قرار دادن کد اسکریپت این سایت‌ها برای نمایش تبلیغات میتونه روی طولانی کردن زمان CLS اثر بذاره.
یا embeds و iframes یک سری سایت‌ها، فیلم‌ها، نقشه‌ها و … که می‌تونه یک shift بد رو برای کاربران سایت شما رخ بده.

مثلا می تونید این موارد رو در انتهای صفحه لود کنید و یا از قبل به اون بخش width و height بدید. البته این راه حل توی اکثر موارد برای همه کاربردی هست.

۳ – محتوای پویای غیرمنتظره

من قبلا گوشی قدیمی خودم رو سرچ کردم و وارد دیجی کالا شدم، داشتم مشخصات گوشی قدیمی خودم نگاه میکردم که یهو صفحه رفت پایبن تر!! چرا؟
چون تازه بخش محصولات مرتبط با اون گوشی قدیمی (مثلا اخرین نسخه) بالای محصول شد. البته الان این مشکل حل کردن ولی هر محتوایی مثل محصولات مرتبط یا مقالات مرتبط و یا اومدن خبرنامه به صورت غیرمنتظره در بین بخش های داخلی سایت که باعث به وجود آوردن Shift صفحه میشه جلوگیری کنید.

۴ – فونت همون اول لود نشه بد نمیشه

ما طبق تجربه ای که در خدمات سرعت سایت در میزفا داشتیم متوجه شدیم که خیلی از سایت‌ها  مورد بالا رو رعایت نمیکنن. بذارید بیشتر بهتون توضیح بدم.

الان فونت میزفا “ایران‌سنس” هست، برای اینکه شما بتونید متن‌های میزفا رو با این فونت ببینید باید مرورگر شما این فونت‌ها رو لود کنه و بعد پردازش کنه تا همه متن‌ها بر اساس فونت ایران‌سنس لود بشن. دو حالت هست:

  1. متن سایت نمایش داده میشه با فونت پیش فرض مرورگر و هر زمان فونت سایت لود شد تغییر پیدا می‌کنه به فونت موجود در سایت، مثلا در میزفا ایران‌سنس هست. به این حالت میگن: Flash of Unstyled Text یا به صورت مخفف FOUT
  2. متن سایت نمایش داده نمیشه تا زمانی که فونت سایت کامل و دقیق برای کاربر لود و پردازش بشه، به این حالت میگن: Flash of Invisible Text یا به صورت مخفف FOIT
منبع عکس

حالا مسئله چی هست؟:
عکس بالا خیلی واضح داره فرق این تو مورد رو میگه، در حالت FOUT متن سریع‌تر نمایش داده میشه و سرعت سایت بهتر میشه به عبارت دیگر حالت FOUT پیشنهاد میشه ولی یک مشکل داره و اینکه حالت FOUT مشکل Layout Shift رو داره. (حالت FOIT که ۹۰ درصد سایت‌ها دارن رو بررسی نمی کنیم چون باعث کندی سایت میشه).

چه کنیم؟:
از font-display برای از بین بردن FOIT و فعال کردن FOUT استفاده کنید و در نهایت برای حل کردن مشکل  FOUT بهتره (همون Layout Shift) از rel="preload" کردن فونت در head سایت استفاده کنید. (امیدوارم فهمیده باشی چی میگم، اینجا رو باید متخصص انجام بده برات) با مثال بهتر توضیح میدم:

                    
@font-face {
  font-family: 'Pacifico';
  font-style: normal;
  font-weight: 400;
  src: local('Pacifico Regular'), local('Pacifico-Regular'), url(https://fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2) format('woff2');
  font-display: swap;
}                    
                

در مثال بالا اومدیم از ویژگی font-display: swap; استفاده کردیم تا حالت FOUT فعال بشه و سرعت بهتر بشه، حالا اگر توجه کنید یک آدرسی اون فونت بالا داره در بخش src. اون آدرس برمیدارم و در کدی شبیه به زیر درج میکنم و در هدر سایت قرار میدم تا این کار باعث بهبود Cumulative Layout Shift بشه (توجه کنید گفتیم بهبود و نگفتیم رفع کامل این خطا).

                    
<link rel="preload" href="fontname" as="font" type="font/format" crossorigin>
                    
                

۵ – انیمیشن ها

الان استفاده از انیمیشن در سایت‌ها بسیار زیاد شده ما در خود میزفا و در بخش خدمات سئو از انیمیشن، فیلم زیاد استفاده کردیم، یا صفحه اصلی یک انیمیشن به صورت SVG داره و در حال استفاده هستیم .
ولی گاهی این انیمیشن ها در برخی لایه‌ها خارج از چهارچوب به فضا نیاز دارن و باعث میشه Shift در صفحه رخ بده. پس پیشنهاد میشه اگر شما انیمیشن دارید و یا به کمک CSS این انیمیشن ها رو نوشتید یک توجه ویژه داشته باشید.

۶ – و دیگر موارد در بهبود زمان Cumulative Layout Shift

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

اگر اطلاعات بیشتری درباره CLS خواستید میتونید مقاله انگلیسی سایت web.dev رو هم بخونید.

Layout Shift همیشه بد نیست!

مواردی که اشاره کردیم مربوط به Unexpected Layout Shift بود به عبارت دیگر تغییراتی که ما انتظار نداشتیم ولی گاهی وقت‌ها ما کاربران یک سری تغییرات رو هم انتظار داریم. مثلا:
روی یکی از سوالات متداول کلیک میکنی و انتظار داری صفحه به قولی به سمت پایینن shift بشه یعنی عمل Layout Shift اتفاق میوفته. این موارد Expected Layout Shift می‌تونیم بگیم.

جمع بندی CLS

CLS گفتیم از Cumulative Layout Shift میاد و این معیار هم در Lighthouse گوگل هست و هم در گزارش Core Web Vitals گوگل سرچ کنسول و هم در GTMetrix نقش داره.

CLS چیست؟ گفتیم که معیاریه برای بررسی پایداری عناصر، در حین لود شدن صفحه و کاملا روی ایجاد تجربه کاربری تمرکز داره. محتواها و عناصر صفحه نباید به‌صورت غیرمنتظره‌ای جابجا بشن و باعث سردرگمی کاربر بشن.

مجموع جابجایی‌های عناصر صفحه، میزان Cumulative Layout Shift رو مشخص می‌کنه که هرچقدر کمتر باشه، صفحه ما پایدارتر و UX بهتر خواهد بود. جابجایی محتواها گاهی اوقات به دلیل تبلیغات موجود در صفحه هست که ناگهان بالای صفحه ظاهر میشه و باعث جابجایی سایر محتواهای صفحه به سمت پایین میشه.

نکته مهم: در بخش خطاهای Structure خطایی با عنوان Avoid large layout shifts داریم که دقیقا مربوط به همین مقاله هست، پس با خوندن این مقاله هم گزارش خطاهای Structure  و هم گزارش Performance در جی تی متریکس شما بهود پیدا میکنه.

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

حتما آموزش های مربوط به رفع خطاهای gtmetrix میزفا دنبال کنید. و یا اگر به سئو فنی علاقه دارید مباحث سئو فنی و تکنیکال رو دنبال کنید.

نویسنده مقاله: پوریا آریافر / متخصص سئو

پوریا آریافر

اولین کسب و کار آنلاین خودم رو در فیسبوک راه‌اندازی کردم، سال ۲۰۱۱ یکی از پرتعامل‌ترین صفحات فارسی با ۸۰ هزار فالور فعال رو داشتم. بعد اینکه فیسبوک خالی از کاربر ایرانی شد وارد دنیای شبکه شدم و در انتهای سال ۲۰۱۲ مدرک MCSE مایکروسافت رو دریافت کردم، در حالی که نمره بالا گرفتم ولی کسی به دلیل به خطر افتادن موقعیت شغلی خودش به عنوان کارآموز منو قبول نمی‌کرد، بعدش با شروع دوران خدمت سربازی، مسئول بهینه سازی یک سایت خبری معتبر شدم و سئو یاد گرفتم. در ابتدای سال ۲۰۱۴ تونستم از رتبه ۱۵۰۰۰ به ۴۰۰ الکسا نزدیک کنم، اون زمان الکسا خیلی مهم بود. وارد دانشگاه شدم، به دلیل عدم علاقه به دانشگاه سعی کردم زودتر تمومش کنم و سه ساله در مقطع کارشناسی IT فارغ التحصیل شدم، توی دانشگاه هر کسی منو میدید یاد سئو میوفتاد، در همون سال آخر دانشگاه بزرگ‌ترین کانال تلگرامی IT با ۴۰ هزار عضو رو داشتم، که به مجتمع فنی فروختم تا بتونم تمرکز رو فقط بر روی عشق خودم یعنی سئو بذارم، وقتی کانال تلگرام فروختم حس پرواز بهم دست داد، هرچند درآمد چندین میلیون ماهانه رو از دست دادم ولی دوباره باید مثل گذشته با پوستی نو یک فصلی نو رو میساختم. در این چندین سال فعالیت‌های سئو به شکل تخصصی بنده در قالب پروژه‌های مختلف و آموزش‌های حضوری و غیرحضوری در دفتر میزفا و دانشگاه علامه طباطبایی تهران صورت ‌گرفته، تجربه بهینه سازی موفقی در بهبود UX و CRO پروژه‌های سئو کسب کردم. در اکثر ابزارهای کاربردی گوگل تسلط کاملی دارم. عاشق کسب تجربه های جدید هستم. راز پیشرفت در هر کاری رو یادگیری و یاددادن می‌دونم و میزفا که در اواخر ۲۰۱۶ راه‌اندازی شد تونست چنین بستر مناسبی رو برام فراهم کنه. همینطور در حال حاضر مدیریت یک تیم ۱۰ نفری از جوانان فعال و پرانگیزه رو در میزفا به عهده دارم. نقد و بازخوردهای سازنده شما، جوهر تلاش‌های مستمر ماست تا یک قدم خودمون بهبود بدیم. منتظریم ...

نوشته های مشابه

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

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

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

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

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

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