Kuulostaako jokin seuraavista tutuilta: verkkosivustosi näyttää aina olevan hidas, sivut latautuvat sattumanvaraisesti sivun ympärillä pomppivilla elementeillä tai et näytä tuottavan (ja pitävän) odotettua orgaanista liikennettä?
Mikä tahansa näistä oireista voi olla merkki siitä, että sinun on tarkistettava WordPress-verkkosivustosi ydinverkkotiedot.
Core web vitals on vuoden 2020 Google-aloite, jonka tarkoituksena on auttaa verkkosivustojen omistajia ja hakukoneita pääsemään samalla sivulla käyttökokemusten parantamiseen.
Sellaisena se, miten verkkosivustosi pisteytyy näillä mittareilla, ei vain vaikuta suoraan hakukoneesi sijoituksiin, vaan voi myös antaa sinulle välähdyksen siitä, pitävätkö kävijät verkkosivustoasi miellyttävänä vai turhauttavana käyttää.
Mutta mitä tarkalleen ovat verkkosivuston ydinverkot? Miksi heillä on merkitystä? Ja miten voit varmistaa, että verkkosivustojesi ydintoiminnot ovat naarmuuntuneet?
Tässä lopullisessa oppaassa kerromme kaiken, mitä sinun tarvitsee tietää WordPress-verkkosivustosi keskeisten verkkovitaalien parantamisesta nyt ja tulevaisuudessa.
Tässä on tiivistelmä artikkelin selaamiseksi:
Mitä ovat ydinverkkovitaalit?
Kuten voit odottaa, on haastavaa keittää jotain niin subjektiivista kuin käyttökokemus objektiivisiin mittareihin, joita voidaan mitata ja verrata.
Google yrittää kuitenkin tehdä juuri tämän, ainakin kun on kyse siitä, miten verkkosivuston suorituskyky vaikuttaa käyttökokemukseen.
Omissaan sanat: "Web Vitals on Googlen aloite tarjota yhtenäisiä ohjeita laadukkaista signaaleista, jotka ovat välttämättömiä hyvän käyttökokemuksen tarjoamiseksi verkossa."
Google on kehittänyt keskeisen tärkeän verkkotietonsa keskittyä käyttökokemuksen kolmeen eri puoleen:
- Latausaika / nopeus: Tämä on suoraviivaisin puoli, joka viittaa suoraan siihen, kuinka nopeasti / hitaasti sivu ja sen sisältö latautuvat. Yli puolet mobiilikäyttäjistä hylkää sivun, jonka lataaminen kestää yli 3 sekuntia. Tässä nopeatempoisessa maailmassa käyttäjät ovat yhä kärsimättömämpiä, mikä tekee verkkosivustojen hitaasta lataamisesta tärkeän turhautumisen.
- Vuorovaikutteisuus: Interaktiivisilla elementeillä, kuten painikkeilla, on usein viivästynyt vasteaika, kun sisältö latautuu taustalla. Mitä nopeammin sivusi elementtejä voidaan käyttää, sitä parempi on yleinen käyttökokemus.
- Visuaalinen vakaus: Joskus ladattaessa hidasta tai optimoimatonta verkkosivua elementit hyppäävät ruudulle, koska ne ladataan väärässä järjestyksessä tai yksinkertaisesti siksi, että joidenkin elementtien lataaminen kestää paljon kauemmin kuin toiset. Tämä voi saada käyttäjät ryhtymään virheellisiin toimiin ja pelkkä näyttää huonolta.
Google on perustanut kolme pääverkkoelementtiä, jotka liittyvät kaikkiin näihin tekijöihin. Nykyinen vuoden 2020 alkupuolella käyttöön otettu ydinverkkoelementti on seuraava:
Suurin sisältöinen maali (LCP)
Tämä on suurin elementti, joka ladataan verkkosivun näkyvälle alueelle (kaikki mitä näet ennen vieritystä alaspäin). LCP vaikuttaa suoraan siihen, kuinka nopeasti verkkosivusi näyttää kuormitus.
Google suosittelee 2.5 sekunnin LCP: tä, mikä tarkoittaa, että suurimman elementin tulisi latautua tänä aikana.
Esimerkiksi alla olevassa kuvassa purppuranvärinen taustakuva on LCP:
Monilla nykyaikaisilla verkkosivuilla LCP on yleensä täysleveä esillä oleva kuva, joka liittyy sivun tai blogiartikkelin mukana.
Koska tämä on nyt niin suosittu käytäntö, se on yleinen WordPress-sivuston ydinverkko, jota on parannettava. Joten LCP: hen vaikuttaa eniten hidas palvelin tai suurikokoisten tiedostojen käyttö, joiden lataaminen kestää kauan.
Google itse listaa seuraavat keskeiset tekijät, jotka vaikuttavat LCP: hen:
- Hidas palvelimen vasteaika
- Renderöinti estävä JavaScript ja CSS
- Resurssien latausajat
- Asiakaspuolen renderointi
Ensimmäinen syöttöviive (FID)
Yksinkertaisesti sanottuna tämä mittaa aikaa, joka kuluu ennen kuin interaktiiviset elementit voivat toteuttaa tapahtumia. Esimerkiksi kuinka kauan kestää ensimmäisen kerran, kun käyttäjä napsauttaa linkkiä tai painiketta, ennen kuin toiminto voidaan suorittaa?
Viive voi johtua siitä, että selain on kiireinen sisällön (kuten sivuelementtien tai JavaScriptin) lataamisessa tai koodin suorittamisessa, kun käyttäjä napsauttaa painiketta tai linkkiä.
Google mittaa vain ensimmäisen syöttöviiveen, koska vuorovaikutteisuusongelmia esiintyy yleensä sivua ladattaessa.
Google suosittelee alle 100 ms: n (tai 0.1 s) aikaa. FID kattaa interaktiivisuus ydinverkkoelementtien näkökulma.
Sivusi JavaScript tai CSS vaikuttaa eniten FID: ään, varsinkin kun lataat koodia suoritettaessa sivun latautumisen yhteydessä.
Kumulatiivinen asettelun muutos (CLS)
CLS yrittää mitata odottamattomia muutoksia sivun asettelussa sivua ladattaessa. Ensiluokkainen esimerkki on sivu, jossa on kaksi painiketta toistensa alla.
Aivan kuten haluat napauttaa alaosaa, toinen elementti latautuu ruudun yläosaan, jolloin napautat vahingossa ensimmäistä painiketta sen sijaan.
Olemme kaikki kokeneet tämän ongelman ja turhautumisen, joka liittyy väärän toiminnan toteuttamiseen tai väärään linkkiin siirtymiseen.
Tässä on esimerkki Googlelta. Tällöin painike latautuu jo ladattujen harmaiden ja vihreiden osien väliin liikuttamalla vihreää osaa alaspäin:
Vaikka käsite on yksinkertainen, matematiikka voi muuttua hieman monimutkaiseksi. Kullekin elementille CLS laskee elementin koon ja etäisyyden, jonka ne kuljettavat, murto-osana koko näytön koosta.
Nämä kaksi arvoa kerrotaan sitten, jotta saadaan kunkin elementin kokonaisvaikutuspisteet. Nämä vaikutuspisteet lisätään sitten yhteen, jotta saadaan sivun kokonais CLS, jonka arvo on välillä 0 ja 1.
Google suosittelee, että verkkosivustojen tulisi pyrkiä CLS-arvoon 0.1 tai vähemmän.
Miksi ydinverkkovitalisi ovat tärkeitä WordPress-verkkosivustollesi?
On useita syitä sille, miksi WordPress-verkkosivustosi ydinverkko voi kertoa onnistumisesta tai epäonnistumisesta. Siksi he kutsuvat heitä käyttäjäkeskeisiksi suorituskykymittareiksi.
Parantamalla ydinosaamistasi tarjoat parempia käyttökokemuksia ja teet verkkosivustostasi käyttäjäystävällisemmän.
Tämä yksin on tärkeä useista syistä:
- Vähennä välitön poistumisprosentti pitämällä enemmän käyttäjiä verkkosivustollasi
- Tee parempia ensimmäisiä ja kestäviä vaikutelmia käyttäjillesi
- Luo luotettava ja luotettava kuva verkkosivustostasi
- Muunna enemmän kävijöitä asiakkaiksi
- Tarjoa miellyttävämpiä kokemuksia uusille ja nykyisille käyttäjillesi
Jos verkkosivustosi lataaminen kestää kauan, käyttäjät ovat taipuvaisia hylkäämään sen ja siirtymään seuraavaan. Itse asiassa, 53% matkaviestimen käyttäjistä hylätä verkkosivusto, jonka lataaminen kestää yli 3 sekuntia.
On kuitenkin toinen syy, miksi ydinverkkoelementit ovat ratkaisevan tärkeitä verkkosivustosi menestykselle: Google käyttää niitä nyt myös sijoitussignaalina luokitellessaan verkkosivuja hakukoneidensa tuloksille.
Tämä tarkoittaa, että WordPress-verkkosivustosi ydinverkkopisteiden korkeus vaikuttaa suoraan siihen, kuinka korkealle sijoitat Google SERPs -sivustoilla.
Kuten luultavasti tiedät, korkea sijoitus Googlessa (ja etenkin ensimmäisellä sivulla) on yksi parhaista tavoista saada lisää orgaanista liikennettä.
Kuinka testata WordPress-verkkosivustosi ydinverkkovideoita
Nyt kun sinulla on hyvä käsitys siitä, mitkä keskeiset verkkovitaalit ovat ja miksi ne ovat tärkeitä, katsotaanpa nopeasti työkalut, joiden avulla voit paljastaa verkkosivustosi suorituskyvyn tältä osin.
Näiden työkalujen avulla voit paljastaa kaikki ajankohtaiset ongelmat ja mahdollisuudet parantaa pisteitäsi.
Keskitymme työkaluihin, jotka ovat useimpien verkkosivustojen omistajien helposti saatavilla ja käytettävissä, jotta voit alkaa käyttää niitä tänään verkkosivustosi parantamiseen.
majakka
LightHouse on suoraan Chromeen sisäänrakennettu verkkokehitystyökalu, jonka avulla voit testata WordPress-verkkosivustosi ydinverkkoa.
Pääset LightHouseen millä tahansa verkkosivustolla painamalla "F12". Tämä avaa tämän tyyppisen sivun, jossa on esikatselu verkkosivustosta vasemmalla ja LightHouse-konsoli oikealla:
Voit avata LightHouse-suoritustarkastustyökalun napsauttamalla “>>” yläpalkissa ja sitten "Majakka." Tämä vie sinut alla olevalle sivulle.
Jos haluat testata suorituskykymittareitasi tärkeimpien verkkovitaalien suhteen, sinun kannattaa tarkistaa "Esitys" ja valitse sitten, haluatko testata sivua mobiililaitteelle vai työpöydälle. Klikkaus "Luo raportti" saadaksesi tulokset:
Pisteet näyttävät tältä ja näet erittelyn yksittäisistä tiedoista alla:
Hyödyllinen, pisteiden alapuolella LightHouse tuo esiin myös mahdollisuuksia, joilla voit parantaa sivusi suorituskykyä:
Alla on lisää diagnostisia tuloksia. Nämä tekijät voivat auttaa sinua edelleen optimoimaan WordPress-verkkosivustosi ydinverkkoelementtejä parantamalla yleistä suorituskykyäsi ja optimointiasi:
Majakka ei arvioi suoraan FID: tä. Kokonaisestoaika (TBT) ja aika interaktiiviseen (TTI) liittyvät kuitenkin läheisesti FID: ään. Näiden muuttujien parantamisen pitäisi parantaa myös FID: täsi.
Esimerkiksi siinä todellisuudessa tuodaan esiin, mikä oli suurin LCP-elementtisi, sivusi koko, suuret asettelunsiirrot ja pääketjun tehtävät, jotka saattavat haitata vuorovaikutteisuutta.
PageSpeed Insights
PageSpeed Insights on toinen helppokäyttöinen työkalu. Sinun tarvitsee vain mennä PageSpeed Insights ja liitä linkki analysoitavalle verkkosivulle:
Tulokset ovat hyvin samanlaisia kuin LightHouse. Tärkein ero on, että PageSpeed Insights tarjoaa myös todellisia tuloksia verkkosivustoille, joilla on riittävästi liikennettä:
Kuten näette, PageSpeed Insights mittaa suoraan FID-tunnuksesi ja näyttää sinulle, mihin prosenttipisteeseen verkkosivustosi kuuluu.
Se kertoo myös, onko verkkosivustosi läpäissyt ydinverkkoarvioinnin yhteenvedon viimeisen 28 päivän aikana reaalimaailman tietojen avulla.
Google katsoo, että verkkosivustot, jotka kuuluvat vähintään 75. prosenttipisteeseen kaikilla mittareilla, läpäisevät arvioinnin.
Täältä löydät samat laboratorioihin perustuvat tulokset, jotka LightHouse tarjoaa, sekä parannus- ja diagnostiikkamahdollisuudet:
Sen lisäksi, että tarkastelet yksittäisiä pisteitä, sinun tulisi myös pyrkiä saavuttamaan kokonaispisteet 75+.
Google Search Console
Voit myös luoda verkkosivustollesi tehokkuusraportteja Google Search Consolen avulla. Ensin on kuitenkin luotava tili ja rekisteröitävä verkkosivustosi konsolissa.
Liittyvät sanat: Kuinka testata verkkosivustosi nopeutta GTmetrixin avulla?
Kuinka parantaa WordPress-verkkosivustosi ydinverkkovideoita
On tärkeää ymmärtää, että monet näistä korjauksista auttavat parantamaan useampaa kuin yhtä CWV-mittaria. Siksi on tärkeää lähestyä kokonaisvaltaisesti CWV: n optimointia parhaiden tulosten saavuttamiseksi ja parhaan käyttökokemuksen tarjoamiseksi.
Tästä huolimatta ilmoitamme, missä tietty optimointi koskee suoraan tiettyä CWV: tä:
Paranna palvelimen hitaita vasteaikoja
Tämä on ensimmäinen ja tärkein asia, johon sinun on puututtava, kun yrität parantaa verkkosivustosi suorituskykyä. Sivujen optimoinnilla ei ole väliä, jos verkkosivustoasi isännöidään hitaalla palvelimella, se toimii silti huonosti.
Palvelinten vasteaikojen parantamisella on ehkä suurin vaikutus LCP: hen. Mitä nopeammin asiat latautuvat palvelimelta, sitä todennäköisemmin myös LCP latautuu nopeasti.
Se hyödyttää kuitenkin välillisesti myös kaikkia muita mittareita yksinkertaisesti vähentämällä latausaikaa.
Voit yleensä selvittää, onko palvelimesi hidas, jos suurin osa verkkosivustosi sivuista latautuu hitaasti, jos suorituskyky on jatkuvasti hidasta etupuolella tai taustalla.
Jos käytät jotain yllä olevista työkaluista suorituskyvyn tarkastamiseen, se on myös hyvä indikaattori, jos "Palvelimen alkuperäinen vasteaika oli lyhyt ” putoaa punaiseksi:
Hosting-resurssien liikakäyttö
Voit myös tarkistaa resurssien käytön isännän hallintapaneelissa nähdäksesi, hyödynnätkö resursseja, kuten prosessoria, RAM-muistia, I / O-toimintoja, ainutlaatuista käyntibudjettia vai kaistanleveyttä, liikaa.
Toiminta lähellä näitä kynnyksiä johtaa väistämättä hitaampaan suorituskykyyn. Jos saavutat tai ylität nämä kynnysarvot, isäntänne saattaa tahallaan kaventaa tiliäsi. Tämä tapahtuu erityisen todennäköisesti jaetuissa isännöintipalveluissa.
Esimerkiksi tässä on kuvakaappaus resurssin käytöstä a Bluehost tili:
Monet parhaat WordPress-palveluntarjoajat tarjoavat useita jaettuja hosting-palveluja sekä VPS-paketteja, kuten A2Hosting, Bluehost, GoDaddyja HostGator.
Voit myös mennä tehokkaan WordPress-palveluntarjoajan, kuten WPEngine or Kinsta jotka ovat vähän kalliimpia, mutta tarjoavat paljon skaalautuvia WordPress-paketteja.
Voit nähdä, että suurin osa prosenttiosuuksista on edelleen suhteellisen terveillä alueilla.
Voit yrittää ratkaista tämän ongelman kahdella tavalla:
- Pienennä verkkosivustosi jalanjälkeä: Jos kamppailet tietolähteiden kanssa, saatat nähdä parannusta optimoimalla verkkosivustosi käyttämällä joitain muita tässä lueteltuja korjauksia. Tämä tarkoittaa tarpeettoman koodin, laajennusten, teemojen tai kaiken muun poistamista, mikä saattaa rasittaa resurssien käyttöä. Useiden verkkosivustojen ajamisella yhdellä jaetulla isännöintitilillä voi olla valtava vaikutus, ja joudut ehkä joutumaan purkamaan jotkut tai siirtämään ne toiselle tilille / palvelimelle.
- Päivitä käyttäjätilisi: Liikaa käytetyt resurssit voivat olla merkki siitä, että olet ylittänyt nykyisen tilisi rajat. Saattaa olla oikea aika päivittää suunnitelma tai harkita siirtymistä isännöintiin omistetuilla resursseilla, kuten VPS tai oma palvelin. Vaikka kaksi viimeksi mainittua vaihtoehtoa ovat kalliimpia, on syytä investoida, jos kasvatat online-liiketoimintaa.
Käytä CDN: ää
CDN (Content Delivery Network) on maailmanlaajuinen palvelinverkko. Kun rekisteröit verkkosivustosi CDN: llä, se jakaa verkkosivustosi sisällön useille palvelimille eri alueilla.
Jos kyseisen alueen käyttäjä vierailee verkkosivustollasi, se lataa sisällön lähimmästä palvelimesta, mikä parantaa sivujen latausaikoja.
Hyvä uutinen on, että useimmat hosting-palvelut tarjoavat nykyään ilmaisen CDN: n. Yleisin on suositun CDN: n ilmainen taso CloudFlare.
Joten ensinnäkin, tarkista ensin, onko tililläsi CDN ja onko se määritetty. Tuen pitäisi pystyä auttamaan sinua tässä.
Tämän jälkeen voit myös helposti päivittää premium-CDN-tiliin, jotta kaistanleveys olisi entistäkin parempi, nopeus parempi ja turvallisuutta lisää.
Liittyvät sanat: Kuinka nopeuttaa WordPress-sivustoa?
Välimuisti omaisuutesi
Välimuistiin tallentaminen tarkoittaa verkkosivustosi sisällön (kuten HTML-tiedostojen) tallentamista reuna-palvelimille, joissa kävijät yleensä käyttävät niitä.
Tämä estää verkkosivuston luomisen uudelleen tyhjästä joka kerta. Rekisteröimällä verkkosivustosi CDN: llä pitäisi jo parantaa välimuistiasi.
Temppu on, että haluat kävijöiden saavan välimuistiversion verkkosivustoltasi, kunhan mitään ei päivitetä verkkosivustollasi, mutta haluat heidän saavan uuden version heti, kun teet muutoksia sivustoosi.
Tämä voi olla hankalaa tehdä manuaalisesti, varsinkin jos haluat käyttää selaimen välimuistia.
Jos sinulla on WordPress-verkkosivusto, paras veto on käytä välimuistiliittymää, Kuten WP Rocket, Välimuistin Enabler, Komeetan välimuisti, Jne
Esihakea kolmannen osapuolen sisältö
Jos lataat sisältöä kolmansien osapuolien verkkosivustoilta ennen LCP: täsi (tai jopa LCP: ksi), sinun kannattaa saada tämä pois tieltä mahdollisimman pian.
Ensinnäkin voit havaita, vaikuttaako kolmannen osapuolen sisältö sivuihisi, jos PageSpeed Insights korostaa seuraavaa ongelmaa:
Tässä tapauksessa lataamme vain kolmannen osapuolen fontteja, joten kaikki on hyvää.
WordPressissä tämä ongelma johtuu yleensä kolmansien osapuolten laajennuksista, kuten Google Analytics, WooCommerce, Jne
Ilmeinen ratkaisu olisi yksinkertaisesti poistaa laajennus tai kolmannen osapuolen koodi, jos se ei ole välttämätöntä. Pääsääntöisesti sinun ei pitäisi koskaan jättää käyttämättömiä laajennuksia asennettuna WordPress -asennukseesi.
Voit kuitenkin lisätä myös seuraavat mukautetut merkinnät verkkosivustosi sivuille:
<link rel="preconnect" href="https://example.com" />
Tai:
<link rel="dns-prefetch" href="https://example.com" />
Voit yksinkertaisesti korvata href-verkkotunnuksen käyttämäsi palvelun verkkotunnuksella, voit ilmoittaa selaimelle aikomuksestasi.
Voit ladata videoita esimerkiksi YouTubesta vain vaihtamallahttps://youtube.com. ” Löydät yleisemmin käytettyjä verkkotunnuksia tätä.
Jotkut välimuistilaajennukset, kuten WP Rocket, voit myös noutaa kolmannen osapuolen sisältöä helposti käytetystä hallintapaneelista.
Optimoi JavaScript ja CSS
JavaScript- tai CSS-tiedostojen lataaminen voi myös viivästyttää aikaa, joka kuluu LCP-elementin lataamiseen ja renderointiin sivullesi.
Selain viivyttää HTML-sivun hahmontamista, jos se kohtaa ulkoisia tyylitaulukoita tai JavaScriptiä tunnisteet ennen sisältöä.
On olemassa useita ratkaisuja, joiden avulla voit rajoittaa JavaScriptin ja CSS: n vaikutuksia verkkosivuihisi:
- Poista renderointia estävät resurssit
- Minimoi CSS ja JavaScript
- Yhdistä CSS- ja JavaScript-tiedostot
- Optimoi CSS- ja JavaScript-tiedostojen toimitus
JavaScriptin ja CSS: n optimointi hyödyttää enimmäkseen FID: täsi poistamalla koodin, joka suoritetaan pääkierteessä, mikä estää verkkosivustosi vuorovaikutteisuuden.
Sillä on kuitenkin myös merkitys LCP: n latausaikojen lyhentämisessä, koska voit poistaa LCP: tä estävät kohteet latautumasta ensin.
Jälleen kerran PageSpeed Insights kertoo hyödyllisesti, pystytkö parantamaan tältä osin ongelman aiheuttaneita tiedostoja / kyselyjä sekä mahdollisia säästöjä:
Esimerkiksi tässä näemme joukon CSS- ja JavaScript-tiedostoja, jotka estävät sivua renderoimasta sisältöä.
Saatat nähdä myös nämä kehotteet CSS: n ja JavaScriptin minimoimiseksi:
Tai nämä mahdollisuudet poistaa käyttämätön CSS ja JavaScript:
Jos käytät majakkaa suorituskyvyn tarkastustyökaluna, saatat myös nähdä: "Poista käyttämätön JavaScript ”:
Joidenkin yllä olevien kuvien mahdollisuuksista näet mahdollisen säästön millisekunteina.
Tämä on tärkeää, koska se näyttää ajan, jonka suorituskoodi saattaa estää verkkosivusi hahmontavan pääketjun ja osallistuvan suoraan FID: ään.
WordPress-verkkosivuston omistajana paras panoksesi on, että laajennus tekee kovan työn optimoidaksesi WordPress-verkkosivustosi keskeiset verkkoelementit.
Ellei sinulla ole kokemusta verkkokehityksestä, voit vaikuttaa vakavasti verkkosivustosi toimintaan tai ulkonäköön muuttamalla taustalla olevaa koodia manuaalisesti.
Jälleen kerran, kuten laajennus WP Rocket (maksettu) tai Autoptimize (ilmainen) tulee tämän ominaisuuden sisäänrakennettu.
Se antaa sinulle vaihtoehtoja:
- Minify CSS- ja JavaScript-tiedostoja
- Yhdistä CSS-tiedostot ja yhdistä JavaScript-tiedostot
- Sulje pois tarpeettomat / käyttämättömät CSS-tiedostot
- Lykkää tiedostoja, jotta niitä ei enää estetä
Tässä on esimerkki Autoptimize-käyttöliittymästä käytettävissä olevilla asetuksilla. CSS: lle ja HTML: lle on samanlaisia vaihtoehtoja:
On mahdollista, että näiden ominaisuuksien käyttö saattaa häiritä sivusi ulkonäköä. Joten tarkista aina, mikä vaikutus on, ja ota sitten asetukset käyttöön / poista ne käytöstä vastaavasti.
Voit tehdä suurimman osan tästä myös manuaalisesti muokkaamalla merkintää, vaikka sinun on tiedettävä, mitä olet tekemässä, jotta et sekoita sivujesi renderöintiä.
On myös kehittyneempiä korjauksia, jotka eivät todennäköisesti aiheuta suuria ongelmia, kuten "Vältä vanhan JavaScriptin tarjoamista moderneille selaimille" ja "Poista kopiot JavaScript-paketeista" mutta sinun on vain pidettävä silmällä näitä mahdollisia ongelmia suoritettaessa suorituskykytestiä.
Kuinka parantaa CLS-pisteitäsi
CLS on suhteellisen ainutlaatuinen WordPress-ydinverkko, koska se ei ole riippuvainen todellisista latausaikoista tai parantaa verkkosivustosi nopeutta. Sen sijaan se luottaa enemmän hyvien käytäntöjen käyttämiseen sen varmistamiseksi, että sivusi elementit latautuvat oikeassa järjestyksessä.
Verkkosivustosi latausaikojen yleinen nopeuttaminen voi kuitenkin heikentää havaittua CLS: ää. Tämä johtuu siitä, että jos sivusi latautuvat todella nopeasti, käyttäjät eivät todennäköisesti huomaa epävakautta ja vähemmän todennäköisesti häiritse heitä verkkosivustosi käytössä.
Seuraavassa kuvataan joitain konkreettisia tapoja vähentää CLS: ää WordPress-sivuillasi. Sinun tulisi kuitenkin lukea koko Google-asiakirja CLS: n optimoinnista saadaksesi kuvan kaikista muista näkökohdista.
Anna kuviesi ja videoelementtien koon määritteet
Ennen kuin kuvat ja videot ladataan sivulle kävijöiden nähtäväksi, selain yrittää osoittaa heille tilaa.
Se tarvitsee kuitenkin elementin korkeus- ja leveysarvot voidakseen jakaa oikean kokoisen laatikon. Jos selain pystyy luomaan jokaiselle elementille oikean kokoisen laatikon, ne latautuvat samaan kohtaan ja pitävät näkymän vakaana.
WordPressin tulisi automaattisesti antaa korkeus ja leveys määritteet kaikille kuvillesi. Tarkista kuitenkin tämä uudelleen varmistaaksesi.
Voit tehdä tämän katsomalla julkaisemasi sivun, jossa on joitain kuvia. Napsauta mitä tahansa kuvaa hiiren kakkospainikkeella ja napsauta sitten "Tarkastaa:"
Tämä avaa ikkunan, jonka alla oleva HTML-koodi on korostettu kuvakohtaisella merkinnällä. Näet, että tällä kuvalla on leveys = ”1024 ″ ja korkeus = ”683 ″ määritelty:
Rajoita dynaamisen sisällön käyttöä
Vaikka kuvat ja videot ovat yleisimpiä rikoksentekijöitä, kannattaa varoa myös upotuksia (kuten widgettejä tai video upotuksia), iframeja, mainoksia ja muuta dynaamista sisältöä.
Mainokset, jotka avautuvat ruudun yläosaan ja siirtävät kaiken muun sivusisällön alaspäin, ovat erityisen ärsyttäviä. Jos sinun on käytettävä niitä, varmista, että ne ladataan ensin tai että heille on luotu tilaa alusta alkaen.
Googlen tiedetään rankaisevan dynaamista sisältöä, joka estää käyttäjää käyttämästä tai katsomasta sivun sisältöä. Näihin viitataan usein nimellä "Tunkeilevat välimainokset".
Tämän päivän esimerkkinä on koko sivun kattava tilausikkuna, joka on suljettava ennen kuin voit tarkastella sisältöä.
Jos haluat käyttää tämän tyyppisiä elementtejä, on parasta määrittää se dia- tai sivupalkiksi, joka peittää vain osan sivusta eikä sijoita itseään muiden elementtien väliin.
Tuolla on paljon ponnahdusikkunoita ja WordPressin mainoslaajennukset, joiden avulla voit määrittää tällaisia elementtejä. Esimerkiksi, JetPopup, OptinMonster, Kukintatai jopa sisäänrakennettu Elementorin ponnahdusikkunoiden rakentaja.
Valitettavasti ei ole askel askeleelta tapaa näyttää, miten tämä tehdään. Sinun on vain tehtävä terveen järjen mukaisia päätöksiä CLS-ohjeet tarjoaa Google.
Esitäytä kirjasimet välttääksesi FOIT ja FOUT
Kuten teimme kolmannen osapuolen sisällölle, sinun on myös ladattava valinnaiset kirjasimet esiladattaviksi, jotta ne eivät häiritse sivun sujuvaa latausjaksoa.
Ongelmana on, että joskus selain aloittaa valmiiden elementtien lataamisen ja lykkää fonttitiedostojen lataamista myöhemmin. Tämä johtaa tilanteisiin, joissa teksti on valmis hahmonnettavaksi, mutta fonttia ei ole vielä ladattu.
Se aiheuttaa ns. Flash of Invisible Text (FOIT). Tai se voi myös johtaa FOUT- tai Flash of Styled Text (FOUT) -tilaan.
Ensin mainittu tarkoittaa, että tyhjä tila on ilman tekstiä, kun taas jälkimmäinen tarkoittaa, että tyylitön järjestelmän fontti ladataan sen sijaan. Tämä voi olla pahimmillaan pahoinpitelyä tai vain pelkkä näyttää huonolta.
Voit tehdä tämän manuaalisesti, mutta toteutus voi olla selainkohtainen, joten sinun on ehkä tehtävä se usealla eri tavalla ja päivitettävä sitä jatkuvasti, kun selaimet muuttavat tekniikoitaan.
WordPress-käyttäjänä on käytettävissä laajennuksia, jotka voivat tehdä tämän puolestasi vain muutamalla napsautuksella. Tässä on kaikki tapoja, joilla voit ladata fontteja verkkosivustollesi:
Header.php:
- Siirry Ulkoasu >> Teemaeditoriin WordPress-hallintapaneelista.
- Napsauta “header.php” -tiedostoa oikeanpuoleisessa tiedostoluettelossa.
- Kopioi ja liitä tämä teksti:
<link rel="preload" href="https://fonts.google.com/specimen/Roboto" as="font" type="font/woff2" crossorigin="anonymous">
tiedostoon ja vaihda URL-osoite haluamaasi kirjasimeen.
On myös muita premium-laajennuksia, kuten a WP Rocket joka voi tehdä saman asian, jotta sinun ei tarvitse sotkea verkkosivustosi koodissa.
Tässä tapauksessa sinun tarvitsee vain kopioida sama linkki kirjasimeen ja lisätä se sitten asianmukaiseen kenttään laajennuksen hallintapaneelista.
Suosittelemme sijoittamista laajennukseen, joka tekee tämän puolestasi, koska vahingossa jonkin koodin poistaminen tai muuttaminen WordPress-verkkosivustosi tiedostoista voi vahingoittaa vakavasti sen ulkonäköä ja toimintoja.
Bonusvinkit WordPress-verkkosivustosi ydinversioiden optimointiin
Nyt kun tiedät, mitkä toimet on tehtävä WordPress-verkkosivuston ydinversioiden optimoimiseksi, katsotaanpa joitain muita parhaita käytäntöjä:
Optimoi kuvavarasi
Hauskaa ja hauskaa on käyttää tonnia kuvia sivustollasi, mutta harvat ottavat huomioon kuvien käytön vaikutukset yrittäessään optimoida WordPress-sivustonsa ydinverkkoelementtejä.
Joten, mikä on iso juttu?
No, vuoden 2018 keskustelussa Google itse yksilöi kuvat yhdeksi johtavista tekijöistä, jotka hidastavat verkkosivustojen sivuja. Google sanoo myös, että kuvien optimointi on yksi keinoista, joilla on eniten mahdollisuuksia parantaa verkkosivustosi suorituskykyä.
Tietoja HTTPArkisto, kuvatiedot ovat nousseet yli 50% mobiilisivustoilla ja yli 150% mobiilisivustoilla.
Lisäksi kuvat vaikuttavat melkein aina suoraan suoraan kahteen ydinverkkoon:
- LCP: Tyypillisesti suurin elementti sivun näkyvällä alueella on kuva.
- CLS: Jos kuvia ei käytetä oikein, niillä voi olla valtava vaikutus sivun vakauteen, kuten voit nähdä "Kuinka parantaa CLS-pisteitäsi" osio yllä.
Tästä huolimatta kuvat ovat erittäin välttämätön osa houkuttelevien, houkuttelevien ja nykyaikaisten verkkosivujen luomisessa, joten et todennäköisesti halua päästä eroon niistä kokonaan.
Sen sijaan sinun pitäisi käyttää niitä viisaasti ja varmistaa, että optimoit ne ydinverkkoihin, mikäli mahdollista. Voit tehdä tämän monilla tavoilla:
- Reagoivat kuvat: Reagoivat kuvat tarkoittavat, että muutat kuvien kokoa tarpeen mukaan erikokoisille näytöille, kuten työpöydälle, tabletille tai mobiililaitteelle. Tarvitset paljon huonolaatuisempia kuvia, jotta ne näkyvät hienosti pienemmillä näytöillä ilman visuaalista laadun heikkenemistä, mikä vähentää vaikutusta latausaikoihin. Nykyään WordPressissä on sisäänrakennetut reagoivat kuvat. Haluat kuitenkin varmistaa, että teemat / laajennukset tukevat niitä eivätkä riko reagoivaa suunnittelua. Jos haluat gallerioita sivuillesi, mutta pidät kuvasi reagoivana, käytä suosituimpia laajennuksia, kuten SeuraavaGEN, Moduloija Envira.
- Laiska lastaus: Laiska lataus varmistaa, että taiton yläpuolella olevat kuvat ladataan ensin ja alaspäin kuvat vain, kun ne vieritetään kohtaan. Tämä parantaa LCP: tä ja käyttökokemusta. Nykyään useimmissa selaimissa on sisäänrakennettu laiska lataus, ja WordPress tukee sitä myös. Jälleen kerran, sinun on vain varmistettava, että mikään WordPress-asennuksesi ei häiritse tätä tai käytä JavaScriptiä laiskaan lataamiseen. Voit tarkistaa tämän myös majakan kautta.
- Tarjoa kuvia seuraavan sukupolven muodoissa: Jotkin uudemmat muodot, kuten WebP ja JPEG-200, koodaavat kuvia tehokkaammin, vähentävät hyötykuormaa ja nopeuttavat niiden lataamista. Voit muuntaa kuvat manuaalisesti näihin muotoihin käyttämällä ohjelmistoja, kuten PhotoShop, verkkopohjaisia työkaluja tai jopa WordPress-laajennuksia.
- Käytä kuvalaajennusta tai CDN: Esittelimme CDN: t edellä, mutta on myös kuvakohtaisia CDN: itä. Näillä CDN-tiedostoilla voi olla sisäänrakennettu reagointikyky, älykäs kuvien pakkaus (joka pienentää kokoa säilyttäen samalla laadun), laiska lataus, välimuisti, muodon muuntaminen ja paljon muuta sekä toinen CDN-kerros kuvien toimittamiseksi nopeammin. ShortPixel, Imgix, Kuvitteleja Pilvinen ovat vain joitain vaihtoehtoja WordPress-spesifisillä laajennuksilla.
Kuten näet samasta kuvakaappauksesta kuin yllä, meillä on laiska kuormitus, leveys ja korkeus ja "Srcset" kaikki reagoivat kuvakoot:
Keskity mobiiliin
Toinen asia, joka sinun tulisi harkita, on keskittyä ydinverkkosi optimointiin mobiilisivustojen kävijöille. Syy on yksinkertainen: mobiili Internet-liikennettä on virallisesti ylittänyt työpöydän liikenteen.
Tämä tarkoittaa, että on tärkeämpää huolehtia mobiilijoukosta kuin työpöydältä. Tämä suuntaus jatkuu todennäköisesti myös matkapuhelimen hyväksi lähitulevaisuudessa.
Google itse on tunnustanut matkapuhelimen merkityksen siirtymällä mobiilin ensimmäinen indeksointi. Tämä tarkoittaa, että Google priorisoi hakutulossivujen sijoittamisen verkkosivuston mobiiliversion mukaan.
Onneksi sekä Lighthouse että PageSpeed Insights voivat suorittaa myös matkapuhelimen.
Hyvä uutinen on, että useimmat korjaukset parantavat sekä työpöydän että mobiililaitteen pisteitä. Saattaa kuitenkin olla tapauksia, joissa tietty teema tai laajennus aiheuttaa ongelmia erityisesti työpöydällä tai mobiililaitteessa.
Tässä tapauksessa sinun on yritettävä päästä ongelman loppuun ja ratkaista se Lighthouse- tai PageSpeed Insight -työkaluilla.
Rakenna terveellisempi ja parempi WordPress-verkkosivusto keskeisen Web Vital -optimoinnin avulla
Me vain peitimme paljon maata, ja saatat tuntea itsesi hieman hukkua. Tärkeintä on kuitenkin ottaa syvään henkeä ja työskennellä näiden WordPress-ydinverkon tärkeiden optimointien läpi vaihe vaiheelta.
Kun saat sen kiinni, siitä tulee vain toinen osa verkkosivustosi ylläpitorutiinia.
Aloita testaamalla nykyinen verkkosivustosi kunto PageSpeed Insightsin tai Lighthousen kautta. Tee joitain parannuksia ja testaa uudelleen, onko sillä mitään vaikutusta. Huuhtele ja toista.
Muista, miksi teet näin: asetat verkkosivustosi menestykseen tekemällä kävijöistä onnellisempia ja sijoittumalla korkeammalle hakukoneissa.
Tämä luo lumipallovaikutuksen, joka houkuttelee paitsi lisää kävijöitä myös pitää heidät.
Onneksi käyttämällä WordPressiä upeiden laajennusten, kuten WP Rocket, Kuvittele, Elementorjne., teet elämästäsi paljon helpompaa.
Oletko yrittänyt optimoida WordPress-verkkosivustosi keskeisiä verkkovitaaleja? Pystytkö nostamaan pisteitäsi tai parantamaan verkkosivustosi yleistä suorituskykyä?
Mitkä näkökohdat olivat sinulle vaikeampi / helpompi tehdä? Kerro meille alla olevissa kommenteissa.
Muut oppaaseen liittyvät artikkelit:
- pääsy
- Tili
- Toiminta
- Ad
- mainokset
- ALUE
- noin
- artikkeli
- artikkelit
- tilintarkastus
- saatavuus
- PARAS
- parhaat käytännöt
- Suurimmat
- Bitti
- Uutiset ja media
- Laatikko
- selain
- liiketoiminta
- soittaa
- tapauksissa
- Aiheuttaa
- aiheutti
- muuttaa
- kromi
- suljettu
- koodi
- kommentit
- Yhteinen
- tietojenkäsittely
- pitää
- pitoisuus
- sisältö
- jatkaa
- Muuntaminen
- Pari
- Luominen
- Nykyinen
- kojelauta
- tiedot
- dc
- sopimus
- viivyttää
- tuottaa
- toimitus
- Malli
- Kehittäjä
- Kehitys
- DID
- etäisyys
- verkkotunnuksia
- Varhainen
- reuna
- toimittaja
- jne.
- Tapahtumat
- johtaja
- Elämykset
- silmä
- Epäonnistuminen
- FAST
- varustellun
- Ominaisuudet
- Etunimi
- ensimmäistä kertaa
- salama
- Keskittää
- muoto
- Ilmainen
- koko
- hauska
- tulevaisuutta
- Pelit
- GitHub
- Global
- hyvä
- Google Search
- suuri
- Vihreä
- Kasvava
- ohjaavat
- terveys
- tätä
- Korkea
- Korostaa
- Korostettu
- hotellit
- Miten
- Miten
- HTTPS
- ajatus
- kuva
- Vaikutus
- tiedot
- aloite
- oivalluksia
- tahallisuus
- vuorovaikutteinen
- Internet
- investoimalla
- kysymykset
- IT
- JavaScript
- hypätä
- pito
- avain
- suuri
- johtaa
- johtava
- Vaikutusvalta
- LINK
- Lista
- kuormitus
- Pitkät
- merkittävä
- Tekeminen
- matematiikka
- mitata
- Metrics
- Puhelinnumero
- liikkua
- verkko
- uutiset
- kampanja
- verkossa
- Online Business
- avata
- Operations
- Tilaisuus
- Vaihtoehto
- Vaihtoehdot
- tilata
- orgaanista liikennettä
- Muut
- Muuta
- omistaja
- omistajat
- maali
- suorituskyky
- photoshop
- kytkeä
- liitännäiset
- Suosittu
- palkkio
- estää
- preview
- laatu
- nostaa
- RAM
- Lukeminen
- syistä
- vähentää
- raportti
- Raportit
- resurssi
- Esittelymateriaalit
- vastaus
- tulokset
- juoksu
- tallentaa
- Näytön
- Haku
- hakukone
- Hakukoneet
- turvallisuus
- Palvelut
- palvelevat
- setti
- asetus
- yhteinen
- siirtää
- Yksinkertainen
- Koko
- So
- Tuotteemme
- Ratkaisumme
- SOLVE
- Tila
- nopeus
- Kaupallinen
- Pysyvyys
- Alkaa
- menestys
- tuki
- Tukee
- järjestelmä
- Tabletti
- Napauttaa
- kertoo
- testi
- Testaus
- Tulevaisuus
- teema
- aika
- vinkit
- ylin
- liikenne
- matkustaa
- paljastaa
- us
- Käyttäjät
- arvo
- Video
- Videoita
- Näytä
- Katso
- verkko
- Verkkosivu
- sivustot
- Whitepaper
- sisällä
- WordPress
- Referenssit
- maailman-
- arvoinen
- XML
- youtube