Gyorsabb betöltés és stabil elrendezés, Core Web Vitals mutatókkal mérve. Képekben gazdag statikus oldalaknál a képkezelés számít a legtöbbet.
Projektigény
Képekben gazdag statikus oldalak, amelyek mobilon lassan töltődnek és elmozdul az elrendezésük.
Technikai kérdés
Mely képattribútumok és betöltési szabályok javítják az LCP-t és a CLS-t a design megváltoztatása nélkül?
Validáció
A build automatikusan hozzáadja az attribútumokat; tesztek fedik a méreteket, a prioritást és a srcset szabályait minta-HTML-en.
Döntés
Méretattribútum minden képen, magas prioritás az első látható képeknek, lusta betöltés a többinek, WebP-változatok csak ott, ahol a CSS rögzíti a szélességet.
Core Web Vitals küszöbök (2026-10-es állapot): az LCP legfeljebb 2,5 s, az INP legfeljebb 200 ms, a CLS legfeljebb 0,1 számít jónak.
A kevesebb render-blokkoló kérés is segít: saját tárhelyről kiszolgált fontok egy preloaddal, késleltetett scriptek, teljes képernyős preloader nélkül.
Ezen a portfólión a Lighthouse CI minden pushra és pull requestre lefut, kategóriánként rögzített küszöbökkel (teljesítmény 0,9, akadálymentesség 0,95, best practices 0,9, SEO 0,95), figyelmeztetésként.
A build Pillow-val utófeldolgozza a renderelt HTML-t: valódi képméret, betöltési prioritás és WebP srcset-változatok tartalom-hash szerinti gyorsítótárból.