Cumulative Layout Shift یا CLS چیست؟ چرا نیاز به بهینه سازی دارد؟

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

Cumulative Layout Shift یا CLS دقیقاً به چه معناست؟

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

CLS بخشی از Core Web Vitals است و گوگل برای سنجش کیفیت صفحه از آن استفاده می کند. هر چه مقدار CLS بیشتر باشد یعنی صفحه هنگام لود شدن بیشتر جابه جا می شود و کاربر احساس بی نظمی و ناپایداری می کند. مقدار CLS صفر یعنی هیچ جابه جایی اتفاق نیفتاده و این بهترین حالت است. گوگل پیشنهاد می کند مقدار CLS کمتر از 0.1 باشد تا صفحه از نظر تجربه کاربری خوب و قابل قبول باشد.

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

خرید افزونه یواست سئو پرمیوم | خرید افزونه رنک مث پرو

مفهوم CLS در Core Web Vitals

CLS در Core Web Vitals نشان می دهد که عناصر صفحه هنگام بارگذاری چقدر جابه جا می شوند. وقتی متن، عکس یا دکمه ها ناگهان حرکت کنند، تجربه کاربر خراب می شود. CLS این جابه جایی را اندازه گیری می کند و هر چه عدد آن کمتر باشد، صفحه پایدارتر است. گوگل مقدار CLS کمتر از 0.1 را مناسب می داند و سایت هایی که CLS پایین دارند، تجربه کاربری بهتری دارند و شانس رتبه بالاتر در نتایج جستجو بیشتر می شود.

چرا CLS یکی از معیارهای مهم Core Web Vitals است؟

CLS یا Cumulative Layout Shift یکی از معیارهای مهم در Core Web Vitals است چون نشان می دهد عناصر صفحه هنگام بارگذاری چقدر جا به جا می شوند. هرچه این عدد بیشتر باشد یعنی صفحه ناپایدارتر است و کاربر تجربه بدتری دارد.

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

بیشتر بخوانید: محتوای بنیادی یا Cornerstone چیست؟

چه عواملی باعث افزایش مقدار CLS در سایت می‌شود؟

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

1- تصاویر بدون اندازه مشخص

وقتی تصویر اندازه عرض و ارتفاع مشخص نداشته باشد، مرورگر نمی داند چه فضایی برای آن در نظر بگیرد و هنگام بارگذاری تصویر باعث جا به جایی بقیه بخش ها می شود.

2- تبلیغات یا بنرهای پویا بدون فضای ثابت

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

3- فونت های وب که دیر لود می شوند

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

4- بارگذاری عناصر با جاوا اسکریپت بعد از لود اولیه صفحه

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

5- ویدیوهای بدون تعیین اندازه

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

بیشتر بخوانید: لیست بهترین کانال های پروکسی برای تلگرام

چگونه می‌توان CLS را در Google PageSpeed Insights بررسی کرد؟

در ادامه همراه ما باشید تا شما را با نحوه مشاهده CLS در Google PageSpeed Insights آشنا کنیم.

1- وارد سایت PageSpeed Insights شوید

به آدرس PageSpeed Insights مراجعه کنید.

2- آدرس سایت خود را وارد کنید

در کادر وسط صفحه، لینک صفحه موردنظر (مثلا صفحه اصلی سایت) را وارد کرده و دکمه Analyze را بزنید.

3- منتظر پردازش باشید

چند لحظه صبر کنید تا ابزار سرعت و عملکرد صفحه را بررسی کند.

4- به بخش Core Web Vitals توجه کنید

بعد از نمایش نتیجه، در ابتدای صفحه بخشی به نام Core Web Vitals نمایش داده می شود که شامل سه معیار مهم است. در این قسمت مقدار CLS نمایش داده می شود و با رنگ مشخص می شود که وضعیت سایت خوب، متوسط یا ضعیف است.

5- نمایش مقدار دقیق CLS

اگر پایین تر اسکرول کنید و وارد بخش Diagnostics یا Metrics شوید، مقدار دقیق CLS را همراه با جزئیات بیشتر مشاهده می کنید.

تأثیر CLS بر سئو و رتبه سایت در گوگل چیست؟

تأثیر CLS بر سئو و رتبه سایت در گوگل بسیار مهم است، چون این معیار مستقیم با تجربه کاربری ارتباط دارد. گوگل همیشه صفحاتی را در نتایج بالاتر قرار می دهد که هم سریع باشند و هم تجربه کاربر را خراب نکنند. اگر CLS یک سایت زیاد باشد و اجزای صفحه هنگام بارگذاری مرتب جابه جا شوند، کاربران احساس بی نظمی می کنند، ممکن است صفحه را ببندند و این باعث افزایش نرخ خروج یا همان Bounce Rate می شود. این رفتار کاربر برای گوگل یک نشانه منفی است.

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

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

چگونه می‌توان با استفاده از CSS جابجایی عناصر را کاهش داد؟

برای کاهش جابه جایی عناصر صفحه و بهبود CLS با استفاده از CSS، باید کاری کنیم که مرورگر قبل از بارگذاری کامل محتوا بداند هر عنصر چه فضایی را اشغال می کند. یکی از مهم ترین روش ها این است که برای تصاویر، ویدیوها یا بنرهای تبلیغاتی از قبل عرض و ارتفاع مشخص کنیم تا صفحه هنگام لود شدن ناگهان تکان نخورد.

خرید قالب آموزشی | قالب المنتور وردپرس | قالب وردپرس چند فروشندگی | قالب دانلودی وردپرس | قالب سایت فروشگاهی وردپرس | قالب های چند منظوره وردپرس

نقش تصاویر و ویدیوها در افزایش CLS چیست؟

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

این جابه جایی ناگهانی همان چیزی است که CLS آن را اندازه گیری می کند. بنابراین برای کاهش CLS، بهتر است همیشه عرض و ارتفاع تصاویر و ویدیوها مشخص شود یا از ویژگی aspect-ratio استفاده کنیم تا مرورگر فضای لازم را قبل از لود شدن کامل آن ها رزرو کند.

چرا امتیاز CLS برای سئو مهم است؟

امتیاز CLS برای سئو مهم است چون مستقیماً به تجربه کاربری و رتبه سایت در گوگل مربوط می شود.

– تجربه کاربری بهتر

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

– معیار Core Web Vitals

گوگل از Core Web Vitals برای رتبه بندی سایت ها استفاده می کند. CLS یکی از سه معیار اصلی است و نشان دهنده ثبات دیداری صفحه است. امتیاز پایین CLS یعنی صفحه بی نظم است و ممکن است رتبه سایت کاهش یابد.

– جلوگیری از کلیک اشتباه

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

– نشان دهنده کیفیت طراحی سایت

سایتی که CLS پایینی دارد، طراحی و توسعه آن اصولی است. گوگل ترجیح می دهد سایت هایی که تجربه کاربری بهتر و طراحی استاندارد دارند را در نتایج جستجو بالاتر نشان دهد.

بیشتر بخوانید: هوش مصنوعی Qwen چیست و نحوه استفاده از آن چگونه است؟

ابزارهای بررسی CLS سایت

برای بررسی CLS سایت می توان از ابزارهای متنوعی استفاده کرد که هر کدام ویژگی ها و کاربردهای خاص خود را دارند.

1- Google PageSpeed Insights

این ابزار رایگان و رسمی گوگل است که با وارد کردن آدرس صفحه، سرعت و عملکرد آن را تحلیل می کند. بخش Core Web Vitals در این ابزار شامل CLS ،LCP و FID است و مقدار CLS صفحه را به صورت دقیق نمایش می دهد. همچنین رنگ بندی وضعیت CLS (سبز، نارنجی، قرمز) به شما نشان می دهد صفحه از نظر ثبات دیداری خوب است یا نیاز به بهبود دارد. این ابزار برای بررسی سریع و گرفتن گزارش جامع از یک صفحه بسیار مناسب است.

2- Google Search Console

Search Console ابزار رسمی گوگل برای مانیتورینگ کلی سایت است و در بخش Core Web Vitals می توان صفحاتی که CLS بالایی دارند را مشاهده کرد. این ابزار امکان شناسایی صفحات مشکل دار، بررسی روند بهبود و تحلیل وضعیت تجربه کاربری کل سایت را فراهم می کند. به همین دلیل برای بررسی مداوم و مدیریت مشکلات CLS در سایت های بزرگ بسیار کاربردی است.

3- Lighthouse

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

4- GTmetrix

GTmetrix یک ابزار تحلیل کامل سرعت سایت است که گزارش جامعی از عملکرد صفحات ارائه می دهد. این ابزار علاوه بر سرعت و بهینه سازی تصاویر، مقدار CLS را هم نشان می دهد و توصیه های لازم برای کاهش جابجایی عناصر صفحه ارائه می کند. قابلیت مقایسه چند صفحه و بررسی پیشرفت بعد از انجام بهینه سازی، این ابزار را برای مدیران سایت و توسعه دهندگان حرفه ای مفید می کند.

افزونه های امنیتی و سرعتی: خرید افزونه وردفنس | خرید افزونه آیتم سکوریتی پرو | خرید افزونه  ssl | خرید افزونه راکت

دلایل بالا بودن CLS در سایت

دلایل بالا بودن CLS در سایت معمولاً به نحوه طراحی و بارگذاری محتوا مربوط می شود. مهم ترین عواملی که باعث افزایش CLS می شوند عبارتند از:

• تصاویر بدون اندازه مشخص: اگر برای تصاویر عرض و ارتفاع مشخص نشده باشد، مرورگر نمی داند چه فضایی برای آن در نظر بگیرد. در نتیجه هنگام بارگذاری تصویر، سایر عناصر صفحه جابجا می شوند و مقدار CLS افزایش می یابد.
• تبلیغات و بنرهای پویا بدون جایگاه ثابت: تبلیغات، ویدیوها یا بنرهایی که بدون فضای مشخص قرار داده شوند، هنگام بارگذاری باعث حرکت سایر بخش های صفحه می شوند. این موضوع به ویژه در سایت هایی که تبلیغات زیادی دارند، موجب بالا رفتن CLS می شود.
• فونت های وب که دیر بارگذاری می شوند: اگر فونت اصلی صفحه دیر لود شود، متن ابتدا با فونت پیش فرض نمایش داده شده و بعد از چند لحظه به فونت اصلی تغییر می کند. این تغییر باعث جابجایی متن و افزایش CLS می شود.
• اضافه شدن محتوا با جاوا اسکریپت پس از لود اولیه: محتوای پویا که بعد از بارگذاری اولیه صفحه با جاوا اسکریپت یا ایجکس اضافه می شود و فضای مشخصی ندارد، باعث حرکت عناصر موجود می شود و CLS را بالا می برد.
• انیمیشن ها و ترنزیشن های ناهمگون: انیمیشن هایی که اندازه، موقعیت یا ظاهر عناصر را ناگهانی تغییر می دهند، می توانند باعث جابجایی محتوا شوند و مقدار CLS را افزایش دهند.

خرید قالب خبری | قالب وردپرس مجله | قالب خلاق وردپرس | قالب دایرکتوری وردپرس | قالب نمونه کار وردپرس | قالب وردپرس فیلم و سریال

بهینه‌سازی تصاویر برای کاهش CLS

بهینه‌سازی تصاویر یکی از روش های مهم برای کاهش CLS است. وقتی تصاویر ابعاد مشخص نداشته باشند یا دیر لود شوند، هنگام نمایش باعث جابه جایی متن و سایر المان ها می شوند و مقدار CLS افزایش می یابد. برای جلوگیری از این مشکل، بهتر است قبل از بارگذاری تصاویر، عرض و ارتفاع آن ها مشخص شود یا از ویژگی aspect-ratio استفاده کنیم تا مرورگر فضای لازم را رزرو کند.

همچنین استفاده از فرمت های سبک مثل WebP و بارگذاری تنبل یا lazy loading باعث می شود تصاویر سریع تر نمایش داده شوند و جابه جایی ناگهانی کاهش یابد. با این کار صفحه پایدارتر می شود، تجربه کاربر بهتر می شود و امتیاز سئو سایت افزایش پیدا می کند.

تأثیر فونت‌های وب بر CLS

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

این مشکل به ویژه در سایت هایی که از فونت های سفارشی بزرگ یا فونت های خارجی استفاده می کنند رایج است. هرچه بارگذاری فونت دیرتر انجام شود، احتمال جابجایی متن بیشتر می شود و تجربه کاربری کاهش می یابد.

CLS و تأثیر آن بر رتبه‌بندی گوگل

CLS تأثیر مستقیم بر رتبه بندی گوگل دارد، زیرا این معیار بخشی از Core Web Vitals است و تجربه کاربری را اندازه گیری می کند. وقتی مقدار CLS زیاد باشد و عناصر صفحه هنگام بارگذاری ناگهان جابه جا شوند، کاربران احساس بی نظمی می کنند و ممکن است صفحه را ترک کنند.

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

راهکارهای فنی برای بهینه‌سازی Layout Shift

برای کاهش CLS و ثابت نگه داشتن صفحه می توان اقدامات فنی زیر را انجام داد:

– تعیین اندازه ثابت برای تصاویر و ویدیوها

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

– اختصاص فضای ثابت برای تبلیغات و بنرها

تبلیغات و بنرهای پویا باید جایگاه مشخص داشته باشند تا حتی قبل از بارگذاری، سایر بخش ها حرکت نکنند.

– بارگذاری محتواهای پویا با فضای پیش فرض

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

– بهینه سازی ایفریم ها

برای ایفریم ها و ویدیوهای خارجی، عرض و ارتفاع ثابت مشخص کنید تا صفحه هنگام بارگذاری جابجا نشود.

– اولویت بندی بارگذاری منابع

CSS و فونت ها را بهینه و اولویت بندی کنید تا ابعاد نهایی صفحه سریع تر مشخص شود و جابجایی کاهش یابد.

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

پیشنهاد نوین وردپرس: خرید افزونه وردپرس | خرید قالب وردپرس

جمع بندی: CLS چیست ؟

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