Uusi Prerender Until Script -spekulaatiosääntö

Origin Trial -tila: Tämä ominaisuus on tällä hetkellä Origin Trial. Sen käyttöönottamiseksi sinun on rekisteröitävä Origin Trial -tunniste tai otettava se käyttöön paikallisesti chrome://flags-asetuksista. Kokeellisesta luonteestaan huolimatta insinööriyhteisön varhaiset palautteet osoittavat poikkeuksellista vakautta ja  suorituskyvyn parannuksia.

Prerender Until Script: Uusi tila spekulatiiviselle lataamiselle

Latenssi on pullonkaula. Olen sanonut tämän vuosia, ja se on yhä suurin yksittäinen ongelma web-suorituskyvyssä. Riippumatta siitä, kuinka paljon optimoimme Critical Rendering Pathia tai leikkaamme kilotavuja paketeistamme, olemme lopulta sidottuja fysiikan lakeihin ja verkon edestakaisen matkan aikaan (RTT).

Pitkään olemme yrittäneet kiertää näitä lakeja spekulatiivisen lataamisen avulla: arvaamalla, minne käyttäjä siirtyy seuraavaksi, ja lataamalla sen etukäteen. Tähän asti meillä on ollut kaksi päätyökalua, eikä kumpikaan ollut täydellinen:

• prefetch: Turvallinen ja kevyt, mutta se hakee vain HTML:n. Selaimen on silti jäsennettävä, rakennettava DOM ja löydettävä aliresurssit (CSS, kuvat) käyttäjän klikkauksen jälkeen. Se ratkaisee verkon odotuksen, mutta ei renderöintityötä.
• prerender: Ydinvaihtoehto. Se lataa kaiken, suorittaa JavaScriptin ja renderöi sivun piilotetulla taustalehdellä. Se on välitön, mutta kallis. Se syö kaistanleveyttä, kuluttaa muistia ja mikä pahinta, se laukaisee "sivuvaikutuksia" – lähettää analytiikkapikseleitä ja suorittaa koodia sivuille, joita käyttäjä ei ehkä koskaan edes näe.

Tarvitsimme selvästi keskitien. Tarvitsimme prerenderin visuaalisen valmiuden ilman sovelluslogiikan suorittamisen laskennallista kustannusta ja riskiä.

prerender_until_script.

prerender_until_script-säännön nerokkuus piilee siinä, miten se erottaa jäsentämisen suorittamisesta.Kun käytät tätä tiettyä spekulaatiosääntöä, ohjaat selainta:

• Hakemaan dokumentin (kuten prefetch).
• Jäsentämään HTML-virran ja rakentamaan DOM:n.
• Suorittamaan Preload Scannerin. Tämä on kriittinen osa. Selain löytää ja lataa aliresurssit, kuten korkean prioriteetin CSS:n ja LCP-kuvan.

Kuitenkin sillä hetkellä, kun jäsennin kohtaa JavaScript-suorituspisteen, kaksi asiaa voi tapahtua:

• Synkroniset skriptit: Jäsennin pysähtyy välittömästi.
• Async/Defer-skriptit: Ne ladataan ja asetetaan jonoon, mutta niitä ei suoriteta.

Selain rakentaa sivun visuaalisen "kuoren": asettelun, typografian, kuvat – mutta jättää sovelluslogiikan jäädytetyksi. Sivu istuu muistissa, kemiallisesti vakaana, odottaen käyttäjän klikkausta.

Kun klikkaus tapahtuu, sivu vaihdetaan sisään välittömästi ja "pysäytetty" tila poistetaan. JavaScript suoritetaan, tapahtumankäsittelijät kiinnittyvät ja analytiikkasi laukeaa täsmälleen oikeaan aikaan.

Toteutus

Toteutamme tämän Speculation Rules API:n avulla. Koska prerender_until_script on kokeellinen ominaisuus (tulossa Chrome 144:ään), meidän on varmistettava taaksepäin yhteensopivuus.

Selaimet, jotka eivät tunnista prerender_until_script-avainta, ohittavat sen. Siksi vastuullinen toteutus määrittelee prefetch-varatoiminnon samalle URL-joukolle. Chrome poistaa automaattisesti näiden sääntöjen kaksoiskappaleet ja soveltaa tehokkainta saatavilla olevaa toimintoa.

Tässä on JSON-rakenne tuotantovalmiille toteutukselle::

<script type="speculationrules">
{
  "prerender_until_script": [
    {
      "source": "document",
      "where": {
        "and": [
          { "href_matches": "/*" },
          { "not": { "href_matches": "/logout" } },
          { "not": { "href_matches": "/cart" } }
        ]
      },
      "eagerness": "moderate"
    }
  ]
}
</script>

Vinkki: jos haluat nopeasti luoda oman mukautetun joukon spekulaatiosääntöjä, voit käyttää spekulaatiosääntöjen generaattoria

Huomioitavaa

Eagerness: Suosittelen lähes yksinomaan moderate-arvoa. Tämä käynnistää spekulaation hover-tapahtumassa (tarkemmin, kun osoitin viipyy 200 ms). immediate on liian aggressiivinen useimmille toteutuksille ja riskeeraa käyttäjän kaistanleveyden tuhlaamisen mobiiliyhteyksissä.

Poissulkemiset: Tässä on oltava kurinalainen. Älä koskaan spekuloi tilaa muuttavilla URL-osoitteilla, kuten /logout tai /add-to-cart. Vaikka prerender_until_script suojaa skriptien suorittamiselta, hyvä arkkitehtuuri edellyttää, ettemme hae näitä päätepisteitä tarpeettomasti.

Heikkous (Parser Blocking): Jäsennin pysähtyy välittömästi kohdatessaan synkronisen <script>-tagin. Tämä mitätöi parannukset, kuten <script>loadWhileIdle(chat.js)</script>, jos ne esiintyvät DOM:ssa aikaisin. Sinun saattaa olla tarpeen refaktoroida olemassa oleva koodi siirtääksesi nämä skriptit sivun alaosaan.

Inline-käsittelijät: Huomaa, että prerender_until_script keskeyttää vain <script>-elementit. Muiden elementtien inline-tapahtumankäsittelijät (esim. <img onload="track()">) suoritetaan silti, jos jäsennin saavuttaa ne ennen estävää skriptiä. Varmista, ettei analytiikkapikseleitäsi ja seurantalogiikkaasi laukaista näiden inline-käsittelijöiden kautta spekulaatiovaiheen aikana.