Core/Dash -ulottuvuus: Load State (INP)

Ulottuvuus: Load State INP (inpls)

Load State (INP) -ulottuvuus tallentaa dokumentin valmiustilan täsmälleen sillä hetkellä, kun käyttäjän vuorovaikutus siepattiin. Jokainen INP-tapahtuma Chrome User Experience Report -raportissa sisältää lataustilatunnisteen: joko loading, dom-interactive, dom-content-loaded tai complete. CoreDash tuo tuon tunnisteen esiin suodatettavana ja ryhmiteltävänä ulottuvuutena, jotta voit vastata kysymykseen, johon pelkät raa'at INP-pisteet eivät pysty: missä sivun elinkaaren vaiheessa pahin vuorovaikutus tapahtui?

Tämä kysymys on jakolinja kahden täysin erilaisen teknisen korjauksen välillä. loading-tilaan keskittyvä INP-ongelma vaatii JavaScriptin viivästyttämisstrategiaa. complete-tilaan keskittyvä INP-ongelma edellyttää tapahtumankäsittelijöiden työn karsimista, frameworkin aiheuttaman kuorman vähentämistä tai pitkien tehtävien pilkkomista ajonaikaisessa koodissasi. Lataustilan mukainen ryhmittely antaa sinulle tämän jaon ilman manuaalista instrumentointia.

CoreDash-datassa valvottujen sivustojen yli INP-vuorovaikutusten jakauma lataustilan mukaan on karkeasti: loading 15 %, dom-interactive 20 %, dom-content-loaded 25 %, complete 40 %. Suurin osa vuorovaikutuksista tapahtuu sivun ollessa täysin latautunut, mutta huonoimmat INP-tulokset keskittyvät ylivoimaisesti varhaisiin vaiheisiin.

Kuvakaappaus

Miksi Load State on tärkeä INP:lle

Interaction to Next Paint -mittari mittaa käyttäjän vuorovaikutuksen kokonaisviivettä: syöttöviivettä (input delay), tapahtumankäsittelijän suoritusaikaa ja esitysviivettä seuraavaan piirrettyyn kehykseen. Näistä kolmesta komponentista syöttöviive on se, jota säätelee suorimmin se, mitä selain tekee juuri sillä hetkellä, kun käyttäjä napsauttaa tai napauttaa.

Sivun latauksen alkuvaiheessa pääsäikeessä on maksimiruuhka. Selain jäsentää HTML:ää, suorittaa synkronisia komentosarjoja, rakentaa CSSOM:ää, ajaa jäsennystä estäviä resursseja ja laukaisee renderöintisyklejä toisensa perään. Jokainen pääsäikeen pitkä tehtävä on ikkuna, jonka aikana käyttäjän vuorovaikutus joutuu jonoon ja odottaa. Tämä odotus on syöttöviivettä, ja se on hallitseva huonon INP:n aiheuttaja sivun latauksen aikana.

Vuorovaikutukset, jotka saapuvat sen jälkeen, kun document.readyState saavuttaa tilan complete, kohtaavat hiljaisemman pääsäikeen. Selain on saanut latauksen valmiiksi. Jos INP on edelleen huono tässä vaiheessa, syynä ei ole latausvaiheen ruuhka. Kyse on JavaScriptistä, jota sivusi suorittaa vastauksena käyttäjän toimintoihin: paisuneet tapahtumankäsittelijät, frameworkien uudelleenrenderöintisyklit, komentosarjojen laukaisema asettelun sählääminen tai optimoimaton kolmannen osapuolen koodi, joka suoritetaan synkronisesti vuorovaikutuksen aikana.

Load state on ylivoimaisesti nopein suodatin näiden kahden juurisyyn erottamiseen toisistaan.

Lataustilat

loading

Sivu ei ole vielä saanut HTML-dokumentin jäsentämistä valmiiksi. Pääsäie suorittaa synkronisia komentosarjoja, hakee jäsennystä estäviä resursseja ja rakentaa alustavaa DOM:ia. Tämä on vihamielisin ympäristö käyttäjän vuorovaikutukselle. Syöttöviive on korkeimmillaan, koska mikä tahansa pitkä tehtävä estää suoraan selainta käsittelemästä napsautusta tai napautusta. Tämän ikkunan aikana vuorovaikutuksessa olevat käyttäjät ovat tyypillisesti kaikkein kärsimättömimpiä vierailijoita tai niitä, joilla on nopea yhteys ja jotka saavuttavat näkyvän sisällön ennen kuin sivu on täysin latautunut. Heidän INP-tuloksensa ovat huonoimpia, joita tulet keräämään. Jos merkittävä osa huonoista INP-tapahtumistasi sisältää loading-tilan, siirrä ei-kriittiset komentosarjat defer- tai async-tilaan ja eliminoi jäsennystä estävät resurssit näkyvältä alueelta.

dom-interactive

document.readyState saavuttaa tilan interactive, kun HTML on täysin jäsennelty ja DOM rakennettu, mutta alaresurssit, kuten kuvat, tyylitiedostot ja viivästetyt komentosarjat latautuvat yhä. Viivästettyjen komentosarjojen suorittaminen alkaa tässä vaiheessa, mikä tarkoittaa, että pääsäie voi olla edelleen raskaasti kuormitettu. Frameworkien hydraatio alkaa usein tässä. Tämä on vaarallinen ikkuna, koska sivu näyttää käyttäjän silmissä valmiilta, mutta pääsäie on edelleen varattu. Syöttöviive pysyy koholla. Jos huono INP keskittyy tähän, korjaus on sama kuin loading-tilassa: vähennä DOM:in jäsennyksen valmistuttua välittömästi suoritettavan synkronisen työn määrää.

dom-content-loaded

DOMContentLoaded-tapahtuma on laukaistu. DOM on valmis ja viivästetyt komentosarjat on suoritettu. Useimmat JavaScript-frameworkit ovat tässä vaiheessa suorittaneet alkuperäisen hydraatiovaiheensa. Pääsäikeen työkuorma laskee, ja vuorovaikutukset alkavat saada nopeampia vasteita. INP-pisteet tässä tilassa ovat tyypillisesti parempia kuin kahdessa aiemmassa tilassa, mutta edelleen koholla verrattuna complete-tilaan. Jos näet täällä huonojen vuorovaikutusten keskittymän, tutki, mitä framework- tai sovelluskomentosarjasi tekevät DOMContentLoaded-käsittelijöissä ja voidaanko hydraatiotyö paloitella tai soveltaa yield-menetelmää syötteiden käsittelyn mahdollistamiseksi tehtävien välillä.

complete

document.readyState saavuttaa tilan complete, kun kaikki resurssit kuvat, fontit ja kolmannen osapuolen iframe-kehykset mukaan lukien ovat latautuneet. Tämä on vakaa tila, jossa sivu toimii loppuistunnon ajan. Huono INP tässä tilassa on puhtaasti ajonaikainen ongelma. Sivu on latautunut valmiiksi. Jos pääsäie estää yhä vuorovaikutuksia, syy on JavaScriptin suorituksessa vuorovaikutuksen aikana: tapahtumankäsittelijät tekevät liikaa synkronista työtä, framework-päivitykset laukaisevat raskaita asettelun uudelleenlaskentoja tai kolmannen osapuolen komentosarjat ajavat jatkuvasti pitkiä tehtäviä. Korjauksessa ei ole kyse viivästyttämisestä. Kyse on sen kustannusten vähentämisestä, mitä tapahtuu silloin, kun käyttäjä todella napsauttaa.

Vianmäärityksen työnkulku

Vaihe 1: Suodata lataustilan mukaan CoreDashissa. Avaa INP-erittelytaulukko ja ryhmittele Load State -ulottuvuuden mukaan. Tunnista, missä tilassa on suurin osuus huonoista (yli 200 ms) vuorovaikutuksista. Tämä kertoo sinulle välittömästi, oletko tekemisissä latausongelman vai ajonaikaisen ongelman kanssa.

Vaihe 2: Ristiinvertailu URL-osoitteen ja laitteen kanssa. Yhdistä Load State -ulottuvuus URL-ulottuvuuteen löytääksesi, mitkä tietyt sivut tuottavat huonoja vuorovaikutuksia varhaisissa lataustiloissa. Mobiililaitteet kärsivät suhteettoman paljon latauksen aikana, koska hitaammat suorittimet pidentävät jokaista pitkää tehtävää.

Vaihe 3: Yhdistä korjaus tilaan. Kun kyseessä on loading tai dom-interactive, auditoi komentosarjojesi latausstrategia käyttämällä Optimize INP -opasta. Siirrä komentosarjat defer-tilaan, eliminoi renderöintiä estävät resurssit ja käytä scheduler.yield()-metodia pitkien alustustehtävien pilkkomiseen. Kun kyseessä on complete, profiloi tapahtumankäsittelijäsi Chrome DevToolsissa ja vähennä synkronista työtä, jonka ne laukaisevat vuorovaikutusta kohti.

Tekninen nyrkkisääntö

Jos yli 30 % huonoista INP-vuorovaikutuksistasi on merkitty tilalla loading tai dom-interactive, INP-ongelmasi on sivun latausongelma ja JavaScriptin viivästyttäminen tuo suurimman parannuksen. Jos yli 60 % huonoista vuorovaikutuksista on merkitty tilalla complete, INP-ongelmasi on ajonaikainen ongelma, ja sinun on optimoitava tapahtumankäsittelijöiden kustannuksia, ei komentosarjojen latausjärjestystä. Load State (INP) tekee tämän päätelmän yhdessä taulukkonäkymässä, ilman laboratoriotestejä tai mukautettua instrumentointia.