Trīs gadi, trīs metriku pārkārtošanas
- gadā saruna bija par FID. 2024. gadā tā kļuva par INP. Līdz 2026. gadam katrai komandai bija jāapgūst vismaz divreiz, ko nozīmē "ātri". Labās ziņas: pamata darbs ir tik tikko mainījies. Komandas, kas koncentrējās uz pamatiem — attēlu svaru, JavaScript disciplīnu, paredzamu atveidošanu — palika zaļajā joslā cauri katrai pārkārtošanai. Komandas, kas dzina mēneša metriku, joprojām to dzen.
Šis raksts ir tas, ko mēs patiesi darām katrā projektā, neatkarīgi no tā, kuru burtu Google reklamēs nākamo.
INP mainīja sarunu
First Input Delay aizstāšana ar Interaction to Next Paint pārvietoja uzmanību no vienas pirmās mijiedarbības uz katru mijiedarbību lapā. Vietnes, kas guva labus rezultātus nejauši, tagad ar nolūku ir labi jāgūst. Tas ir veselīgs pavērsiens — tas atalgo saskarnes, kas patiesi jūtas atsaucīgas, nevis tās, kas tikai ātri ielādējās.
Trīs paradumi šeit dod reālu atšķirību:
- Saglabājiet galveno pavedienu īsu. Garie uzdevumi ir vienīgais lielākais sliktā INP iemesls. Sadaliet darbu mazākās daļās. Plānojiet nesteidzamus atjauninājumus ar
requestIdleCallbackvaischeduler.postTask. - Atlikt hidratāciju, kur varat. Lētākā INP uzvara ir komponenta nehidratēšana, ar kuru lietotājs nav mijiedarbojies. RSC un daļējās hidratācijas modeļi palīdz; pārhidratētas SPA kaitē.
- Skatieties trešās puses. Analītika, tērzēšanas logrīki un reklāmas skripti dominē INP lielākajā daļā vietņu. Auditējiet tos reizi ceturksnī.
INP izgāšanās gandrīz vienmēr ir atklājama Performance pēdā. Ja jūsu komanda pēdējā ceturksnī nav atvērusi DevTools veiktspējas paneli, tas ir pirmais projekts, nevis pēdējais.
LCP joprojām ir jūsu varoņmetrika
Largest Contentful Paint korelē ar konversiju labāk nekā jebkurš cits signāls, ko mēs izsekojam. Ja jūsu varoņattēls mobilajā ierīcē ir vairāk nekā 200 KB, jūs par to maksājat ieņēmumos, nevis tikai Lighthouse punktos.
Uzticamas uzvaras, atmaksas kārtībā:
- Pareizi izmēriet varoņattēlu. Saspiediet, tad konvertējiet uz AVIF vai WebP, tad piegādājiet atbildīgus variantus. Lielākais ieguvums gandrīz vienmēr ir šeit.
- Iepriekš ielādējiet LCP resursu.
<link rel="preload">patiesajam līdzeklim, ko pārlūks izmantos LCP zīmēšanai. Apstājiet atklāšanas spēli. - Sagrieziet kritisko CSS. Inline tikai to, kas vajadzīgs LCP elementam. Atlikt pārējo.
- Pārvietojiet LCP elementu agrāk. Dažreiz ātrākais labojums ir padarīt lapu strukturāli vienkāršāku, lai pārlūks ātrāk redzētu LCP mērķi.
- Kešējiet, tad kešējiet vēlreiz. CDN ar gudru malas loģiku pārspēj lielāko daļu servera puses optimizācijas, divreiz.
Katrs no tiem ir mazs. Kopā tie ir atšķirība starp 3,5 sekunžu LCP un 1,5 sekunžu LCP. Lielas trafika lapā šis plaisums ir miljoni dolāru gadā.
CLS ir nepiedodošais
Cumulative Layout Shift izskatās viegls, līdz jūs piegādājat ražošanā. Tad līpošs sīkdatņu reklāmkarogs, dinamisks reklāmas slots vai vēlīgi ielādējošs fonts vienā naktī jūs izsit no zaļās joslas. Trīs noteikumi, kas iztur:
- Katram attēlam ir skaidri norādīts
widthunheight. Bez izņēmumiem. - Katrs fonts tiek ielādēts ar
font-display: optionalvaiswap, un atkāpšanās ir izmērīta atbilstoši. Izmantojietsize-adjustdeskriptorus mūsdienu pārlūkos. - Katram dinamiskajam blokam (reklāmas, reklāmkarogi, ieteikumi) ir rezervēts slots. Slots var būt tukšs; tas nevar trūkt.
CLS ir viens no vieglākajiem metrikiem, ko izstrādē panākt, un viens no vieglākajiem zaudēt ražošanā. Piegādājiet sintētisko monitoru, kas izgāž būvi, ja CLS regresē pāri jūsu budžetam.
Ko mēs mērām palaišanas dienā
Laboratorijas skaitļi melo. Lauka skaitļi saka patiesību. Palaišanas dienā mēs vēlamies redzēt:
- Lauka LCP un INP no reālas ierīces, nevis laboratorijas vidējais.
-
- procentile, nevis mediāna — tur klienti aiziet.
- Garie uzdevumi pirmā mijiedarbības loga laikā.
- Total Blocking Time ritināšanas laikā, nevis tikai ielādē.
- Iknedēļas tendence, nevis viens skaitlis.
Ja jums nav RUM ieslēgts, instalējiet to pirms nākamās izvietošanas. Bez tā jūs noregulējat akli. Web-Vitals.js, pamata analītikas galapunkts un panelis aizņem dienu, lai iestatītu. Tas ir augstākā sviras stunda, ko jūsu inženierijas komanda pavadīs šajā ceturksnī.
Garlaicīgās uzvaras joprojām uzvar
Lielākā daļa veiktspējas budžetu tiek izšķiesti uz viena attēla, viena skripta un viena fonta.
Saspiediet attēlu. Atlikt skriptu. Apakšsadalīt fontu. Gandrīz katra "vietne ir lēna" saruna beidzas ar šo kontrolsarakstu. Padariet to par noklusējumu būvē, nevis lietu, ko komandai jāatceras.
Dziļāka kontrolsaraksta versija:
| Slānis | Noklusējums | Ignorēšanas cena |
|---|---|---|
| Attēli | Saspiesti, AVIF, atbildīgi | 30-60% no kopējā lapas svara |
| JavaScript | Koda sadalījums, atlikts | INP un TBT pīķi |
| Fonti | Apakšsadalīti, preload, swap | CLS un "neredzams teksts" |
| Trešās puses | Auditētas, async, sandbox | Nāve no tūkstoš 200 ms griezuma |
| CSS | Kritiskais inline, pārējais async | LCP aizkavēšanās pirmajā zīmēšanā |
Šajā tabulā nav maģijas. Ir tikai darbs, ko lielākā daļa komandu turpina plānot.
Ko mēs neoptimizējam
Dažas lietas izskatās kā veiktspējas uzvaras un nav. Mēs nedzeniem:
- Lighthouse rezultātus. 100 laboratorijā un 60 laukā ir Lighthouse darbības iezīme, nevis reāla klientu pieredze. Optimizējiet laukam.
- Vienas metrikas uzlabojumus, kas kaitē citiem. LCP samazināšana, slinki ielādējot varoņattēlu, nav uzvara. Klients redz lēnāku zīmējumu un trūcīgu ielādi.
- Pēdējās jūdzes mikrooptimizācijas pirmajā dienā. 5 ms ietaupījums funkcijai, kas darbojas vienreiz, nav vieta, kur budžets pavadīts. Vienmēr profilējiet vispirms.
Uzturēšanas kadence, kas iztur
Veiktspēja nav projekts. Tas ir paradums. Kadenci, ko mēs uzturam lielākajai daļai klientu:
- Katru dienu: RUM paneļi redzami komandas tērzēšanā, regresijas izraisa brīdinājumu.
- Katru nedēļu: 30 minūšu pārskats par augšējām regresijām, kartēts uz nesenajām izvietošanām.
- Katru mēnesi: Pilns audits vienai lapai — lēnākajai vai vērtīgākajai.
- Katru ceturksni: Budžeta pārskats. Jaunas metrikas, jauni ierobežojumi, jaunas trešās puses.
Komandas, kas uztur šo kadenci, paliek zaļajā joslā gandrīz neatkarīgi no tā, cik sarežģīts kļūst produkts. Tās, kas izturas pret veiktspēju kā palaišanas notikumu, klusi noslīdina atpakaļ.
Metrika, kas svarīga
Ātrākā vietne nav mērķis. Vietne, kas konvertē klientus, neliekot viņiem gaidīt — tas ir mērķis. Core Web Vitals ir starpnieks. Ieņēmumi ir pamata patiesība. Veidojiet paradumu izmērīt abus, un metriku pārkārtošanas pārstāj būt svarīgas.
Līdzīgi raksti
