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

Kuinka luoda kriittinen CSS WordPress -sivustolle?

5

Internetissä on monia vedä ja pudota -sivustojen rakentajia verkkosivuston luomiseen ilman teknisiä taitoja. Sinun on kuitenkin opittava joitakin SEO -teknisiä näkökohtia, jotta sivustosi pysyy hakukoneen hakutulossivujen päällä. Kriittinen CSS on yksi tällainen tekninen aihe sisällön toimittamisen optimoimiseksi vuorotellen suoraan nopeuteen. WordPress -ekosysteemi tekee tästä monimutkaisemman normaaleille käyttäjille, jotka käyttävät useita laajennuksia sivustollaan. Tässä artikkelissa tutkitaan, miten luodaan kriittinen CSS WordPress -sivustolle ja parannetaan Google PageSpeed ​​-pisteitä.

Perusteiden ymmärtäminen

Ennen kuin keskustellaan kriittisestä CSS: stä, on ymmärrettävä joitakin terminologioita, kuten sivun yläosa ja sisällön toimituksen optimointi. Lisäksi sinun on myös ymmärrettävä perusmenetelmä ulkoisten tyylitaulukoiden käyttämiseksi WordPressissä.

Taitettava sisältö

Kun avaat verkkosivuston tietokoneella tai mobiililaitteella, näytöllä näkyvä osa on sivun yläosassa. Tämä on perinteinen sanomalehtiterminologia, jossa näet sivun yläosan sisällön sivun yläosassa. Yleensä ihmiset taittivat sanomalehden ja taittoalueen yläpuolella on tärkeää sisältöä. Samoin verkkosivun näkyvimmän ylimmän osan, joka latautuu ensin, pitäisi tarjota käyttäjälle arvokkainta sisältöä. Kannattaa siis keskittyä näkyvän yläosan optimointiin, jotta se latautuu loistavasti.

Sisällön jakelun optimointi

Monet nopeustyökalut, kuten Google PageSpeed ​​Insights, mittaavat sitä, miten sivusto toimittaa sivun yläosan sisällön. Voit nähdä tämän ensimmäisen sisällöllisen maalin (FCP) mittauksena. Jos he havaitsevat esteen, näet varoituksen poistaa estoelementti. Yksi suosituista ehdotuksista, joita näet Google PageSpeed ​​Insights -työkalussa, on poistaa hahmonnusta estävät resurssit. Jos napsautat tätä ehdotusta, Google näyttää sinulle kriittisten CSS/JS-toimituksen optimoinnin ja lykkää kaikkia ei-kriittisiä CSS/JS-palveluja.

Kuinka luoda kriittinen CSS WordPress -sivustolle?

Kriittiset CSS- ja JS -ehdotukset

Hahmontamisen estävän JavaScriptin (jQuery) korjaaminen on melko helppoa, koska teemat/laajennukset lataavat oletuksena komentosarjat alatunnisteeseen. jQuery on ainoa ongelma, joka saattaa vaatia monia sivustoja lataamaan sivun yläosan. Koska WordPress käyttää myös jQueryä, voit jättää tämän virheen huomiotta, jos se johtuu vain jQuerystä. Muussa tapauksessa käytä laajennuksia, kuten WP Rocket, kaikkien skriptien yhdistämiseen ja toimittamiseen, jos se ei riko sivustosi ulkoasua.

Ongelma on kuitenkin luoda kriittinen CSS ja ladata se ensin. Tässä artikkelissa kerromme, kuinka käsitellä CSS -optimointia sivun nopeuden parantamiseksi.

Aiheeseen liittyviä: Oikeat WP Rocket -laajennusasetukset nopeuttavat sivustoasi.

CSS: n lataaminen verkkosivustoille

CSS: n lisäämiseen verkkosivullesi on useita tapoja. Voit tehdä tämän sisäisenä, sisäisenä tai ulkoisena tapana. Suosituin ja suositeltavin tapa on linkittää ulkoiset tyylitaulukot verkkosivun otsikko -osioon. Koska otsikko-osion sisältö latautuu ensin verkkosivun kanssa, se vaikuttaa ratkaisevasti sivun yläosan lataamiseen ja siten sivun nopeuteen.

<!DOCTYPE html> <html lang="en"> <head> <!-- Meta Tags for Bootstrap 4 --> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="Link Your Stylesheet URL Here"> </head> <body> Add Your Content Here <script src="Add Your Script URL Here"></script> </body> </html>

CSS: n lataaminen WordPressiin

WordPress käyttää style.css -tiedostoa ulkoisena tiedostona teeman tyylien toimittamiseen. Tämä on pakollinen tiedosto (toimintojen.php lisäksi) WordPress -verkkosivuston ajamiseen. Lisäksi jokainen sivustosi laajennus voi lisätä lisää CSS -tiedostoja. Avaa verkkosivustosi Chrome -selaimessa ja tarkista lähdekoodi (varmista, että et ole asentanut välimuistilaajennuksia tai poistanut sivun välimuistin käytöstä).

Kuinka luoda kriittinen CSS WordPress -sivustolle?

Tyylisivut otsikossa

Näet WordPress -linkit kaikkiin ulkoisiin tyylitaulukoihin sivun otsikko -osion alla. Tämä voi aiheuttaa useita ongelmia optimoinnin näkökulmasta:

  • Jotkut teemat käyttävät raskaita CSS -tyylejä, joiden koko on pieni. Kaikkia näitä tyylejä ei tarvitse ladata, kun käyttäjä avaa verkkosivun tietokoneella tai mobiililaitteella.
  • On olemassa erilaisia ​​postityyppejä, kuten tuotteita, jotka voivat käyttää täysin erilaisia ​​tyylejä. Tässä tapauksessa et tarvitse toista CSS-tiedostoa lataamiseen (sivun yläosaan).

Sivustosi jokainen sivu tarvitsee vähintään CSS-tiedoston sivun yläosan sisällön lataamiseksi. Tätä sivun lataamiseen tarvittavaa vähimmäis -CSS: ää kutsutaan teknisesti kriittiseksi CSS: ksi. Kaikissa edellä mainituissa tapauksissa Google PageSpeed ​​Insights ja muut työkalut näyttävät varoituksen CSS -toimituksen optimoimisesta.

Muista, että käyttämättömien CSS -tiedostojen ja komentosarjojen poistaminen liittyy myös liiallisen CSS / skriptien käyttöön sivulla. Tämä on kuitenkin eri asia kuin kriittinen CSS -optimointi. Et ehkä edes käytä joitakin laajennuksia tietyllä sivulla. Et esimerkiksi tarvitse yhteydenottolomakkeen laajennuksen CSS: ää sivuston kaikilla sivuilla. Tässä tapauksessa CSS/JS -tiedostot yhteystietolomaketiedostoista ovat tarpeettomia tavallisessa blogiviestissä, ja näet poistavan käyttämättömän CSS/JS -varoituksen. Katso artikkelimme käyttämättömän CSS/JS: n poistamisesta käytöstä WordPressissä ja WooCommerce -sivujen optimointi järjestelmänvalvojan AJAX -puheluita varten.

Kuinka luoda kriittinen CSS WordPressissä?

Nyt kun tiedät kuinka tärkeä kriittinen CSS parantaa sivun latausnopeutta. On kaksi tapaa luoda kriittinen CSS sivustollesi.

  • Luo kriittinen CSS manuaalisesti ja lisää se sivustoosi
  • Käytä WP Rocket -laajennusta sisällön toimittamisen optimointiin

Selitämme sekä prosessin yksityiskohdat että voit valita parhaan, joka toimii sivustollesi.

Aiheeseen liittyviä: Toimiiko WP Rocket SiteGround -isännöinnin kanssa?

Manuaalinen kriittinen CSS -sukupolvi

Internetissä on monia kolmannen osapuolen työkaluja kriittisen CSS: n luomiseksi manuaalisesti. Tämä on kuitenkin järkevää, kun kaikki sivustosi sivut ovat samankaltaisia ​​eikä niissä ole mukautettua sisältöä sivun yläosassa. Voit kokeilla muita ilmaisia ​​kriittisiä CSS -sukupolven palveluja, kuten Sitelocity.

  • Siirry Sitelocity -sivustoon ja kirjoita sivusi URL -osoite.
  • Napsauta "Luo kriittisen polun CSS" -painiketta.
  • Voit saada minimoidun kriittisen CSS: n sivullesi.

Kuinka luoda kriittinen CSS WordPress -sivustolle?

Luo kriittinen CSS

Nyt kun olet luonut kriittisen CSS: n ja seuraava tehtävä on lisätä se sivustosi otsikko -osaan. Teoriassa voit lisätä tyylit header.php -tiedostoon ja tunnisteiden väliin. On laajennuksia, jotka auttavat lisäämään tyylejä otsikko -osaan muuttamatta mallitiedostoja. Automaattinen optimointi on yksi laajennuksista, joita voimme suositella tähän tarkoitukseen. Jos käytät jo automaattista optimointia välimuistiin, voit käyttää samaa laajennusta myös kriittisen CSS: n lisäämiseen.

Voit lisätä kriittisen CSS: n Autoptimize -laajennuksen "CSS -asetukset" -kohtaan. Ota ensin käyttöön "Inline and Defer CSS" -valintaruutu ja liitä kriittinen CSS näkyviin tulevaan tekstiruutuun.

Kuinka luoda kriittinen CSS WordPress -sivustolle?

CSS -asetukset

Kuten huomaat, Autoptimize-laajennus voi myös automaattisesti upottaa sivun yläosan sivun yläosaan ja lykätä muita tyylejä. Tämä kuitenkin lisää nopeasti välimuistin koon 100%: iin, eikä laajennuksessa ole vaihtoehtoa tyhjentää välimuisti automaattisesti. Lisäksi se rikkoo sivuston useimmissa tapauksissa. Voit valita Autoptimize CriticalCSS Power-Up -laajennuksen, joka auttaa sinua paremmin. Jotta voit käyttää tätä lisäosaa, sinun on hankittava sovellusliittymä Criticalcss.comilta hintaan 10 dollaria kuukaudessa.

Miksi manuaalinen kriittinen CSS -generointi ei toimi?

Vaikka yllä oleva manuaalinen lisäysprosessi näyttää helpolta, se ei ole helppo tehtävä. Seuraavassa on joitain syitä siihen, miksi kriittinen CSS ei toimi.

  • Sinulla voi olla erilaista sisältöä, kuten sivuja, blogiviestejä, tuotteita jne. Sivustosi jokainen sisältötyyppi tarvitsee erilaisen kriittisen CSS -tiedoston ladattavaksi sivun yläosan. Laajennuksen tai manuaalisen lisäyksen käyttäminen lataa kriittisen CSS: n kaikille sivuille ja rikkoo osan sisällöstä.
  • Sinun on luotava kriittinen CSS aina, kun päivität teeman, laajennuksen ja WordPress -ytimen. Muussa tapauksessa vanhan kriittisen CSS: n käyttö rikkoo sivustosi ulkoasun. Tämä on eräänlainen mahdoton tehtävä tavallisille käyttäjille päivittää jatkuvasti kriittistä CSS: ää jokaisesta sivuston päivityksestä. Kun automaattiset päivitysvaihtoehdot ovat käytettävissä, sinun on oltava erittäin varovainen, ennen kuin päivität laajennuksen/teeman/ytimen asennuksessasi.
  • Saatat tarvita erillisen kriittisen CSS: n mobiili- ja pöytälaitteille.

Kaikissa näissä ongelmissa ainoa vaihtoehto on käyttää jotakin laajennusta, joka huolehtii näistä ja luo kriittisen CSS: n dynaamisesti ja automaattisesti.

Luo kriittinen CSS WordPressille WP Rocketin avulla

Onneksi sinulla on välimuistilaajennus, joka tekee täsmälleen tämän kriittisen CSS -sukupolven WordPressissä. WP Rocket on yksinkertaistettujen asetustensa vuoksi yksi WordPressin suosituimmista välimuistilaajennuksista. Jälleen kriittinen CSS -sukupolvi on yksi laajennuksen kauneuksista, joista jokainen tavallinen käyttäjä voi hyötyä rikkomatta sivustoa.

  • Ensin sinun on ostettava WP Rocket premium -laajennus.
  • Kun olet asentanut ja aktivoinut WP Rocketin, siirry kohtaan "Asetukset> WP Rocket" ja siirry kohtaan "Tiedoston optimointi".
  • Vieritä alas ja ota käyttöön "Optimoi CSS -toimitus" -valintaruutu.

Kuinka luoda kriittinen CSS WordPress -sivustolle?

Ota kriittinen CSS käyttöön WP Rocketissa

Tämä antaa laajennuksen luoda automaattisesti kriittisen CSS: n jokaiselle WordPress -sivustosi postityypille. Se sisältää etusivun. Kotisivu, sivu, viesti ja muut sivustossasi käytetyt mukautetut viestityypit. Tarvittaessa voit lisätä kriittisiä CSS-tiedostoja, jotka luot manuaalisesti kolmannen osapuolen työkalun avulla. Yleensä voit jättää tämän kriittisen CSS -vararuudun tyhjäksi. Voit myös ottaa erillisen mobiilivälimuistin käyttöön "Välimuisti" -osiossa.

Huomaa, että WP Rocket on premium -laajennus, jolla on yhden sivuston lisenssi saatavana 49 dollarilla. Mielestämme kannattaa ostaa tämä laajennus, koska se tarjoaa päästä päähän välimuistinratkaisun nopeuden optimoimiseksi. Laajennuksessa on vuoden tuki ja päivitykset. Sen jälkeen se toimii edelleen ja voit käyttää kriittistä CSS: ää ja muita ominaisuuksia uusimatta. Voit uusia 30%: n alennuksella saadaksesi tukea ja saadaksesi lisäominaisuuksia. Tämä on paljon parempi vaihtoehto verrattuna 10 dollariin kuukaudessa kriittisen css -sovellusliittymän käytettäväksi Automaattisen optimoinnin kanssa.

Luo kriittinen CSS uudelleen

Kun päivität teeman/laajennuksen/WordPress -ytimen tai lisäät mukautettuja postityyppejä sivustoosi, kriittinen CSS on luotava uudelleen. Muussa tapauksessa WP Rocket käyttää vanhaa kriittistä CSS: ää ja rikkoo sivustosi ulkoasun. Muista siis luoda kriittinen CSS uudelleen unohtamatta.

  • Napsauta "WP Rocket" -valikkoa yläpalkissa ja valitse "Regenerate Critical CSS" -vaihtoehto.
  • Vaihtoehtoisesti voit siirtyä laajennuksen hallintapaneeliin ja napsauttaa "Regenerate Critical CSS" -painiketta.

Kuinka luoda kriittinen CSS WordPress -sivustolle?

Luo kriittinen CSS uudelleen

Mukautettu kriittinen CSS tietylle sivulle

Kuten mainittiin, sinulla saattaa olla kotisivu tai toinen sivu, joka on luotu sivunrakennuslaajennuksella. Tällä sivulla on täysin erilainen kriittinen CSS verrattuna kaikkiin muihin sivustosi blogiviesteihin. Tässä tapauksessa sinun on luotava erillinen kriittinen CSS ja ladattava ehdollisesti vain kyseiselle sivulle. WP Rocket voi auttaa sinua saavuttamaan tämän muutamalla napsautuksella.

  • Siirry sen sivun sivu- / viestieditoriin, jolle haluat luoda erillisen kriittisen CSS: n.
  • Etsi sivupalkin asiakirjapaneelista "WP Rocket Options” -paneeli. Jos et löydä, napsauta oikeassa yläkulmassa olevaa kolmen pisteen painiketta ja valitse “Asetukset”. Ponnahdusikkunassa voit ottaa käyttöön tarvittavat asiakirjapaneelit, jotka ovat käytettävissä sivustossasi.
  • Valitse "Optimoi CSS -toimitus" -valintaruutu ja napsauta "Luo tietty CPCSS" -painiketta.
  • Tämä luo tälle sivulle erityisen kriittisen CSS: n ja laajennus lataa tämän kriittisen CSS: n, kun käyttäjät vierailevat sivulla.

Kuinka luoda kriittinen CSS WordPress -sivustolle?

Luo kriittinen CSS tietylle sivulle

Aiheeseen liittyviä: WP Rocket -välimuistilaajennuksen tarkistus.

Kriittisen CSS: n testaaminen

Kun olet ottanut käyttöön manuaalisen menetelmän tai käyttänyt WP Rocket -laajennusta, voit testata sivua katsomalla sivulähdettä. Muista kirjautua ulos hallintapaneelistasi tai ottaa välimuisti käyttöön kirjautuneille käyttäjille laajennuksessa. Kuten alla olevasta kuvakaappauksesta näet, WP Rocket lisää tärkeän CSS: n otsikkoon.

Kuinka luoda kriittinen CSS WordPress -sivustolle?

WP Rocket Critical CSS

Voit myös tarkistaa sivut Google PageSpeed ​​Insights -työkalussa. Jos kaikki menee hyvin, näet, että renderointia estävät resurssit ja muut CSS-virheet poistetaan ohitettujen tulosten alta. Tämä osoittaa, että olet ottanut kriittisen CSS: n oikein käyttöön sivustolla.

Lopulliset sanat

Toivomme, että tämä artikkeli olisi korostanut kriittisen CSS: n merkitystä WordPress -sivustossa. Voit käyttää manuaalista vaihtoehtoa, jos sinulla on pienempi sivusto, joka sisältää muutamia sivuja. Voit kuitenkin kokeilla WP Rocket -laajennusta käynnissä olevalle blogille, jossa on paljon viestejä ja erilaisia ​​postityyppejä. Vaikka se maksaa sinulle rahaa, voit saada täydellisen välimuistin ratkaisun sivustollesi.

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