Webes teljesítmény
Core Web Vitals: az élményt mérd, ne csak a pontszámot
Az LCP, INP és CLS a lapélmény eltérő részeit írja le. Körültekintően használva megtalálható velük a lassú betöltés, késői interakció és instabil elrendezés. Egyetlen trófeapontszámként viszont rossz irányba vihetik a munkát.
A három felhasználóközpontú jel
A Largest Contentful Paint a fő látható tartalom megjelenését méri. Az Interaction to Next Paint a látogatás interakcióinak válaszkészségét. A Cumulative Layout Shift a váratlan vizuális elmozdulást. A valós értékelés a 75. percentilist használja, és elegendő felhasználói adat kell hozzá.
1. Tudd, mit árul el az egyes mutató
Az LCP gyakran szerverválaszra, megjelenítést blokkoló erőforrásokra, képszállításra vagy kliensoldali renderelésre mutat. Az INP a hosszú főszálas munkát és késői vizuális visszajelzést tárja fel. A CLS a fenntartott hely nélküli tartalmat, kései betűváltozást és instabil komponenst mutatja. Egyik sem bizonyítja önmagában az okot.
- A 75. percentilisnél törekedj legfeljebb 2,5 másodperces LCP-re, 200 ezredmásodperces INP-re és 0,1-es CLS-re.
- Fontos sablon, eszköztípus és piac szerint is vizsgálj; a teljes domain átlaga elrejthet egy hibás fizetést vagy érkezőoldalt.
- A küszöbök legyenek élménykorlátok, ne helyettesítsék a konverziót, feladatteljesítést, akadálymentességet vagy minőségi visszajelzést.
2. Más feladatra használd a valós és laboradatot
A valós adat tényleges Chrome-látogatásokból jön, sokféle eszközzel, hálózattal, gyorsítótárral és viselkedéssel. A laboradat ellenőrzött környezetben könnyebben reprodukálható. A Lighthouse Total Blocking Time hasznos laborjel a főszál blokkolására, de nem ugyanaz a mérés, mint a valós INP.
- Valós adatokkal azonosítsd az érintett csoportot, és erősítsd meg, hogy a probléma tényleges és tartós.
- Labortrace-ekkel, kérési vízeséssel, lefedettséggel és teljesítményprofillal különítsd el a tünet mögötti mechanizmust.
- Ismételj, és azonos körülményeket hasonlíts össze; egy futást befolyásol a környezet, a cache, a bővítmény és a háttérterhelés.
3. A szállítási útvonalat javítsd, ne a számot
LCP-nél rövidítsd az első byte idejét, távolítsd el az elkerülhető blokkolást, csak a valóban kritikus erőforrást töltsd elő, és megfelelő méretű modern képet szolgálj ki. INP-nél bontsd fel a hosszú feladatokat, csökkentsd a felesleges JavaScriptet és adj gyors visszajelzést. CLS-nél foglalj helyet, és ne szúrj tartalmat az olvasó fölé.
- Találd meg a tényleges LCP-elemet, és kövesd minden megjelenéséhez szükséges függőségét.
- Profilozz egy valóban lassú interakciót, és csökkentsd a munkát, mielőtt a böngésző kirajzolhatja a következő képkockát.
- Adj kiszámítható helyet képeknek, beágyazásoknak, bannereknek és dinamikus paneleknek mobilállapotban is.
4. Védd meg a teljesítményt a javítás után
A teljesítmény romlik, amikor új szkript, betűtípus, média, kísérlet vagy komponens kerül a kritikus útvonalra. Állíts oldaltípusonként keretet, tesztelj reprezentatív útvonalakat szállításkor, és figyeld a valós trendet. A keresési adat lassan változik, ezért párosítsd gyorsabb technikai és termékjelekkel.
- Rögzíts kiinduló értéket és megjegyzést minden jelentős kiadáshoz, hogy a trendváltozás értelmezhető legyen.
- Figyeld a 75. percentilist és az eloszlást; jó medián mellett is sok látogató kaphat rossz élményt.
- Ellenőrizd újra a hozzájárulással futó külső szkripteket és tag manager változásokat, mert költségük a kiadási ciklustól függetlenül változhat.
Megbízható Core Web Vitals folyamat
- 01 Azonosítsd a valós adat által lefedett oldaltípust, eszközszegmenst, földrajzi területet és időablakot.
- 02 Erősítsd meg, hogy az LCP, INP vagy CLS hibás-e, és a rövid címke mellett az eloszlást is vizsgáld.
- 03 Reprodukálj ellenőrzött laborban, és rögzítsd az LCP-elemet, elrendezésváltást, főszálas feladatot és kérési láncot.
- 04 A legkisebb közös okot változtasd meg, amely javítja az élményt az akadálymentesség és működés károsítása nélkül.
- 05 Ismételj több összehasonlítható laborfutást, és teszteld a teljes utat egy reprezentatív fizikai eszközön.
- 06 Élesítés után figyeld elég ideig a valós adatokat, hibákat, konverziókat és a teljesítménykeretet.
A teljesítmény termékminőség
A legjobb optimalizálás egy fontos útvonalat láthatóan gyorsabbá vagy stabilabbá tesz valódi embereknek. A jobb laborpontszám hasznos bizonyíték, de nem az eredmény. Kapcsold össze a valós és laboradatot, dokumentáld az okot, és védd a javulást a regressziótól.
Elsődleges források
Folytasd egy kapcsolódó útmutatóval
Ezek az ellenőrzések hatnak egymásra. A következő útmutatóval a környező jeleket is vizsgáld meg, ne csak egy címkét vagy pontszámot.