Kuinka parantaa Google Core Web Vitals -pisteitäsi?

(23. elokuuta 2020)

Seuraava aikakausi verkkosivun suorituskyvyssä

Olen työskennellyt pari kuukautta strategioista, joilla parannetaan verkkosivustojen suorituskykyä yrityksen omistamilla verkkosivustoilla, ja rehellisesti sanottuna, se on todella mielenkiintoinen työ, jonka voit jakaa kanssasi.

Ymmärrän, että verkkosivujen suorituskyvyn parissa työskenteleminen ei ole uusi asia asia ja ihmiset ovat keksineet paljon ideoita ja temppuja sivusi latausnopeuden lisäämiseksi. Mutta nyt näyttää siltä, ​​että se ei enää riitä ja sinun on siirryttävä seuraavalle tasolle !!

Kuten teidän tulisi tietää SEO: n (hakukoneoptimoinnin) tärkeydestä ja verkkosivujen tulosten tuominen esiin paitsi google-tulosten ensimmäisellä sivulla, myös saman ensimmäisen sivun yläosassa on todella paljon! Pitkä tarina lyhyt – haluan taata teille, että Google Core Web Vitals tulee olemaan yksi näistä suurimmista tekijöistä Google-hakutulosten hakukoneoptimoinnissa.

Lyhyt & Yksinkertainen selitys Google Core Web Vitals -sivustolle

Core Web Vitals, joka esiteltiin tämän vuoden ensimmäisellä neljänneksellä, on joukko verkkosivusi nopeuteen, reagoivuuteen ja visuaaliseen vakauteen liittyviä mittareita.

Google on määritellyt nämä ydinversioiksi:

  • Suurin sisällöllinen maali : Sivun pääsisällön lataamiseen kuluva aika. Ihanteellinen LCP-mittaus on 2,5 sekuntia tai nopeampi.
  • Ensimmäisen syötteen viive : Sivun interaktiivisuuteen kuluva aika. Ihanteellinen mitta on alle 100 ms .
  • Kumulatiivinen asettelun muutos : Visuaalisen sivun sisällön odottamaton asettelun muutos. Ihanteellinen mitta on alle 0,1 .

Tämä mittaristo on suunniteltu auta sivuston omistajia mittaamaan tarjoamansa käyttökokemukset lataamisen, vuorovaikutteisuuden ja visuaalisen vakauden suhteen.

Kaiken kaikkiaan sivusi tehokkuus luokitellaan alla olevan mukaisesti.

Täydellinen luettelo sivun tehokkuustiedoissa huomioon otetuista tiedoista.

Seuraava osio puhuu periaatteessa ideoista tai menetelmistä sivulatauksen suorituskyvyn ja CWV-pisteiden parantamiseksi.

Vinkkejä Core Web Vitals -pisteiden parantamiseen

Alla on joitain menetelmiä se auttoi minua parantamaan Core Web Vitals -tuloksiani sekä parantamaan myös sivun kokonaistehokkuutta.

  1. Käytä selaimen ja CDN-välimuistia tehokkaasti (parantaa FID: ää ja LCP: tä)
    Tämä on hyvin yksinkertainen hyväksyntä ch parantaa FID- ja LCP-pisteitäsi. Varmista, että staattiset omaisuutesi palvelevat CDN: stä (jos sen AWS, voit tallentaa sen välimuistiin Cloudfrontissa). Tämä johtaa resurssien saamiseen nopeasti selaimeesi. Parantaaksesi toista aikakuormitusta, varmista, että asiakaspuolella saavutetut resurssit on tallennettu välimuistiin selaimellesi.
    cache-control: max-age=120 – tarkoittaa, että palautettu resurssi on voimassa 120 sekunnin ajan, minkä jälkeen selaimen on pyydettävä uudempaa versiota.
    Voit myös tallentaa välimuistiin dynaamiset sivusi myös CDN: lläsi sopiva TTL-arvo sovelluksesi käyttäytymisen perusteella.
  2. Aseta medialle ja mainoksillesi tarkka koon määritteet tai mitat (parantaa CLS: ää)
    Tämä on jotain erittäin tärkeää CLS-pisteiden parantamiseksi. Varmista, että sinulla on oikea height:XXpx; width: YYpx asetettu kuvaan tai mihin tahansa mediatunnisteeseen. Tämä on jälleen erittäin tärkeää ainakin taitoksen yläpuolella oleville komponenteille. Yksi oikotie tähän on se, että jos ideoiden loppu on tarkan kuvan korkeuden saamiseksi, voit asettaa sen arvoksi height:auto;, mikä todella auttoi minua. Median lisäksi, jos sivustossasi on mainoksia, varmista, että olet asettanut oikeat kokoiset mainospaikat, sillä sivun komponenttien työntäminen ylös tai alas tuo varmasti alas CLS-pisteet. Pidä siis silmällä myös mainoksia!
  3. Lazy lataa oikean resoluution kuvia laitetyypin perusteella (parantaa LCP: tä)
    Tämä on todella nopea voitto sinulle! Maailmassa on paljon Lazy-latauspaketteja, joita voit käyttää verkkosivullasi lataamaan kaikki sivusi kuvat.Tämä vähentää sivun kokonaispainoa ja latausaikaa sivun renderoimiseksi selaimessa. Toinen tärkeä pala on se, että määritä ladattavan kuvan tarkkuus ennalta laitetyypin perusteella. Sinun ei pitäisi ladata samoja tarkkuuskuvia eri laitetyypeissä.
  4. Käytä SSR: ää ja CSR: ää tehokkaasti verkkosivullasi (paranna FID & LCP)
    Sinun tulisi tietää, että Google mainostaa ja kannustaa palvelinpuolen renderöityjä (SSR) -sivuja hyvien SEO-arvojen saamiseksi. Mutta ihannetapauksessa se kompromissi SEO Vs -sivun lataustehokkuudella. Jos sivusi on sisällöltään liian suuri ja jos päätät renderoida koko sivun palvelimessa, koko sivun ja sivun lataaminen vie varmasti enemmän aikaa. Paino on myös korkea. Lyhyt tarina – suosittelen, että on parempi tehdä SSR-renderöinti sivun osille, jotka näkyvät taiton yläpuolella, ja renderoida loput komponentit asiakkaan puolelta, joka näkyy taiton alapuolella. Tällä tavalla käyttäjä lataa sivun taitoksen yläpuolelle ja loppuosa sivusta tekee asynkronisesti estämättä käyttökokemusta.
  5. Käytä koodia Jako & jakaa omaisuutesi paloiksi (parantaa FID & LCP)
    Sovelluksessasi ei ole aina hyvä olla valtavia (kaikki yli 100 kt: n suuruisia) resursseja (etenkin JS-tiedostot). Käytä siis paremmin paketteja, kuten ”webpack”, jaottele raskaat varat pieniksi paloiksi, jotka lataavat asynkronisesti selaimeesi (jos otat h2-protokollan käyttöön). Voit myös hyödyntää koodin jakamisominaisuuksia sivun komponenttien erottamiseksi erillisiksi tiedostoiksi sen sijaan, että pakattaisit sen yhteen HTML-tiedostoon.
  6. Pakkaa kaikki staattiset omaisuutesi Brotlin pakkauksella (parantaa LCP: tä)
    Kehotan käyttämään Brotliä staattisten omaisuuksien pakkaamiseen, mikä antaa paljon paremman painosuhteet verrattuna muihin markkinoiden kirjastoihin. Samalla pidä mielessä, että kun käytät Brotliä suuremmalla puristussuhteella, se varmasti lisää rakennus- ja pakkausaikaa DevOps-putkimatkalla. Minulle oli hienoa uhrata sovelluksen koontiaika, kun saan parempaa arvoa sivun latautumisen suhteen.
  7. Optimoi sovellusliittymäpyyntö ja vastauksen sisältö (parantaa FID & LCP)
    Tämä on erittäin tärkeää ottaa huomioon, koska jokaisella tavulla on merkitystä tässä, kun puhumme sivun suorituskyky. Uskon, ettet tule valitettavasti palata takaisin ja tarkistamaan sovellusliittymäpyyntösi & vastauksia sivusi täyttämiseen. Varmista, että saat takaisin vain sivusi edellyttämät tiedot. Toinen hölmö asia, jonka voisit mahdollisesti tehdä virheen, on se, että API-kutsusi kutsutaan itse sisäisesti sen sijaan, että käyttäisit julkisia päätepisteitä tai Internetin kautta – koska se on aina kallista ajan suhteen, kun kutsuvat sovellusliittymiäsi Internetin kautta, kun sovellusliittymäsi isännöi samassa aliverkossa tai ainakin samassa verkossa!
  8. Pienennä sivua / asiakirjaa koko (parantaa LCP: tä)
    Ihannetapauksessa, jos laskeutumissivusi on raskas (luokittelisin minkä tahansa yli 80 kt: n sivun painavaksi), tämä vaikuttaa varmasti huonosti LCP-pisteisiin koska se lisää suhteellisesti sivusi haku- ja latausnopeutta. Joten varmista, että et saa mitään käyttämätöntä isoa palaa palvelinpuolelta ja lataa vain tiedot, joita tarvitaan sivusi hahmottamiseen.
  9. Käytä NEXT-GEN-kuvamuotoja (parantaa LCP: tä)
    JPEG 2000, JPEG XR ja WebP ovat kuvamuotoja, joilla on erinomaiset pakkaus- ja laatuominaisuudet vanhempiin JPEG- ja PNG-vastineet. Kuvien koodaaminen näissä muodoissa JPEG- tai PNG-tiedostojen sijaan tarkoittaa, että ne latautuvat nopeammin ja kuluttavat vähemmän solukkotietoja. Voit muuntaa kuvat NEXT-GEN-muotoisiksi kuviksi millä tahansa markkinoilla olevalla työkalulla tai jopa rakentaa ajonaikaisen kuvapalvelun, joka voi tehdä reaaliaikaisen kuvanmuunnoksen JPEG: stä WebP: ksi ja palvella selaimessa.
  10. Ota käyttöön palautus natiiviselaimen tukemiin kirjasimiin (parantaa FID: ää)
    On osoitettu, että fontit voi todella laskea suorituskykysi pisteitä, jos selain viivästyttää sovelluksessasi käytettävän mukautetun fontin lataamista, ellei se ole oletusselainta, jota selain tukee. Tällöin nopean voiton on oltava varalähestymistapa latauksessa kirjasimesi selaimen oletusarvoisesti tukemilla kirjasimilla. Alla on esimerkkikoodinpätkä siitä, miten muilla kirjasimilla on varmuuskopio.
@font-face { 
font-family: “Open Sans Regular” "Helvetica", "Arial", sans-serif;
font-weight: 400;
font-style: normal;
src: url(“fonts/OpenSans-Regular-BasicLatin.woff2”) format(“woff2”); font-display: swap;
}

Kaikki yllä olevat vinkit voidaan toteuttaa asteittain sovelluksessasi ja jälleen, kuten mainittiin, ennen kuin Core Web Vitals -pisteet ovat kehittyneet todellisesta käyttäjästä tietoja eikä enää mistään “Lab” -datasta. Pisteiden parannusten huomioiminen vie siis aikaa, mikä on enimmäkseen 28 päivän aika. Voit silti käyttää Googlen PageSpeed-työkalua – https://developers.google.com/speed/pagespeed/insights/ saadaksesi CWV-pisteet.

Toivo, joka auttaa ja toivotan teille menestystä teoksissanne! Kippis!

Vastaa

Sähköpostiosoitettasi ei julkaista. Pakolliset kentät on merkitty *