Gekissimo.net - Opi ansaitsemaan rahaa webilläsi Internetissä!
Blogi

Google Chrome -tiimi jakaa vinkkejä Core Web Vitalsin optimointiin

Seuraava artikkeli auttaa sinua: Google Chrome -tiimi jakaa vinkkejä Core Web Vitalsin optimointiin

Google jakaa päivitetyt suositukset Core Web Vitalsin optimointia varten, jotta voit päättää, mitä priorisoida, kun aika on rajallinen.

Core Web Vitals on kolme mittaria, jotka mittaavat latausaikaa, interaktiivisuutta ja visuaalista vakautta.

Google pitää näitä mittareita välttämättöminä positiivisen kokemuksen tarjoamiseksi ja käyttää niitä verkkosivustojen sijoittumiseen hakutuloksissaan.

Google on vuosien varrella tarjonnut lukuisia ehdotuksia Core Web Vitals -pisteiden parantamiseksi.

Vaikka jokainen Googlen suositus kannattaa toteuttaa, yritys ymmärtää, että on epärealistista odottaa kenenkään tekevän kaiken.

Jos sinulla ei ole paljon kokemusta verkkosivuston suorituskyvyn optimoinnista, voi olla haastavaa selvittää, millä on merkittävin vaikutus.

Et ehkä tiedä mistä aloittaa, sillä sinulla on rajoitetusti aikaa käyttää Core Web Vitals -tietojen parantamiseen. Tästä tulee Googlen tarkistettu suositusluettelo.

Google kertoo blogikirjoituksessaan, että Chrome-tiimi vietti vuoden yrittäessään tunnistaa suurin osa tärkeitä neuvoja, joita se voi antaa liittyen Core Web Vitals -arvoihin.

Tiimi koonnut luettelon suosituksista, jotka ovat realistisia useimmille kehittäjille, soveltuvat useimpiin verkkosivustoihin ja joilla on merkityksellinen vaikutus todelliseen maailmaan.

Tässä on mitä Googlen Chrome-tiimi neuvoo.

Suurimman sisällöllisen maalin optimointi (LCP)

LCP (Largest Contentful Paint) -mittari mittaa aikaa, joka kuluu sivun ensisijaisen sisällön näkymiseen käyttäjille.

Googlen mukaan vain noin puolet kaikista verkkosivustoista saavuttaa suositellun LCP-kynnyksen.

Nämä ovat Googlen tärkeimmät suositukset LCP:n parantamiseksi.

Varmista, että LCP-resurssi löytyy helposti HTML-lähteestä

HTTP-arkiston 2022 Web Almanac -sivuston mukaan 72 prosentilla mobiilisivuista on pääsisältönä kuva. LCP:n parantamiseksi verkkosivustojen on varmistettava, että kuvat latautuvat nopeasti.

Voi olla mahdotonta saavuttaa Googlen LCP-kynnystä, jos sivu odottaa CSS- tai JavaScript-tiedostojen lataamista, jäsentämistä ja käsittelyä, ennen kuin kuva voi alkaa latautua.

🔥 Empfohlen:  Älä unohda näitä 8 tekijää ennen kuin haet Google AdSense -ohjelmaan

Yleissääntönä on, että jos LCP-elementti on kuva, kuvan URL-osoitteen tulee aina olla löydettävissä HTML-lähteestä.

Varmista, että LCP-resurssit on priorisoitu

Sen lisäksi, että LCP-resurssi on HTML-koodissa, Google suosittelee sen priorisoimista ja olemaan viivyttelemättä muita vähemmän tärkeitä resursseja.

Vaikka olisit lisännyt LCP-kuvasi HTML-lähdekoodiin tavallisella -tunnisteella, jos verkkosivusi -osiossa on useita

Ole varovainen käyttäessäsi kuvien optimointityökaluja, jotka lataavat automaattisesti laiskalatauksen kaikkiin kuviin.

Käytä sisällönjakeluverkkoa (CDN) lyhentääksesi ensimmäiseen puremiseen kuluvaa aikaa (TTFB)

Selaimen on vastaanotettava ensimmäinen tavu alkuperäisestä HTML-asiakirjavastauksesta ennen lisäresurssien lataamista.

Tämän ajan mittaa kutsutaan Time to First Byte (TTFB), ja mitä nopeammin tämä tapahtuu, sitä nopeammin muut prosessit voivat alkaa.

Minimoidaksesi TTFB:n tarjoa sisältösi lähellä käyttäjiäsi ja käytä välimuistia usein pyydettyä sisältöä varten.

Googlen mukaan paras tapa tehdä molemmat asiat on käyttää sisällönjakeluverkkoa (CDN).

Kumulatiivisen asettelun muutoksen optimointi (CLS)

Kumulatiivinen asettelumuutos (CLS) on mittari, jota käytetään arvioimaan, kuinka vakaa verkkosivuston visuaalinen asettelu on. Googlen mukaan noin 25 % verkkosivustoista ei täytä tälle mittarille suositeltua standardia.

Nämä ovat Googlen tärkeimmät suositukset CLS:n parantamiseksi.

Aseta selkeät koot sivun sisällölle

Asettelumuutoksia voi tapahtua, kun verkkosivuston sisältö muuttaa sijaintia sen jälkeen, kun se on latautunut. On tärkeää varata tilaa mahdollisimman paljon etukäteen, jotta näin ei tapahdu.

Yksi yleinen syy asettelun siirtymiseen on kuvien kokoamaton, joka voidaan korjata asettamalla leveys- ja korkeusattribuutit tai vastaavat CSS-ominaisuudet.

Kuvat eivät ole ainoa tekijä, joka voi aiheuttaa muutoksia verkkosivuilla. Muu sisältö, kuten kolmannen osapuolen mainokset tai upotetut videot, jotka latautuvat myöhemmin, voivat edistää CLS:ää.

Yksi tapa ratkaista tämä ongelma on käyttää kuvasuhdeominaisuutta CSS:ssä. Tämä ominaisuus on suhteellisen uusi, ja sen avulla kehittäjät voivat asettaa kuvasuhteen kuville ja muille kuin kuvaelementeille.

Kun annat nämä tiedot, selain voi automaattisesti laskea sopivan korkeuden, kun leveys perustuu näytön kokoon, samalla tavalla kuin se tekee kuville, joilla on määritellyt mitat.

Varmista, että sivut ovat kelvollisia Bfcachelle

Selaimet käyttävät ominaisuutta, jota kutsutaan taaksepäin/eteenpäin välimuistiksi tai lyhennettynä bfcacheksi, jonka avulla sivut voidaan ladata välittömästi aiemmasta tai myöhemmästä selainhistoriasta käyttämällä muistin tilannekuvaa.

Tämä ominaisuus voi parantaa merkittävästi suorituskykyä poistamalla asettelun siirtymät sivun latauksen aikana.

Google suosittelee tarkistamaan, ovatko sivusi bfcache-kelpoisia Chrome DevToolsin avulla, ja etsimään mahdollisia syitä, miksi ne eivät kelpaa.

Vältä animaatioita/siirtymiä

Yleinen syy asettelun vaihteluihin on sivuston elementtien, kuten evästebannerien tai muiden ilmoitusbannerien, animaatiot, jotka liukuvat sisään ylhäältä tai alhaalta.

Nämä animaatiot voivat työntää muun sisällön pois tieltä ja vaikuttaa CLS:ään. Vaikka ne eivät tekisikään, niiden animointi voi silti vaikuttaa CLS:ään.

Google sanoo, että sivuilla, jotka animoivat mitä tahansa CSS-ominaisuutta, joka voi vaikuttaa asetteluun, on 15 % vähemmän todennäköistä, että CLS on "hyvä".

Tämän lieventämiseksi on parasta välttää sellaisten CSS-ominaisuuden animointia tai siirtämistä, joka edellyttää selaimen päivittävän asettelun, ellei se ole vasteena käyttäjän syötteeseen, kuten napautukseen tai näppäimen painallukseen.

CSS-muunnosominaisuuden käyttäminen on suositeltavaa siirtymille ja animaatioille, jos mahdollista.

Ensimmäisen tuloviiveen (FID) optimointi

First Input Delay (FID) on mittari, joka mittaa kuinka nopeasti verkkosivusto reagoi käyttäjän vuorovaikutukseen.

Vaikka useimmat verkkosivustot toimivat tällä alueella hyvin, Google uskoo, että parantamisen varaa on.

Googlen uusi mittari, Interaction to Next Paint (INP), voi korvata FID:n, ja alla olevat suositukset koskevat sekä FID:tä että INP:tä.

Vältä tai erota pitkiä tehtäviä

Tehtävät ovat mitä tahansa selaimen suorittamaa erillistä työtä, mukaan lukien hahmonnus, asettelu, jäsentäminen sekä komentosarjojen kääntäminen ja suorittaminen.

Kun tehtävät kestävät kauan, yli 50 millisekuntia, ne estävät pääsäikeen ja vaikeuttavat selaimen nopeaa reagointia käyttäjän syötteisiin.

Tämän välttämiseksi on hyödyllistä pilkkoa pitkät tehtävät pienemmiksi antamalla pääsäikeelle enemmän mahdollisuuksia käsitellä kriittistä käyttäjälle näkyvää työtä.

Tämä voidaan saavuttaa antautumalla pääsäikeelle usein, jotta päivitykset ja muut käyttäjien vuorovaikutukset tapahtuvat nopeammin.

Vältä tarpeetonta JavaScriptiä

Verkkosivusto, jossa on paljon JavaScriptiä, voi johtaa tehtäviin, jotka kilpailevat pääketjun huomiosta, mikä voi vaikuttaa negatiivisesti verkkosivuston reagointikykyyn.

Voit tunnistaa ja poistaa tarpeettoman koodin verkkosivustosi resursseista käyttämällä Chrome DevToolsin peittotyökalua.

Pienentämällä latausprosessin aikana tarvittavien resurssien kokoa, verkkosivusto käyttää vähemmän aikaa koodin jäsentämiseen ja kääntämiseen, mikä johtaa saumattomampaan käyttökokemukseen.

Vältä suuria renderöintipäivityksiä

JavaScript ei ole ainoa asia, joka voi vaikuttaa verkkosivuston reagointikykyyn. Renderöinti voi olla kallista ja häiritä verkkosivuston kykyä vastata käyttäjien syötteisiin.

Renderöintityön optimointi voi olla monimutkaista ja riippuu tietystä tavoitteesta. On kuitenkin olemassa joitakin tapoja varmistaa, että päivitysten renderöinti on hallittavissa ja että ne eivät muutu pitkiksi tehtäviksi.

Google suosittelee seuraavaa:

Johtopäätös

Core Web Vitals on tärkeä mittari positiivisen käyttökokemuksen ja sijoituksen tarjoamiseksi Googlen hakutuloksissa.

Vaikka kaikki Googlen suositukset kannattaa ottaa käyttöön, tämä tiivistetty luettelo on realistinen, soveltuu useimmille verkkosivustoille ja sillä voi olla merkittävä vaikutus.

Tämä sisältää CDN:n käyttämisen TTFB:n alentamiseksi, nimenomaisten kokojen asettamisen sivun sisällölle CLS:n parantamiseksi, sivujen tekemisen kelvollisiksi bfcachelle ja tarpeettomien JavaScriptin ja animaatioiden/siirtymien välttämisen FID:lle.

Noudattamalla näitä suosituksia voit käyttää aikasi paremmin ja saada kaiken irti verkkosivustostasi.

Lähde: Web.dev

Table of Contents