Cumulative Layout Shift: necə tənzimləmək olar

Cumulative Layout Shift (CLS) veb səhifə yüklənərkən məzmunun nə qədər yerdəyişdiyini və ya hərəkət etdiyini ölçən kritik performans göstəricisidir. Bu hərəkət istifadəçiləri əsəbiləşdirə bilər, çünki bu, onların səhv elementlərə kliklənməsinə və ya səhifədəki yerini itirməsinə səbəb ola bilər. Google həmçinin bu yaxınlarda elan etdi ki, CLS 2021-ci ilin may ayında reytinq faktoruna çevriləcək və veb sayt sahibləri üçün bu metrik üçün səhifələrini optimallaşdırmağı həmişəkindən daha vacib edir. Bu yazıda biz CLS-in nə olduğunu, istifadəçi təcrübəsinə və SEO-ya necə təsir etdiyini və veb saytınızın performansını yaxşılaşdırmaq üçün CLS-i tənzimləməyin ən yaxşı yollarını müzakirə edəcəyik.

Nədir Cumulative Layout Shift (CLS)?

Cumulative Layout Shift (CLS) yüklənərkən səhifənin tərtibatının nə qədər dəyişdiyini ölçən bir metrikdir. Bu dəyişikliyə gec yüklənən şəkillər və videolar və ya səhifə yükləndikcə dinamik ölçüləri dəyişdirilən elementlər də daxil olmaqla müxtəlif amillər səbəb ola bilər. CLS, tərtibat elementinin hərəkət etdiyi məsafəni ölçüsünə vurmaqla hesablanır. Sonra səhifənin yüklənməsi zamanı baş verən bütün tərtibat dəyişiklikləri üçün bu dəyərlərin cəmlənməsi. Nəticə 0 ilə 1 arasında bir xaldır, daha aşağı xal isə daha az düzən dəyişikliyini göstərir.

CLS niyə vacibdir?

Cumulative Layout Shift iki əsas səbəbə görə vacib bir metrikdir: istifadəçi təcrübəsi və SEO. İstifadəçi təcrübəsi nöqteyi-nəzərindən yüksək CLS-ə malik bir səhifə istifadəçiləri əsəbiləşdirə və çaşdıra bilər. Səhifədəki elementlər gözlənilmədən yerdəyişmə və ya yerdəyişmə zamanı istifadəçilər səhifədəki yerlərini itirə və ya səhvən yanlış elementlərə klikləyə bilərlər. Bu, pis istifadəçi təcrübəsinə səbəb ola bilər və istifadəçilərin saytınızı tərk etməsinə səbəb ola bilər.

SEO nöqteyi-nəzərindən Google, CLS-nin 2021-ci ilin mayında sıralama faktoruna çevriləcəyini açıqladı. Bu o deməkdir ki, yüksək CLS balı olan səhifələr axtarış reytinqlərində cəzalandırıla bilər, aşağı CLS balı olan səhifələr isə reytinqlərdə artım müşahidə edə bilər. Buna görə də, veb saytınızın axtarış motorunun görünməsini yaxşılaşdırmaq istəyirsinizsə, CLS üçün optimallaşdırma çox vacibdir.

Necə ölçün Cumulative Layout Shift?

Ölçmək üçün Cumulative Layout Shift veb saytınızda Google-un PageSpeed Insights alətindən və ya Chrome DevTools-dan istifadə edə bilərsiniz. Hər iki alət sizə 0 ilə 1 arasında xal verəcək, həmçinin səhifənin yüklənməsi zamanı baş verən hər hansı tərtibat dəyişikliyinin səbəblərini təhlil edəcək. Veb saytınız üçün CLS və digər performans göstəricilərini ölçmək üçün WebPageTest kimi alətdən də istifadə edə bilərsiniz.

CLS-i necə tənzimləmək olar?

CLS-inizi tənzimləmək üçün atacağınız bəzi addımlar bunlardır:

Şəkilləri optimallaşdırın. Böyük və ya optimallaşdırılmamış şəkillər yükləndikcə düzən dəyişikliklərinə səbəb ola bilər. CLS-ə təsirini azaltmaq üçün şəkillərin düzgün ölçüdə və sıxıldığından əmin olun.
Media elementləri üçün aspekt nisbətlərindən istifadə edin. Şəkil və ya video üçün aspekt nisbətindən istifadə etdiyiniz zaman brauzer yükləmədən əvvəl onun nə qədər yer tutacağını bilir. Bu, media elementlərinin səbəb olduğu düzən dəyişikliklərinin qarşısını almağa kömək edə bilər.
Reklamlar və yerləşdirmələr üçün yer ayırın: Reklamlar və yerləşdirmələr tez-tez asinxron yüklənir, bu da tərtibatın dəyişməsinə səbəb ola bilər. Planınızda onlar üçün yer ayırmaqla siz bu dəyişikliklərin qarşısını ala bilərsiniz.
Dinamik olaraq daxil edilmiş məzmundan çəkinin. Yükləndikdən sonra səhifəyə daxil edilən məzmun, məsələn pop-uplar və ya söhbət qutuları tərtibatın dəyişməsinə səbəb ola bilər. Bu tip məzmundan istifadə etməməyə çalışın. Onun tərtibata təsir etməyəcək şəkildə yükləndiyinə əmin olun.
Şriftləri asinxron şəkildə yükləyin. Veb saytınızda fərdi şriftlərdən istifadə edirsinizsə, onları asinxron şəkildə yükləmək şriftin yüklənməsi nəticəsində yaranan layout dəyişikliklərinin qarşısını almağa kömək edə bilər.
Əvvəlcədən yükləyicidən istifadə edin. Önyükləyici veb saytınız yüklənərkən görünən ekrandır. O, səhifə yüklənərkən istifadəçiyə baxmaq üçün bir şey verməklə düzən dəyişikliklərinin qarşısını almağa kömək edə bilər.

Bu addımları atmaqla siz vebsaytınızdakı layout dəyişikliklərinin təsirini azaltmağa və istifadəçi təcrübəsini yaxşılaşdırmağa kömək edə bilərsiniz. tövsiyə edirik Hosta Blanca paylaşılan hosting or VPS veb layihələriniz üçün server.