Core Web Vitals naujoji metrika Interaction to next paint INP

Nauja Core Web Vitals metrika:

Interaction to next Paint (INP) ir jos poveikis organinės paieškos reitingams

Šiame tinklaščio įraše apžvelgsime puslapio greičio matavimo pokyčius. Kaip naujoji Core Web Vitals metrika įtakos jūsų svetainę. Kokių veiksmų reikia imtis, kad išlaikyti jūsų svetainę greitą ir patogia vartotojui.

Tobulėjant skaitmeniniam pasauliui, didėja ir poreikis, kad svetainės užtikrintų vientisą naudotojo patirtį. Sąveika iki kito vaizdo (Interaction to Next Paint - INP) - tai nauja metrika, kurią Google naudoja norėdama įvertinti, kaip greitai jūsų svetainė reaguoja į naudotojų sąveikas. Šis rodiklis taps vienas iš Core Web Vitals metrikų nuo 2024 m. kovo mėn. pakeis pirmąjį įvesties uždelsimą (First Input Delay - FID).

Kas yra sąveika iki kito vaizdo (INP)?

Sąveika iki kito vaizdo (toliau INP) - tai svetainės našumo rodiklis, kuriuo matuojamas naudotojo sąsajos jautrumas, t. y. kaip greitai svetainė reaguoja į naudotojo sąveikas, pavyzdžiui, paspaudimus ar klavišų paspaudimus.

Tiksliau, matuojama, kiek laiko praeina nuo naudotojo sąveikos, pavyzdžiui, spustelėjimo ar klavišo paspaudimo, iki kito vizualinio puslapio atnaujinimo.

Skirtingai nuo savo pirmtako FID, kuris vertino tik pirmąją sąveiką, INP vertina reakciją per visą naudotojo apsilankymo laiką, todėl pateikia išsamesnį naudotojo patirties vaizdą. 

INP pagerina pirmojo įvesties uždelsimo funkciją dviem būdais:

  1. INP žiūri į visas puslapio sąveikas, o ne tik į pirmąją.
  2. INP matuoja visą sąveikos trukmę, o ne tik apdorojimo uždelsimą

Kaip matuojamas INP?

INP matuoja, kiek laiko praeina nuo naudotojo įvesties, pavyzdžiui, paspaudimų ir klavišų paspaudimų, iki kito vizualinio puslapio turinio atnaujinimo. Šį uždelsimą sudeda trys komponentai:

  1. Įvesties uždelsimas: laukimas, kol puslapyje bus atliktos foninės užduotys, neleidžiančios paleisti įvykių tvarkykles.
  2. Apdorojimo laikas: įvykių tvarkyklių paleidimas JavaScript.
  3. Pristatymo vėlavimas: kitų į eilę įrašytų sąveikų tvarkymas, puslapio išdėstymo perskaičiavimas ir puslapio turinio atvaizdavimas.

Šioje diagramoje pateikiamas įvairios procesoriaus užduotys ir kada matuojamas INP veikimo laikas . Sąveika su kitu puslapio vizualiniu atnaujinimu apima visą laiką nuo pelės, prisilietimo ar klaviatūros įvesties iki to momento, kai naršyklė atvaizduoja kitą vizualinį turinį.

Interaction to next paint INP matavimo diagrama
INP įvertinimo rėžiai

INP įvertinimo rėžiai

Google suskirstė INP matavimą į tris rėžius:

  • Geras: INP yra 200 milisekundžių arba trumpesnis.
  • Reikia tobulinti: Nuo 200 iki 500 milisekundžių.
  • Blogai: daugiau kaip 500 milisekundžių.

Mažesnė INP vertė reiškia, kad svetainė reaguoja operatyviau, o tai labai svarbu siekiant išlaikyti naudotojų įsitraukimą ir pasitenkinimą.

Kaip optimizuoti svetainę geram INP įvertinimui?

Geriausias būdas sumažinti INP yra sumažinti jūsų puslapio užduočių apkrovą procesoriui. Taip pat galite paleisti daugiau kodo asinchroniškai, kad naudotojas gautų nedelsiant atnaujintą naudotojo sąsają, net jei kai kurie darbai vis dar vyksta.

Optimizuojant INP reikia profiliuoti savo svetainės kodą ir peržiūrėti trečiųjų šalių skriptus, dėl kurių svetainė gali būti lėčiau užkraunama.

DevTools tai tiesiogiai į Google Chrome naršyklę įdiegtas programuotojams skirtas įrankių rinkinys yra puikus įrankis, padedantis išsiaiškinti, kokie procesai ir užduotys vykdomos kraunantis puslapiui ir kaip jas optimizuoti.

Nustatykite dažniausiai pasitaikančias naudotojų sąveikas puslapyje ir sukurkite puslapio procesoriaus veiklas, vykstančias sąveikos metu, įrašą. Tada galėsite ištirti sąveikas, kurios labiausiai vėluoja.

Chrome DevTools performance tab

Pagrindinės užduotys, kurias reikia patikrinti DevTools

  1. Ilgos užduotys: Ieškokite užduočių, kurios trunka ilgiau nei 50 milisekundžių. Šios užduotys gali užblokuoti pagrindinį srautą ir dėl to gali vėluoti naudotojų sąveikos apdorojimas.
  2. JavaScript vykdymas: Nustatykite ir optimizuokite sudėtingą JavaScript vykdymą. Tai apima scenarijaus vertinimo, kompiliavimo ir vykdymo laiko įvertinimą.
  3. Atvaizdavimo našumas: Patikrinkite, ar nėra per daug išdėstymo perpildymų ir perpiešimų. Jie dažnai atsiranda dėl DOM manipuliacijų ir gali sulėtinti puslapį.
  4. Pagrindinės gijos veikla: Išanalizuokite pagrindinę giją, ar joje nėra veiklų, kurios gali blokuoti arba lėtinti sąveikos parengtį. Tai apima scenarijaus įkėlimą, analizę ir vykdymą.
  5. Kadrų atvaizdavimas: Užtikrinkite, kad kadrai būtų atvaizduojami nuosekliai geru greičiu (geriausia 60 kadrų per sekundę). Atkreipkite dėmesį į kadrų kritimą, kuris gali reikšti, kad naudotojo patirtis trūkinėja.
  6. Tinklo veikla: Peržiūrėkite tinklo užklausų laiką ir dydį. Dideli failai arba lėtas serverio atsakas gali uždelsti svarbiausių išteklių įkėlimą.
  7. Išteklių įkėlimas: Atkreipkite dėmesį į tai, kaip kraunami ištekliai ir nustatomi jų prioritetai. Nekritiniams ištekliams naudokite lėtą krovimą, o kritiniams ištekliams teikite pirmenybę.
  8. Atminties naudojimas: Atkreipkite dėmesį į atminties nutekėjimą arba pernelyg didelį atminties naudojimą, nes tai gali sulėtinti naršyklės veikimą ir paveikti reakciją.
  9. Įvykių tvarkymas: Patikrinkite įvykių tvarkymą, ypač naudotojo sąveikos atveju. Optimizuokite tokių įvykių, kaip paspaudimai, bakstelėjimai ir klavišų paspaudimai, tvarkymą.
  10. Optimizuokite CSS ir HTML: Naudokite CSS content-visibility ypatybe ir supaprastinkite HTML struktūras, kad sutrumpintumėte atvaizdavimo laiką ir sutrumpintumėte pakartotinius srautus.
  11. Naršyklės spartinančiosios atmintinės naudojimas: užtikrinkite veiksmingą naršyklės spartinančiosios atmintinės naudojimą, kad sutrumpintumėte įkėlimo laiką grįžtantiems lankytojams.

Sąveika iki kito vaizdo (INP) yra daugiau nei tik rodiklis - tai atspindi jūsų svetainės gebėjimą efektyviai įtraukti naudotojus. Artėjant jos įdiegimui į Google Core Web Vitals rodiklius, INP supratimas ir optimizavimas tampa ne tik naudingas, bet ir būtinas. Daugiausia dėmesio skirdami techniniam optimizavimui, kuris pagerina reagavimą, galite užtikrinti, kad jūsų svetainė ne tik tenkintų naudotojų poreikius, bet ir būtų palankiai vertinama paieškos rezultatuose, atverdama kelią sėkmei internete.

Data: 2024-01-12

Susisiekite