Kalo te përmbajtja
SEO Analyzer

Performancë

CLS — zhvendosja kumulative e pamjes

Sa lëviz përmbajtja vetë gjatë ngarkimit; mjeti e vlerëson nga imazhet dhe iframe-t pa përmasa.

Çfarë është

CLS (*Cumulative Layout Shift*) mat sa shumë lëviz përmbajtja e dukshme pa e kërkuar përdoruesi. Çdo herë që një element zhvendoset pa ndërhyrje, matësi shton një vlerë proporcionale me sipërfaqen e prekur dhe distancën e lëvizjes.

Rezultati nuk ka njësi. Pragjet zyrtare: deri 0,1 e mirë, deri 0,25 e përmirësueshme, mbi 0,25 e dobët.

Shkaqet janë të njohura dhe të pakta: imazhe pa përmasa të deklaruara, reklama dhe elemente të futura në mes të përmbajtjes, fonte që ndryshojnë pamjen kur mbërrijnë, dhe përmbajtje që shtohet sipër asaj ekzistuese.

Pse ka rëndësi

Ky është defekti që përdoruesit e urrejnë pa ditur si ta emërtojnë. Ti nis të lexosh, dhe teksti kërcen poshtë sepse një reklamë u ngarkua sipër. Ose shtyp "Anulo" dhe në atë çast butoni zhvendoset dhe shtyp "Konfirmo".

Pasoja në një faqe tregtie ose në një formular pagese është veprim i gabuar, jo thjesht bezdi.

Në telefon problemi është më i keq: ekrani i vogël do të thotë se çdo element i futur e zhvendos gjithçka tjetër, dhe gishti është tashmë mbi ekran.

CLS është pjesë e Core Web Vitals dhe ndikon te vlerësimi i përvojës së faqes. Por arsyeja kryesore për ta ndrequr nuk është kjo — është se ndreqja kushton pak dhe efekti te përdoruesi është i menjëhershëm.

Si rregullohet

<!-- përmasa të deklaruara: shfletuesi rezervon hapësirën -->
<img src="/foto.webp" width="800" height="450" alt="...">
<iframe src="..." width="560" height="315" title="..."></iframe>
/* hapësirë e rezervuar për një bllok me përmasa të ndryshueshme */
.reklame { min-height: 250px; }
/* fonte që nuk e zhvendosin tekstin kur mbërrijnë */
@font-face { font-family: X; src: url(x.woff2); font-display: optional; }

Hapat:

  • Përmasa te çdo imazh, video dhe iframe.
  • Rezervo hapësirën për gjithçka që mbërrin më vonë.
  • Mos fut përmbajtje sipër asaj ekzistuese. Bannerët e cookie-ve duhet të rrinë të fiksuar, jo të shtyjnë faqen.
  • Ngarko fontet me `font-display: optional` ose `swap` dhe zgjidh një font rezervë me metrikë të ngjashme.
  • Animo me `transform`, jo me top, left, width ose height.

Si e mat ky mjet

CoreWebVitalsAnalyzer::estimateCLS() (services/CoreWebVitalsAnalyzer.php:186) mbledh katër gjoba: 0,02 për çdo <img> pa width ose pa height (:191), 0,05 për çdo <iframe> të tillë (:195), 0,03 për çdo element me ad ose banner te klasa a te id (:199), dhe 0,02 një herë nëse gjen ndonjë <link> me fonts te URL-ja (:203). Shuma kufizohet në 1,0.

Klasifikimi te analyze() (:59): mbi 0,25 kritike me −20 pikë, mbi 0,1 paralajmërim me −10 pikë.

Çfarë NUK e mat

Ky numër është vlerësim heuristik, jo matje. Mjeti nuk e hap faqen në shfletues dhe nuk mat asnjë metrikë reale performance. Ai llogarit një numër nga tipare të HTML-së statike me koeficientë të shkruar në kod. Nga të katërt kontrollet, vetëm ai i imazheve dhe i iframe-ve ka lidhje të drejtpërdrejtë me shkakun.

Kërkimi për reklama është contains(@class, "ad") — pra çdo klasë që përmban shkronjat ad kudo brenda saj. Klasa krejt të pafajshme si header, sidebar, badge, shadow, loading, ose fjalë shqipe si adresa numërohen si reklama dhe marrin gjobë 0,03 secila. Në një faqe normale kjo mund të jetë burimi kryesor i numrit.

Kontrolli i fontit shton gjobë për çdo <link> që përmban fonts te URL-ja, pa parë nëse është vërtet font, pa parë font-display, dhe pa parë nëse fonti shkakton zhvendosje.

Zhvendosjet reale — përmbajtje e futur nga JavaScript-i, animacione layout-i, elemente që ndryshojnë madhësi — nuk maten dot pa e hapur faqen. Numri nuk duhet krahasuar me pragun zyrtar 0,1.

Kodi që e kryen matjen

  • services/CoreWebVitalsAnalyzer.php:186 — CoreWebVitalsAnalyzer::estimateCLS
  • services/CoreWebVitalsAnalyzer.php:199 — adElements

Standardi