Cumulative Layout Shift düzəlişi, yükləmə dövrü zamanı veb səhifədə gözlənilməz vizual hərəkətlərin qarşısını almaq üçün texniki prosesi ifadə edir. CLS, yükləmə prosesi zamanı səhifənin vizual sabitliyini ölçür. Bu, Google tərəfindən istifadəçi təcrübəsini ölçmək üçün istifadə olunan Core Web Vitals göstəricilərindən biridir. Şəkillər, reklamlar və ya mətn blokları kimi elementlər ilkin renderdən sonra hərəkət etdikdə, sayt aşağı bal toplayır. Bu sürüşmə tez-tez brauzerin elementin ölçülərini yüklənmə bitənə qədər bilməməsi səbəbindən baş verir və məzmunun aşağı və ya kənara itələnməsinə səbəb olur.
Niyə saytınızda Cumulative Layout Shift baş verir?
Layout sürüşməsinin ümumi səbəbi media elementləri üçün müəyyən edilmiş ölçülərin olmamasıdır. Əgər şəkil HTML-də xüsusi en və hündürlük atributları olmadan səhifəyə yerləşdirilərsə, brauzer ilkin olaraq onun üçün sıfır yer ayırır. Şəkil faylı yükləndikdən sonra brauzer yer açmaq üçün səhifənin layout-unu qəflətən yenidən hesablamalı olur. Bu, bütün sonrakı məzmunun tullanmasına səbəb olur və istifadəçiləri narahat edən yüksək CLS balı ilə nəticələnir. Bu davranış xüsusilə ekran sahəsinin məhdud olduğu mobil cihazlarda geniş yayılıb.
Digər tez-tez rast gəlinən səbəb dinamik olaraq daxil edilən məzmunla bağlıdır. Skriptlər və ya üçüncü tərəf vidjetləri əsas məzmundan sonra yükləndikdə, onlar tez-tez DOM-a yeni elementlər əlavə edirlər. Əgər bu elementlərin ayrılmış konteyneri yoxdursa, onlar mövcud məzmunu orijinal mövqeyindən kənara itələyirlər. Bu, xəbər bülleteni pop-upları, banner reklamları və ya əsas səhifə yükləndikdən sonra işə düşən sosial media lentləri ilə tez-tez baş verir. Bu asinxron aktivləri idarə etmək üçün sənəd obyekt modeli və aktivlərinizin xüsusi yükləmə prioriteti haqqında möhkəm anlayış tələb olunur.
Brauzerinizdə layout sürüşmələrini necə müəyyən etmək olar
Chrome DevTools performans panelindən istifadə edərək xüsusi sürüşmələri müəyyən edə bilərsiniz. Konsolu açın, Performance tabına keçin və səhifə yüklənməsini qeyd edin. Qeyd bitdikdən sonra zaman qrafikində ‘Experience’ izini axtarın. İstənilən qırmızı marker layout sürüşməsi hadisəsini göstərir. Bu markerlərə klikləməklə, hansı elementin hərəkət etdiyini və neçə piksel sürüşdüyünü dəqiq görə bilərsiniz. Bu, pozuntuya cavabdeh olan dəqiq kod sətirini müəyyən etməyə imkan verir.
CLS düzəlişi üçün ən yaxşı strategiyalar hansılardır?
- Brauzerin düzgün aspekt nisbəti sahəsini ayırmasını təmin etmək üçün bütün şəkil və video teqlərində en və hündürlük atributlarını daxil edin.
- Qəfil konteyner genişlənməsinin qarşısını almaq üçün CSS min-height xüsusiyyətlərindən istifadə edərək reklam yuvaları və vidjetlər üçün statik yer ayırın.
- Klik kimi birbaşa istifadəçi qarşılıqlı əlaqəsinə cavab olmadıqca, mövcud məzmunun üzərinə yeni məzmun daxil etməkdən çəkinin.
- Gec yüklənən xüsusi veb şriftlərin səbəb olduğu sürüşmələri minimuma endirmək üçün CSS-də font-display: swap istifadə edin.
- Məzmun yavaş yüklənsə belə, layout-un sabit qalmasını təmin etmək üçün dinamik konteynerlərin ölçüsünü əvvəlcədən hesablayın.
Ümumi layout sabitliyi problemlərinin müqayisəsi
| Problem növü | Ümumi səbəb | Tövsiyə olunan düzəliş |
|---|---|---|
| Şəkil sürüşməsi | Çatışmayan ölçülər | En/hündürlük təyin edin |
| Şrift dəyişimi | Gec şrift yüklənməsi | font-display istifadə edin |
| Reklam daxil edilməsi | Dinamik konteynerlər | CSS min-height |
Alien Road texniki sabitlik standartlarını necə tətbiq edir
Alien Road-da komandamız sabitliyə bütün aktivlər xəttini audit etməklə yanaşır. Tipik bir iş prosesində, biz yükləmə ardıcıllığını tutmaq üçün tam səhifə izləməsi ilə başlayırıq. Sonra, layout qeyri-sabitliyinə töhfə verib-vermədiyini müəyyən etmək üçün hər bir üçüncü tərəf skriptini xəritələyirik. Məsələn, müştəri üçüncü tərəf çat vidjetindən istifadə edirsə, biz ilkin səhifə quruluşu zamanı konteyneri sabit aspekt nisbəti və ya minimum hündürlükdə saxlamaq üçün dəyişdiririk. Bu, skript nəhayət icra edildikdə, ətrafdakı məzmunun yerində qalmasını təmin edir.
Biz həmçinin veb şriftlərin çatdırılmasının optimallaşdırılmasına üstünlük veririk. font-display strategiyalarını tətbiq etməklə, brauzerin dərhal ehtiyat şrifti göstərməsini təmin edirik. Bu, xüsusi şrift tətbiq edildikdə səhifənin yenidən axmasına səbəb olan ‘görünməz mətn parıltısı’nın qarşısını alır. Prosesimiz ciddi şəkildə məlumatlara əsaslanır və hər bir düzəlişin vizual dizaynı və ya sayt ziyarətçiləri üçün nəzərdə tutulmuş istifadəçi səyahətini pisləşdirmədən sürüşmə balını effektiv şəkildə azaltdığını yoxlamaq üçün performans panelinə güvənir.
Üçüncü tərəf skriptlərini necə effektiv idarə etmək olar?
Üçüncü tərəf skriptləri tez-tez idarə edilməsi ən çətin olanlardır, çünki onların yüklənmə davranışına birbaşa nəzarətiniz yoxdur. Bunları azaltmaq üçün sabit hündürlüyü olan konteyner örtüyündən istifadə edin. Konteynerin içindəki məzmunun gəlməsi vaxt aparsa belə, örtüyün özü əvvəldən səhifədə lazımi yeri tutur. Bu sadə CSS dəyişikliyi skript işə düşəndə səhifənin tullanmasının qarşısını alır. Vacib olmayan skriptləri həmişə asinxron yükləyin və ya onların kritik render yolunu bloklamadığından əmin olmaq üçün təxirə salın.
Bu həftə haradan başlamaq lazımdır
- Mövcud layout sürüşmə ballarını müəyyən etmək üçün saytınızı performans audit aləti vasitəsilə işə salın.
- HTML-inizdə hündürlük və en atributları çatışmayan şəkil teqlərini axtarın və onları yeniləyin.
- Dinamik reklamlar və ya bannerlər kimi sabit konteyneri olmayan və ölçüsü dəyişən elementlər üçün CSS-inizi nəzərdən keçirin.
- Düzəlişlərinizi istehsal mühitinə keçirməzdən əvvəl onların təsirini yoxlamaq üçün hazırlıq mühiti qurun.
- font-display: swap istifadə etdiyinizi təsdiqləmək üçün veb şrift yükləmə strategiyanızı yoxlayın.
Tez-tez verilən suallar
Saytım üçün kiçik layout sürüşməsi məqbuldurmu?
Google ən yaxşı istifadəçi təcrübəsi üçün CLS balınızı 0.1-dən aşağı saxlamağı tövsiyə edir. Kiçik sürüşmələr həmişə cəriməyə səbəb olmasa da, sıfır hərəkəti hədəfləyin. 0.1 və ya daha aşağı bal əldə etməyə çalışmaq saytınızın müxtəlif cihazlarda və şəbəkə şəraitində sabit qalmasını təmin edir ki, bu da həm istifadəçi məmnuniyyəti, həm də axtarış performansı hədəfləriniz üçün faydalıdır.
Şriftlər layout sürüşməsinə səbəb ola bilərmi?
Bəli, şriftlər layout sürüşməsinin çox yayılmış səbəbidir. Brauzer mətni ehtiyat şriftlə göstərdikdə və sonra yükləndikdən sonra xüsusi şriftə keçdikdə, mətn bloku ölçüsünü və ya sətir hündürlüyünü dəyişə bilər. Bu, altındakı məzmunun sürüşməsinə səbəb olur. CSS font-display: swap istifadə etmək bu davranışı idarə etməyin standart yoludur.
Ölçüləri olmayan şəkillər problem yaradırmı?
Bəli, onlar layout qeyri-sabitliyinin ən tez-tez rast gəlinən səbəblərindən biridir. Şəklin hündürlük və en atributları olmadıqda, brauzer şəkil yüklənməzdən əvvəl tələb olunan sahəni hesablaya bilmir. Bu, səhifə layout-unun yüklənmə zamanı yenidən hesablanmasına məcbur edir ki, bu da məzmunun əhəmiyyətli dərəcədə tullanmasına səbəb olur.
Saytımı CLS üçün necə test edə bilərəm?
Test etməyin ən effektiv yolu Chrome DevTools Performance paneli vasitəsilədir. Səhifə yüklənməsini qeyd etməklə, Experience izində layout sürüşmələrinin vizual sübutunu görə bilərsiniz. Bundan əlavə, saytınızın internetdəki real istifadəçilər üçün necə işlədiyinə dair quş uçuşu mənzərəsi əldə etmək üçün Core Web Vitals haqqında hesabat verən avtomatlaşdırılmış alətlərdən istifadə edə bilərsiniz.
Oxumağa davam edin: SEO (Axtarış Motorunun Optimizasiyası) · SEO