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

Kuinka määrittää automaattinen optimointi oikein WordPress -sivustossa?

1

Automaattinen optimointi on yksi suosituista laajennuksista WordPress -sivustosi nopeuttamiseksi. Tämän laajennuksen aktiivisia asennuksia on yli miljoona, joiden keskimääräinen luokitus on 1,7+ käyttäjiltä 4,7. Ei voi olla väärin, että niin monet ihmiset asentavat ja käyttävät tätä laajennusta sivustonsa optimointiin. Sinun on kuitenkin varmistettava oikea asennus, jotta laajennus toimii sinulle.

Aiheeseen liittyviä: Top 8 WordPressin välimuistilaajennusta.

Mitä automaattinen optimointi tekee?

Ensinnäkin sinun on ymmärrettävä, että Autoptimize ei ole välimuistilaajennus, kuten WP Rocket tai W3 Total Cache. Se on optimointilaajennus, joka auttaa tekemään seuraavat asiat:

  • Yhdistä kaikki CSS- ja JavaScript -tiedostot
  • Pienennä pakatut tiedostot ja tallenna ne välimuistiin, pienennä myös HTML poistamalla kommentit ja välilyönnit
  • Lisää tiedostoihin vanhenemisotsikko palvelemaan välimuistissa olevaa versiota
  • Siirrä CSS otsikkoon ja komentosarjat alatunnisteeseen

Myöhemmin kehittäjä sisällytti myös kuvanoptimoinnin WebP -kuvien laiskaan lataamiseen ja tarjoamiseen mediatiedostojen nopeuttamiseksi. Kuten WordPress.orgin laajennussivulla mainittiin, HTTP/2 -palvelimet voivat automaattisesti tehdä monia tämän laajennuksen toimintoja. Siksi sinun on testattava kokeilla varmistaaksesi, että laajennus todella lisää lisäarvoa asennuksellesi.

Kuinka määrittää automaattinen optimointi oikein WordPressissä?

Automaattinen optimointi on yksi yksinkertaisimmista asennettavista laajennuksista. Kun olet asentanut ja aktivoinut laajennuksen, siirry "Asetukset> Automaattinen optimointi" -valikkoon. Siinä on vaihtoehtoja JS-, CSS-, HTML- ja kuvien optimoimiseksi sivustossasi.

Kuinka määrittää automaattinen optimointi oikein WordPress -sivustossa?

Optimoi asetukset automaattisesti

JS-, CSS- ja HTML -asetukset

Tällä välilehdellä on useita vaihtoehtoja erottaa ja optimoida sivustosi tiedostot. Automaattinen optimointi kokoaa ja pienentää teemasi ja laajennuksesi komentosarjoja, CSS: ää ja HTML: ää. Siksi joidenkin vaihtoehtojen valitseminen voi rikkoa sivustosi, etenkin jos käytät jQuery -pohjaista teemaa.

JavaScript -asetukset

  • Optimoi JavaScript -koodi – Ota tämä vaihtoehto käyttöön, jos haluat pienentää JavaScript -tiedostot. Tämä pakkaa ja pienentää sivustosi komentotiedostojen kokoa.
  • Kokoa JS-tiedostot? – ota tämä vaihtoehto käyttöön, jos haluat yhdistää kaikki JavaScript -tiedostot ja palvelimen asynkronisesti, kun lataat sivuja sivustollesi. Tämä auttaa sinua poistamaan hahmontamisen estävän komentosarjan ongelman Google PageSpeed ​​Insights -työkalussa. Useimmissa tapauksissa se kuitenkin rikkoo sivustosi. Paras vaihtoehto on ottaa tämä käyttöön ja antaa poikkeukset, jotta sivu voidaan ladata katkeamatta. Mutta se johtaa hahmonnuksen estämiseen PageSpeed ​​Insightsissa. Voit poistaa tämän vaihtoehdon käytöstä ja ottaa käyttöön vain "Optimoi JavaScript -koodi” vain tiedostojen minimoimiseksi.
  • Myös koota inline JS? – Suosittelemme, että poistat tämän vaihtoehdon käytöstä, kun teema tai laajennus lisää paljon skriptejä dynaamisesti. Tämän käyttöönotto voi johtaa välimuistin koon kasvamiseen nopeammin ja suuremmaksi, mikä vaikuttaa suorituskykyyn parantamisen sijaan.

Kuinka määrittää automaattinen optimointi oikein WordPress -sivustossa?

JavaScript -asetukset

  • Pakota JavaScript käyttöön? – paras käytäntö on ladata JavaScript -tiedostot alatunnisteeseen niin, että ne latautuvat sivun lataamisen lopussa. Tämä poistaa tehokkaasti nopeudenmittaustyökaluissa näkyvät renderöinnin esto- ja komentosarjaongelmat. Jos näet kuitenkin, että aiemmat vaihtoehdot rikkovat sivustosi, ota tämä käyttöön ladataksesi komentosarjoja otsikkoon testataksesi, auttaako se. Jälleen skriptien lataaminen otsikkoon näyttää renderöinnin estämisen varoituksen PageSpeed ​​Insights -työkalussa.
  • Sulje komentosarja pois automaattisesta optimoinnista – laajennus täyttää oletusarvoisesti tämän kentän jquery.js -tiedostolla ja muilla sivustosi tärkeillä tiedostoilla. Jos huomaat, että jokin tietty teema tai laajennustiedosto rikkoo sivustosi, voit sisällyttää tiedoston tähän. Muista täyttää tiedoston suhteellinen polku jättämättä verkkotunnuksen nimi huomiotta. myös, kuten kuvauksessa mainittiin, laajennus pienentää edelleen poissuljetut tiedostot, ellet sulje niitä pois "Muut" -osiosta. Kun olet testannut eri teemoilla, suosittelemme, että suljet jquery.js pois, jotta sivuillasi ei tapahdu asettelun rikkoutumista. Joskus et ehkä huomaa ongelmaa sivustolla, mutta näet konsolivirheen Google Chromen kehittäjätyökaluissa. Virhe näyttää jotain "$ tai jQuery ei ole määritelty" tai "tuntematon toiminto".
  • Lisää try-catch-kääre? – ota tämä vaihtoehto käyttöön, kun huomaat, että laajennus rikkoo sivustosi. Suosittelemme, että poistat tämän vaihtoehdon käytöstä ja suljet pois tiedoston, joka katkeaa poikkeuksessa.

CSS -asetukset

CSS -vaihtoehdot ovat melkein samanlaisia ​​kuin JavaScript -vaihtoehdot.

  • Optimoi CSS -koodi? – ota tämä vaihtoehto käyttöön pakataksesi ja minimoidaksesi sivustosi CSS -tiedostot.

Kuinka määrittää automaattinen optimointi oikein WordPress -sivustossa?

CSS -asetukset

  • Kokoa CSS-tiedostot? – ota tämä vaihtoehto käyttöön, jos haluat yhdistää kaikki sivustosi CSS -tiedostot ja toimia yhtenä pakattuna ja pienennettynä CSS -tiedostona.
  • Yhdistä myös inline CSS – salli tämä sisällyttää upotettu CSS koottamista varten. Jos teema tai laajennus lisää paljon sisäistä CSS: ää, tämä vaihtoehto lisää välimuistin kokoa.
  • Luo dataa: kuvien URI -osoitteet? – ota tämä vaihtoehto käyttöön, jotta Automaattinen optimointi voi lisätä teeman ja laajennusten lataamat pienet kuvat.
  • Sisällytä ja lykkää CSS: ää – jotta voit ottaa tämän vaihtoehdon käyttöön, sinun on ensin tiedettävä sivustosi kriittinen CSS. Valitettavasti kriittisen CSS: n saaminen ei ole helppoa, koska jokainen sivustosi malli tarvitsee erillisen kriittisen CSS: n. Jos esimerkiksi sivustossasi on WooCommerce, et voi käyttää julkaisun tai sivun kriittistä CSS: ää WooCommerce -tuotesivuilla. Mielestämme sinun pitäisi poistaa tämä vaihtoehto käytöstä automaattisessa optimoinnissa. Muussa tapauksessa voit hankkia premium -sovellusliittymän osoitteesta kriittinenssss.com ja integroida sen "Automaattinen optimointi" -kohtaan "Kriittinen CSS" -välilehdessä.
  • Sisällytä kaikki CSS -tiedostot – ota tämä käyttöön sisällyttääksesi kaikki CSS -tiedostot linkityksen sijaan. Kun olet ottanut tämän vaihtoehdon käyttöön, voit tarkastella sivustosi lähdekoodia nähdäksesi valtavan määrän CSS: ää. Sisällyttäminen CSS voi parantaa huomattavasti nopeutta, mutta se voi vaikuttaa haitallisesti, jos sinulla on valtava CSS -tiedosto.
  • Sulje CSS pois automaattisesta optimoinnista – jos huomaat, että sivusto rikkoutuu, voit sulkea pois tietyt CSS -tiedostot tästä tekstiruudusta. JavaScript -tiedostojen tapaan sinun on annettava suhteellinen polku jättämättä verkkotunnuksen nimi huomiotta. Automaattinen optimointi sulkee myös välimuistin, kuvakkeet ja muut CSS: t oletuksena pois. Voit myös antaa suhteelliset kansiot, kuten "wp-content/uploads/", sulkeaksesi pois kaikki kyseisen kansion CSS-tiedostot.

Opi WordPress: Tutustu yli 400 ilmaiseen WordPress -opetusohjelmaan.

HTML -asetukset

Ota JS: n ja CSS: n tapaan käyttöön Optimoi HTML -koodi -vaihtoehto, jos haluat pakata ja minimoida sivustosi HTML -sisällön. Voit myös ottaa kommentit käyttöön tai poistaa ne käyttämällä "Pidetäänkö HTML -kommentit?" vaihtoehto. Suosittelemme, että otat molemmat vaihtoehdot käyttöön.

Kuinka määrittää automaattinen optimointi oikein WordPress -sivustossa?

HTML -asetukset

CDN -vaihtoehdot

Jos käytät CDN: ää, joka luo vyöhykkeen URL -osoitteen, kirjoita juuri -URL -osoite tähän “CDN Base URL” -tekstikenttään. Voit kuitenkin jättää tämän huomiotta, jos et käytä CDN: ää tai Cloudflarea tai muita CDN: itä, jotka käyttävät DNS -nimipalvelimia .

Kuinka määrittää automaattinen optimointi oikein WordPress -sivustossa?

CDN -vaihtoehdot

Välimuistin tiedot

"Välimuistin tiedot" -osiosta löydät automaattisen optimoinnin välimuistin tilan. Se näyttää välimuistissa olevien tiedostojen polun, koon ja määrän.

Kuinka määrittää automaattinen optimointi oikein WordPress -sivustossa?

Välimuistin tiedot

Muut asetukset

  • Tallennetaanko kootut komentosarjat/CSS staattisina tiedostoina? – tämän pitäisi olla oletusarvoisesti käytössä, koska pakattuja tiedostoja on käytettävä staattisena resurssina nopeuden parantamiseksi. Kuten kuvauksessa mainittiin, jos näyttöongelma ilmenee, poista tämä vaihtoehto käytöstä ja yritä auttaa.

Kuinka määrittää automaattinen optimointi oikein WordPress -sivustossa?

Muut asetukset

  • Minimoidaanko poissuljetut CSS- ja JS -tiedostot? – laajennus pienentää automaattisesti kaikki CSS- ja JS -tiedostot, vaikka olet jättänyt tietyt tiedostot pois CSS- tai JS -asetuksista. Poista tämä valintaruutu käytöstä, jos haluat poistaa pois suljettujen CSS- ja JS -tiedostojen minimoinnin.
  • Optimoida myös sisäänkirjautuneille toimittajille / järjestelmänvalvojille? – suosittelemme poistamaan tämän asetuksen käytöstä, jotta voit tarkastella todellista sivustoa ilman automaattista optimointia, kun olet kirjautunut sisään järjestelmänvalvojana tai editorina. Muussa tapauksessa saatat huomata ongelmia sivunrakennuslaajennusten kanssa.

Tallenna kaikki muutokset, jotta laajennus voi toimia sivustossasi.

Kuvat

"Kuvat" -välilehti tarjoaa vaihtoehtoja kuvien optimoimiseksi.

  • Optimoi kuvat – tämän vaihtoehdon avulla voit optimoida ja näyttää kuvia liikkeellä ollessasi käyttämällä lyhyen pikselin maailmanlaajuista CDN: ää. Shortpixel on ensiluokkainen kuvanpakkausratkaisu, jonka avulla voit optimoida 150 kuvaa kuukaudessa. Voit tarkastella nykyistä tilaa ja kiintiöiden käyttöä tässä osiossa.

Kuinka määrittää automaattinen optimointi oikein WordPress -sivustossa?

Kuvan optimointi

  • Kuvan optimoinnin laatu – voit valita yhden kiiltävistä, häviöllisistä tai häviöttömistä vaihtoehdoista. Voit tarkistaa näiden vaihtoehtojen väliset erot ja testata kuvia Shortpixel -sivulla. Tämä auttaa sinua valitsemaan tarpeisiisi parhaan vaihtoehdon.
  • Ladataanko WebP tuetuissa selaimissa? – valitse tämä vaihtoehto, jos haluat näyttää WebP -kuvia Chromelle ja muille tuetuille selaimille.
  • Ladataanko kuvia laiskasti?laiska lataus lykkää kuvaruutukuvien lataamista ja latautuu vasta, kun käyttäjä saavuttaa kuvan sijainnin selaimessa. Ota tämä vaihtoehto käyttöön, jos haluat parantaa latausnopeutta ja parantaa tuloksia Google PageSpeed ​​Insights -työkalussa.
  • Laiska latauksen poissulkemiset- tähän voit syöttää kuvatyypit tai tiedostonimet, jotta ne eivät voi latautua.

Huomaa, että useimpien laajennusten ja teemojen lataus on sisäänrakennettu vaihtoehto. Esimerkiksi sanomalehtiteema, Jetpack -laajennus, WP Smush -laajennus ja SG Optimizer -laajennus SiteGround -käyttäjille tarjoavat laiska latausvaihtoehdon. Suosittelemme laiska lataamista vain silloin, kun et käytä samanlaisia ​​vaihtoehtoja muissa sivustosi laajennuksissa tai teemoissa. Ota myös Shortpixel käyttöön vain silloin, kun sinulla ei ole ulkoista CDN: ää kuvien välimuistiin tallentamiseen. Käytä tätä myös varoen, koska sillä on käyttörajoituksia.

Extra

Kolmannen osapuolen resurssien käyttäminen sivustolla vaikuttaa sivun latausnopeuteen. "Extra" -välilehti tarjoaa lisävaihtoehtoja jonkin kolmannen osapuolen vakiosisällön optimoimiseksi sivustossasi.

  • Google -fontit – jos käytät sivustossasi Google -fontteja, sinulla on mahdollisuus poistaa käytöstä tai yhdistää.
  • Poista emojit – WordPress käyttää oletuksena Unicode -emoji -komentosarjaa lisätäksesi emoji -symboleita sivustollesi. Jos et käytä emojia, suosittelemme, että otat tämän vaihtoehdon käyttöön emojien poistamiseksi käytöstä.
  • Poista kyselymerkkijonot staattisista resursseista – CSS- ja JS -tiedostot käyttävät versionhallintaa ja lisäävät parametrin URL -osoitteeseen käyttämällä ver. Jos sinulla on staattinen verkkosivusto (näin on useimmissa WordPress -sivustoissa paitsi foorumeissa ja mukautetuissa sivustoissa), versiointia ei tarvitse käyttää, koska tiedostot ovat myös luonteeltaan staattisia. Kun yhdistät kaikki CSS- ja JS -tiedostot, laajennus näyttää automaattisesti välimuistissa olevan tiedoston staattisena resurssina. Jos olet kuitenkin sulkenut pois joitakin tiedostoja tai et ole koonnut CSS- tai JS -tiedostoja, ota tämä vaihtoehto käyttöön, jos haluat poistaa versiot URL -osoitteesta.

Kuinka määrittää automaattinen optimointi oikein WordPress -sivustossa?

Lisävaihtoehdot

  • Esiliitäntä kolmannen osapuolen verkkotunnuksiin- Preconnect mahdollistaa yhteyden muodostamisen kolmannen osapuolen palvelimeen ennen HTTP-selainpyynnön lähettämistä. voit lisätä verkkotunnukset, jotka haluat yhdistää tähän tekstikenttään.
  • Preload erityisiä pyyntöjäesijännityksen avulla ladata linkitetty URL-osoitteita, etukäteen mikä lisää sivujen latautumista. Anna esiladattavat kolmannen osapuolen verkkotunnukset, kuten fonts.google.com.
  • Async JavaScript-tiedostot- kirjoita kolmannen osapuolen JS-tiedostot, jotka haluat ladata asynkronisesti async-ominaisuuden avulla.
  • Optimoi YouTube -videot – tämä vaihtoehto tarvitsee lisälaajennuksen YouTube -videoiden laiska lataamiseen.

Usein kohtaavat ongelmat automaattisen optimoinnin kanssa

Kun optimoitu oikein, Automaattinen optimointi -laajennus voi parantaa sivustosi nopeutta ja pisteitä Google PageSpeed ​​Insights -työkalussa. Sillä on kuitenkin vähän ongelmia käytettäessä sitä nopeuden optimoinnin ratkaisuna.

1 Käyttö muiden laajennusten kanssa

Automaattisen optimoinnin ongelma on, että tämä ei ole välimuisti, vaan se sisältää puolet täysimittaisen välimuistilaajennuksen tarjoamista optimointivaihtoehdoista. Sinun on valittava laajennukset, kuten WP Super Cache, jotta voit käyttää automaattista optimointia, jotta vältyt tarpeettomilta vaihtoehdoilta. Muussa tapauksessa sinun ei tarvitse käyttää automaattista optimointia, kun sinulla on laajennuksia, kuten W3 Total Cache tai WP Rocket.

2 Upselling -integraatiot

Muutaman käytettävissä olevan vaihtoehdon avulla näet laajennuksen lisäävän integroinnin Shortpixel-, WP YouTube Lyte- ja kriticssss.com -sivustoihin. jokainen integrointi tarvitsee lisälaajennuksen tai tilin, joka ei ole välttämätön, kun valitset yhden premium -välimuistilaajennuksen, kuten WP Rocket, jolla on hyvä CDN. Lisäksi on olemassa erillinen “Optimoi enemmän!” välilehti kumppanituotteiden myymiseksi.

3 Kriittinen CSS

Kriittinen CSS on CSS, joka vaaditaan sivun sivun sivun yläosan sisällön lataamiseen. Ongelmana on, että jokainen sivun asettelu, kuten viesti, sivu, tuote, portfolio, jne., Tarvitsee erillisen kriittisen CSS: n ladatakseen sivun yläosan oikein. Tämä on monimutkainen tehtävä luoda kriittinen CSS käyttämällä toista "Autoptimize critcss.com power-up" -laajennusta ja premium-sovellusliittymäavainta osoitteesta crticialcss.com.

4 Rikkoutumissivuston asettelu

Useimmissa tapauksissa laajennus rikkoo sivustosi ulkoasun. Sinun on tarkistettava ja analysoitava manuaalisesti löytääksesi komentosarjan tai vaihtoehdon, joka rikkoo sivustosi, ja sulkea ne pois automaattisen optimoinnin laajennuksesta.

5 Kasvava välimuistin koko

CSS: n ja JS: n yhdistäminen lisää välimuistin kokoa rajusti. Olemme testanneet suositulla sanomalehti -teemalla löytääksemme välimuistin koon 100% yhdessä päivässä. Ongelmana on, että laajennus tarjoaa nämä vaihtoehdot ilman välimuistin automaattista tyhjennystä. Tämä tarkoittaa, että sinun on kirjauduttava manuaalisesti kojelautaan ja poistettava välimuisti aina, kun koko kasvaa.

Kuinka määrittää automaattinen optimointi oikein WordPress -sivustossa?

Automaattisesti optimoi välimuisti täynnä

Johtopäätös

Mielestämme tämä laajennus toimii hyvin, kun sinulla on yksinkertainen teema ja käytät yksinkertaisia ​​välimuistilaajennuksia, kuten WP Super Cache. Suurin osa käyttäjistä kuitenkin käyttää sivustollaan vakiolaajennuksia, kuten Jetpack tai W3 Total Cache. Tässä tapauksessa Automaattinen optimointi on tarpeeton vaihtoehto, jota et joko tee täydellistä laajennusta tai poista tietyt asetukset käytöstä.

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