Kalo te përmbajtja
SEO Analyzer

Performancë

Optimizimi i imazheve

Ngarkim i vonuar dhe përmasa të deklaruara te imazhet; mjeti kontrollon atributet loading, width dhe height.

Çfarë është

Dy atribute të thjeshta ndryshojnë shumë te imazhet.

loading="lazy" i thotë shfletuesit ta shkarkojë imazhin vetëm kur ai afrohet te pamja. Për një faqe me tridhjetë imazhe ku vizitori sheh tri, kjo kursen gjithë pjesën tjetër.

width dhe height i thonë shfletuesit përmasat para se imazhi të mbërrijë, që ai të rezervojë hapësirën. Pa to, teksti rri i mbledhur dhe kërcen poshtë kur imazhi ngarkohet — pikërisht kur lexuesi ka nisur të lexojë.

Të dyja atributet janë falas: një ndryshim në HTML, pa mjete dhe pa ndërtim.

Pse ka rëndësi

Imazhet janë zakonisht pjesa më e rëndë e një faqeje. Shkarkimi i tridhjetë imazheve kur nevojiten tre është humbje e drejtpërdrejtë e bandës — e paguar nga vizitori, shpesh nga paketa e tij mobile.

Përmasat që mungojnë prodhojnë zhvendosje të pamjes: teksti lëviz nën gishtin e përdoruesit dhe ai shtyp gabim butonin. Kjo matet nga një metrikë zyrtare e përvojës dhe është një nga shkaqet kryesore të saj.

Ka edhe një kurth te ngarkimi i vonuar: imazhi kryesor i ekranit të parë nuk duhet të jetë lazy. Duke e vonuar atë, e vonon pikërisht elementin që mat përvojën e ngarkimit — pra e përkeqëson matjen duke u përpjekur ta përmirësosh.

Si rregullohet

<!-- imazhi kryesor i ekranit të parë: i padukshëm për lazy, me prioritet të lartë -->
<img src="/hero.webp" width="1200" height="600" fetchpriority="high" alt="...">

<!-- imazhet më poshtë: të vonuara -->
<img src="/produkt-7.webp" width="400" height="300" loading="lazy" decoding="async" alt="...">

Hapat:

  • Vendos `width` dhe `height` te çdo imazh, edhe kur CSS-ja i ndryshon më pas. Shfletuesi ka nevojë vetëm për raportin.
  • `loading="lazy"` te gjithçka nën palosjen, kurrë te imazhi kryesor.
  • Përdor formate moderne — WebP ose AVIF në vend të JPEG dhe PNG.
  • Shërbe përmasa të përshtatshme me srcset dhe sizes; një imazh 3000 pikselësh i shfaqur në 400 është humbje nëntëfishe.
  • Për video dhe iframe vlen e njëjta gjë — përmasa të deklaruara ose aspect-ratio në CSS.

Si e mat ky mjet

PerformanceAnalyzer::checkImageOptimization() (services/PerformanceAnalyzer.php:201) kalon nëpër të gjitha //img dhe numëron dy gjëra: sa kanë loading="lazy" dhe sa i mungojnë width ose height.

Raporton kur imazhet janë më shumë se tre dhe të ngarkuarat me vonesë janë më pak se gjithsej − 1 (:224), dhe kur ndonjë imazh nuk ka të dyja përmasat (:227). Të dyja bashkohen në një konstatim të vetëm informativ (:230).

Çfarë NUK e mat

Asnjë imazh nuk shkarkohet. Mjeti nuk e di sa peshon një imazh, çfarë formati është vërtet, apo nëse përmasat e deklaruara përputhen me ato reale. Fushat file_size dhe total_image_size kthehen gjithnjë 0.

Rregulli gjithsej − 1 supozon se saktësisht një imazh duhet të jetë jo i vonuar. Në një faqe me tre imazhe kryesore në ekranin e parë, mjeti do të kërkonte që dy prej tyre të vonoheshin — çka do ta përkeqësonte faqen.

Nuk kontrollohet nëse imazhi i parë është gabimisht lazy — defekti më i shpeshtë dhe më i dëmshëm i këtij atributi. Nuk shihen as <picture>, as srcset, as imazhet e sfondit nga CSS-ja, as iframe-t pa përmasa.

Kodi që e kryen matjen

  • services/PerformanceAnalyzer.php:201 — PerformanceAnalyzer::checkImageOptimization
  • services/PerformanceAnalyzer.php:230 — image_optimization

Standardi