Egyszer gyorssá tenni egy weboldalt könnyű. A nehéz rész az, hogy gyors is maradjon, miközben folyamatosan új funkciók kerülnek bele: minden új komponens, betűtípus vagy könyvtár kicsit nehezebbé teszi az oldalt, és senki sem veszi észre, amíg az oldal lassúnak nem érződik. Ezért a sebességet már nem egyszeri auditként kezeljük, hanem olyan tesztté tettük, amelyen minden változtatásnak át kell mennie.
Honnan indultunk
Amikor először mértük komolyan ezt az oldalt, az elrendezés betöltés közben ugrált (a Cumulative Layout Shift 0,2 körül volt), a fő tartalom pedig 4–6 másodperc alatt jelent meg lassított mobilkapcsolaton. A fő stíluslap tömörítve 41 KB-ot nyomott, főleg azért, mert az adminfelületnek szánt komponensek és validációs kód a látogatókhoz is eljutottak.
Mit változtattunk
- A látogatók csak a látogatói kódot kapják. Az adminfelület UI-könyvtára és az űrlapvalidációs könyvtár már nem jut el a nyilvános oldalra. Egy teszt bejárja az oldal importjait, és elbukik, ha bármelyik visszacsúszik.
- CSS csak ahhoz, ami az oldalon van. A fő stíluslap 296 KB-ról 98 KB-ra csökkent, tömörítve pedig 16 KB-ra.
- Betűtípusok, amelyek nem tolják el az elrendezést. A kulcsfontosságú betűtípusokat előre betöltjük, és az oldal már nem tölt le előre olyan kódot, amelyre talán sosem lesz szükség.
A teszt, amely így is tartja
Minden pull requestnél a CI lefordítja az oldalt, úgy szolgálja ki, ahogy az éles környezet – HTTP/2, TLS, tömörítés –, és négy kulcsoldalon háromszor futtatja a Lighthouse-t, a mediánt véve. A keret: minden pontszám legalább 95, a legnagyobb tartalom 2 másodpercen belül látható, az elrendezés eltolódása 0,1 alatt, a fő szál blokkolása 200 ms alatt. Ha egy változtatás túllépi a keretet, a CI pirosra vált, és a változtatás nem kerül merge-re. Mellette akadálymentességi ellenőrzés is fut, amely jelenleg nem talál WCAG AA-szabálysértést az általa vizsgált oldalakon.
Az eredmény
A CI-ban az oldalak mind a négy Lighthouse-kategóriában 100 pontot érnek el, a fő tartalom egy másodpercen belül látható. Az élő oldalon a kezdőlap 100 pontos, a fő tartalom körülbelül 1,2 másodperc alatt jelenik meg, egy termékoldal pedig 98 pontot ér el.
Őszintén megmondjuk azt is, mi nem tökéletes még: a japán és más CJK-nyelvű oldalak lassabbak, mert a betűtípusaik jóval nagyobbak. Erre külön feladat van.
Miért fontos ez Önnek
Egy lassú oldal már azelőtt elveszíti a látogatókat, hogy egy szót is elolvasnának, és a keresőmotorok is észreveszik. Ha velünk készít landing oldalt vagy webáruházat, ez a keret is jár hozzá – a munkamódszerünk része, nem extra.