Seuraava artikkeli auttaa sinua: Core Web Vitals: Google kertoo, mitkä tekijät pitäisi olla ensisijaisia vuonna 2023
Äskettäin Google jakoi kautta Chrome DevRel -tiimijoitain suosituksia Core Web Vitalsin suorituskyvyn optimoimiseksi vuonna 2023.
Core Web Vitals kerää sivun latauskokemuksen päätekijät, kun käyttäjä käyttää sen elementtejä ja on vuorovaikutuksessa niiden kanssa. He ovat latausnopeus (suurin sisältöä sisältävä maali tai LCP), visuaalinen vakaus (kumulatiivinen layout shift tai CLS) ja interaktiivisuus (ensimmäisen tulon viive tai FID).
Nämä tekijät voivat ohjata useita muutoksia sivustojen suorituskyvyn parantamiseksi. Mitkä niistä kuitenkin vaikuttavat eniten, ja ne tulisi asettaa etusijalle mahdollisuuksien joukossa? Tämän tiimi jakoi, ja voit tarkistaa sen alta.
Latausnopeus (LCP)
Largest Contentful Paint (LCP) on mittari, joka mittaa kuinka nopeasti sivu lataa sisällön kokonaan käyttäjän kannalta.
LCP mittaa latausnopeutta renderöintiajalla, kunnes sen suurin elementti ilmestyy näytölle. Tällä hetkellä puolella kaikista verkkosivustoista on tähän tekijään liittyviä ongelmia.
Pysyäksesi latausrajan sisällä on välttämätöntä:
- Varmista, että LCP-resurssi on havaittavissa HTML-lähteestä. Yleensä sivun suurin elementti on kuva, ja se on löydettävä tavallisista HTML-määritteistä, kuten
tai .
- Varmista, että LCP-resurssin lataaminen on etusijalla sivulla. On mahdollista käyttää fetchpriority=”high”-attribuuttia
– tai -tunnisteessa, joka lataa LCP-kuvasi.
- Käytä CDN:ää (Content Delivery Network) asiakirjojen ja Time to First Byte (TTFB) -resurssien optimointiinjotta alkuperäinen asiakirjavastaus saapuu mahdollisimman pian.
Visuaalinen vakaus (CLS)
Kumulatiivinen asettelumuutos (CLS) on mittari, joka mittaa sivun odottamattomien asettelumuutosten tiheyttä ja vakavuutta, kun elementti liikkuu käyttäjän ollessa vuorovaikutuksessa sen kanssa.
Alla on Googlen ensisijaisiksi määrittämät visuaalisen vakauden toiminnot:
- Määritä nimenomaisesti koot mille tahansa sivulle ladattavalle sisällölle. Tämä voidaan tehdä leveys- ja korkeusmääritteillä (tai vastaavilla CSS-ominaisuuksilla).
- Varmista, että sivusi ovat kelvollisia välimuistiin. Sivuilla, jotka alkoivat käyttää tätä mekanismia, visuaalinen vakaus on parantunut huomattavasti.
- Vältä animaatioita/siirtymiä, jotka käyttävät asetteluun vaikuttavia CSS-ominaisuuksia. Aina kun mahdollista, suosi siirtymiä ja animaatioita, jotka käyttävät CSS-muunnosominaisuutta.
Interaktiivisuus (FID)
First Input Delay (FID) on mittari, joka mittaa vastenopeutta käyttäjän ensimmäiseen vuorovaikutukseen sivun kanssa, kuten napsautukseen tai JavaScript-ohjausobjektiin. Tämä on tekijä, jota useimmat verkkosivustot jo hallitsevat, mutta aina on parantamisen varaa.
FID arvioi ajan, joka kuluu käyttäjän ensimmäisestä vuorovaikutuksesta siihen asti, kun sivusto pystyy käsittelemään vastauksen kyseiseen vuorovaikutukseen, mikä tapahtuu millisekunneissa. Tämä viive voi johtua muista prosesseista, kuten suuren JavaScript-tiedoston lataamisesta rinnakkain.
Nämä ovat tärkeimmät toimet, jotka voivat parantaa verkkosivuston vastausnopeutta:
- Vältä tai keskeytä pitkiä tehtäviä jakamalla ne pienempiin tehtäviin, jotta selaimella on enemmän mahdollisuuksia mukautua.
- Vältä tarpeetonta tai käyttämätöntä JavaScriptiäjoka löytyy Chrome DevToolsin Lähteet-kohdan Kattavuus-välilehdestä.
- Vältä suuria renderöintipäivityksiä. Voit tehdä tämän seuraavasti: välttää requestAnimationFrame():n käyttämistä ei-visuaalisiin töihin; pidä Document Object Model (DOM) -mallisi pienenä; käytä CSS-suojausta.
Käyttökokemus on edelleen etusijalla
Sivun käyttökokemuksen laatu riippuu useista tekijöistä. Tässä artikkelissa jaettuihin elementteihin keskittymisen tulisi kuitenkin olla SEO-analyytikoiden ja kehittäjien ensisijainen tavoite käytettävyyden parantamiseksi ja Googlen tulosten kärkisijoille pääsemiseksi.
Edellisten vuosien tapaan Google julkaisi kymmeniä uusia päivityksiä vuonna 2022. Mutta viime kädessä kaikki hakukoneoptimointityö keskittyy käyttäjäkokemuksen parantamiseen. Mitä hyödyllisempää on sisältö ja mitä parempi sivuston käytettävyys, sitä parempia tuloksia tuotemerkeillä on.
