Web-sivustosi optimointi Core Web Vitals (Adsense) -palvelua varten

Yritätkö niin kovasti päästä läpi Core Web Vitals -arvot? Tässä on joitain helppoja ja käytännöllisiä tapoja parantaa CWV-pisteitäsi

Kilpailu Core Web Vitalsin parantamisesta ei ole helppo. Siitä tulee vaikeampaa, jos luotat Google AdSensen kaltaiseen mainosohjelmaan verkkosivustosi tulouttamisessa.

Google AdSensea käyttävät verkkosivustot epäonnistuvat 10 kertaa todennäköisemmin Core Web Vitals -testissä kuin sama verkkosivusto ilman Google AdSensea. Tämä johtuu pääasiassa kolmansien osapuolien pyyntöjen ja resurssien määrästä, jonka Google AdSense lisää verkkosivustollesi. Suurin osa näistä resursseista on optimoimattomia, suuria ja ei-käyttäjäystävällisiä.

AdSensen ja mainosalustojen ulkopuolella, jos sinulla on paljon optimoimattomia kuvia, JavaScriptiä ja CSS:ää erityisesti sivun yläosassa, epäonnistut myös hyvin todennäköisesti Core Web Vitals -testissä.

Jos sinulla on ollut vaikeuksia läpäistä Core Web Vitals -testin ja parantaaksesi hakukone sijoituspotentiaalia, löydät käytännön ratkaisut tästä artikkelista.

Mitä ovat Core Web Vitals?

Core Web Vitals ovat Google Lighthousen tuottamia mittareita, jotka määrittävät, kuinka sivusto tarjoaa hyvän sivukokemuksen. Vaikka testin suorittamisessa on monia mittareita, tärkeimmät mittarit ovat suurin sisältömaalaus (LCP), First Input Delay (FID) ja kumulatiivinen asettelumuutos (CLS).

Google on ilmoittanut että toukokuusta 2021 alkaen näistä tiedoista tulee osa niiden sijoitussignaaleja, joita käytetään määrittämään verkkosivujen sijainti hakutuloksissa.

Yhteenvetona voidaan sanoa, että Core Web Vitalsin ei ollut tarkoitus olla kauhu verkkovastaaville, vaan keino parantaa verkkosivustojen sivukokemusta.

Suurin sisältöinen maali (LCP): LCP mittaa aikaa, joka kuluu verkkosivun suurimman näkyvän kuvan tai tekstilohkon latautumiseen. Jos suurin näkyvä teksti tai kuva latautuu nopeasti, katsotaan, että muut kuvat ja teksti latautuvat nopeasti. Vaadittu latausaika on 2.5 sekuntia.

Suurin sisältöinen maali
Pistetilanne: Web.dev

Ensimmäinen syöttöviive (FID): FID mittaa verkkosivujen interaktiivisuutta. Tämä määräytyy sen mukaan, kuinka kauan selain alkaa käsitellä tapahtumakäsittelijöitä sen jälkeen, kun käyttäjä on napsauttanut sivustoasi. Tätä kutsutaan yleisesti verkkosivustosi ensivaikutelmaksi. Vaadittu aika on 100 millisekuntia.

Ensimmäinen syöttöviive
Pistetilanne: Web.dev

Kumulatiivinen asettelun muutos (CLS): CLS mittaa asettelun muutosta, joka tapahtuu verkkosivulla. Kun verkkosivu latautuu ja sitten yhtäkkiä jotain ilmestyy tai katoaa ja sivun on sopeuduttava suurempaan tai pienempään, se muutos mitataan. Se on kauheaa käyttäjäkokemuksen kannalta ja olen samaa mieltä. Pisteet, jotka sinun on läpäistävä, on 0.1.

Kumulatiivinen asettelun muutos
Pistetilanne: Web.dev

Kuinka optimoida verkkosivustosi Core Web Vitals -arvoille

Optimoi verkkosivustosi noudattamalla näitä ohjeita:

1. Aloita nopealla verkkoisännällä

Jos sinulla on verkkoisäntä, jolla on kauhea vasteaika, kaikki muut tässä luettelemani asiat eivät välttämättä anna toivottuja tuloksia. Mitä nopeammin palvelimesi vastaa pyyntöihin, sitä parempi.

Miksi verkkoisäntä, jolla on nopea Time to first byte (TTFB) -ominaisuus, on tärkeä? Jotkut väittävät, että TTFB:llä ei ole väliä, mutta sillä on. Se on kaiken muun perusta. Jos käyttäjiäsi on kaupungeissa, joissa Internet on hidas, verkkoisäntäsi reagointinopeus merkitsee kaikkea. Mikä tahansa verkkoisäntä voi toimia hyvin, jos sinulla on käyttäjiä pääasiassa kaupungeista, joissa on erittäin nopea internet.

Kokeile, kuinka verkkoisäntäsi reagoi 3G- tai 2G-verkkoon 4G:n sijaan. Koska jos saat paljon käyttäjiä muodostamaan yhteyden 3G- tai 2G-verkon kautta, se lisää Core Web Vitals -pisteesi. Joten jokainen millisekunti on tärkeä. Ero 100 ms:n FID:n ja 101 ms:n välillä on se, että 100 ms:lla hyväksyt, mutta 101 ms:n kohdalla epäonnistut. Joten jos joku sanoo sinulle, että 1 ms:lla ei ole väliä, hän saattaa olla väärässä.

Kun valitset a web-isäntä, varmista aina, että saat palvelinkeskuksen lähemmäksi suurinta osaa verkkosivustosi käyttäjistä. Löydät niiden sijainnit tarkastelemalla analytiikkaasi. Mistä suurin osa käyttäjistäsi tulee? Valitse heitä lähempänä oleva datakeskus. Mitä lähempänä sen parempi.

Olen henkilökohtaisesti huomannut merkittävän muutoksen verkkosivuston Core Web Vitals -kenttätiedoissa verkkopalvelimen vaihtamisen jälkeen. En tehnyt muuta.

Jos etsit nopeaa verkkoisäntää, siellä on paljon suosituksia, jotka perustuvat puhtaasti Kumppanit ilman vilpittömyyttä. Jos käytät WordPressiä ja sinulla on siihen varaa, suosittelen Kinsta. Ne ovat parhaita WordPressille. Jos tarvitset jotain halvempaa tai et käytä WordPressiä, niin Cloudways on myös erittäin tehokas.

2. Käytä kevyttä ja nopeudelle optimoitua teemaa

Tämä vihje on erityisen hyödyllinen muille kuin koodaajille ja jopa vähemmän aikaa käyttäville koodaajille. Varsinkin jos käytät WordPressiä, jossa on niin paljon vaihtoehtoja, varmista, että käytät kevyttä ja nopeudelle optimoitua teemaa.

Koska teema on kuin verkkosivustosi luuranko, jos luuranko on rikki, runko rikkoutuu. Siinä se vain on.

On olemassa pitkä luettelo parhaista käytännöistä, joita sinun tulee etsiä teemasta. Jotkut yleisimmistä huonoista käytännöistä ovat liian riippuvaisia ​​JQuerysta, liian monen CSS/JS:n lataaminen, kun niitä ei tarvita, suuri teemakoko ja paljon muuta. Voit aina käyttää työkalua, kuten Keltainen laboratorio, testataksesi demoa.

Jos käytät WordPressiä, voit tarkistaa luettelon nopeimmat WordPress-teemat.

3. Optimoi kuvat

Kuvat ovat siistejä. Ne tekevät sisällöstä niin houkuttelevan. Mutta ne voivat olla taakka, jos niitä ei ole optimoitu. Suuret kuvat, kuten 3 Mt, vaikuttavat varmasti nopeuteen. Ja jos nämä kuvat ovat näkyvissä, kun sivustollasi vierailet ennen vierittämistä, ne vaikuttavat varmasti LCP-mittariisi.

Totuus on, että optimoimattomat kuvat lisäävät sivusi kokoa. Mitä suurempi sivun koko on, sitä kauemmin sen lataaminen kestää.

Itse pidän parempana optimoida jokainen kuva ennen niiden lataamista. En käytä mitään ulkoista palvelua kuvien optimointiin. Kuitenkin, jos käytät WordPressiä tai vastaavaa CMSOn olemassa liitännäiset ja ratkaisuja kuvien automaattiseen optimointiin. On myös pilviratkaisuja riippumatta siitä, mitä käytät.

4. Poista taustakuvia tai pienennä niiden kokoa

Taustakuvat ovat yleensä erittäin suuria. Ja se voi hidastaa latausaikaasi, koska se on ladattava ensin, ennen kuin mielekästä sisältöä näytetään.

Voit poistaa taustakuvan kokonaan saadaksesi nopeamman verkkosivuston. Jos ne ovat niin tärkeitä, harkitse niiden optimointia mahdollisimman pieniin kokoihin tai kuvioiden käyttämistä kuvien sijaan.

5. Käytä selaimen välimuistia

Jos sinulla on paljon uskollisia lukijoita, sinun kannattaa harkita selaimen välimuistia. Kun käyttäjä vierailee verkkosivustollasi ensimmäistä kertaa, selain tallentaa verkkosivuston välimuistiin. Joka toisella käynnillä se latautuu hetkessä. Tämä voi parantaa huomattavasti FID:tä ja LCP:tä toisesta käynnistä ylöspäin.

WordPress-käyttäjille useimmat välimuistilaajennukset voivat auttaa sinua saavuttamaan tämän.

6. Pienennä JavaScript ja lykkää käyttämätöntä JavaScriptiä

Vaikka JavaScript on hämmästyttävä, se usein estää renderöinnin. Tämä tarkoittaa, että se voi vaikuttaa latausaikaan ja lopulta FID:hen.

Yritä pienentää JavaScriptiä poistamalla välilyönnit ja kommentit pienentääksesi tiedostokokoa. Varmista myös, että lykkäät ei-kriittistä JavaScriptiä. Tämän pitäisi parantaa FID:täsi.

WordPress-käyttäjille on olemassa laajennuksia, kuten Autoptimize, WP Rocket ja muut, jotka voivat tehdä tämän puolestasi.

7. Aseta AdSense-kokomäärite

Jos käytät AdSensea verkkosivustollasi ja kamppailet CLS:n kanssa, tämä voi ratkaista kaikki ongelmasi. Se teki minulle ja sen pitäisi tehdä sinulle.

Jos sinulla on mainosyksikkö lähellä otsikkoa, joka näkyy, kun käyttäjä vierailee, yksi ongelma on, että mainos ei välttämättä lataudu heti. Se voi latautua sen jälkeen, kun sivu on jo ladattu, ja kun latautuu, asettelussa tapahtuu muutos. Tämä on hyvin yleistä responsiivisissa mainosyksiköissä. Kun näin tapahtuu, on mahdotonta läpäistä CLS-mittaria.

Paras tapa käsitellä tämä on muokata AdSense-koodiasi hieman. Ei hätää, se on hyvin laillista. Määritä vain mainoksen koko-attribuutti, erityisesti korkeus. Kun olet tehnyt tämän, et enää huomaa asettelun muutosta mainoksen latautuessa.

Alla on esimerkki responsiivisesta mainosyksiköstä, jota käytin blogi aivan otsikon alapuolella. Olen korvannut julkaisijatunnukseni ja mainospaikkani XXXXXX:lla. Huomasin, että lisäsin korkeusmääritteen (min-height: 300px). Sillä hetkellä, kun tein sen, kaikki CLS-ongelmat olivat poissa ikuisesti.

<script async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Header ad -->
<ins class="adsbygoogle"
     style="display:block; min-height: 300px"
     data-ad-client="ca-pub-xxxxxxxxxxxxxx"
     data-ad-slot="xxxxxxxxxx"
     data-ad-format="auto"
     data-full-width-responsive="true"></ins>
<script>
     (adsbygoogle = window.adsbygoogle || []).push({});
</script>

Tämä varaa sivulle kyseisen koon. Joten aina kun mainoksia näytetään, asettelua ei tapahdu, koska olet jo määrittänyt koon.

8. Aseta kuvillesi ja muulle medialle kokomäärite

Aivan kuten mainoksissa, kuvat ja muu media voivat aiheuttaa asettelun muutoksia, kun ne ladataan verkkosivustollesi. Saatat vain lukea jotain, sitten kuva latautuu ja yhtäkkiä tapahtuu asettelun muutos, lukemasi on poissa näkyvistä ja näet vain jotain muuta tai napsautat jotain muuta vahingossa.

Voit välttää nämä kaikki asettamalla mediatiedostoillesi koko-attribuutin. CLS-mittarisi on iloinen siitä, että teit sen.

9. Lazy Load kuvia.

Olet ehkä nähnyt neuvoja PageSpeed ​​Insightista lykätä näytön ulkopuolisia kuvia. Se tarkoittaa yksinkertaisesti kuvien laiska lataamista.

Laiska lataaminen pienentää sivun kokoa ja lyhentää myös sivusi latausaikaa, kun käyttäjä vierailee. Mikä on hyvä CWV-mittauksille.

Tämä auttaa erityisesti parantamaan LCP:tä.

10. Optimoi CSS minimoimalla ja luomalla kriittistä CSS:ää

CSS saa verkkosivuston näyttämään siistiltä, ​​mutta suuri CSS-tiedosto voi olla suuri ongelma, koska se viivästyttää sivun näyttämistä käyttäjälle.

Kun käyttäjä vierailee verkkosivustollasi, selain normaalin toiminnan mukaisesti viivyttää verkkosivusi näyttämistä käyttäjälle, kunnes se on ladannut, jäsentänyt ja suorittanut kaiken CSS:n, johon verkkosivusi otsikossa viitataan. Jos sinulla on suuri CSS-tiedosto, tämä voi olla suuri ongelma. Se hidastaa sivustoasi.

Kriittinen CSS voi auttaa lataamalla vain sen CSS:n, joka tarvitaan sivun latautumiseen. Loput CSS:stä voidaan ladata asynkronisesti.

Myös CSS:n pienentäminen poistamalla välilyönnit ja kommentit tiedostokoon pienentämiseksi voi auttaa.

Voit myös poista käyttämätön CSS. Jos käyttämäsi palvelu työntää käyttämättömiä CSS-tiedostoja, on turvallista poistaa ne.

Jos käytät WordPressiä, on olemassa laajennuksia, kuten WP Rocket, LiteSpeed ​​Cache, FlyingPress ja muut, jotka voivat auttaa sinua saavuttamaan tämän.

11. Ota käyttöön AdSensen älykäs lataus

Tämä menetelmä voi eliminoida lähes kokonaan kaikki haasteet, jos AdSense on vastuussa verkkosivustosi hidastamisesta.

Tässä on kyse AdSensen lataamisesta älykkäällä tavalla. AdSensea ei ladata, ennen kuin käyttäjä suorittaa toiminnon, kuten vierityksen tai napsautuksen. Tämä pidentää huomattavasti latausaikaa ja AdSensen vaikuttamia Core Web Vitals -toimintoja.

On monia WordPress-laajennuksia, jotka voivat auttaa sinua tekemään tämän, esimerkiksi WP Rocket ja Flying Scripts. Tämä menetelmä ei tietääkseni riko Google AdSense -käytäntöä.

Huomautus: Vaikka tämä menetelmä voi auttaa parantamaan havaittua nopeutta ja sivupisteitä, se voi vaikuttaa AdSense-tuloihisi. Suosittelen, että suoritat kokeilun varmistaaksesi, onko se sen arvoista

12. Käytä System Stack -fonttia, jos voit

Fontit lisäävät latausaikaa mille tahansa verkkosivustolle. Ja jos verkkosivuilla ei ole kuvia, tekstilohkosi saattaa olla vastuussa LCP-luokituksestasi. Tällöin fonttisi vaikuttaa suoraan LCP-pisteeseesi.

Vaikka Google Font ja Font Awesome paranevat jatkuvasti, järjestelmäpinofontin käyttö tarjoaa merkittävän parannuksen. Vaikka ei niin mielikuvituksellista laitteesta riippuen.

13. Käytä CDN:ää

Jos sinulla on käyttäjiä eri puolilta maailmaa, käytä a CDN voi auttaa parantamaan nopeuttasi ja epäsuorasti Core Web Vitals -mittareitasi.

Yksinkertaisella selityksellä varustettu CDN tekee useita kopioita verkkosivustostasi ja tallentaa ne useisiin POP-pisteisiin (Point of Presence) eri puolilla maailmaa. Kun joku pyytää verkkosivustoasi, se palvelee verkkosivustoasi lähimmästä paikasta.

Jos sivustosi on esimerkiksi isännöity Yhdysvalloissa ja sinulla on vierailija Yhdistyneestä kuningaskunnasta, sen sijaan, että noutaisit sivustosi Yhdysvalloista, CDN palvelee sivustoasi Isosta-Britanniasta. Sen vaikutus on nopea toimitus. Nopeus.

Voit tarkistaa parhaat CDN:t siellä.

14. Määritä DNS-esihaku

Jos luotat ulkoiseen palveluun, kuten CDN:ään, verkkosivustosi toimittamiseen, saatat tarvita määritä DNS-esihaku DNS-haun aiheuttaman viiveen minimoimiseksi.

DNS-esihaku esihakee DNS:n ennen kuin sitä kutsutaan. Joten se latautuu hetkessä, kun sitä vihdoin kutsutaan.

15. Optimoi kolmannen osapuolen komentosarjat

Varmista, että jotkin sivustollasi käyttämät palvelut eivät lisää kolmannen osapuolen komentosarjoja, jotka voivat hidastaa sivustojasi.

Voit korvata ratkaisun kolmannen osapuolen pyynnöillä, mikä hidastaa sivustoasi paremmalla ratkaisulla.

Mitä tulee Google AdSenseen, toiselle kolmannen osapuolen skriptille, et voi tehdä juuri mitään. Paras käytäntö on käyttää enintään kolmea mainosta yhdistettynä sivulla. Vältä osuvaa sisältöä, koska se tuo alhaiset tulot, mutta lisää latausaikaa.

16. Poista AdSense sivun yläosasta

Tämä neuvo perustuu kokeiluihin. Jos kaikki tietosi ovat hyviä hakukonsolin raportissa LCP:tä lukuun ottamatta, varmista ensin, että kuvasi ja kirjasimesi on optimoitu. Jos ne on optimoitu ja LCP epäonnistuu edelleen, AdSense saattaa olla vastuussa.

Jos sinulla on varaa, poista AdSense sivun yläosasta kuukaudeksi ja katso, häviääkö ongelma.

Jos et halua poistaa sitä, voit viivyttää sitä manuaalisesti tai lisäosan, kuten Flying Scripts, avulla.

17. Vaihda AMP:hen

AMP tarkoittaa Accelerated Mobile Pages -sivuja. AMP:n ideana on optimoida verkkosivut latautumaan nopeammin mobiililaitteilla. Ja tietysti AMP avoimen lähdekoodin projekti aloitti Google.

Vaikka AMP:n oli alun perin tarkoitus nopeuttaa mobiilisivuja, se voi myös nopeuttaa työpöytäsivuja.

AMP-sivut ovat jatkuvasti nopeampia kuin mobiili- tai työpöytäsivut, havainteemme mukaan joskus jopa yli 100 %.

Jos verkkosivustosi ainoa kaupallistamisstrategia on Google AdSense, sinun kannattaa harkita koko verkkosivustosi vaihtamista AMP:hen. Olen itse huomannut, että omistamassani blogissa AdSense AMP-sivuilla tuottaa toisinaan enemmän tuloksia kuin mobiili- ja pöytätietokoneissa!

Yhteenveto

Core Web Vitals voi auttaa sinua parantamaan verkkosivustoasi käyttäjillesi, ei vain Googlelle. On hyvin yleistä, että laboratoriotietojen testitulos on hyvä, mutta kenttätietojen huono tulos.

Tämä johtuu käyttäjiesi rakenteesta. Jos suurin osa käyttäjistäsi on kotoisin paikoista, joissa Internet on hidas, olet ehkä tehnyt hyvää työtä optimoinnissasi, mutta epäonnistut silti kenttätiedoissa.

Mfon Abel Ekene

Mfon Abel Ekene

Nautin hyödyllisen sisällön luomisesta. Intohimoni on auttaa Internet-väestöä löytämään tarvitsemansa ohjaamalla heitä oikeaan suuntaan. Sitä rakastan tehdä, ja teen useita tunteja tutkimusta ja testausta varmistaakseni, että teen juuri sen TargetTrendin sisällön kautta.

Artikkelit: 51

Vastaanota teknisiä tavaroita

Tekniset trendit, startup-trendit, arvostelut, online-tulot, verkkotyökalut ja markkinointi kerran tai kahdesti kuukaudessa