CLS چیست؟ + کاربرد Cumulative Layout Shift در سئو پارس پک

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

“Cumulative Layout Shift” یا CLS، معیاری است که توسط گوگل معرفی شده و نحوه تغییرات ناگهانی در طراحی صفحات وب را ارزیابی می‌کند. این معیار به عنوان بخشی از “Core Web Vitals” مطرح شده که مجموعه‌ای از معیارها برای سنجش کیفیت تجربه کاربری در وب است. این مسئله باعث می‌شود تا اگر تبلیغات شما دیر بارگذاری شد، جای آن خالی بماند و اگر کاربر در سایت شما بر روی المان خاصی کلیک کرد، با مشکل مواجه نشود. زمانی که یک فونت وب بارگذاری می‌شود، ممکن است متن‌هایی که قبلاً با فونت پیش‌فرض نمایش داده شده‌اند، تغییر اندازه یا شکل دهند. این تغییر می‌تواند منجر به جابجایی ناگهانی سایر عناصر صفحه شود، که در نهایت CLS را افزایش می‌دهد. البته، اگر سؤالی درباره تغییر چیدمان صفحات وب در زمان بارگذاری یا تجربه مفیدی درباره بهبود cls سایت دارید، خوشحال می‌شویم در بخش کامنت‌ها با ما در میان بگذارید.

بنابراین، "ضریب تاثیر" در این مثال برابر با 0.75 بوده که نشان می‌ دهد عنصر 75% از فضای viewport را به خود اختصاص داده است. Cumulative Layout Shift (CLS) یکی از مهم‌ترین شاخص‌های Core Web Vitals است که توسط گوگل برای سنجش تجربه کاربری معرفی شده است. تغییرات ناگهانی و غیرمنتظره در صفحه باعث ایجاد تجربه کاربری نامطلوبی می‌شود که می‌تواند نرخ پرش کاربران را افزایش داده و در نتیجه سئو سایت را تحت تأثیر قرار دهد.

در ادامه این مقاله، ابتدا به تعریف دقیق‌تری از CLS می‌پردازیم، سپس به بررسی نحوه محاسبه آن و شناسایی عوامل مؤثر بر آن خواهیم پرداخت. به همین دلیل، هنگام مواجهه با تگ در HTML، مرورگر قادر نیست فضای مناسب برای تصویر را به آن اختصاص دهد. پس از دانلود، مرورگر باید دوباره چیدمان صفحه را بررسی کرده و فضایی برای قرارگیری تصویری که باعث جابجایی سایر عناصر می‌ شود، اختصاص دهد. با ارائه مقدار عرض (width) و ارتفاع (height) در تگ ، به مرورگر اعلام می کنید که نسبت ابعاد تصویر به چه صورت است.

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

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

این انیمیشن‌ها باعث ایجاد ارور CLS میشه و راه حل اینکه یا زمان تاخیر این انیمیشن‌ها رو بیشتر کنید یا انیمیشن‌ها رو غیرفعال کنید. حالت دوم هم حالتی است، که تا قبل از دانلود فونت اصلی سایت توسط مرورگر، به مخاطب و کاربر هیچ متنی داخل سایت نمایش داده نمی شود که به این حالت هم Flash of Invisible Text یا FOIT گفته می شود. مرورگر فونت پیش فرض خود را به کاربر نمایش می دهد و پس از دانلود، فونت اصلی سایت، نمایش داده می شود که اصطلاحاً حالت Flash of Unstyled Text یا FOUT گفته می شود. اگر به‌ طور کلی با مشکل افت سرعت سایت مواجه هستید، اولین موردی که باید بررسی شود، هاست است. ولی هاست روی همه‌ی فاکتورهای سرعت سایت و Core Web Vitals تأثیر می‌گذارد، نه فقط روی cls سایت.

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

بهبود cls سایت با 3 راهکار فوری و آسان!

همچنین، گوگل به CLS به عنوان یکی از فاکتورهای رتبه‌بندی توجه دارد و CLS بالا می‌تواند منجر به کاهش رتبه سایت در نتایج جستجو شود. علاوه بر این، مشکلات CLS می‌تواند نرخ پرش (Bounce Rate) را افزایش و زمان حضور کاربر در سایت را کاهش دهد که همگی بر سئوی سایت تأثیر منفی دارند. همانطور که گفتیم CLS معیار است که به جابه‌جایی‌های غیرمنتظره و ناخواسته‌ی محتوای صفحه در حین بارگذاری یا تعامل کاربر با آن اشاره دارد. تغییرات ناگهانی در صفحه باعث می‌شود کاربران به اشتباه کلیک کنند یا احساس بی‌ثباتی کنند. هر جابه‌جایی در صفحه یک نمره CLS دریافت می‌کند و مجموع این نمرات برای یک صفحه میزان نهایی CLS را تعیین می‌کند. با استفاده از این راهکارها، شما می‌ توانید خطای “avoid large layout shifts” را رفع کرده و تجربه کاربری بهتری را برای بازدیدکنندگان صفحه خود ایجاد کنید.

استفاده از تبلیغات ثابت در صفحه

CLS اکنون به‌عنوان یکی از فاکتورهای رتبه‌بندی گوگل در نتایج جستجو به حساب می‌آید. بهینه‌سازی بارگذاری محتوا بر اساس اولویت یک استراتژی مؤثر برای افزایش کارایی وب‌سایت و بهبود تجربه کاربری است. با تمرکز بر بارگذاری سریع‌تر عناصر مهم و تأخیر در بارگذاری عناصر کم‌اهمیت‌تر، وب‌سایت‌ها می‌توانند کاربران را جذب کرده و نگه دارند. این رویکرد نه تنها به بهبود سرعت بارگذاری کمک می‌کند، بلکه تأثیر مثبتی بر SEO و رتبه‌بندی وب‌سایت دارد.

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

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

گوگل بر اساس تجربه کاربری وب‌سایت‌ها، آن‌ها را رتبه‌بندی می‌کند و اگر امتیاز CLS سایت شما بالا باشد، ممکن است رتبه پایین‌تری کسب کند. بنابراین، بهینه‌سازی CLS می‌تواند به بهبود سئو سایت و افزایش ترافیک ارگانیک کمک کند. در دنیای وب، یکی از معیارهای مهم برای بهبود تجربه کاربری و سئو، CLS (Cumulative Layout Shift) است.

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

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

خطای CLS یا Cumulative Layout Shift چیست + رفع آن

در حال حاضر سایت‌های زیادی از انیمیشن استفاده می‌کنند و همین مسئله می‌تواند باعث از بین رفتن بهینگی Cumulative Layout Shift یا CLS شود. با استفاده از کدنویسی می‌توانید جایگاهی که این موارد نیاز دارند را مشخص کنید. بنابراین بهتر است انیمیشن‌های سایت خود را با حجم کمتر بارگذاری کرده و سایز آنها را حتما در کدهای CSS مشخص کنید. مشکل این روش این است که بعد از دانلود فونت اصلی سایت و تغییر به فونت اصلی، ممکن است جابجایی در محتوای صفحه (CLS)، رخ دهد.

و از آنجایی که ۶۸٪ از تجربیات آنلاین  کاربران با جستجو آغاز می‌شود، اطمینان از اینکه سایت شما در صفحه نتایج جستجو گوگل باشد برای ایجاد ترافیک ورودی مهم است. در قسمت قبل دانستیم که Cls چیست و برای کوتاه‌کردن چه عبارتی مورداستفاده قرار می‌گیرد، حالا قصد داریم به‌صورت عمیق‌تر مروری بر ماهیت آن داشته باشیم و بدانیم که چه تأثیری بر روند سئوی یک وب‌سایت می‌گذارد. به‌طورکلی Cumulative Layout Shift معیاری برای تعیین میزان پرش صفحه به دلیل تغییرات ناگهانی المان‌ها و فاصله میان آن‌ها در زمان لود شدن است. این پرش‌های ناگهانی معمولاً به دلیل تاخیر در لود شدن تصاویر، فونت‌ها و برخی دیگر از المان‌های سایت رخ می‌دهد. پس اگر شما هم کنجکاو هستید تا به‌خوبی بدانید که cls چیست و چطور می‌توان به‌واسطه آن سرعت لود سایت را بهینه کرد؛ تا پایان این بخش از مجله جت سئو همراه ما باشید و اطلاعات مفیدی در این باره به دست آورید.

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

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

به عبارت دیگر، هرگونه تغییر در مکان و اندازه المان‌ها در طول بارگذاری صفحه، نمره CLS ایجاد می‌کند. گوگل این نمره را از ۰ تا ۱ محاسبه می‌کند، جایی که ۰ به معنای هیچ‌گونه تغییر و ۱ به معنای تغییرات بزرگ و ناگهانی است. مستطیل قرمزِ خط‌چین شده، پیوند محدوده مرئی این عنصر در هر دو فریم را نمایش می‌دهد که در این مورد، شامل 75% از تمام محدوده قابل مشاهده کاربر می‌شود.

تأثیر cls در سئو و تجربه کاربری سایت

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

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

CLS یا Cumulative Layout Shift معیاری برای سنجش این ثبات و پویایی محسوب می‌شود. المان هایی مانند فونت ها، تصاویر، فیلم ها، فرم های تماس، دکمه ها و انواع دیگر محتوا می توانند موجب تغییر ظاهر صفحه سایت شوند. بررسی دلایل افت CLS اهمیت زیادی دارد، چون صفحاتی که المان های آنها جابجا می‌شوند می‌توانند تجربه کاربری ضعیفی به همراه داشته باشند. بهینه‌سازی CLS نه‌تنها باعث بهبود سئو می‌شود، بلکه تجربه بهتری برای کاربران فراهم می‌کند و نرخ تعامل را افزایش می‌دهد. بنابراین، بررسی و بهینه‌سازی این شاخص برای هر وب‌سایتی که به بهبود عملکرد خود در نتایج جستجو اهمیت می‌دهد، ضروری است. فاکتور cls در ژوئن 2021، زمانی که به‌روزرسانی تجربه کاربری صفحه سرپ Google شروع به کار کرد، به یکی از عوامل رتبه‌بندی سایت‌ها تبدیل شد؛ این یعنی cls روی سئوی سایت ما تاثیرگذار است.

Cumulative Layout Shift چیست و چطور CLS بهبود بدیم 6 مورد

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

این روند نه تنها به شناسایی و رفع سریع مشکلات کمک می‌کند، بلکه به افزایش اعتماد کاربران، بهبود تجربه کاربری و ارتقاء عملکرد کلی وب‌سایت منجر می‌شود. در دنیای دیجیتال امروزی، تست و نظارت مداوم بخش جدایی‌ناپذیر از مدیریت وب‌سایت‌های موفق است. اجتناب از اضافه کردن محتوا بالای محتوای موجود یکی از راهبردهای کلیدی در کاهش “Cumulative Layout Shift” (CLS) است. در طراحی وب، یکی از چالش‌هایی که به طور مکرر با آن روبرو هستیم، افزودن عناصری به صفحه است که می‌تواند جریان طبیعی محتوا را مختل کند. این عناصر می‌توانند شامل تبلیغات پاپ‌آپ، بنرها، اعلان‌ها یا حتی عناصر دینامیکی مانند پیام‌های به‌روزرسانی باشند. وقتی این عناصر به ناگهان و بدون هشدار قبلی در بخش‌هایی از صفحه ظاهر می‌شوند که کاربران انتظار آن را ندارند، می‌توانند تجربه کاربری را به شدت تحت تأثیر قرار دهند.

در نتیجه پلتفرم‌هایی که embed را ارائه می‌کنند، همیشه هم به اندازهٔ کافی فضا درنظر نمی‌گیرند و می‌توانند بعد از بارگذاری باعث تغییر چیدمان شوند. تبلیغات در نزدیکی بالای درگاه دید ممکن است باعث تغییر چیدمان بیشتر از تبلیغات در وسط شوند. این به این دلیل است که تبلیغات در بالا عموماً محتوای بیشتری در پایین‌تر دارند، به این معنی که وقتی تبلیغ باعث تغییر می‌شود، عناصر بیشتری حرکت می‌کنند. برعکس، تبلیغات نزدیک به وسط نمای دید ممکن است به اندازه‌ای که محتوای بالای آن احتمال کمتری برای جابجایی دارد، عناصر زیادی را جابه‌جا نکنند. Distance Fraction یا ضریب فاصله عددی است که میزان جابه‌جایی المان‌ها در طی پرش را اندازه‌گیری می‌کند. در تصویر زیر می‌بینید که سکشن قبل از لود شدن تبلیغ، کمی بالاتر قرار داشته و بعد از لود کامل تبلیغ پایین‌تر آمده است.

در کل، استفاده از Performance API و تابع Performance Observer باعث بهبود تجربه کاربری صفحات وب می شود و به همراه استفاده از فناوری های دیگر می‌تواند به بهبود سایت‌ها کمک کند. CLSیکی از معیارهای Core Web Vitals است که به بهبود تجربه کاربری صفحات وب کمک می کند. برای اندازه‌گیری CLS در جاوا اسکریپت، می توان از  Performance API  در مرورگرهایی که از آن پشتیبانی می‌کنند، استفاده کرد. CLS یا Cumulative Layout Shift به این معنی است که هرگونه تغییر مکان المان‌ها در صفحه وب در زمان بارگذاری صفحه می‌تواند باعث بروز خطاها و مشکلاتی در تجربه کاربری شود.

{
• در غیر این صورت موارد ذکر شده را بررسی کنید و در نهایت از یک کارشناس سئو مشاوره بگیرید.
|}{
• با استفاده از SSR به شکل صحیح، می‌توانید به طور مؤثری سرعت بارگذاری صفحه را بهبود بخشیده و از جابه‌جایی ناگهانی عناصر صفحه جلوگیری کنید که در نتیجه منجر به بهبود CLS و تجربه کاربری بهتر می‌شود.
|}
• CLS به معنای Cumulative Layout Shift نشان می‌دهد که در حین بارگذاری یک صفحه وب، تغییرات ناگهانی در چیدمان محتوا (Layout) اتفاق می‌افتد یا خیر.
{
• گوگل بر اساس تجربه کاربری وب‌سایت‌ها، آن‌ها را رتبه‌بندی می‌کند و اگر امتیاز CLS سایت شما بالا باشد، ممکن است رتبه پایین‌تری کسب کند.
|}
• این معیار به جابجایی‌های غیرمنتظره و ناخواسته محتوای صفحه در حین بارگذاری یا تعامل کاربر با آن اشاره دارد.
• با رعایت بهترین شیوه‌های طراحی، مانند اختصاص ابعاد مشخص برای تصاویر و تبلیغات، بهینه‌سازی فونت‌ها و مدیریت بارگذاری تنبل، می‌توان این شاخص را به حداقل رساند و رتبه سایت را در موتورهای جستجو بهبود بخشید.

CLS در سال ۲۰۲۱ به عنوان یکی از پارامترهای رتبه بندی شناخته شده و جزو بروزترین متریک گوگل برای رتبه دهی به صفحات وب‌سایت ها است. این سایت فروشگاهی با مشکل CLS بالا مواجه بود که باعث کاهش نرخ تبدیل و نارضایتی کاربران شده بود. با اعمال راهکارهایی مانند مشخص کردن ابعاد تصاویر، بهینه‌سازی بارگذاری فونت‌ها و حذف تبلیغات مزاحم، CLS وب‌سایت به طور قابل توجهی 1 بهبود یافت. در نتیجه، نرخ تبدیل این سایت 0.7 درصد افزایش یافت که منجر به افزایش قابل توجهی در فروش شد.

جلسه ۳ – بررسی گزارش Summary در GTmetrix جدید

اما cls چیست؟ cls یا Cumulative Layout Shift یکی از سه معیار اصلی Core Web Vitals است که گوگل برای ارزیابی تجربه کاربری و رتبه بندی سایت در نتایج جستجو از آن استفاده می‌کند. Cls چیزی فراتر از سرعت لود سایت است و به شکل باور نکردنی در تجربه کاربری مخاطبان ما تأثیر دارد. تاریخچه CLS به زمانی باز می‌گردد که گوگل به منظور بهبود تجربه کاربری در وب، مجموعه‌ای از معیارهای جدید به نام Core Web Vitals را معرفی کرد. این معیارها شامل LCP (Largest Contentful Paint)، FID (First Input Delay) و CLS (Cumulative Layout Shift) هستند که هر کدام جنبه‌ای از عملکرد و تعامل صفحه را اندازه‌گیری می‌کنند. CLS به‌طور خاص در سال ۲۰۲۰ به‌عنوان یک معیار حیاتی معرفی شد تا تغییرات ناگهانی در طرح‌بندی صفحات وب که تجربه کاربری را مختل می‌کند، شناسایی و کاهش دهد. گوگل این معیار را برای تشویق وب‌سایت‌ها به بهینه‌سازی رفتار بارگذاری صفحات و کاهش مزاحمت‌های ناگهانی برای کاربران ارائه داد.

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

شما با بررسی سایت خود در جی‌تی‌متریکس  متوجه این نکته می‌شوید که یک امتیاز کلی برای هر سایت در نظر می‌گیرند. اگر  امتیاز سایت شما پایین باشد، سایت شما عملکرد ضعیفی دارد و باید روی ساختار و سرعت  آن کار کرد. برای این خیالتان از رسیدن به هدف راحت شود باید یک آستانه خوب برای اندازه گیری، ۷۵ امین صدک (چارک سوم) برای بارگذاری صفحه است. مگ سئو برای مشاهده CLS در گوگل آنالیتیکس، باید داده‌های CLS را از Google Search Console دریافت کرده و سپس با استفاده از Google Analytics، تأثیر CLS بر تجربه کاربری و عملکرد سایت را تحلیل کنید. با مقایسه داده‌های CLS و داده‌های تجربه کاربری، الگوهایی را شناسایی کرده و اقدامات لازم برای بهبود CLS را انجام دهید. در نتیجه، بهبود CLS نه تنها برای تجربه کاربری مهم است، بلکه تأثیر مستقیم بر سئو سایت و دستیابی به اهداف بازاریابی آنلاین شما دارد.

برای مشاهده جزئیات بیشتر به بخش محدودیت‌ها در کتابخانه web-vitals مراجعه کنید. در صورتی که در صفحه از انیمیشن استفاده کردید با استفاده از کدنویسی برایش جایگاه مشخصی انتخاب کنید و کمترین حجم را برایش در نظر بگیرید. CLS گفتیم از Cumulative Layout Shift میاد و این معیار هم در Lighthouse گوگل هست و هم در گزارش Core Web Vitals گوگل سرچ کنسول و هم در GTMetrix نقش داره.

این نوع از عناصر به عنوان عناصر ناپایدار در نظر گرفته می‌شوند.بهتر است به این نکته توجه داشته باشید که layout-shift‌ها فقط زمانی اتفاق می‌افتند که عناصر موجود، موقعیت اولیه خود را تغییر دهند. آنالیز سایت در این ابزار ممکن است کمی زمان بر باشد، ولی در نهایت امتیاز سایت در تمامی فاکتورهای سرعت و راهکارهای بهبود آنها را نمایش می‌دهد. در صفحه‌ای که نمایش داده می‌شود، می‌توانیم دسته مورد نظر برای تحلیل و ابزار نمایش سایت (موبایل یا دسکتاپ) را انتخاب کنیم. سپس باید روی «Generate report» کلیک کنیم و منتظر اعلام رتبه cls سایت و پیشنهادها کروم برای بهبود آن بمانیم. مجموع جابجایی‌های عناصر صفحه، میزان Cumulative Layout Shift رو مشخص می‌کنه که هرچقدر کمتر باشه، صفحه ما پایدارتر و UX بهتر خواهد بود. جابجایی محتواها گاهی اوقات به دلیل تبلیغات موجود در صفحه هست که ناگهان بالای صفحه ظاهر میشه و باعث جابجایی سایر محتواهای صفحه به سمت پایین میشه.

۳. روش بررسی و بهینه‌سازی:

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

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

استفاده از کدنویسی بهینه در سایت

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

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

برای محاسبه این ضریب کافی است مساحت ناحیهٔ تحت تأثیر پرش را بر مساحت کل Viewport تقسیم کنیم. برای اجرای بارگذاری تنبل، می‌توان از قابلیت‌های HTML و جاوا اسکریپت استفاده کرد. اخیراً، مرورگرها قابلیت‌های بومی بارگذاری تنبل را ارائه داده‌اند که اجازه می‌دهد تنها با افزودن یک خصوصیت به تگ‌های تصویر یا ایفریم، این کار را انجام دهیم. در این فرمول، مقدار impact fraction نشان دهنده میزان تغییر موقعیت {سئو مگ|} المان‌ها در صفحه در هر لحظه و distance fraction نیز میزان فاصله‌ای است که المان در هر لحظه حرکت می‌کند.

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

Flash of Unstyled Text یا FOUT نیز هنگامی اتفاق می افتد که، مرورگر یک فونت جایگزین را تا زمان آپلود فونت اصلی سایت به کاربر نمایش دهد. در حال حاضر تجربه کاربری (UX) به عنوان عنصری کلیدی در موفقیت وب‌سایت‌ها شناخته می‌شود. یکی از فاکتورهای اساسی UX، ثبات و پویایی صفحه هنگام بارگذاری و تعامل کاربر با آن است.

در پایان، با ارائه راهکارهایی برای کاهش CLS، به بررسی چگونگی ایجاد تجربه کاربری بهتر و ثابت‌تر خواهیم پرداخت. در سال ۲۰۲۰، ۹۳ درصد از مردم علت ترک خود را از وب سایت‌ بارگذاری نادرست گزارش دادند. هر اندازه که مطالب شما مفید باشد اگر تصاویر یا متن های آن به صورت تکه تکه یا با پرش زیاد بارگیری شوند؛ این امر باعث می‌شود که کاربر یا کاربران سراغ وب سایت های دیگر بروند. و اگر این نوع بارگذاری ادامه پیدا کند، CLS بالا میرود و احتمالاً باعث ایجاد مشکلاتی مانند از دست دادن بخش‌هایی از وب‌سایت شما می‌شود. این مشکل برای تعداد زیادی از کاربران اینترنت که وبسایت شما را در  گوشی های هوشمند خود مشاهده میکنند تشدید می شود.

این امر به مرورگر امکان می‌ دهد قبل از دانلود کامل تصویر، فضای مناسب را به عکس تخصیص داده و از بروز هرگونه جابجایی ناخواسته در صفحه جلوگیری کند. با ظهور طراحی ریسپانسیو، طراحان وب روش‌های دیگری را جایگزین اندازه دادن به المان‌های درون صفحه کردند؛ اما این موضوع، منجر به مشکلاتی در هنگام بارگذاری تصاویر شد. بدین منظور می‌توانید بصورت inline و در تگ imag ویژگی‌های عرض و ارتفاع را تنظیم کرده و از CSS برای تغییر اندازه تصاویر در صورت نیاز استفاده کنید. این عمل به مروگرها اجازه می‌دهد تا قبل از بارگذاری کامل تصاویر، فضا را برای تصویر مورد نظر رزرو کرده و از تغییر ناگهانی چیدمان در صفحه جلوگیری کنند. البته باید بدانید که این فقط مربوط به تصاویر نمی‌شود و نیاز دارید که ابعاد فیلم‌ها و آی فریم‌ها را نیز مشخص کنید. برای اطمینان از عملکرد خوب یک وب‌سایت، گوگل معیارهای Cumulative Layout Shift (CLS) را به عنوان بخشی از Core Web Vitals ارائه داده است.

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

تعریف Cumulative Layout Shift:

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

این سایت خبری با مشکل جابه‌جایی عناصر در صفحه مواجه بود که باعث می‌شد کاربران به اشتباه روی لینک‌های تبلیغاتی کلیک کنند. با بهینه‌سازی CLS و جلوگیری از جابه‌جایی عناصر، نرخ کلیک روی تبلیغات و در نتیجه نرخ تبدیل این سایت 1.2 درصد افزایش یافت. Intersection Observer API یک ابزار قدرتمند در جاوا اسکریپت است که به شما امکان می‌دهد تغییرات تقاطع یک عنصر هدف با یک عنصر ancestor یا با viewport سند را به صورت asynchronous مشاهده کنید. این API می‌تواند به بهبود عملکرد وب‌سایت و کاهش CLS (Cumulative Layout Shift) کمک کند. این ضریب، فاصله‌ای که عنصر ناپایدار طی کرده را به نسبت محدودۀ قابل‌نمایش کاربر اندازه‌گیری می‌کند. این اتفاق مسلماً تأثیر ناخوشایندی بر تجربه کاربر خواهد گذاشت و سبب افت روند رشد سئوی سایت خواهد شد.