TechBlogSD - Kaikki WordPressin ja WEB: n kehittämiseen
WEB- ja WordPress - ohjeet, uutiset, arvostelut teemoista ja laajennuksista

Kuinka korjata kumulatiivinen asettelun siirto WordPressissä?

15

Google kehottaa verkkovastaavia toteuttamaan kaikki tarvittavat toimenpiteet sivun latausnopeuden parantamiseksi. Verkkosivustosi sivujen latausnopeus mitataan muutamien parametrien perusteella, kuten näet Google PageSpeed ​​Insights -työkalussa. Cumulative Layout Shift (CLS) on yksi Core Web Vitalin nopeudenmittauskriteereistä. Tämä on tärkeä tekijä nopeuden parantamisen lisäksi myös paremman käyttökokemuksen kannalta. Tässä artikkelissa selitämme erilaisia ​​syitä CLS -ongelmaan ja kuinka korjata kumulatiivinen asettelun siirtovirhe WordPressissä.

Mikä on kumulatiivinen asettelun siirto?

Ennen kuin luet edelleen, sinun on ymmärrettävä, mikä on CLS. Yksinkertaisesti sanottuna tämä on sisällön asettelun muutos, joka aiheuttaa huonon käyttäjäkokemuksen. Olet esimerkiksi napsauttamassa painiketta sivulla ja yhtäkkiä bannerikuva latautuu yläpuolelle ja painaa painiketta alas. Lopulta napsautat kuvaa tahattomasti, mikä saattaa viedä sinut toiselle sivulle. Tämä on erittäin huono käyttäjäkokemus, ja Googlella on hyvä selitys tässä artikkelissa, jonka voit lukea lisää.

Aiheeseen liittyviä: Kuinka ottaa kuvan laiska lataaminen käyttöön Google Chromessa?

Kumulatiivisen asettelun siirtovirheen tarkistaminen

Avaa Google PageSpeed ​​Insights (PSI) -työkalu ja tarkista verkkosivusi nopeus. Voit tarkistaa kenttätiedot tai alkuperäyhteenvedon ja varmistaa, että sivustosi kumulatiivinen asettelunsiirto -ongelma on olemassa. Voit viedä hiiren etenemispalkin päälle löytääksesi kumulatiivisen latausprosentin, jossa ongelma esiintyy sivulla / sivustossa.

Kuinka korjata kumulatiivinen asettelun siirto WordPressissä?

Tarkista CLS -ongelma PSI: ssä

Löytääksesi ongelmia aiheuttavat elementit, vieritä alas diagnostiikka -osioon ja tarkista kohdasta "Vältä suuria asettelun siirtymiä". Tässä Google näyttää luettelon elementteistä, jotka aiheuttavat asettelun muutoksen testatulla sivulla.

Kuinka korjata kumulatiivinen asettelun siirto WordPressissä?

Vältä suurta asettelun siirtoa

Tarkista tiedot Google Search Consolesta

Voit tarkastella CLS -ongelman sisältävien sivujen URL -osoitteita Google Search Console -tililläsi. Kun olet kirjautunut tilillesi, siirry "Parannukset" -kohdan "Core Web Vitals" -osioon. Löydät sekä mobiili- että pöytätietokoneraportit, jotta voit tarkastella sivuja, joissa on CLS -ongelma: yli 0,25 (mobiili) / (pöytätietokone).

Kuinka korjata kumulatiivinen asettelun siirto WordPressissä?

CLS -ongelma Google Search Consolessa

Napsauta ongelmaa, jos haluat nähdä CLS -ongelman kohteena olevan sivustosi URL -osoitteen ja URL -osoitteen keskimääräisen ajan. Google pitää CLS -ongelmaa alla olevan taulukon mukaisesti:

Hyvä Tarvitsee parannusta Huono
<0,1 s 0,1 – 0,25 s > 0,25 s

Siksi sinun on pyrittävä vähentämään CLS -aikaa alle 0,25 sekuntia, jotta tämä väri muuttuu vihreäksi/keltaiseksi PSI -työkalussa ja virheet poistetaan Search Console -tililtäsi.

Korjaa kumulatiivisen asettelun siirtovirhe WordPressissä

Seuraavassa on muutamia tekijöitä, jotka voivat aiheuttaa kumulatiivisen asettelun siirtymisviiveen WordPress -sivustossa. Selitämme yksityiskohtaisesti kunkin ongelman ja mahdolliset ratkaisut.

1 CSS -toimituksen optimointi

Kuten yllä olevasta "Vältä suuria asettelun siirtymiä” kuvakaappauksesta, ensimmäinen kohde on “<div class =” row footer-row “>”. Tämä on yllättävää, koska alatunnisteen osaa ei voi ladata taittoalueen yläpuolelle. Tarkistuksen jälkeen ymmärsimme, että tämä johtuu Optimoi CSS -toimitus -vaihtoehdosta, joka on otettu käyttöön WP Rocket -laajennuksella. Tämä vaihtoehto luo kriittisen CSS: n ja lisää sen otsikko -osaan renderöinnin estävän CSS: n poistamiseksi. Se johtaa kuitenkin kumulatiiviseen asettelun siirto -ongelmaan monissa tapauksissa. Jos käytät WP Rocketia tai mitä tahansa muuta välimuistilaajennusta CSS: n lisäämiseen ylätunnisteeseen, poista tämä vaihtoehto käytöstä ja tarkista, auttaako se parantamaan CLS -viivettä.

2 AdSense- ja muut mainosskriptit ATF: ssä

Monet julkaisijat käyttävät Google AdSensea tai muuta mainosverkostoa kaupallistakseen online -sisältöään. Sinun on lisättävä JavaScript -mainoskoodi verkkosivullesi mainosten näyttämiseksi. Yleensä sinun on lisättävä mainoskoodi sivun yläosaan (ATF) lisätäksesi mainoksen näkyvyyttä ja tuloja. Tämä kuitenkin vaikuttaa suoraan sivun latausnopeuteen ja luo kumulatiivisen asettelun siirtovirheen Google PageSpeed ​​Insight (PSI) -työkalussa.

Kun sisältö on ladattu kokonaan sivun yläosaan, mainoksesi alkaa ladata ja työntää sisältöä alaspäin.

Kuinka korjata kumulatiivinen asettelun siirto WordPressissä?

Asettelun siirto mainoksen vuoksi

On vain vähän vaihtoehtoja tämän ongelman korjaamiseen. Yksi on lykätä mainosskriptiä WordPressissä käyttämällä laajennuksia, kuten WP Rocket. Tämä vaikuttaa kuitenkin mainoksesi näyttökertaan ja napsautussuhteeseen, mikä pienentää kokonaistuloja.

Kuinka korjata kumulatiivinen asettelun siirto WordPressissä?

Mainoksen JavaScript -suorituksen viivästyminen

Toinen vaihtoehto on käyttää kiinteän leveyden mainoksia taittoalueen yläpuolella, kuten Google suosittelee. Valitettavasti Google tekee myös selväksi, että kiinteän leveyden käyttäminen ei ole mahdollista responsiivisten tai sujuvien mainosten kanssa.

Näille paikoille ei ole mahdollista varata tilaa ennen mainossisällön pyytämistä, ja sulavan kokoiset mainokset aiheuttavat aina asettelun muutoksia. Voit vähentää asettelumuutosten vaikutuksia, kun työskentelet nestemäisten mainospaikkojen kanssa, suosittelemme seuraavaa: Käytä nesteen kokoa vain sivun alaosan aukkoihin.

Google

Yhteenvetona, et voi korjata ongelmaa, ellet poista ulkoista mainoskoodia ATF -alueelta. Tämä koskee kaikkia muita kolmannen osapuolen koodeja, jotka olet lisännyt sivustosi otsikko-osioon.

3 Käytä oikeita kuvan mittoja

Tämä on samanlainen kuin kiinteiden mainosten käyttäminen. Kun sinulla ei ole kuvan mittoja, selaimet odottavat kuvien lataamista ja työntävät alla olevan sisällön aiheuttaen asettelun siirto -ongelman. Onneksi tämä ei ole ongelma, koska WordPress lisää kuviin automaattisesti ulottuvuuksia, kun niitä ladataan postieditorin kautta. Sinun on kuitenkin lisättävä mang -tunnisteeseen manuaalisesti korkeus- ja leveysparametrit, jos lisäät kuvia manuaalisesti käyttämällä "Custom HTML" -lohkoa, "Edit as HTML" -toimintoa tai logokuvaa. Määritä lisäksi kiinteä leveys ja korkeus upottaessasi videoita ja iframe-kehyksiä kolmansien osapuolien verkkosivustoilta.

Kuinka korjata kumulatiivinen asettelun siirto WordPressissä?

Kuvasta puuttuu leveys ja korkeus

4 Fontit, jotka viivästyttävät sisällön lataamista

Jokainen sivusto käyttää fontteja. Tämä luo kumulatiivisen asettelun siirto-ongelman erityisesti käytettäessä kolmannen osapuolen palveluita, kuten Google-fontteja. Koska Google -fontit on ladattava ulkoisilta palvelimilta, se luo samanlaisen kumulatiivisen asettelun siirto -ongelman, kuten mainoskoodin. Voit nähdä tämän ongelman myös PSI: ssä "Varmista, että teksti pysyy näkyvissä webfontin lataamisen aikana", mikä osoittaa, että näkyvän sisällön lataaminen viivästyy.

Kuinka korjata kumulatiivinen asettelun siirto WordPressissä?

Fonttiongelma

  • Tehokas tapa ratkaista tämä ongelma on käyttää välimuistilaajennusta verkkotunnusten, kuten fonts.googleapis.com- ja fonts.gistatic.com -verkkotunnusten, yhdistämiseen ja hakuun etukäteen. Tämä auttaa sinua nopeuttamaan fonttien lataamista yhdistämällä Google -kirjasinpalvelimen etukäteen. SG Optimizer, WP Rocket (automaattinen) ja monet muut laajennukset tarjoavat tämän ominaisuuden, jota voit käyttää tähän tarkoitukseen. Lisäksi voit rajoittaa kirjasinperheiden määrää ja painot pienentävät ladattavan tiedoston kokoa.

Kuinka korjata kumulatiivinen asettelun siirto WordPressissä?

SG Optimizer Web -fonttien optimointi

  • Toinen vaihtoehto on käyttää järjestelmäfontteja tai isännöidä kirjasintiedostoja palvelimellasi. Esimerkiksi teemojen, kuten GeneratePress ja Astra, avulla voit valita sivustosi järjestelmäfontin.
  • Varmista joka tapauksessa, että lataa fontit esilatausavainpyyntövaroituksen poistamiseksi, mikä voi myös aiheuttaa kumulatiivisen asettelun siirtoviiveen.

5 Fontin kuvakkeet valikossa ja ATF: ssä

Monet WordPress-teemat käyttävät navigointialueen kirjasinkuvakkeita alivalikon kohteiden näyttämiseen. Yleensä nämä kuvakkeet sisältyvät kolmansien osapuolten verkkosivustoihin, kuten font awesome tai icomoon. Tämä aiheuttaa samankaltaisia ​​ongelmia, kuten fontteja, ja lisää kumulatiivista asettelun siirtoaikaa. Teemat, kuten GeneratePress, mahdollistavat navigointivalikon SVG -kuvakkeiden valitsemisen fonttien sijaan. Samoin Astra -teemassa voit poistaa fonttikirjaston lataamisen käytöstä mukautetun toiminnon avulla. Tällä tavalla voit parantaa kumulatiivista asettelunsiirto -ongelmaa WordPressissä. Sinulla ei kuitenkaan ole muuta vaihtoehtoa kuin poistaa alivalikkokohteet käytöstä useimmissa muissa teemoissa, mikä ei ole hyvä ratkaisu.

Verkkovastaavat ymmärtävät väärin PSI -varoituksen kohdassa "Defer offscreen Images". Tämä varoitus ilmenee, kun et laiska lataa kuvia, jotka ovat käytettävissä sivun alaosan (BTF) sisällössä. Jos kuitenkin käytät laajennusta WordPressissä, kaikki kuvat, joissa on HTML

Jotta voit vähentää CLS -aikaa PSI -työkalussa, sinun on suljettava logokuvan laiska lataus. Ratkaisu riippuu laajennuksesta, jota käytät kuvien laiskaan lataamiseen. Esimerkiksi WP Rocketissa siirry kohtaan "Media> LazyLoad" ja anna logon nimi tai URL -osoite, jonka haluat sulkea pois laiskasta lataamisesta.

Kuinka korjata kumulatiivinen asettelun siirto WordPressissä?

Sulje logo pois laiskasta lataamisesta

7 Laiska kuvan latauksen liukusäädin ATF: ssä

Kuvan logon tapaan näet paljon kumulatiivista asettelun siirtoaikaa, kun kuvan liukusäätimet ovat taittoalueen yläpuolella. Voit sulkea liukukuvat laiskasta lataamisesta ja testata, että se auttaa vähentämään CLS -aikaa.

Aiheeseen liittyviä: 25 SEO -vinkkiä WordPress -sivustosi sijoittamiseen.

8 Render estää JavaScriptin, kuten jQuery

Viimeinen aihe on suosittu renderöinti, joka estää JavaScriptin jQuery -pohjaisten teemojen vuoksi. Itse asiassa WordPress sisältää myös jQueryn osana wp-include-kansiota. Voit lykätä jQueryä ja muita hahmontamisen esto -ohjelmia sivullasi käyttämällä välimuistilaajennusta, kuten W3 Total Cache. Muista kuitenkin testata sivustosi perusteellisesti, jotta asettelut eivät katkea.

Vahvistetaan korjaus Google Search Consolessa

Kun olet korjannut ongelman, varmista, että lähetät vahvistukset Google Search Console -tilille. Voit palata “Core Web Vitals” -osioon ja lähettää vahvistuksia koko sivustolle.

Kuinka korjata kumulatiivinen asettelun siirto WordPressissä?

Vahvistetaan CLS -ongelma Google Search Consolessa

Kestää jopa 28 päivää, ennen kuin Google tarkistaa CLS -ongelman sivustossasi ja näyttää vastaavat tulokset Search Console -tilillä.

Johtopäätös

Kuten näette, suurin syy kumulatiiviseen asettelun siirtovirheeseen WordPressissä johtuu siitä, että hahmontamisen esto -komentosarjat on sijoitettu sivun yläosan yläpuolelle. Se voi olla mainoskoodeja, jQuerya, fontteja, kuvakkeita tai mitä tahansa muuta. Ratkaisu ongelman ratkaisemiseksi on käyttää yksinkertaisia ​​minimalistisia teemoja, kuten GeneratePress tai Astra. Toisaalta voit käyttää välimuistiliitännäisiä esiliitäntään ja yhdistää fonttitiedostoja vähentääksesi kumulatiivista asettelun siirtoaikaa.

Leave A Reply

Tämä verkkosivusto käyttää evästeitä parantaakseen käyttökokemustasi. Oletamme, että olet kunnossa, mutta voit halutessasi kieltäytyä. Hyväksyä Lisätietoja