Välittömästi latautuvat sivut Speculation Rules -rajapinnalla
Opi parantamaan Core Web Vitals -tuloksia tekemällä sivuista välittömästi latautuvia uudella Speculation Rules API:lla
Paranna Core Web Vitals -tuloksia välittömästi 'Speculation Rules API:n' avulla
Oletko koskaan miettinyt, miksi jotkin sivut näyttävät latautuvan välittömästi? Se johtuu todennäköisesti siitä, että kyseinen sivu on ottanut käyttöön Speculation Rules -säännöt!
Speculation Rules API parantaa tulevien sivulatausten nopeutta monisivuisissa sovelluksissa (MPA) joko esihakemalla tai jopa esirenderöimällä ne. Kehittäjät voivat määrittää speculation rules -säännöt ehdottamaan selaimelle dokumenttien esihakua tai esirenderöintiä nopeampia (tai välittömiä) sivulatauksia varten. Speculation rules korvaa vanhemmat tekniikat kuten `<link rel="prefetch">` resurssien esihakuun tai vanhentuneen vain Chromelle tarkoitetun ominaisuuden `<link rel="prerender">`.
Speculation rules toimii dokumenttitasolla, mikä tekee siitä sopivan monisivuisille sovelluksille, joissa tapahtuu kokonaisia sivunavigointeja. Yhden sivun sovellukset (SPA), jotka käyttävät pääasiassa API-kutsuja tai osittaisia sisältöpäivityksiä, eivät hyödy yhtä paljon tästä API:sta sisäisissä reittimuutoksissaan. Speculation Rules voi kuitenkin hyödyttää SPA-sovelluksia esirenderöimällä sovelluksen alkutilan aloitussivulta, mikä voi kompensoida alkuperäistä latausaikaa.
Table of Contents!
Speculation rules -pikaopas
Tiedätkö jo mitä speculation rules ovat? Mahtavaa! Tässä on valmiita koodinpätkiä, joilla pääset heti alkuun. Valitse sinulle sopiva pätkä ja sijoita se sivusi <head>-osioon (voit vapaasti vaihtaa preload-arvon prefetch-arvoksi ja/tai muuttaa eagerness-asetusta)!
<!--
WordPress speculation rules by corewebvitals.io
prefetches all internal links
skips links that match wp-login, wp-admin, wp content
skips links that have the nofollow attribute
skips links that have a questy string for example: /search->
<script type="speculationrules">
{
"prefetch": [{
"source": "document",
"where": {
"and": [{ "href_matches": "\/*"},{ "not": { "href_matches": [ "\/wp-login.php", "\/wp-admin\/*", "\/*\\?*", "\/wp-content\/*", ] }
},{ "not": { "selector_matches": "a[rel~=\"nofollow\"]" }
}]
},
"eagerness": "moderate"
}]
}
</script> <!-- Data-preload triggered speculation rules by corewebvitals.io -->
<script type="speculationrules">
{
"prefetch": [{
"source": "document",
"where": {
"selector_matches": "a[data-preload]"
},
"eagerness": "moderate"
}]
}
</script> Vinkki: jos tarvitset nopeasti omia speculation rules -sääntöjä, kokeile speculation rules -generaattoria
Speculation Rules -rajapinnan edut
Parantunut user experience (UX): Ennakoimalla ja esilataaamalla sisältöä Speculation Rules varmistavat lähes välittömät sivulataukset, mikä tekee navigoinnista saumatonta käyttäjille. Tämä vastaa yhden sivun sovellusten suorituskykyä jopa perinteisissä monisivuisissa verkkosivustoissa ilman monimutkaisuutta ja JavaScript-riippuvuutta. Nopeammat latausajat tarkoittavat parempaa selauskokemusta, mikä todennäköisesti lisää käyttäjien sitoutumista ja vähentää välitöntä poistumista.
SEO-edut: Koska parantunut sivunopeus on suora sijoitustekijä ja parempi Time to First Byte johtaa parempaan Largest Contentful Paint -arvoon, speculation rules -sääntöjen käyttöönotto parantaa varmasti Core Web Vitals -tuloksia ja antaa sinulle sivunopeusedun.
Vähentynyt monimutkaisuus: Lähes välittömät sivulataukset olivat aiemmin mahdollisia vain käyttämällä SPA:ta tai kirjoittamalla mukautettua esihakulogiikkaa MPA-sovelluksille.
Monissa käyttötapauksissa SPA:n haittapuoli on alkukäynnistysaika, joka voi olla merkittävä, koska ne nojaavat vahvasti JavaScriptiin, ja lisääntynyt monimutkaisuus verrattuna MPA:han. Speculation rules -säännöillä ei ole näitä ongelmia. Tämä tekee nopeasta latauksesta saavutettavan laajemmalle joukolle verkkosivustoja, erityisesti sisältökeskeisille.
API myös yksinkertaistaa päätöstä siitä, mitkä sivut esirenderöidään, delegoimalla suuren osan logiikasta selaimelle. Tämä on valtava parannus aiempiin menetelmiin, jotka käyttivät JavaScriptiä näiden tarkistusten tekemiseen ja esiladattavien sivujen lisäämiseen. Selaimet voivat natiivisti huomioida käyttäjän kontekstin, kuten mobiililaitteiden vähäisen muistin tai virransäästötilan, päättäessään esirenderöinnistä. Tämä dynaaminen mukautuminen auttaa säästämään käyttäjän resursseja ja varmistaa sujuvamman kokemuksen myös rajoitettujen olosuhteiden alla.
Muut edut: Speculation-Rules HTTP-otsikko mahdollistaa helpomman käyttöönoton sisällönjakeluverkkojen (CDN) kautta, mikä poistaa tarpeen muokata dokumentin sisältöä suoraan. Tarkka hallinta Document Rules -säännöillä mahdollistaa kehittäjien määritellä tarkat ehdot esihaulle tai esirenderöinnille URL-mallien tai CSS-valitsimien perusteella. Tämä vähentää manuaalista URL-määrittelyä ja mahdollistaa koko sivuston kattavat speculation rules -säännöstöt. "Eagerness"-asetus tarjoaa hienojakoisen hallinnan siihen, milloin spekulaatio tapahtuu, tasapainottaen esilatausnopeutta resurssien kulutuksen kanssa. Tämä auttaa vähentämään tarpeetonta esilatausta ja estää resurssien tuhlaamista.
Speculation Rules -mekaniikka
Speculation rules määritellään JSON-rakenteella ja ne voidaan toteuttaa kahdella tavalla:
- Inline-skripti: Sisällytä JSON `<script type="speculationrules">`-tagin sisään joko HTML-pääasiakirjan `<head>`- tai `<body>`-osioon.
- HTTP-otsikko: Toimita säännöt käyttämällä `Speculation-Rules` HTTP-otsikkoa dokumentin vastauksessa. Tämä otsikko osoittaa JSON-tiedostoon, joka sisältää säännöt, mikä helpottaa CDN-käyttöönottoja ilman HTML-sisällön suoraa muokkaamista.
JSON-rakenne käyttää "prefetch"- ja "prerender"-taulukoita sisältämään säännöt kullekin spekulatiiviselle lataustyypille. Jokainen sääntö voi käyttää eri lähteitä: joko URL-listaa tai dokumenttisääntöjä
- urls (URL-lista) Taulukko esihakua tai esirenderöintiä varten.
- where (dokumenttisäännöt) Objekti, joka käyttää ehtoja määrittämään, mitkä sivun linkit tulisi esihakea tai esirenderöidä.
Jokainen sääntö määritellään objektina, joka sisältää ominaisuuksia kuten:
- requires Merkkijonojen taulukko spekulaatiorajoitusten asettamiseksi. Tällä hetkellä ainoa kelvollinen merkkijono on "anonymous-client-ip-when-cross-origin", joka osoittaa, että cross-origin esihaku anonymisoi asiakkaan IP-osoitteen.
- target_hint Merkkijono, joka antaa vihjeen navigoitavasta kohdenimestä, mikä mahdollistaa selaimen optimoida latausprosessia. Sillä ei ole normatiivisia vaikutuksia vihjeen lisäksi.
- referrer_policy Viittaajakäytäntö, jota sovelletaan esihaettuihin tai esirenderöityihin URL-osoitteisiin.
- relative_to (Vain "list"-lähteelle) Määrittää, ovatko "urls"-taulukossa annetut URL-osoitteet suhteessa dokumentin perus-URL-osoitteeseen ("document") vai speculation rules JSON-tiedoston sijaintiin ("ruleset").
- eagerness Ohjaa sitä, kuinka aggressiivisesti selaimen tulisi esihakea tai esirenderöidä. Käytettävissä olevat asetukset ovat "immediate", "eager", "moderate" ja "conservative", joilla kullakin on erilaiset käynnistimet.
- expects_no_vary_search Merkkijono, jota käytetään URL-hakuvarianssivihjeen antamiseen, mikä mahdollistaa kehittäjien ilmoittaa, odotetaanko spekuloidun URL:n tuottavan eri vastauksen hakuparametrien perusteella.
Jokaisella säännöllä on eagerness-asetus, jonka avulla voit määritellä, milloin spekulaatiot tulisi suorittaa, erottaen spekulaation ajankohdan siitä, mille URL-osoitteille spekulaatiot suoritetaan. Eagerness-asetus on käytettävissä sekä list- että document-lähdesäännöille ja siinä on neljä asetusta: immediate, eager, moderate ja conservative.
- immediate: Tätä käytetään spekulointiin mahdollisimman nopeasti, heti kun speculation rules havaitaan.
- eager: Tämä toimii tällä hetkellä identtisesti immediate-asetuksen kanssa, mutta tulevaisuudessa se asettuu jonnekin immediate- ja moderate-asetusten väliin.
- moderate: Tämä suorittaa spekulaation, jos viet hiiren linkin päälle 200 millisekunnin ajan (tai pointerdown-tapahtumassa, jos se tapahtuu aiemmin, ja mobiilissa, jossa ei ole hover-tapahtumaa).
- conservative: Tämä spekuloi osoittimen tai kosketuksen painalluksella.
Prefetch vai Prerender
Speculation Rules API tukee kahta spekulatiivisen latauksen päämuotoa: esihakua (prefetching) ja esirenderöintiä (prerendering). Vaikka molemmat tekniikat voivat johtaa nopeampiin sivulatauksiin, ne eroavat monimutkaisuudeltaan ja resurssien kulutukseltaan.
- Esihaku (Prefetching) on spekulatiivisen latauksen 'kevyempi muoto'. Se lataa ja tallentaa välimuistiin kohde-URL:n HTML:n renderöimättä sivua tai sen aliresursseja. Tämä lähestymistapa parantaa pääasiassa Time To First Byte -arvoa. Parantunut Time to First Byte johtaa parempiin piirtomittareihin kuten Largest Contentful Paint ja First Contentful Paint.
- Esirenderöinti (Prerendering) tekee paljon enemmän kuin pelkän HTML:n lataamisen. Se lataa HTML:n, kaikki aliresurssit ja renderöi koko sivun piilotetussa, näkymättömässä välilehdessä. Navigoitaessa tälle sivulle tämä johtaa lähes välittömään näyttöön. Tämä tekniikka parantaa Largest Contentful Paint -arvoa useammalla tavalla kuin pelkästään parantamalla Time to First Byte -arvoa. Se myös lataa ja renderöi LCP-elementin. Esirenderöinti voi myös eliminoida Cumulative Layout Shift -arvon, koska resurssien dimensiot ovat jo tiedossa esirenderöinnin jälkeen.
Kumpi siis on parempi? Esirenderöinti vai esihaku? Se riippuu sivusta ja 'keskivertokävijästä'. Vaikka esirenderöinti voi olla nopeampi suunnittelultaan, se myös käyttää paljon enemmän resursseja sekä asiakaspäässä että palvelimella. Valinta esirenderöinnin ja esihaun välillä riippuu:
- Käyttäjän laitteen ominaisuudet: Esirenderöinti ei välttämättä ole paras valinta, jos suuri prosentti kävijöistä vierailee laitteilla, joissa on rajallinen muisti
- Prerender- tai prefetch-säännön tarkkuus. 'Joitain linkkejä klikataan todennäköisemmin ja jotkut sivut konvertoivat todennäköisemmin'. Nämä sivut ovat täydellisiä ehdokkaita prerender-säännölle. Muut sivut voivat sopia paremmin prefetch-säännölle.
CoreWebVitals.io haluaa varoittaa liiallisesta esirenderöinnistä sen resurssitarpeiden vuoksi, erityisesti mobiililaitteilla tai hitaammilla yhteyksillä. Esirenderöinnin mahdollisia hyötyjä on punnittava suorituskyvyn heikkenemisen ja resurssien tuhlaamisen riskiä vasten.
Oikean 'Eagerness'-asetuksen valitseminen - tasapainottelua
Käytettävä eagerness-asetus riippuu sivustostasi. Hyvin yksinkertaiselle staattiselle sivustolle aggressiivisempi spekulointi voi aiheuttaa vähän kustannuksia ja olla hyödyllistä käyttäjille. Sivustot, joilla on monimutkaisempia arkkitehtuureja ja raskaampia sivukuormia, saattavat mieluummin vähentää hukkaa spekuloimalla harvemmin, kunnes saadaan selkeämpi signaali käyttäjän aikomuksesta hukan rajoittamiseksi.
Speculation Rules API:n eagerness-asetus vaikuttaa siihen, milloin selaimen tulisi esihakea tai esirenderöidä sisältöä ennustetun käyttäjänavigoinnin perusteella. Tämä asetus tarjoaa kompromissin esilatauksen hyötyjen maksimoinnin ja resurssien tuhlaamisen minimoinnin välillä.
Oletusarvoinen eagerness list-säännöille on immediate. Moderate- ja conservative-asetuksia voidaan käyttää rajoittamaan list-säännöt URL-osoitteisiin, joiden kanssa käyttäjä on vuorovaikutuksessa tietyssä listassa. Monissa tapauksissa document-säännöt sopivalla where-ehdolla voivat olla tarkoituksenmukaisempia.
Oletusarvoinen eagerness document-säännöille on conservative. Koska dokumentti voi sisältää monia URL-osoitteita, immediate- tai eager-asetuksen käyttöä document-säännöille tulisi harkita varovaisesti.
Eagerness-valinnan tulisi perustua verkkosivuston rakenteeseen, käyttäjien käyttäytymismalleihin ja kehittäjän arvioon mahdollisesta resurssien kulutuksesta suhteessa user experience -hyötyihin. Esimerkiksi yksinkertainen staattinen sivusto voi hyötyä "eager"-asetuksesta, mikä johtaa nopeampiin latausaikoihin. Sitä vastoin monimutkaisemman arkkitehtuurin ja vaativien sivukuormien sivustot voivat valita vähemmän aggressiivisen "moderate"- tai "conservative"-lähestymistavan resurssien käytön rajoittamiseksi, kunnes selkeämpi käyttäjän aikomus havaitaan.
Eagerness-asetusta määritettäessä kehittäjien tulisi huomioida user experience, resurssikustannukset ja selaimen rajoitukset. Liiallinen spekulointi voi kuormittaa käyttäjän kaistanleveyttä, muistia ja suoritinta, mikä voi heikentää suorituskykyä erityisesti rajoitetuissa verkoissa tai laitteissa. Chrome asettaa rajoja samanaikaisesti esihaettujen ja esirenderöityjen sivujen määrälle liiallisen käytön ehkäisemiseksi. Lisäksi tekijät kuten käyttäjän määrittämät tiedonsäästötilat, alhainen akun varaustaso tai selainlaajennukset voivat ohittaa speculation rules -säännöt ja priorisoida resurssien säästämistä.
Speculation rules -sääntöjen tarkistaminen ja virheenkorjaus
Tarkistaaksesi sivun speculation rules -säännöt avaa Chrome DevTools, siirry Application-paneeliin ja navigoi kohtaan Background Services > Speculative Loads > Speculations. (Avaa Speculations-paneeli ennen kuin lataat virheenkorjattavan sivun.) Tämä paneeli tarjoaa tietoja seuraavista:
- Onnistuneiden spekulaatioiden määrä.
- Yksittäiset esirenderöitävät tai esihaettavat URL-osoitteet.
- Kunkin spekulaation tila.
Performance-paneelin Network-raita näyttää esirenderöityihin resursseihin liittyvän verkkoaktiviteetin ilman DevTools-kontekstin vaihtamista. Lisäksi voit vaihtaa DevTools-kontekstin esirenderöidylle sivulle ja tarkastella sitä kuten tavallista sivua.
Speculation Rules -sääntöjen seuranta ja analysointi
- Real User Monitoring (RUM): Käytä RUM-työkaluja todellisen käyttäjäkokemuksen mittaamiseen. Seuraa mittareita kuten Largest Contentful Paint (LCP) arvioidaksesi speculation rules -sääntöjen vaikutusta sivulatausaikoihin. Etsi parannuksia LCP-arvossa esirenderöidyillä sivuilla verrattuna ei-esirenderöityihin sivuihin.
- A/B-testaus: Suorita A/B-testejä vertaillaksesi eri speculation rules -konfiguraatioita ja löytääksesi optimaalisimman asetuksen juuri sinun verkkosivustollesi ja käyttäjäkunnallesi.
Huomioitavaa - haittapuolet
Resurssien kulutus: Liiallinen spekulointi voi vaikuttaa negatiivisesti kaistanleveyteen, muistiin ja suorittimen käyttöön.
Selainyhteensopivuus: Kaikki selaimet eivät tue täysin Speculation Rules API:a, joten tarkista selainyhteensopivuus ennen käyttöönottoa.
Yksityisyys: Kehittäjien tulisi huomioida, miten speculation rules voivat paljastaa käyttäjien selausmalleja, ja toteuttaa asianmukaiset yksityisyydensuojatoimenpiteet.
Speculation Rules API tarjoaa tehokkaan lähestymistavan verkkosovellusten suorituskyvyn ja user experience -kokemuksen parantamiseen. Ymmärtämällä sen mekaniikan, edut ja huomioitavat seikat kehittäjät voivat hyödyntää tätä API:a nopeampien ja kiinnostavampien verkkosivustojen rakentamiseen.
Speculation Rules WordPress-koodi
WordPress Core Performance -tiimi on luonut Speculation Rules -lisäosan, joka tekee document rule -tuen lisäämisestä mille tahansa WordPress-sivustolle yhden klikkauksen toimenpiteen. Lisäosa tarjoaa kaksi asetusryhmää:
- Speculation Mode: Valitse prefetch- ja prerender-vaihtoehtojen väliltä. Esirenderöinti johtaa nopeampiin latausaikoihin kuin esihaku. Esihaku voi kuitenkin olla turvallisempi valinta interaktiiviselle sisällölle.
- Eagerness: Valitse conservative (tyypillisesti klikkauksella), moderate (tyypillisesti hover-tapahtumassa) tai eager (pienimmälläkin vihjeellä) väliltä. Eagerness-asetus määrittää, kuinka nopeasti spekulatiiviset lataukset käynnistyvät.
