در این آموزش قصد داریم به زبان ساده بگیم 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 صفحه میشه جلوگیری کنید.
۴ – فونت همون اول لود نشه بد نمیشه
ما طبق تجربه ای که در خدمات سرعت سایت در میزفا داشتیم متوجه شدیم که خیلی از سایت‌ها مورد بالا رو رعایت نمیکنن. بذارید بیشتر بهتون توضیح بدم.
الان فونت میزفا “ایران‌سنس” هست، برای اینکه شما بتونید متن‌های میزفا رو با این فونت ببینید باید مرورگر شما این فونت‌ها رو لود کنه و بعد پردازش کنه تا همه متن‌ها بر اساس فونت ایران‌سنس لود بشن. دو حالت هست:
- متن سایت نمایش داده میشه با فونت پیش فرض مرورگر و هر زمان فونت سایت لود شد تغییر پیدا میکنه به فونت موجود در سایت، مثلا در میزفا ایران‌سنس هست. به این حالت میگن: Flash of Unstyled Text یا به صورت مخفف FOUT
- متن سایت نمایش داده نمیشه تا زمانی که فونت سایت کامل و دقیق برای کاربر لود و پردازش بشه، به این حالت میگن: Flash of Invisible Text یا به صورت مخفف FOIT
حالا مسئله چی هست؟:
عکس بالا خیلی واضح داره فرق این تو مورد رو میگه، در حالت FOUT متن سریع‌تر نمایش داده میشه و سرعت سایت بهتر میشه به عبارت دیگر حالت FOUT پیشنهاد میشه ولی یک مشکل داره و اینکه حالت FOUT مشکل Layout Shift رو داره. (حالت FOIT که ۹۰ درصد سایت‌ها دارن رو بررسی نمی کنیم چون باعث کندی سایت میشه).
چه کنیم؟:
از font-display برای از بین بردن FOIT و فعال کردن FOUT استفاده کنید و در نهایت برای حل کردن مشکل FOUT بهتره (همون Layout Shift) از rel="preload" کردن فونت در head سایت استفاده کنید. (امیدوارم فهمیده باشی چی میگم، اینجا رو باید متخصص انجام بده برات) با مثال بهتر توضیح میدم:
در مثال بالا اومدیم از ویژگی font-display: swap; استفاده کردیم تا حالت FOUT فعال بشه و سرعت بهتر بشه، حالا اگر توجه کنید یک آدرسی اون فونت بالا داره در بخش src. اون آدرس برمیدارم و در کدی شبیه به زیر درج میکنم و در هدر سایت قرار میدم تا این کار باعث بهبود Cumulative Layout Shift بشه (توجه کنید گفتیم بهبود و نگفتیم رفع کامل این خطا).
۵ – انیمیشن ها
الان استفاده از انیمیشن در سایت‌ها بسیار زیاد شده ما در خود میزفا و در بخش خدمات سئو از انیمیشن، فیلم زیاد استفاده کردیم، یا صفحه اصلی یک انیمیشن به صورت 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 میزفا دنبال کنید. و یا اگر به سئو فنی علاقه دارید مباحث سئو فنی و تکنیکال رو دنبال کنید.
نویسنده مقاله: پوریا آریافر / متخصص سئو
14 پاسخ
سلام دوستان وقت بخیر بنده یه سایتی دارم یکی از صفحاتش بدون دلیل مشکل CLS خورده کسی میتونه کمک کنه ؟
https://pasargadlaw.com/وام-فوری
https://pasargadlaw.com/وام-نقدی
توی صفحه اول هیچ مشکلی نیست ولی دومیه مشکل داره کاملا هم یکسانن صفحات
سلام هاتف عزیز
من هر دو صفحه رو با GTmetrix و میزفا تولز تست کردم. صفحه وام فوری هم CLS داره، ولی کمه.
پیدا کردن علتش کار راحتی نیست و لازمه یه برنامه نویس بیاد و طراحی، چیدمان و کدهای صفحه رو بررسی کنه. به نظرم مشکل میتونه از جدول هم باشه.
از نظر من مشکل CLS صفحات شما جدی نیست و تجربه کاربری بدی رو ایجاد نمیکنه. اما یه مشکل جدی‌تر داری که توصیه میکنم وقتت رو برای حل کردن اون صرف کنی و اون هم مشکل اولین ارتباط با سرور هست که یه مقدار کند انجام میشه. هرچند همین مشکل هم آنچنان جدی نیست و کلا این ۲ صفحه از سایتت سرعت مطلوب و قابل قبولی داره. با این حال می‌تونی مقاله TTFB چیست رو مطالعه کنی.
برات آرزوی موفقیت داریم
عالی توضیح دادید درود بر شما
ممنونیم از حضور شما
سلام پوریا
سایت دارم تمام افزونه هامو غیر فعال میکنم و قالبم رو هم عوض کردم بازم خطای cls دارم از گوگل کنسول . یک دامنه دیگه دارم داخل همون هاست و با همون افزونه ها و قالب هیچ مشکلی ندارد .
سایتم
pjlift.irممنون میشم راهنمایی کنید
درود
به خاطر انیمیشنی هست که زیر متن زیر گذاشتی. (حدس میزنم)
آیا میدانستید . . . ؟سلام وقت بخیر
بنده خیلی وقت هست که با خطای cls دست و پنجه نرم میکنم و تا الان هم نتونستم این مشکل رو حل کنم.حتی دادم قالب جدید برام ساختند ولی باز هم درست نشد.اگر کسی هست که بتونه اینجا خطای cls سایت منو کاهش بده لطفا توی تلگرام بهم پیام بده و در مورد قیمتش به توافق برسیم
@vahidfarzin20
سلام بسیار مچکر از مقاله خوب شما
سلام وقت بخیر
ممنون از مطالب واقعاً بی نظیرتون که خیلی آموزش دهنده است.
یک مطلبی که باعث شده مثل همین عکس گربه بشم، اینکه که در هنگام کار با افزونه slider revolution هر تنظیماتی انجام میدم اما به محض فعال سازی ارور layout shift به gtmetrixام اضافه میشه و الان مجبور شدم که کلا برش دارم از صفحه اصلی سایتم.
ولی خیلی هم به چنین افزونه ای نیاز دارم، لطف میفرمائید راهنمایی کنید که یا چطور این مشکل و با این افزونه حل کنم یا کلاً ی افزونه مشابه لطفاً پیشنهاد بدید.
خیلی خیلی ممنونم
سلام منفرد.
انیمیشن های این اسلایدر رو غیرفعال کن.
ممنون از جوابتون
اما حتی یک اسلاید جدید بدون انیمیشن ساختم و گزارش gtmetrix رو میبینید که تغییری ایجاد نکرد.
https://gtmetrix.com/reports/www.jahanbaygan.com/T6zZGVSG/خطا مربوط به باکس زیر اسلایدر هست.
سلام بابتی کدی که گفتین بذاریم تو هدر آدرس src رو کجا قرار بدهیم ؟جلوی href؟
سلام
اگر منظورت تگ link هست باید داخل تگ head باشه.
موردی که خودت گفتی اشتباه هست.