Kalo te përmbajtja
SEO Analyzer

Performancë

Burimet që bllokojnë renderimin

Stile dhe skripta sinkrone në <head> që e ndalojnë shfaqjen e faqes derisa të shkarkohen.

Çfarë është

Disa burime e ndalojnë shfletuesin nga shfaqja e çdo gjëje derisa të shkarkohen dhe të përpunohen.

Stilet janë të tilla nga natyra: shfletuesi nuk mund të vizatojë asgjë para se të dijë si duket, përndryshe faqja do të pulsonte. Çdo <link rel="stylesheet"> pa atribut media e mban ekranin bosh derisa të vijë.

Skriptet janë të tilla kur shkruhen pa async dhe pa defer. Një <script src> sinkron në <head> e ndal parsimin e HTML-së në atë pikë: shfletuesi duhet ta shkarkojë dhe ta ekzekutojë skriptin para se të lexojë rreshtin tjetër.

Rezultati është një ekran i bardhë, gjatësia e të cilit është shuma e pritjeve.

Pse ka rëndësi

Ky është shkaku më i zakonshëm i ekranit të bardhë. Vizitori ka pritur dokumentin, ai ka mbërritur, dhe ende nuk sheh asgjë — sepse tetë skedarë stilesh dhe shtatë skripta duhet të vijnë të parët.

Në lidhje të shpejta kjo zgjat një çast. Në lidhje mobile me vonesë të lartë, ku çdo kërkesë kushton qindra milisekonda, pesëmbëdhjetë burime bllokuese janë disa sekonda ekran bosh.

Pasoja te matjet zyrtare është e drejtpërdrejtë: koha deri te ngarkimi i elementit më të madh të dukshëm nuk mund të jetë më e vogël se koha e burimeve bllokuese.

Shkaku më i shpeshtë është trashëgimia: çdo shtojcë shton skedarin e vet te <head>, askush nuk i heq, dhe pas disa vitesh janë pesëmbëdhjetë.

Si rregullohet

<!-- bllokues -->
<script src="/analitika.js"></script>

<!-- jo bllokues: ekzekutohet pas parsimit, ruan rendin -->
<script src="/app.js" defer></script>

<!-- jo bllokues: ekzekutohet sapo vjen, pa rend të garantuar -->
<script src="/analitika.js" async></script>

<!-- stil vetëm për shtyp: nuk bllokon -->
<link rel="stylesheet" href="/shtyp.css" media="print">

Hapat:

  • `defer` për skriptet e aplikacionit — ruan rendin dhe pret DOM-in.
  • `async` për ato të pavarura, si analitika.
  • Vendos CSS-në kritike inline për ekranin e parë dhe ngarko pjesën tjetër me prioritet të ulët.
  • Ndaj CSS-në sipas `media`. Stilet për shtyp dhe për ekrane të gjera nuk duhet të bllokojnë.
  • Hiq atë që nuk përdoret. Shpesh gjysma e CSS-së nuk zbatohet kurrë.

Si e mat ky mjet

PerformanceAnalyzer::checkRenderBlocking() (services/PerformanceAnalyzer.php:184) numëron dy grupe: //link[@rel="stylesheet" and not(@media="print") and not(@media="(none)")] dhe //script[@src and not(@async) and not(@defer)]. Shumën e tyre e krahason me dy pragje: deri 2 (kaluar), 3–5 (:195, informativ), mbi 5 (:197, paralajmërim me ndikim të lartë).

Çfarë NUK e mat

Kontrolli nuk shikon ku ndodhet burimi. Një skript sinkron para etiketës </body> nuk e bllokon renderimin e pjesës së dukshme, por numërohet njësoj si një në <head> — pra numri i raportuar është tavan, jo matje e dëmit real.

Filtri i stileve kapërcen vetëm media="print" dhe një vlerë të pazakontë (none). Stile me media="(min-width: 900px)" ose media="screen and (orientation: landscape)" — që bllokojnë vetëm me kusht — numërohen si plotësisht bllokuese.

Nuk matet as pesha e burimit, as koha reale e shkarkimit të tij. Dhe skriptet e injektuara nga JavaScript-i nuk numërohen fare.

Kodi që e kryen matjen

  • services/PerformanceAnalyzer.php:184 — PerformanceAnalyzer::checkRenderBlocking
  • services/PerformanceAnalyzer.php:197 — many_render_blocking

Standardi