ByBence Academy / Teljesítmény
Ne pontszámot optimalizálj. Felhasználói élményt.
A teljesítmény nem egy Lighthouse screenshot. A cél az, hogy gyors legyen a legfontosabb tartalom, reagáljon az interakció, stabil maradjon a layout, és valódi felhasználóknál is jó legyen az élmény.
9 tananyag
2 témakör
Vizuális és interaktív példákkal
01
Mérés és Core Web Vitals
Field vs lab, majd a három aktuális Core Web Vital külön-külön.
Weboldal-gyorsítás alapjai
Weboldal gyorsítás rendszerszemlélettel: field vs lab adatok, network, server, rendering és JavaScript diagnosztika a vak optimalizálás helyett.
7–10 perc
LCP – Largest Contentful Paint
LCP érthetően: mit mér a Largest Contentful Paint, mi számíthat LCP elemnek, és hogyan bontsd TTFB, resource delay, load time és render delay részekre?
7–10 perc
INP – Interaction to Next Paint
INP érthetően: hogyan méri az Interaction to Next Paint a felhasználói interakciók válaszkészségét, és miért okoz gondot a hosszú main-thread task?
7–10 perc
CLS – Cumulative Layout Shift
CLS érthetően: mi számít váratlan layout shiftnek, hogyan okozhatja kép, font vagy dinamikus tartalom, és hogyan stabilizáld a felületet?
7–10 perc
TTFB – Time to First Byte
TTFB jelentése és javítása: DNS, kapcsolat, TLS, szervermunka, cache és miért diagnosztikai mutató, nem a három aktuális Core Web Vital egyike.
7–10 perc
02
Erőforrás-optimalizálás
Képek, fontok és JavaScript: a leggyakoribb valódi költségek.
Képoptimalizálás weboldalon
Webes képoptimalizálás: responsive images, srcset/sizes, AVIF/WebP, width/height, lazy loading és LCP-prioritás.
7–10 perc
Webfont-optimalizálás
Webfont performance: preload, subset, font-display, fallback metricák és hogyan csökkentsd a késői szövegcsere és layout shift kockázatát.
7–10 perc
JavaScript performance
JavaScript teljesítmény: bundle méret, parse/compile, long task, code splitting, hydration és miért számít a kevesebb kliensmunka az INP-nél.
7–10 perc
Cache és CDN teljesítményhez
Hogyan csökkenti a cache és CDN a hálózati és szerveridőt, milyen asseteket érdemes hosszan cache-elni, és hol veszélyes a rossz cache key?
7–10 perc
Kapcsolódó ByBence témák
Ugyanannak a rendszernek más rétegei.
A webes fogalmak egymásra épülnek. A kapcsolódó Academy-oldalakon ugyanazt a problémát más nézőpontból tudod tovább bontani.