CLS چیست؟ راهنمای کامل رفع خطای CLS در PageSpeed

امروزه در دنیای وب، رقابت بر سر ثانیهها نیست، بلکه بر سر میلیثانیههاست. همواره هدف متخصصان و طراحان سایت، اجرای راهکارهایی برای بهبود سرعت سایت و تجربه کاربری بوده است. اما سرعت تنها معیار رضایت کاربر نیست؛
ثبات بصری صفحه نیز به همان اندازه حیاتی است. در این مقاله از بخش خدمات افزایش سرعت سایت کانفیگ وردپرس با پاسخ سوالاتی مانند CLS چیست؟ چرا cls دارای اهمیت است؟ و راهکارهای بهبود آن آشنا میشوید. همچنین اثرات CLS چیست؟ و تکنیکهای بهینه سازی cls را فرا خواهید گرفت.
اگر شما هم طراح سایت یا متخصص سئو باشید، حتماً واژه CLS چیست یا (Cumulative Layout Shift) را بارها در گزارشهای PageSpeed یا GTmetrix مشاهده کردهاید. شاید برایتان پیش آمده باشد که در حال مطالعه یک مقاله جذاب هستید، اما ناگهان یک تصویر لود میشود و تمام متن را به پایین هل میدهد و شما خطی را که میخواندید گم میکنید. این دقیقاً همان مفهوم CLS است.
در این مقاله بهصورت کامل توضیح میدهیم CLS چیست و چگونه با بهینه سازی CLS میتوان سرعت سایت را افزایش داد و امتیاز PageSpeed و GTmetrix را بهبود بخشید.
آنچه در این مقاله می خوانید :
CLS چیست و مکانیزم فنی آن چگونه است؟
پیش از آنکه به سراغ راهکارها برویم، باید درک عمیقتری از ماهیت فنی این شاخص داشته باشیم. CLS مخفف Cumulative Layout Shift یا تغییر تجمعی چیدمان است. CLS یا Cumulative Layout Shift یکی از مهمترین معیارهای Core Web Vitals است که میزان جابجایی ناگهانی عناصر صفحه در زمان لود سایت را اندازهگیری میکند.

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

فرمول محاسبه آن حاصلضرب دو مولفه است:
- کسر ضربه (Impact Fraction): چه مقدار از فضای دید (Viewport) تحت تأثیر تغییر قرار گرفته است.
- کسر فاصله (Distance Fraction): المانها چه مسافتی را نسبت به موقعیت اولیه خود طی کردهاند.
بنابراین، هرچه المانهای بزرگتر، مسافت بیشتری را جابهجا شوند، نمره CLS شما بدتر خواهد شد.
اثرات Cls در تجربه کاربری و سرعت سایت
اگر هنگام باز شدن صفحه، با جا به جایی المان ها صفحه مواجه شدید مثلا متنها بالا و پایین میپرند، یا عکسها ناگهان ظاهر میشوند یا دکمهها تکان میخورند، یعنی سایت شما CLS بالا دارد. این موضوع فراتر از یک مشکل فنی ساده است و مستقیماً روانشناسی کاربر را هدف قرار میدهد.
در این صورت، این خطا باعث میشودکه:
- کاربر احساس کند سایت بیثبات است: حس عدم اطمینان به برند شما منتقل میشود. سایتی که “لرزش” دارد، از نظر کاربر سایت امن و حرفهای نیست.
- روی دکمه اشتباه کلیک کند: تصور کنید کاربر میخواهد روی دکمه “لغو” کلیک کند، اما ناگهان یک بنر تبلیغاتی لود میشود و دکمه “خرید” زیر انگشت او قرار میگیرد. این فاجعه در تجربه کاربری (Dark Pattern) میتواند اعتماد کاربر را برای همیشه از بین ببرد.
- صفحه را سریع ببندد: کاربران امروزی کمحوصلهاند و بیثباتی بصری یکی از اصلیترین دلایل خروج زودهنگام (Bounce Rate) است.
- و در نهایت امتیاز PageSpeed و رتبه سئو کاهش پیدا کند: گوگل صراحتاً اعلام کرده است که سایتهایی که تجربه کاربری ضعیفی ارائه دهند، شانس کمتری برای رتبههای برتر دارند.
مقادیر استاندارد CLS چقدر است؟
برای یک متخصص سئو، طراح سایت و یا متخصص سرعت، دانستن اعداد و ارقام دقیق برای تحلیل وضعیت سایت حیاتی است. طبق استاندارد رسمی گوگل بازه نمره و امتیاز cls بین ( 0.1 و 0.25) میباشد که هر یک از این ارقام دارای معانی مختلفی است.
سوال مهمی که با آن روبرو هستیم، این است که کسب چه نمره ای از cls، وضعیت و عملکرد سایت ما را مطلوب نشان میدهد؟
در این بخش به صورت کامل به آن پرداخته ایم:

وضعیت بحرانی (Poor):
CLS بالای 0.25 : نیاز به بهبود فوری. اگر سایت شما در این وضعیت قرار دارد، یعنی تغییرات چیدمان به حدی زیاد است که کاربر کاملاً متوجه آن میشود. این سایتها معمولاً از نظر گوگل کیفیت پایینی دارند و در آپدیتهای هسته (Core Updates) بیشترین ضربه را میخورند.
وضعیت نیازمند بهبود (Needs Improvement):
CLS بین 0.15 و 0.25 : بهینه سازی مطلوب و نیاز به بهبود بیشتر
در این بازه، وضعیت سایت فاجعهبار نیست اما هنوز هم ایدهآل محسوب نمیشود. ممکن است در برخی مرورگرها یا دستگاههای خاص (مخصوصاً موبایل با سرعت اینترنت پایین) کاربران دچار مشکل شوند.
وضعیت عالی (Good):
CLS کمتر از 0.15 : بهینه سازی عالی (گوگل معمولاً زیر 0.1 را به عنوان معیار سبز و عالی در نظر میگیرد).
رسیدن به این عدد یعنی المانهای صفحه شما مثل سنگ در جای خود ثابت هستند و کاربر تجربهای روان و لذتبخش دارد.
اگر CLS بالا یا پایین باشد چه میشود؟
تحلیل پیامدهای نمره CLS به ما کمک میکند تا اولویتبندی پروژههای سئو را بهتر انجام دهیم.
اگر CLS بالای 0.25 باشد چه میشود؟ CLS بالا ( مثلا > 0.25 ) یعنی صفحه در هنگام بارگذاری پایدار نیست و المانها جابه جا میشوند. در نتیجه:
- سبب کاهش و افت تجربه کاربری میشود: کاربران هنگام کلیک کردن یا خواندن مطالب سایت دچار خطا میشوند به عنوان مثال باعث کلیک اشتباه روی دکمه های سایت میشود. این امر در فروشگاههای اینترنتی میتواند منجر به اضافه شدن ناخواسته محصولات به سبد خرید یا انصراف از خرید شود.
- نرخ تبدیل کاهش میابد و نرخ پرش افزایش پیدا میکند: کاربری که نتواند به راحتی با سایت تعامل کند، مشتری نخواهد شد.
- افت رتبه CLS سبب افت رتبه Core Web Vitals میشود: (اگر نیاز به اطلاعات بیشتر درباره شاخص corn web vital دارید حتما مقاله بهینه سازی Core Web Vitals با 8 راهکار اساسی را مطالعه نمایید.) گوگل این دادهها را نه فقط از طریق ابزارهای تست، بلکه از طریق دادههای میدانی (Field Data) کاربران واقعی کروم جمعآوری میکند.
- CLS بالا، سبب افت امتیاز شما در برابر صفحات رقیب می شود: در شرایطی که محتوای شما و رقیبتان یکسان باشد، گوگل سایتی را بالاتر نمایش میدهد که تجربه کاربری (Page Experience) بهتری داشته باشد.
اما اگر CLS پایین باشد چه میشود؟ CLS پایین (مثلاً < 0.1) یعنی صفحه در هنگام بارگذاری پایدار است و المانها بهطرز ناگهانی جابهجا نمیشوند. در نتیجه:
- تجربه کاربری بهتر میشود، کلیکها دقیقتر شده و زمان باقی ماندن کاربر، در سایت شما افزایش می یابد.
- افزایش نرخ تبدیل و سئو: نرخ تبدیل بهتر میشود و چون رتبه Core Web Vitals افزایش می یابد، در بلندمدت نیز شانس این صفحات دارای CLS پایین، در کسب رتبه بالاتر در موتور های جستجو و نتایج بیشتر میشود.
- علاوه بر این، PageSpeed و Lighthouse امتیازات UX و CWV را بهتر نشان میدهند، که برای اطمینان مشتریان، سفارشدهندگان و تیم محصول مهم است.
چرا بهینه سازی CLS برای گوگل اهمیت دارد؟
در سالهای اخیر، گوگل از رویکرد “فقط محتوا” به رویکرد “محتوا + تجربه کاربری” تغییر مسیر داده است. افزایش سرعت سایت یکی از مهمترین عوامل موفقیت وب سایت ها در رقابت با یکدیگر، در کسب رتبه بالاتر در گوگل و موتور های جستجو است. در واقع تجربه کاربری سبب شده تا بالا بودن سرعت یکی از عوامل مهم در رتبهبندی موتورهای جستجو مانند گوگل به شمار بیاید.
یکی از شاخصهای کلیدی که به بهبود سرعت و کارایی سایت کمک میکند، CLS یا Cumulative Layout Shift است. این اهمیت به قدری است که گوگل آن را جزو سه فاکتور اصلی حیاتی وب (Core Web Vitals) در کنار LCP و INP قرار داده است.
این عامل سبب میشود تا:
- تجربه کاربری از بازدید صفحات وب سایت شما بهبود می یابد در نتیجه تایم باقی ماندن کاربر روی سایت شما بالاتر میرود. (Dwell Time یکی از سیگنالهای غیرمستقیم اما مهم سئو است).
- رتبه سایت شما در ابزار های تست سرعت میشود.
- پایین بودن رتبه CLS سبب بهبود سئو و رتبه سایت شما میشود. گوگل رسماً اعلام کرده که از آگوست 2021، تجربه صفحه (Page Experience) یک فاکتور مستقیم رتبهبندی است.
رفع خطای CLS در PageSpeed و تحلیل گزارشها
برای اینکه راهکار های بهینه سازی CLS را بهتر یاد بگیرید بهتر است ابتدا با انواع خطاها و ارور هایی که از گزارشات pegspeed و یا Gtmetrix میگیرید آشنایی کامل داشته باشید تا بتوانید اقدام به رفع آن ها کنید و سرعت سایت خود را بهبود دهید.

شناسایی دقیق منشأ خطا، نیمی از راه حل است. خطاهای رایج در pagspeed و Gtmetrix در رابطه با: CLS عبارتند از:
- خطای Avoid large layout shifts: این خطا مستقیماً به شما میگوید که جابجاییهای بزرگی در صفحه رخ داده است و معمولاً المانهای DOM مربوطه را هایلایت میکند.
- خطای Cumulative Layout Shift score is high: نمره کلی صفحه شما در وضعیت قرمز قرار دارد.
- خطای Images without dimensions: رایجترین دلیل CLS. وقتی مرورگر ابعاد عکس را نداند، ابتدا متن را نمایش میدهد و پس از دانلود عکس، متن را جابجا میکند تا جا برای عکس باز شود.
- خطای Avoid animations that trigger layout shifts: انیمیشنهایی که ویژگیهایی مثل margin یا top/left را تغییر میدهند، باعث ری-لیاوت (Re-layout) شدن صفحه و CLS میشوند.
- خطای Avoid non-composited animations: استفاده از انیمیشنهایی که از GPU استفاده نمیکنند و بار پردازشی را روی CPU میاندازند.
- خطای Layout Shift detected: گزارش لحظه به لحظه وقوع شیفتها.
وقتی چنین هشدارهایی دیدید، یعنی باید فوراً سراغ بهینهسازی CLS بروید. دقیقاً باید بدانید که اینها همگی به مشکل پرش صفحه یا همان CLS بالا اشاره میکنند.
این خطاها زمانی ظاهر میشوند که عناصر صفحه مثل تصاویر بدون اندازه، فونتهایی که دیر لود میشوند، اسلایدرهایی که اندازه اولیه ندارند یا تبلیغات پاپآپ، باعث تغییر ناگهانی جای محتوا شوند.
راهکارهای جامع بهینه سازی CLS و رفع خطای Layout Shift
حالا که فهمیدید خطاهای ناشی از CLS چیست و کاربرد و مفهوم CLS یا Cumulative Layout Shift را یاد گرفتید، زمان آن رسیده که بگوییم راهکار های بهینه سازی CLS چیست؟
آمارها تکاندهندهاند: بر اساس آمار موجود، زمان بارگذاری بین 1 تا 3 ثانیه نرخ پرش را تا 33 درصد و زمان بارگذاری بین 1 تا 5 ثانیه نرخ پرش را تا 89درصد افزایش میدهد، با بالارفتن نرخ پرش به مرور زمان مشتریان خود را از دست میدهید و فروشتان کم میشود.
CLS بالا اغلب با سرعت بارگذاری پایین همبستگی دارد. پس برای بهبود تجربه کاربری و افزایش سرعت سایت مهمترین راهکارهای افزایش سرعت سایت وردپرس را یاد بگیرید. در ادامه، راهکارهای عملی و فنی را بررسی میکنیم:
1. مشخص کردن ابعاد ثابت برای تصاویر و ویدئوها (Aspect Ratio)
یکی از سادهترین و موثرترین روشها، رزرو کردن فضای خالی برای تصاویر قبل از لود شدن آنهاست.
اگر سایت موردنظر با المنتور طراحی شده، جای ثابت container با width/height یا aspect-ratio مشخص کرده و یا با تگ های <img> و <video> ابعاد آن را تعریف کنید.
وقتی شما در کد HTML عرض و ارتفاع را مشخص میکنید (مثلاً <img width="800" height="600" ...>)، مرورگر پیش از دانلود تصویر، یک باکس خالی با همان نسبت ابعاد (Aspect Ratio) در صفحه ایجاد میکند. با اختصاص دادن اندازههای مشخص به تصاویر و ویدئوها، از تغییرات ناگهانی در چیدمان صفحه جلوگیری کنید.

نکته فنی برای توسعهدهندگان: در CSS مدرن میتوانید از ویژگی aspect-ratio: 16/9; استفاده کنید تا مطمئن شوید کانتینرها حتی در طراحی ریسپانسیو فضای درستی اشغال میکنند.
2. بارگذاری غیرهمزمان عناصر و مدیریت ترتیب لود
بارگذاری غیر همزمان عناصر یعنی وقتی در حالت عادی صفحه لود میشود، مرورگر از بالا به پایین تمام عناصر را دونه دونه دانلود و نمایش میدهد. اما اگر یک بخش از صفحه (مثلاً یک عکس، ویدیو، اسکریپت تبلیغات، اسلایدر و…) دیرتر لود شود، یا حجم بیشتری داشته باشد و یا از منبع دیگری لود شود، سبب میشود جای سایر عناصر بههم بخورد و CLS بالا برود.
پس وظیفه ما این است که ترتیب المان را مشخص کنیم و به مروگر بگوییم: “این بخش از صفحه ضرورتی ندارد که در اولین لحظه لود شود و به مخاطب نمایش داده شود؛ وقتی لود عناصر مورد نیاز تمام شد و منابع آزاد شد، سپس آن را لود کن.” به این ترتیب، محتوای اصلی صفحه سریع لود میشود.
برای این کار میتوان از تکنیکهای بارگذاری غیرهمزمان برای عناصر سنگین مانند تبلیغات و فونتها استفاده کنید تا سرعت بارگذاری صفحه افزایش یابد.
این تکنینک ها شامل:
- Lazy Loading تصاویر: بارگذاری تنبل باعث میشود تصاویر تنها زمانی لود شوند که کاربر به آنها اسکرول میکند. (نکته مهم: هرگز تصویر بالای صفحه یا Hero Image را لیزی لود نکنید، زیرا باعث افزایش LCP میشود).
- async برای اسکریپتهای غیرضروری: فایل جاوااسکریپت همزمان با HTML دانلود میشود اما به محض دانلود اجرا میشود.
- defer برای اسکریپتهایی که باید بعد از توقف HTML اجرا شوند: بهترین گزینه برای اسکریپتهایی که بر ظاهر اولیه صفحه تاثیر ندارند.
3. مدیریت تبلیغات و المانهای Embed شده
تبلیغات بنری یکی از بزرگترین مقصران CLS هستند. چون شبکه تبلیغاتی ممکن است بنرهایی با سایزهای مختلف ارسال کند. برای حل مشکل CLS در تبلیغات:
- همیشه برای کانتینر تبلیغات (div نگهدارنده) یک حداقل ارتفاع (min-height) تعیین کنید.
- فضای تبلیغات را از قبل در قالب رزرو کنید تا اگر تبلیغ لود نشد، جای آن سفید بماند نه اینکه محتوا جمع شود (Collapse).

4. استفاده از سیستمهای مدیریت محتوای بهینه
سیستمهای مدیریت محتوای بهینهسازی شده میتوانند به کاهش CLS کمک کنند. در وردپرس، قالبهای استاندارد معمولاً این موارد را رعایت میکنند.
در واقع دلیلش این است که بخش قابل توجهی از مشکلات CLS از شیوه بارگذاری قالب، اسکریپتهای اضافی، پلاگینهای غیر بهینه و ساختار فنی CMS ایجاد میشود. استفاده از قالبهای سبک و استاندارد که کدهای CSS و JS را به درستی مدیریت میکنند.
5. فشردهسازی منابع و بهینهسازی کدها
شاید در نگاه اول به نظر برسد که فشردهسازی نسبت به چیدمان صفحه تاثیر بیشتری بر سرعت سایت دارد، اما حقیقت این است که سرعت بارگذاری مستقیمترین نقش را در جلوگیری از جابهجایی ناگهانی عناصر صفحه دارد.
هرچه فایلها سریعتر دانلود شوند، احتمال اینکه رندر صفحه دچار تداخل زمانی شود کمتر است. فشردهسازی فایلهای CSS و JavaScript به کاهش زمان بارگذاری و بهینه سازی CLS کمک میکند.
بهترین راهکارهای فشرده سازی منابع برای بهینه سازی CLS:
- تبدیل عکسها به WebP و AVIF: این فرمتها حجم بسیار کمتری دارند و سریعتر لود میشوند.
- Minify کردن CSS و JS: حذف فاصلهها و توضیحات اضافی از کدها.
- Lazy Loading تصاویر سنگین.
- فعال سازی فشرده ساز Gzip یا Brotli Compression: فعالسازی فشردهسازی در سمت سرور.
6. Preload یا پیشبارگذاری فونتها (راهکار حیاتی)
تایپوگرافی وب یکی از پیچیدهترین بخشهای CLS است. اگر بخواهیم خیلی تخصصی به این قضیه نگاه کنیم و تاثیر پیش بارگذاری یا preload فونتها را توضیح دهیم، باید بگوییم که یکی از مهمترین دلایلی که باعث افزایش CLS میشود، تغییر اندازه متن در لحظه بارگذاری فونت است عوامل تغییرات چیدمان هستند.
این پدیده با نامهای FOUT (Flash of Unstyled Text) یا FOIT (Flash of Invisible Text) شناخته میشود.
اما برای آن که تاثیر پیش بارگذاری فونت ها را بر بهینه سازی CLS بگوییم، باید یک نکته مهم را روشن کنیم:
فرق preload و font-display:swap چیست؟
پریلود (Preload): بهطور معمول، مرورگرها ممکن است فونت را دیر لود کنند که باعث نمایش فونت پیشفرض و سپس تغییر ناگهانی آن میشود. با استفاده از Preload، ما به مرورگر دستور میدهیم که فونتهای حیاتی (اصلی سایت) را با اولویت بالا و در همان ابتدای بارگذاری صفحه دانلود کند. این کار باعث میشود فونت اصلی سریعتر آماده شود و احتمال جابجایی متن (Layout Shift) به حداقل برسد.
ویژگی font-display:swap: این دستور به مرورگر میگوید: “اگر فونت اصلی هنوز دانلود نشده، کاربر را منتظر نگذار و متن را با فونت پیشفرض نمایش بده؛ هر زمان فونت اصلی دانلود شد، آن را جایگزین کن.” این کار باعث میشود کاربر هرگز با متن نامرئی روبهرو نشود، اما خطر جابجایی متن را دارد.

بنابر این اگر به دنبال بهبود رتبه در ابزارهای تست سرعت (مثل GTmetrix و PageSpeed) هستید، بهترین روش ترکیب این دو مفهوم است. وقتی این دو را ترکیب میکنید، preload باعث میشود فونت آنقدر سریع دانلود شود که قبل از اینکه swap فرصت کند فونت پیشفرض را نشان دهد، فونت اصلی آماده باشد. در نتیجه هم متن همیشه نمایش داده میشود و هم CLS پایین میماند و خطای Layout Shift برطرف میگردد.
7. مدیریت محتوای پویا (Dynamic Content)
یکی دیگر از عوامل مخفی CLS، پاپآپها، نوارهای اطلاعرسانی کوکی، یا دکمههای “بیشتر بخوانید” هستند که محتوا را هل میدهند.
راهکار:
- هرگز محتوای جدید را بالای محتوای موجود قرار ندهید، مگر اینکه کاربر خودش تعاملی انجام داده باشد (مثل کلیک).
- برای کادرهای اطلاعرسانی، از حالت
position: fixedیاoverlayاستفاده کنید تا روی محتوا قرار بگیرند و چیدمان زیرین را به هم نریزند.
نتیجه گیری و قدم نهایی
در این مقاله ما به دو موضوع مهم ” CLS چیست ؟ ” و ” راهکارهای بهینه سازی CLS ” پرداختیم. همانطور که در ابتدا این مقاله هم توضیح داده شد، Cls میزان پایداری و پرش صفحه را مشخص میکند و هر تغییری در جای عناصر هنگام لود میتواند امتیاز آن را کاهش دهد.
باید بدانید که اگرچه CLS فقط یک عدد است، اما تأثیرش روی رفتار کاربر و رتبه سایت کاملاً واقعی و ملموس است. بیتوجهی به این شاخص نه تنها منجر به بالا رفتن خطاهای PageSpeed یا GTmetrix میشود؛ بلکه باعث کاهش رضایت کاربران، افت رتبه در نتایج جستوجو و افزایش نرخ خروج نیز منجر خواهد شد.
به عنوان یک گام اجرایی، پیشنهاد میکنیم همین حالا آدرس سایت خود را در PageSpeed Insights وارد کنید و بخش “Cumulative Layout Shift” را بررسی کنید. اگر عدد شما قرمز یا نارنجی است، از راهکارهای گفته شده برای تصاویر و فونتها شروع کنید.
اگر قصد دارید شاخص CLS سایت شما نیز مطابق استانداردهای جهانی بهینهسازی شود و عملکرد فنی وبسایتتان ارتقا یابد، میتوانید از طریق صفحه خدمات افزایش سرعت سایت کانفیگ وردپرس، درخواست تحلیل و بهبود تخصصی خود را ثبت کنید تا تیم ما این فرآیند را با بالاترین کیفیت برایتان اجرا کند.





