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

اگرچه هیچ کدوم از ما تمامی معیارهای گوگل برای رتبه‌بندی سایت رو نمیدونیم؛ اما گفته شده گوگل در تلاشه  با روش‌های مختلف امتیازدهی، تجربه کاربری رو نیز در نظر بگیره. خطای Cumulative Layout Shift ارتباط مستقیمی با تجربه کاربری سایت شما داره و پرش‌های مکرر تصاویر، پایین رفتن پاراگراف‌های متن و جابه‌جایی‌های عناصر صفحه، بدون تردید تجربه کاربری ضعیفی رو ایجاد میکنه. بنابراین با رفع خطای Cumulative Layout Shift هم می‌تونید رتبه سئو سایت خود را افزایش بدید و هم رضایت کاربران از ویژگی‌های بصری سایت رو بیشتر کنید. اما cls چیست؟ cls یا Cumulative Layout Shift یکی از سه معیار اصلی Core Web Vitals است که گوگل برای ارزیابی تجربه کاربری و رتبه بندی سایت در نتایج جستجو از آن استفاده می‌کند. Cls چیزی فراتر از سرعت لود سایت است و به شکل باور نکردنی در تجربه کاربری مخاطبان ما تأثیر دارد.

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

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

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

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

با استفاده از این راهکارها، شما می‌ توانید خطای “avoid large layout shifts” را رفع کرده و تجربه کاربری بهتری را برای بازدیدکنندگان صفحه خود ایجاد کنید. Cls برای الگوریتم‌های گوگل و رتبه بندی سایت اهمیت زیادی دارد، چون به‌ طور مستقیم تجربه کاربری سایت را تحت ‌تاثیر قرار می‌دهد. CLS میزان جابجایی عناصر صفحه وب را ارزیابی می‌کند که می‌تواند به طور ناگهانی و بدون اطلاع قبلی کاربر رخ دهد. این جابجایی‌های ناگهانی می‌توانند تجربه کاربری را مختل کرده و منجر به خطاهای کلیکی شوند. به عنوان مثال، یک کاربر ممکن است قصد کلیک بر روی یک لینک یا دکمه را داشته باشد، اما به دلیل جابجایی ناگهانی عناصر، بر روی یک عنصر دیگر کلیک کند. بارگذاری تنبل (Lazy Loading) یکی از استراتژی‌های کلیدی برای بهینه‌سازی وب‌سایت‌ها و بهبود عملکرد “Cumulative Layout Shift” (CLS) است.

این رویکرد شامل شناسایی و بارگذاری ابتدایی محتوایی است که برای کاربران از اهمیت بیشتری برخوردار است و تأخیر در بارگذاری عناصر کم‌اهمیت‌تر تا زمانی که واقعاً به آن‌ها نیاز پیدا شود. این استراتژی به کاهش زمان بارگذاری صفحه کمک کرده و تجربه کاربری را بهبود می‌بخشد. در دنیای دیجیتال امروزی، تجربه کاربری (User Experience) یکی از مهم‌ترین جنبه‌های طراحی وب سایت‌ها و برنامه‌های کاربردی است. یکی از عناصر کلیدی که بر این تجربه تأثیر می‌گذارد، ثبات بصری صفحات وب است. “Cumulative Layout Shift” یا CLS، معیاری است که توسط گوگل معرفی شده و نحوه تغییرات ناگهانی در طراحی صفحات وب را ارزیابی می‌کند. این معیار به عنوان بخشی از “Core Web Vitals” مطرح شده که مجموعه‌ای از معیارها برای سنجش کیفیت تجربه کاربری در وب است.

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

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

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

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

ابزارهای طراحی وب مدرن مانند CSS Grid و Flexbox نیز می‌توانند در این زمینه مفید باشند. این فریم‌ورک‌ها به طراحان امکان می‌دهند تا با دقت بیشتری فضای مورد نیاز برای عناصر مختلف صفحه را مدیریت کنند و به طور مؤثرتری از پدیده جابجایی ناگهانی جلوگیری کنند. برای اجتناب از این مشکلات، توسعه‌دهندگان وب باید به دقت ابعاد عناصر دینامیکی را از پیش تعیین کنند. این امر شامل تعیین ارتفاع و عرض دقیق برای تصاویر و ویدیوها در کد HTML یا CSS است. با این کار، مرورگر می‌تواند فضای لازم را برای این عناصر از پیش رزرو کند و از جابجایی ناگهانی عناصر پیشگیری کند. در ادامه این مقاله، ابتدا به تعریف دقیق‌تری از CLS می‌پردازیم، سپس به بررسی نحوه محاسبه آن و شناسایی عوامل مؤثر بر آن خواهیم پرداخت.

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

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

این API اطلاعاتی از جمله وقایع حین بارگذاری صفحه‌ها و سایر معیارهای مربوط به عملکرد صفحه را فراهم می‌کند. برای این کار ابتدا Chrome Development Tools را باز کنید و به تب Network بروید. در این بخش باید به صورت دستی و برای تست، سرعت سایت را کاهش دهیم تا آن را با سرعت کمتر آزمایش کنیم. در اخر پیشنهاد میشه برای بهتر نتیجه گرفتن از یک متخصص سئو یا هر کسی که بهش اعتماد دارید و دانش داره کمک بگیرید. ما طبق تجربه ای که در خدمات سرعت سایت در میزفا داشتیم متوجه شدیم که خیلی از سایت‌ها  مورد بالا رو رعایت نمیکنن. کی از چالش‌های اصلی در این زمینه، تنظیم ابعاد برای محتوای دینامیکی و پاسخگو مانند تبلیغات است.

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

این روش به ویژه برای عناصر غیرضروری یا ثانویه‌ای که در ابتدای بارگذاری صفحه نیازی به نمایش آن‌ها نیست، کاربردی است. بارگذاری تنبل به معنای تأخیر در بارگذاری عناصر تا زمانی است که واقعاً به آن‌ها نیاز پیدا شود. این روش می‌تواند به کاهش زمان بارگذاری اولیه صفحه، کاهش مصرف داده‌ها و بهبود تجربه کاربری کمک کند. علاوه بر تأثیر بر تجربه کاربری، اندازه‌گیری دقیق فضا برای عناصر دینامیکی می‌تواند تأثیر مثبتی بر سئو داشته باشد. وب‌سایت‌هایی که دارای CLS پایین‌تری هستند، اغلب از رتبه‌بندی بهتری در نتایج جستجو برخوردار می‌شوند. گوگل به طور فزاینده‌ای بر تجربه کاربری تمرکز می‌کند و Avoid large layout shifts به عنوان یکی از معیارهای UX، نقشی کلیدی در رتبه‌بندی صفحات وب در نتایج جستجو دارد.

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

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

ضریب فاصله، شامل «بیشترین فاصله‌ای است که هر عنصر ناپایدار در فریم حرکت کرده (چه به صورت افقی چه عمودی)»، تقسیم بر «بیشترین ابعاد محدوده قابل‌نمایش کاربر (هر کدام از عرض و طول که بیشتر باشد)». متخصصان و فعالان سئو می‌توانند از میان دوره های آموزشی حضوری،دوره جامع آنلاین و پکیج‌های آموزشی ویدئویی آگاهی و دانش خود را در این زمینه افزایش دهند. اگر یک سایت اینترنتی داشته باشید و آن را با کمک ابزار Gtmetrix بررسی کنید، خطاهای مختلفی به شما نشان داده می‌شود! یکی از خطاهایی که در این ابزار به شما نشان داده می‌شود، خطای Cumulative Layout Shift است. این خطا در واقع اهمیت بسیار زیادی دارد و دلیل آن هم این است که چنین خطایی در الگوریتم Lighthouse Google وجود دارد. پس از آن که گوگل این الگوریتم را ارائه کرد، جی‌تی‌متریکس هم به عنوان ابزار بررسی بهینه بودن سایت از نظر فاکتورهای گوگل و ساختار آن را در بین فاکتورهای مورد بررسی خود قرار داد.

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

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

مسلماً این موارد تجربیات چندان خوشایندی برای شما نبوده است و همین امر سبب شده تا رغبتی برای مراجعه مجدد به وبسایت موردنظر نداشته باشید! پس با این اوصاف به‌خوبی می‌توان فهمید که Cls چهتأثیرر بسزایی بر تجربه کاربران و درصد احتمال بازگشت مجدد آن‌ها به سایت خواهد داشت. در کل، به منظور بهبود امتیاز CLS صفحات وب، لازم است به طراحی رابط کاربری و استفاده از تکنولوژی‌های مختلف به صورت جدی پرداخته شود. ضریب تأثیر یا Impact Fraction در CLS، جزئی از فرمول محاسبه امتیاز CLS است که نشان دهنده میزان تاثیر المانی است که در تغییرات موقعیت در صفحه دخیل است. در این فرمول، مقدار impact fraction نشان دهنده میزان تغییر موقعیت المان‌ها در صفحه در هر لحظه و distance fraction نیز میزان فاصله‌ای است که المان در هر لحظه حرکت می‌کند. با وجود آن که مهم‌ترین مواردی که روی CLS تاثیرگذار هستند را بررسی کردیم، اما موارد دیگری هم هستند که روی آن تاثیر دارند!

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

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

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

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

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

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

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

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

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