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

Kuinka saada 100/100 pistettä Google PageSpeed ​​Insights -palvelussa WordPress -sivustolle?

5

Google ilmoitti äskettäin sivukokemuksen olevan yksi algoritmin tekijöistä, jotka vaikuttavat hakusijoituksiin. Google Search Consolessa näkyvästä uudesta termistä Core Web Vitals on tulossa tärkeitä tekijöitä, jotka määrittelevät verkon tulevaisuuden. Tämä pakottaa kaikki verkkovastaavat varmistamaan, että sivuston latausnopeus on Googlen vaatima, jotta se voi sijoittua hyvin hakutuloksissa. Jos käytät WordPressiä sivustosi isännöintiin, on todella helppoa saada 100/100 pisteet Google PageSpeed ​​Insights -työkalulla.

Tämä on tapaustutkimus, jolla on oma kokemuksemme. Siksi mainitsemme laajennukset / teemat / hosting -yritysten nimet nimenomaisesti. Tärkeää on, että PageSpeed ​​-pisteitä ei aina tarvitse katsoa, ​​jos sinulla on selkeä näkemys siitä, mitä teet. Voit esimerkiksi käyttää maksettuja mainoksia tai sosiaalista markkinointia mainostaaksesi sivustoasi, jonka sivunopeus on huono. Siksi tämän artikkelin asiayhteys soveltuu bloggaajille, jotka haluavat saada nopeammat pisteet, mikä lisää mahdollisuuksia parempaan hakukoneen sijoitukseen ja parempaan käyttäjäkokemukseen.

Google PageSpeed ​​Insights

Työkaluja on vähän; voit seurata WordPress -verkkosivuston nopeutta. Google PageSpeed ​​Insights, Pingdom, GTmetrix ja WebPage Test ovat joitakin listan käytetyimmistä työkaluista. Koska Google -hakutulokset määräävät monien verkkosivustojen liikenteen, on hyvä käyttää PageSpeed ​​Insights -työkalua viitteenä.

Voit siirtyä PageSpeed ​​-työkaluun ja syöttää minkä tahansa sivun URL -osoitteen saadaksesi nopeuspisteet. Pisteeseen vaikuttavat monet tekijät, jotka voit lukea Googlen viralliselta kehittäjäsivustolta. Alla on yhteenveto tekijöistä, jotka vaikuttavat näkemääsi pisteeseen.

Tekijä Punnitus
Ensimmäinen värikäs maali 15%
Nopeusindeksi 15%
Suurin sisällöllinen maali 25%
Aika vuorovaikutteiseksi 15%
Estämisen kokonaisaika 25%
Kumulatiivinen asettelun siirto 5%

Verkkosivun analysoinnin jälkeen Google antaa pisteet 100 pisteen asteikolla. Alla on kolme aluetta, jotka ilmaisevat analysoidun sivun nopeusaseman.

  • 0-49: Huono
  • 50-79: Parannettavaa
  • 80-100: Hyvä

Siksi 100/100 pisteet Google PageSpeedissä osoittavat, että sivustosi latautuu erittäin nopeasti, ilmeisesti Google ja käyttäjät rakastavat verkkosivustojen nopeaa lataamista. Voit tarkistaa Lighthouse -pistelaskurin ja tarkistaa eri parametrit, joita tarvitaan nopeuden parantamiseksi dynaamisesti.

Muista, että edellä mainittujen tekijöiden lisäksi Google ehdottaa myös mahdollisuuksia, kuten poistaa käyttämättömät komentosarjat tai poistaa käyttämätön CSS. Nämä ovat kuitenkin suosituksia eivätkä vaikuta pisteeseesi, vaikka teetkin kovasti töitä saadaksesi ne läpi. Teemme tämän nimenomaisesti, koska monet bloggaajat ajattelevat, että jQueryn poistaminen auttaa saamaan parempia pisteitä.

Verkkosivustomme pisteet ja koko

Ennen kuin selitämme kuinka saada 100/100, haluamme näyttää sinulle kotisivumme pisteet. Kuten näette, saamme 100 sekä mobiililaitteille että tietokoneille.

Kuinka saada 100/100 pistettä Google PageSpeed ​​Insights -palvelussa WordPress -sivustolle?

Kotisivun pisteet

Muista, että puhumme tällä live -sivustolla, jossa on lähes 2000 blogipostausta ja jossa käytetään noin 20 laajennusta. Jos saamme täydet pisteet, se on erittäin mahdollista sivustoille, joissa on vähemmän viestejä ja laajennuksia.

5 tekijää, joilla saat 100/100 pistemäärän Google PageSpeedissä

Alla on viisi tärkeintä tekijää, joista keskustelemme yksityiskohdissa, jotka ovat mielestämme tärkeitä 100/100 pistemäärän saamiseksi Google PageSpeedissä.

  1. Hanki hyvä hosting -yritys
  2. Ei mainoskoodeja
  3. Käytä kevyttä teemaa
  4. Poista raskaat laajennukset
  5. Käytä välimuistilaajennusta

Muutamat muut tekijät, kuten DB -puhdistus ja CDN, voivat myös auttaa tilanteestasi riippuen. Käsittelemme myös nämä näkökohdat.

1 Hyvä isännöinti

Aloitimme tämän verkkosivuston Weeblyllä ja muutimme WordPressiin Bluehostin avulla. Myöhemmin muutimme sivuston SiteGround GoGeek -suunnitelmaan ja sitten SiteGround Cloud VPS: ään toukokuussa 2016. Siitä lähtien ei ollut paluuta tai viettää aikaa isännöintiin liittyvissä asioissa.

Hiljattain SiteGround siirsi infrastruktuurinsa käyttämään Google Cloud -alustaa. Tämä auttaa paljon, kun palvelimella on hyvä ensimmäinen vastausaika. Emme edes käytä Cloudflarea tai muuta CDN: ää saadaksesi 100/100 pistettä Google PageSpeedissä. Kyse on sivustosi hyvästä isännöinnistä. Varmista siis, että ostat premium -hosting -suunnitelman, kuten SiteGround Cloud VPS tai vastaava. Tämä auttaa säästämään paljon aikaa ja keskittymään muihin verkkosivuston ylläpidon näkökohtiin.

2 Ei mainoskoodeja

Lähes 90% bloggaajista aloittaa bloggaamisen ansaitakseen rahaa verkossa. Ensimmäinen vaihtoehto heille on hakea Google AdSensea ja toinen vaihtoehto on kokeilla kumppanimarkkinointia. Koska kumppanimarkkinointi tarvitsee luotettavan sivuston, Google AdSense on ihanteellinen vaihtoehto uusille bloggaajille.

Käytämme Google AdSensea ja se on ensisijainen tulonlähteemme tämän verkkosivuston ylläpitämiseen. Olemme selittäneet AdSensen ja sivunopeuden ongelmat artikkelissamme – AdSense Vs Page Speed ​​and Irony. PageSpeedillä testattu sivu on tämän sivuston kotisivu. Saamme pisteet 100/100, koska emme käytä AdSense -koodia etusivulla. Kuitenkin on olemassa auto mainoksia saatavilla koko sivuston. Kun tarkistimme sivun PageSpeed ​​-pisteiden tarkistamisen jälkeen, huomasimme, että sivun alalaidassa näytettiin yksi mainos. Sivu latautuu nopeammin, kun yksi mainos näkyy alareunassa.

Näytämme tuloksena sattumanvaraisen sivun, jolla on viisi AdSense -mainosta tällä sivustolla. Kuten näette, pisteet ovat välillä 55/90. Tämä on 45/10%: n lasku mobiililaitteissa ja tietokoneissa.

Kuinka saada 100/100 pistettä Google PageSpeed ​​Insights -palvelussa WordPress -sivustolle?

Satunnaisen sivun mobiilinopeus

Kuinka saada 100/100 pistettä Google PageSpeed ​​Insights -palvelussa WordPress -sivustolle?

Satunnaisen sivun työpöydän nopeus

Jos valitset AdSensen tai vastaavien mainosohjelmien käytön, unohda sivunopeus. Google PageSpeed ​​näyttää monia ongelmia, jotka johtuvat kolmannen osapuolen skriptien lataamisesta sivustollesi. Valitettavasti et voi ratkaista näitä ongelmia poistamatta mainoksen komentosarjakoodia.

Kuinka saada 100/100 pistettä Google PageSpeed ​​Insights -palvelussa WordPress -sivustolle?

AdSensen vaikutus nopeuteen

3 Käytä kevyttä teemaa

Käytimme Highend -teemaa 4 vuotta. Tämä on erittäin hyvä teema, jossa on ominaisuuksia. Valitettavasti emme käyttäneet 90% toiminnoista, kuten karttoja, usein kysyttyjä kysymyksiä, suosituksia jne. Teema lataa kuitenkin CSS- ja JS -resurssit, joita tarvitaan kaikkiin näihin ominaisuuksiin riippumatta siitä, käytätkö sivulla vai et. Tämä on merkityksetöntä kuin suuren palatsin omistaminen, mutta silti asuminen pienessä mökissä palatsin ulkopuolella.

Valitettavasti teeman vaihtaminen ei ollut helppoa, koska Highend -teema oli integroitu tiiviisti koko sivustoon. Esimerkiksi Highend -teemalla on mahdollisuus integroida Google Analytics teemavaihtoehtojen avulla. Olemme siis käyttäneet paljon aikaa löytääksemme korvaavan teeman, joka on luonteeltaan vähäinen, mutta tarjoaa perusominaisuuksia ilman laajennuksia.

Onneksi hyvin harvat teemat täyttivät kriteerimme. Tarkemmin sanottuna valitsimme GeneratePress- ja Astra -teemat ja päätimme myöhemmin ostaa GeneratePressin. Kuuden kuukauden siirtotyön jälkeen muutimme teemaa kesäkuussa 2020 ja PageSpeed ​​-pisteet nousivat vähintään 30% (AdSense -mainoksilla).

Viisi edellistä vuotta menetettiin, kun valitsimme väärän teeman, jota emme tarvinneet. Älä tee samaa virhettä ja osta premium- ja minimalistinen teema, joka tyydyttää tarpeesi. GeneratePress -teema tarjoaa koukkuja, joissa käytetään elementtejä, osioita, typografiaa ja muita tarvitsemiamme perusominaisuuksia. Mihin tahansa muuhun tarkoitukseen on parempi käyttää laajennuksia, jotta meidän ei tarvitse tuhlata vielä viittä vuotta myöhemmin tämän teeman muuttamiseen.

4 Poista raskaat laajennukset

Teeman tapaan on olemassa raskaita laajennuksia, jotka vetävät sivun nopeutta alaspäin. Aiemmin käytimme tällä sivustolla WPBakery Page Builder-, WooCommerce- ja WP Review -laajennuksia. Nyt olemme siirtäneet kaikki nämä laajennukset yhdessä Highend -teeman kanssa alihakemistoon. Tämä aiheutti meille suuria liikennehäviöitä yhdessä Googlen algoritmipäivitysten kanssa toukokuussa 2020. Meidän on kuitenkin siirryttävä eteenpäin nopeudella ~ 30%.

Jos käytät tai aiot löytää sivunrakentajan tai vastaavia laajennuksia, pysähdy ja mieti kahdesti.

  • Muunnimme WPBakery Page Builder -asettelun ja käytämme oletusarvoista Gutenbergiä kotisivumme luomiseen. Jopa GeneratePress tarjoaa Elementor -asetteluja ja oman minisivujen rakennustyökalun, mutta voit varmasti tehdä kunnollisia asetteluja täysleveillä jumbotronilla ja sankarien otsikoilla käyttämällä Gutenberg -ryhmän lohkoa.
  • Vältä turvonnutta laajennuksia, kuten WP Review – se käyttää edelleen mahtavaa 4.7 -kirjasinta 97 dollarin hintaan (3 sivuston lisenssi). Tämä on aivan naurettavaa lataamalla 4.7 -versio jokaiselle sivulle, kun versio 6 on käynnissä. Muista, että puhumme 2000 sivusta, joista vain 70 sivua käyttää laajennuksen tarkastusmallia. Tämä on eräänlainen kauppa, jonka sinun pitäisi ajatella ennen kuin asennat laajennuksen sivustollesi.
  • WooCommerce on toinen laajennus, joka tappaa sivustosi lisäämällä järjestelmänvalvojan AJAX -kutsut ostoskoriin. Jälleen 50 tuotetta 2000 viestiä vastaan ​​ei ole hyvä tapa pitää ne yhdessä sekä liikenteen että tulon kannalta.

Nämä ovat vaikeita tapoja oppia, kesti vuosia ennen kuin ymmärsimme. Toivottavasti ymmärrät asian ja käytät vain vaadittuja laajennuksia sivustollasi.

5 Käytä välimuistilaajennusta

Käytämme WP Rocketia yli vuoden. Parasta laajennuksessa on se, että se luo kriittisen CSS: n jokaiselle sivustosi postityypille. Välimuistin ja esilatauksen lisäksi kriittinen CSS nopeuttaa sivustosi nopeutta. Huomaa, että käytimme myös WP Rocket on Highend -teemaa WooCommercen ja muiden raskaiden lisäosien kanssa, kuten edellä on selitetty. Tulos oli kuitenkin 30/60 Google PageSpeedissä.

Joten havainto on – välimuistin laajennus toimii parhaiten parhaiten koodatulla teemalla/laajennuksilla. Muussa tapauksessa yhdistelmäsi on väärä ilman nopeuden lisääntymistä. Huomaa, että SiteGround tarjoaa oletuspalvelimen välimuistin SG Optimizer -laajennuksella. Tämä ei kuitenkaan toimi meillä edes yksinkertaisen GeneratePress -teeman kanssa. Koska haluamme pitää välimuistin riippumattomana isännöinnistä, WP Rocket tai vastaava laajennus oli meille paras vaihtoehto. Alla on välimuisti ja muut WP Rocketin ominaisuudet:

  • Selaimen välimuisti, GZIP -pakkaus, kyselymerkkijonon poistaminen ja Googlen fonttien optimointi.
  • Poista upotukset, emojit ja hallitse syke -sovellusliittymää.
  • Kriittinen CSS -sukupolvi kullekin postityypille ja URL -osoitteiden esilataus XML -sivustokarttasi perusteella .
  • Isäntä jQuery Migrate, Google Analytics ja Facebook Pixels parantaaksesi nopeutta.
  • Yhdistä ja pienennä CSS ja JS.
  • Puhdista tietokannan tarpeettomat merkinnät, kuten ohimenevät, tarkistetut ja automaattiset tallennukset.
  • Laiska kuvien, videoiden ja kehysten lataaminen.
  • Tarvittaessa erillinen välimuisti mobiililaitteille ja tietokoneille.

Voit myös ostaa CDN: n ja käyttää kuvan optimointilaajennusta lisämaksusta (emme käytä näitä ominaisuuksia).

Muut tekijät

No, koko Internetistä löydät sanan "CDN", kun puhutaan WordPress -sivuston nopeudesta. SiteGround tarjoaa myös ilmaisen CDN -integraation Cloudflaren kanssa. Ellet ole kohdeyleisöä Internetin estämissä maissa, kuten Kiinassa, emme usko, että CDN voi todella lisää nopeutta huomattavasti. Meidän kaltaisella sivustolla se auttaa tarjoamaan staattisia tiedostoja, kuten suuria kuvia, nopeammin. SiteGround esitteli kuitenkin sivustotyökalut (korvaa cPanelin ), jotka luovat automaattisesti WebP -kuvia SG Optimizer -laajennuksen avulla. Emme vieläkään käytä Tämän ominaisuuden avulla voit käyttää mitä tahansa WebP -laajennusta kevyiden kuvien näyttämiseen tuetuille selaimille PNG/JPEG -muodon sijaan.

Toinen tekijä on tietokannan ja sivuston puhdistaminen. Kuten mainittiin, WP Rocket tarjoaa DB -puhdistusvaihtoehdon, jonka voit ajoittaa ajoittain. Siitä ei kuitenkaan puhuta täällä.

  • Tiedätkö, että WooCommerce -laajennus lisää 25+ taulukkoa tietokantaasi? Kuten täällä on selitetty, WordPressin oletusasennuksessa on vain 12 taulukkoa yhdelle sivustolle. Vietimme paljon aikaa tilausten, tuotteiden ja WooCommerce -tiedostojen siirtämiseen. Meidän on myös poistettava WooCommerce -miniatyyrit tallennustilan puhdistamiseksi. Lue lisää WooCommercen poistamisesta sivustostasi.
  • WP Review Pro -laajennus lisää ~ 25 mukautettua kenttää jokaiseen luomaasi viestiin. Kaikki nämä paisuttavat postmeta -pöydän. Se luo myös kaksi muuta pikkukuvaa jokaiselle lataamallesi kuvalle.
  • WP Bakery ja monet muut laajennukset sisältävät CSS-, JS- ja muita resursseja erillisessä hakemistossa latauskansiossa. Nämä komentosarjat hidastavat sivustoasi lataamalla kaikki sivut.
  • Highend -teema luo ~ 10 pikkukuvaa (tämä vaihtelee kuvan koon ja asetusten mukaan) jokaiselle lataamallesi kuvalle.

Nyt kun pelkkä teeman vaihtaminen GeneratePressiksi ja raskaiden laajennusten siirtäminen alihakemistoon ei auta puhdistamaan nykyistä sotkua. Jos muutat teemaa tai poistamalla laajennuksia, varmista poistaa kaikki jäljet he lähtevät wp_postmeta ja wp_options taulukoita. Tämä auttaa lisäämään sivun latausnopeutta vähentämällä tietokannan kyselyn suorittamisaikaa.

Lopulliset sanat

Olemme tarkoituksellisesti kirjoittaneet tämän artikkelin tavalla, mitä EI pidä tehdä saadaksesi 100/100 pistemäärän Google PageSpeed ​​Insights -työkalussa. Tämä on tarkoitettu niille bloggaajille, jotka ovat keskellä bloggaamista ja yrittävät parantaa nopeutta. Jos olet uusi bloggaaja, sen pitäisi kuitenkin antaa sinulle selkeä käsitys siitä, miten AdSense -valinnat ja sivunrakentajat käyttävät raskaita teemoja. Kuten yksi suosittu sananlasku sanoo: "Yksinkertaisuus on äärimmäistä hienostuneisuutta", valitsemasi tarvitsemasi auttaa sinua saamaan korkeat pisteet ja säästämään paljon aikaa.

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