CLS در GTmetrix چیست؟ آموزش بهبود سرعت (CLS)

بهبود و افزایش سرعت Cumulative Layout Shift (CLS): یکی از فاکتورهای بسیار مهم در Web Vitals و گزارش‌های بخش Performance سایت GTmetrix ، CLS یا Cumulative Layout Shift است. به طور خلاصه می‌توان گفت، CLS به تغییر ناگهانی چیدمان المان‌های سایت اشاره می‌کند. فرض کنید وارد یک سایت شده‌اید و قصد دارید بر روی یک لینک کلیک نمایید. اما تا اشاره‌گر موس را روی آن می‌برید، یک المان دیگر مثل عکس در بالای آن ظاهر شده و ناخواسته به جای لینک بر روی عکس کلیک می‌کنید. این مساله باعث می‌شود تا کاربران تجربه بدی را به دست آورند. بنابراین می‌توان گفت تغییر ناگهانی چیدمان، بیشتر بر روی تجربه کاربری و UX تمرکز دارد.

در ادامه این نوشته در وب آنجل قصد دارم آموزش بهبود سرعت (CLS) و معیار Cumulative Layout Shift را به طور کامل بررسی کرده و راه‌های بهبود آن را با شما به اشتراک بگذارم. همچنین بررسی خواهیم کرد که چرا نمره پایین CLS می‌تواند به سئو سایت ضربه بزند.

نکته: با روی کار آمدن Web Vitals، دنیای بهینه‌سازی سایت و تجربه کاربری، با تغییرات چشمگیری مواجه شده و برای برطرف کردن بسیاری از فاکتورها به تخصص بالایی در زمینه کد نویسی، UX و سئو خواهید داشت.

(CLS) چیست و چه تاثیری در تجربه کاربری سایت دارد؟

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

در ویدیوهای زیر می‌توانید این مساله را به وضوح مشاهده کنید.

در ویدیو اول، همانطور که مشاهده می‌کنید، با لود شدن المان‌های قرمز رنگ، سایر المان‌ها جابه‌جا می‌شوند. از نظر تجربه کاربری این تغییر ناگهانی نباید در سایت وجود داشته باشد یا حداقل زمان آن بسیار کم باشد.

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

همچنین در ویدیو زیر، کاربر قصد دارد بر روی دکمه No, go back کلیک کرده و از خرید انصراف دهد. اما به طور ناگهانی یک تبلیغ در بالای صفحه لود شده و باعث می‌شود کاربر به صورت ناخواسته بر روی دکمه Yes, place my order کلیک کند. در صورتی که این مساله در سایت رخ دهد، بسیاری از کاربران سایت را ترک کرده و دوباره به آن برنمی‌گردند.

بنابراین نمره CLS نقش بسیار مهمی در UX و تجربه کاربری سایت دارد. بهتر است بدانید، CLS در کنار LCP، FID و FCP از مهمترین فاکتورهای رتبه‌بندی به شمار می‌روند. همچنین 25 درصد از امتیاز PageSpeed به این عامل بستگی دارد.

در ادامه بررسی خواهیم کرد که مدت زمان مناسب برای Cumulative Layout Shift چقدر است.

بهترین زمان برای CLS چقدر است؟

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

• Good CLS: اگر نمره Cumulative Layout Shift کمتر از 0.1 باشد، یعنی سایت شما از این لحاظ مشکلی ندارد.
• Needs Improvement: در صورتی که امتیاز بین 0.1 و 0.25 باشد، به این معناست که عملکرد سایت نیاز به بهبود دارد.
• Poor: اگر امتیاز CLS بیشتر از 0.25 باشد، سایت شما در وضعیت بدی قرار دارد و باید هر چه سریع‌تر مشکلات آن را برطرف کنید.

بنابراین برای اینکه کاربران تجربه بهتری را به دست آورند، حداقل باید 75 درصد از بازدیدهای سایت، نمره CLS کمتر از 0.1 داشته باشد.

نکته: بر خلاف سایر فاکتورهای Web Vitals و GTmetrix که امتیاز آن‌ها بر اساس ثانیه یا میلی ثانیه بود، امتیاز CLS با زمان اندازه‌گیری نمی‌شود. بلکه معیار آن میزان جابه‌جایی محتوا و فاصله ایجاد شده بین آن‌ها است.

آیا CLS تاثیری بر روی سئو سایت دارد؟

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

چطور امتیاز CLS سایت را به دست آوریم؟

ابزارهای مختلفی برای به دست آوردن امتیاز CLS وجود دارد که از جمله آن‌ها می‌توان به سایت‌های زیر اشاره کرد.

• Lighthouse
• PageSpeed Insights
• Chrome DevTools
• Search Console
• WebPage Test
• GTmetrix

از میان همه این ابزارها، GTmetrix یکی از بهترین‌ها به شمار می‌رود. چرا که هم برای ایرانیان در دسترس است و هم به صورت رایگان می‌توانید از آن استفاده کنید. در وب آنجلنیز ما آموزش کامل کار با GTmetrix را قرار داده‌ایم. بعد از اینکه سرعت و عملکرد سایت را با این ابزار تست کردید، در بخش Web Vitals می‌توانید نمره Cumulative Layout Shift را مشاهده کنید. در تصویر زیر عدد آن 0.41 است که امتیاز ضعیفی به شمار می‌رود.

اما از کجا بفهمیم کدام المان‌ها و چه مواردی باعث کاهش امتیاز Cumulative Layout Shift شده‌اند؟ اگر از GTmetrix استفاده می‌کنید، به تب Structure مراجعه کرده و Show Audits Relevant to را روی CLS تنظیم کنید. با اینکار می‌توانید به طور دقیق با علت کم شدن امتیاز CLS آشنا شوید.

در صورتی از ابزار PageSpeed Insights استفاده می‌کنید، بعد از بررسی سایت، در بخش DIAGNOSTICS و Avoid large layout shifts می‌توانید علل کاهش امتیاز CLS را مشاهده کنید.

استفاده از Chrome’s DevTools برای اندازه گیری CLS

اگر به هر دلیلی به ابزارهای بالا دسترسی نداشتید یا می‌خواستید با روش دیگری میزان Cumulative Layout Shift را اندازه‌گیری کنید، ابزار توسعه کروم یکی از بهترین‌ها است. برای اینکار، صفحه‌ای که می‌خواهید تحلیل کنید را باز کرده و بعد از کلیک راست در آن، گزینه Inspect را انتخاب نمایید.

در پنل جدیدی که باز می‌شود، به تب Lighthouse رفته و بر روی Analyze page load کلیک کنید. در بخش Categories می‌توانید مشخص کنید که کدام دسته‌بندی‌ها را آنالیز و بررسی کند.

بعد از آن، تست سایت شروع شده و علاوه بر CLS، موارد دیگری همچون وضعیت سئو سایت، performance، Accessibility و… را نیز بررسی می‌کند.

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

در ادامه صفحه نیز المان‌هایی که باعث کاهش امتیاز CLS شده‌اند را به شما نشان می‌دهد.

آشنایی با دلایل کم بودن امتیاز CLS در سایت

دلایل مختلفی باعث کم شدن امتیاز Cumulative Layout Shift می‌شوند که از جمله آن‌ها می‌توان به موارد زیر اشاره کرد.

• قرار ندادن ویژگی widh و Height (عرض و طول) برای تصاویر و ویدیوهای سایت.
• بارگذاری تبلیغات در سایت بدون اینکه فضایی را از قبل برای آن‌ها در نظر گرفته باشید.
• استفاده از iframe بدون تعیین کردن ویژگی طول و عرض برای آن.
• کند بودن سرعت بارگذاری فونت در سایت.
• استفاده از انیمیشن‌ها

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

نکته: CLS بیشترین تاثیر را در تلفن همراه دارد. چرا که صفحه نمایش تلفن همراه نسبت به مانیتور کوچک بوده و کوچکترین تغییرات صفحه می‌تواند آزاردهنده باشد.

مهمترین مسائلی که باعث کاهش امتیاز CLS می‌شوند، عبارتند از:

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

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

2. برای هر المانی که در سایت قرار می‌دهید، حداقل ارتفاع و عرض را مشخص کنید. در ادامه نوشته این موضوع را به طور کامل توضیح خواهیم داد.

آموزش افزایش امتیاز Cumulative Layout Shift یا CLS در سایت

در این بخش از آموزش قصد داریم شما را با روش‌های افزایش و بهبود امتیاز CLS آشنا کنیم. دقت داشته باشید که برای اعمال این موارد در سایت حداقل باید با HTML و CSS آشنایی داشته باشید. در غیر این صورت باید از یک فرد یا شرکت معتبر بخواهید مشکلات موجود را بررسی کرده و نسبت به افزایش سرعت سایت و بهبود تجربه کاربری اقدام کند.

ما در مجموعه وب آنجلآماده‌ایم تا همه امتیازهای سایت شما را در جی تی متریکس به بهترین عدد برسانیم.

1. اضافه کردن ویژگی عرض و ارتفاع برای تصاویر و ویدیو‌ها

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

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

انجام اینکار بسیار ساده بوده و با اضافه کردن چند خط کد امکان‌پذیر است.

<img src=”http://imageurl.com” width=”120″ height=”90″ alt=”Image Alt Text”>

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

img{

max-width: 90%;

height: auto;

}

برای بررسی اینکه تصاویر و ویدیوهای سایت شما دارای خاصیت عرض و ارتفاع هستند، می‌توانید از ابزار Inspector مرورگر استفاده کنید.

برخی از سایت‌ها از روش‌ خلاقانه‌ Image Placholder استفاده می‌کنند. به این صورت که قبل از لود تصویر اصلی، یک تصویر ساده در محل تصویر اصلی قرار می‌دهند تا محل آن مشخص شده و موجب تغییر المان‌های صفحه نشود. در نهایت با لود تصویر اصلی، با آن جایگزین می‌شود؛ درست مانند زمانی که از Placeholder برای فیلدهای متن در HTML استفاده می‌کنیم.

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

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

در صورتی که از سیستم مدیریت محتوای وردپرس استفاده می‌کنید، هنگام اضافه کردن تصویر، عرض و ارتفاع آن به صورت خودکار تنظیم می‌شود. همچنین اگر افزونه wp rocket را نصب کرده‌اید، امکان تنظیم عرض و ارتفاع برای تصاویر وجود دارد. برای اینکار کافی است به بخش Media یا رسانه مراجعه کرده و تیک گزینه Add missing image dimensions یا افزودن ابعاد به تصاویر بدون ابعاد را بزنید.

نکته: ویژگی ارتفاع و عرض باید در کدنویسی قالب سایت اعمال شود. بنابراین این وظیفه مربوط به برنامه نویس است. همچنین اگر از قالب‌های وردپرس استفاده می‌کنید، اکثر قالب‌های حرفه‌ای موارد را معمولا رعایت می‌کنند.

تاریخچه استفاده از خاصیت عرض و ارتفاع برای تصاویر و ویدیوها

تا قبل از اینکه بحث ریسپانسیو مطرح شود، خاصیت‌های width و height به صورت inline قرار داده می‌شد. بزرگترین مشکل این روش، به هم ریختن نسبت تصویر بود. به‌عنوان مثال اگر اندازه تصویر اصلی 1920 در 1080 (نسبت 16:9) بود و ما عرض و ارتفاع را 600 قرار داده بودیم، باعث می‌شد تصویر خروجی با نسبت 1:1 نمایش داده شود.

<img src=”pic.jpg” width=”600″ height=”600″ alt=”best img”>

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

img{

max-width: 90%;

height: auto;

{

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

2. برای تبلیغات، بنرها و آی فریم‌ها مکان ثابتی را در نظر بگیرید

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

اما سوال اینجاست، چگونه تبلیغات سایت را بدون اینکه لطمه‌ای به Cumulative Layout Shift  وارد کند، بارگذاری کنیم؟

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

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

به طور خلاصه می‌توان گفت:

• عرض و ارتفاع ثابت را برای تبلیغات در نظر بگیرید.
• خاصیت overflow:hidden را استفاده کنید.
• حتی در صورت نمایش ندادن تبلیغات، مکان المان‌ها را تغییر ندهید.

3. بارگذاری اصولی و بهینه فونت‌ها در سایت برای بهبود امتیاز CLS

دانلود و بارگذاری فونت در سایت معمولا به دو روش انجام می‌گیرید:

• Fout (flash of unstyled text): در این حالت، متن بدون هیچ فونتی و با فونت پیش‌فرض مرورگر نمایش داده می‌شود. این موضوع باعث می‌شود تا متن با سرعت بالایی به کاربر نمایش داده شود. اعمال فونت نیز مدتی طول می‌کشد.
• FOIT (flash of invisible text): اما در این حالت، تا زمانی که فونت به صورت کامل بارگذاری نشده باشد، متن نمایش داده نمی‌شود.

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

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

استفاده از خاصیت‌های font-display: optional و “rel: “preload

استفاده از دستور font-display: optional در فایل CSS باعث می‌شود تا اهمیت فونت در کمترین مقدار ممکن قرار بگیرد. در این حالت حتی احتمال دارد فونت توسط مرورگر بارگذاری نشود. بنابراین اگر به هر دلیلی فونت دانلود نشود، متن با فونت پیش‌فرض به نمایش درمی‌آید.

@font-face {

  font-family: ‘Example’;

  font-display: optional;

  src: local(‘Example’), url( … ) format( ‘woff2’ );

{

البته font-display به جز optional حالت‌های دیگری از جمله block, swap و fallback نیز دارد. در این لینک می‌توانید اطلاعات بیشتری از آن به دست آورید.

با قرار دادن خاصیت rel: “preload”  در هدر سایت نیز می‌توانید به مرورگر بگویید فونت را سریع‌تر بارگذاری کند. در حالت عادی، مرورگر کدهای صفحه را از بالا به پایین خوانده و تا زمانی که مثلا کد خط 2 بارگذاری نشود، به سراغ خط 3 نمی‌رود. اما وقتی ما این خاصیت را در هدر سایت قرار می‌دهیم، مرورگر آن را اولویت اصلی خود قرار می‌دهد. روش استفاده از آن نیز به شکل زیر است.

<link rel=”preload” as=”style” href=”css/font.css”>

از این خاصیت می‌توانید برای لود کردن منابعی که دیر لود شدن آن‌ها باعث کاهش سرعت سایت می‌شود استفاده کنید. مثلا می‌توانید از آن برای بارگذاری استایل‌های ضروری سایت استفاده نمایید. در واقع این روش را برای رفع ارور Preload Key Request نیز به کار می‌برند.

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

برای اینکه بدانید فونت‌های سایت شما این خاصیت‌ها را دارند، می‌توانید از Inspector کمک بگیرید.

حجم فونت‌های صفحه را به حداقل برسانید

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

تبدیل فونت آیکون‌ها به فرمت SVG، استفاده از فرمت‌های مختلف فونت مثل Woff2 یا Woff و استفاده از CDN برای لود فونت‌ها از جمله روش‌های کاهش حجم فونت‌ها به شمار می‌روند. بهتر است بدانید فرمت woff2 حدود 30 درصد از فرمت‌های woff و svg کوچک‌تر است. همچنین تا جای ممکن از فرمت TTF استفاده نکنید، چرا که 10 الی 20 درصد حجم بیشتری از woff دارد.

تنظیم خاصیت font-size-adjust برای متن‌ها در CSS

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

به‌عنوان مثال، اگر از فونت Verdana در سایت استفاده کنید، به طور پیش‌فرض font-size-adjust آن روی 0.58 تنظیم شده است. اما از آنجایی که فونت جایگزین آن (در مثال ما Times) نسبت متفاوتی دارد، باعث به هم ریختن سایز و استایل متن‌ها خواهد شد. برای اینکه از بروز چنین مشکلی جلوگیری کنیم، از خاصیت font-size-adjust استفاده کرده و آن را روی 0.58 تنظیم می‌کنیم تا نسبت دو فونت یکی شود.

.second_font {

          font-family: Times, serif;

          font-size: 12px;

          font-size-adjust: 0.58;

{

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

4. استفاده از خاصیت حداقل ارتفاع (min-height) برای المان‌ها و عناصر صفحه

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

البته با کمک خاصیت مدیا کوئری می‌توانید حداقل ارتفاع را برای دیوایس‌های مختلف نیز تنظیم کنید. استفاده از این قابلیت باعث می‌شود تا این عناصر باعث تغییر چیدمان صفحه نشوند.

header {

          min-height: 50px;

}

@media (min-width: 600px) {

          header {

                    min-height: 200px;

  }

{

این موضوع را علاوه بر ارتفاع، می‌توانید برای عرض المان‌ها (min-width) نیز به کار ببرید. البته آن چیزی که باعث ایجاد تغییرات ناگهانی در صفحه می‌شود، معمولا مربوط به ارتفاع المان‌ها است. بنابراین سعی کنید برای بنرهای تبلیغاتی، هدر سایت و عکس‌های صفحه از خاصیت min-height استفاده کنید تا لود آن‌ها باعث به هم ریختن صفحه سایت نشود. در نهایت می‌توان گفت استفاده از این خاصیت باعث بهبود امتیاز Cumulative Layout Shift یا CLS خواهد شد.

5. استفاده اشتباه از انیمیشن و کاهش امتیاز CLS

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

برای اینکه با مشکل Cumulative Layout Shift مواجه نشوید، حتما از ویژگی transform استفاده کنید. با این ویژگی، به جای تغییر طول و عرض المان، مقیاس آن تغییر می‌کند. اما اگر از خاصیت‌های top, bottom, left یا Right برای انیمیشن دادن استفاده کنید، باعث جابه‌جایی المان‌ها و در نتیجه کاهش امتیاز CLS خواهد شد.

6. استفاده از قالب و افزونه‌های مناسب

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

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

جمع‌بندی

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

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

چنانچه در رابطه با این موضوع سوالی دارید، خوشحال می‌شویم آن را در بخش نظرات با ما در میان بگذارید.