{"id":238612,"date":"2022-04-05T10:34:00","date_gmt":"2022-04-05T07:34:00","guid":{"rendered":"https:\/\/themewp.inform.click\/?p=238612"},"modified":"2022-04-27T12:58:34","modified_gmt":"2022-04-27T09:58:34","slug":"kuinka-optimoida-css-toimitus-wordpressissa","status":"publish","type":"post","link":"https:\/\/themewp.inform.click\/fi\/kuinka-optimoida-css-toimitus-wordpressissa\/","title":{"rendered":"Kuinka optimoida CSS-toimitus WordPressiss\u00e4"},"content":{"rendered":"

Jos olet t\u00e4\u00e4ll\u00e4, se johtuu todenn\u00e4k\u00f6isesti siit\u00e4, ett\u00e4 sait t\u00e4m\u00e4n ilmoituksen Googlen PageSpeed \u200b\u200bInsights<\/a> -testiss\u00e4:<\/p>\n

\"Kuinka<\/a><\/p>\n

Vaikka voi olla vaikeaa poistaa kaikki render\u00f6innin est\u00e4v\u00e4t tiedostot, se ei ole niin vaikeaa oikeilla ty\u00f6kaluilla.<\/p>\n

T\u00e4ss\u00e4 oppaassa n\u00e4yt\u00e4n sinulle kolme tapaa nopeuttaa sivustoasi<\/a> optimoidun CSS-toimituksen avulla. T\u00e4\u00e4ll\u00e4 on vaihtoehtoja sek\u00e4 WordPress-uutisille ett\u00e4 -kehitt\u00e4jille.<\/p>\n

Aloitetaan ylh\u00e4\u00e4lt\u00e4 \u2013 mit\u00e4 tarkalleen ottaen tarkoittaa CSS:n toimituksen optimointi WordPress-sivustollasi?<\/p>\n

Mit\u00e4 "optimoi CSS-toimitus" tarkoittaa?<\/h2>\n

Haluan tehd\u00e4 ensin todella selv\u00e4ksi, mit\u00e4 tarkoitan.<\/p>\n

CSS-tiedostoja k\u00e4ytet\u00e4\u00e4n verkkosivujen tyyliin<\/a>. Jokainen WordPress-teema lataa style.css-tiedoston, ja sinulla on todenn\u00e4k\u00f6isesti kourallinen lis\u00e4tyylitaulukoita (CSS-tiedostoja), jotka on lis\u00e4tty laajennuksilla. Jos sinulla on esimerkiksi laajennus, joka lis\u00e4\u00e4 uuden widgetin, sen on ladattava toinen tyylitaulukko t\u00e4m\u00e4n widgetin tyylist\u00e4miseksi.<\/p>\n

Kaikki CSS-tiedostot ladataan ennen kuin sivustosi hahmonnetaan.<\/strong><\/p>\n

T\u00e4m\u00e4 tarkoittaa, ett\u00e4 vierailijat n\u00e4kev\u00e4t tyhj\u00e4n valkoisen n\u00e4yt\u00f6n siihen asti. T\u00e4ss\u00e4 on nyt asiaa\u2026<\/p>\n

Suurin osa ladatusta CSS:st\u00e4 ei tarvita mill\u00e4 tahansa sivulla, jolla vierailija on, ja viel\u00e4 v\u00e4hemm\u00e4n sit\u00e4 tarvitaan siihen, mit\u00e4 h\u00e4n n\u00e4kee v\u00e4litt\u00f6m\u00e4sti. Miksi esimerkiksi pakottaa heid\u00e4t odottamaan, kun ne lataavat alatunnisteen tyylej\u00e4? Menee luultavasti ainakin muutama sekunti, ennen kuin he n\u00e4kev\u00e4t sen (jos koskaan n\u00e4kev\u00e4t).<\/p>\n

Lykk\u00e4\u00e4m\u00e4ll\u00e4 CSS-tiedostomme tai lataamalla ne asynkronisesti, voimme antaa sivuston n\u00e4ky\u00e4 vierailijan selaimessa ennen kuin tyylisivut ovat latautuneet.<\/p>\n

T\u00e4ss\u00e4 oppaassa jaan kolme erilaista l\u00e4hestymistapaa tyylitaulukoiden lykk\u00e4\u00e4miseen ja CSS-toimituksen optimointiin.<\/p>\n

Optimoidut kriittiset render\u00f6intipolut toiminnassa<\/h3>\n

Jos vierailet Compete Themes -kotisivulla<\/a>, pid\u00e4 silm\u00e4ll\u00e4 selainv\u00e4lilehden latausilmaisinta, kun sivusto latautuu. Huomaat, ett\u00e4 kun sivusto on n\u00e4kyviss\u00e4 ja n\u00e4ytt\u00e4\u00e4 olevan ladattu, latausilmaisin jatkaa py\u00f6rimist\u00e4 vain hetken pidemp\u00e4\u00e4n.<\/p>\n

T\u00e4m\u00e4 on esimerkki siit\u00e4, milt\u00e4 optimoitu CSS-toimitus n\u00e4ytt\u00e4\u00e4 k\u00e4yt\u00e4nn\u00f6ss\u00e4.<\/p>\n

Jos haluat n\u00e4hd\u00e4 esimerkin eritt\u00e4in optimoidusta kriittisest\u00e4 render\u00f6intipolusta<\/a>, k\u00e4y Amazonissa. Koko sivusto ei lataudu kerralla. Sen sijaan muutamassa sekunnissa n\u00e4et eri elementtej\u00e4 sivulle huolellisesti optimoidun render\u00f6intipolun ansiosta.<\/p>\n

1 WP raketti<\/h2>\n

K\u00e4yt\u00e4n WP Rocket<\/a> -laajennusta t\u00e4\u00e4ll\u00e4 Compete Themesissa ja suosittelen sit\u00e4 ennen kaikkia muita kriittisen render\u00f6intipolun optimointiratkaisuja.<\/p>\n

CSS-toimituksen optimointi WP Rocketilla ei todellakaan voisi olla helpompaa. Tiedoston optimointi -valikossa on valintaruutu, jolla t\u00e4m\u00e4 ominaisuus otetaan k\u00e4ytt\u00f6\u00f6n.<\/p>\n

\"Kuinka<\/a><\/p>\n

Kun t\u00e4m\u00e4 on valittu, WP Rocket lykk\u00e4\u00e4 automaattisesti kaikkia tyylisivujasi, jotta niit\u00e4 ei ladata ennen kuin sivusto n\u00e4kyy vierailijan selaimessa. Nyt, jos kaikki CSS lyk\u00e4tt\u00e4isiin, sivustosi n\u00e4ytt\u00e4isi kamalalta, kunnes se ladataan, ja WP Rocket -kehitt\u00e4j\u00e4t ovat k\u00e4sitelleet t\u00e4m\u00e4n tyylikk\u00e4\u00e4sti laajennuksellaan.<\/p>\n

Kun otat t\u00e4m\u00e4n vaihtoehdon k\u00e4ytt\u00f6\u00f6n, WP Rocket l\u00f6yt\u00e4\u00e4 automaattisesti CSS:n, jota tarvitaan niiden sivustosi osien tyyliin, jotka vierailijat n\u00e4kev\u00e4t sivustosi latautuessa, ja t\u00e4m\u00e4 koodi lis\u00e4t\u00e4\u00e4n dokumenttiin.<\/p>\n

Toisin sanoen sivustosi n\u00e4kyy nopeammin selaimessa ja n\u00e4ytt\u00e4\u00e4 olevan t\u00e4ysin ladattu, kun taas viiv\u00e4stetty CSS latautuu seuraavan sekunnin tai kahden aikana.<\/p>\n

Mielest\u00e4ni t\u00e4m\u00e4 on ylivoimaisesti paras ratkaisu CSS-toimituksen optimointiin WordPressin avulla.<\/p>\n

WP Rocket on premium-laajennus, mutta jos nopeammat latausajat ansaitsevat enemm\u00e4n tuloja sivustostasi, harkitsen ehdottomasti sen hankkimista sivustollesi. Minulla on paljon yksityiskohtaisempi katsaus WP Rocketiin,<\/a> jonka voit lukea, jos haluat oppia lis\u00e4\u00e4. Muussa tapauksessa voit tutustua heid\u00e4n sivustoonsa t\u00e4\u00e4ll\u00e4<\/a>.<\/p>\n

2 Optimoi<\/h2>\n

Toinen vaihtoehto, jota suosittelen, on Autoptimize-<\/a> laajennus.<\/p>\n

\"Kuinka<\/a><\/p>\n

T\u00e4m\u00e4 monipuolinen suorituskykylaajennus tarjoaa muutamia tapoja optimoida CSS-toimituksen. Yksinkertaisin vaihtoehto on yksinkertaisesti upottaa kaikki CSS. T\u00e4m\u00e4 ottaa kaiken tyylitaulukoistasi l\u00f6ytyv\u00e4n CSS:n ja lis\u00e4\u00e4 sen suoraan sivudokumenttiin, jotta tyylisivuja ei ladata.<\/p>\n

L\u00f6yt\u00e4\u00e4ksesi t\u00e4m\u00e4n vaihtoehdon, sinun on napsautettava N\u00e4yt\u00e4 lis\u00e4asetukset -painiketta yl\u00e4reunassa.<\/p>\n

\"Kuinka<\/a><\/p>\n

N\u00e4et sitten vaihtoehdon upottaa kaikki CSS.<\/p>\n

\"Kuinka<\/a><\/p>\n

Vaikka t\u00e4m\u00e4 vaihtoehto voi parantaa suorituskyky\u00e4, jos sivudokumenttiin on lis\u00e4tty liikaa CSS:\u00e4\u00e4, se voi itse asiassa hidastaa sivustoasi. Se voi olla kokeilemisen arvoista.<\/p>\n

Muuten j\u00e4rkev\u00e4 l\u00e4hestymistapa on ottaa k\u00e4ytt\u00f6\u00f6n vaihtoehto Inline- ja Defer CSS sen sijaan. T\u00e4m\u00e4 lykk\u00e4\u00e4 kaikkia tyylisivuja ja lis\u00e4\u00e4 vain kriittisen CSS:n. Se ei kuitenkaan l\u00f6yd\u00e4 automaattisesti kriittist\u00e4 CSS:\u00e4\u00e4 sinulle, kuten WP Rocket.<\/p>\n

Joten miten saat sivustosi kriittisen CSS:n? Jopa kokeneelle WP-kehitt\u00e4j\u00e4lle t\u00e4m\u00e4 voi olla er\u00e4\u00e4nlainen p\u00e4\u00e4n raapiminen.<\/p>\n

Vaikka en ole itse testannut t\u00e4m\u00e4n ty\u00f6kalun luotettavuutta, t\u00e4m\u00e4 ilmainen Critical Path CSS Generator<\/a> -ty\u00f6kalu olisi varteenotettava l\u00e4hestymistapa. Kirjoita sivustosi URL-osoite, niin se palauttaa CSS:n, jonka sinun on ehdottomasti ladattava.<\/p>\n

Voit sitten kopioida ja liitt\u00e4\u00e4 koodin kriittisen polun CSS-ruutuun Autoptimizessa.<\/p>\n

\"Kuinka<\/a><\/p>\n

Jos k\u00e4yt\u00e4t t\u00e4t\u00e4 l\u00e4hestymistapaa, saatat joutua lis\u00e4\u00e4m\u00e4\u00e4n CSS:\u00e4\u00e4 sivustosi eri sivuille, ja se saattaa edellytt\u00e4\u00e4, ett\u00e4 tunnet teemasi CSS:n eritt\u00e4in hyvin varmistaaksesi yhten\u00e4isen tyylin.<\/p>\n

Toinen l\u00e4hestymistapa<\/h3>\n

On olemassa laajennus nimelt\u00e4 Autoptimize Kriticalcss.com power-up<\/a>. Se on melkoinen suupala, mutta t\u00e4m\u00e4n lis\u00e4laajennuksen avulla voit luoda automaattisesti sivustosi kriittisen CSS:n Kritiikkicss.com-<\/a> palvelun avulla.<\/p>\n

Sinun on kirjauduttava CriticalCSS:\u00e4\u00e4n saadaksesi maksullisen tilin k\u00e4ytt\u00e4\u00e4ksesi t\u00e4t\u00e4 vaihtoehtoa.<\/p>\n

3 Nopeuta<\/h2>\n

T\u00e4m\u00e4 viimeinen vaihtoehto on eritt\u00e4in nopea ja WordPress-kehitt\u00e4j\u00e4n on helppo ottaa k\u00e4ytt\u00f6\u00f6n.<\/p>\n

Speed \u200b\u200bUp<\/a> on kevyt laajennus, jonka avulla voit lyk\u00e4t\u00e4 ei-kriittisi\u00e4 tyylisivuja.<\/p>\n

\"Kuinka<\/a><\/p>\n

Vaikka t\u00e4m\u00e4 ei t\u00e4ysin optimoi CSS-toimitustasi, se auttaa.<\/p>\n

Oletetaan, ett\u00e4 teemasi lis\u00e4\u00e4 yhden tyylitaulukon ja sitten on viisi muuta tyylitaulukkoa, jotka ovat lis\u00e4nneet laajennukset. Jos vain teematyylitaulukko on t\u00e4rke\u00e4 ladata ennen sivuston n\u00e4ytt\u00e4mist\u00e4, voit lyk\u00e4t\u00e4 muuta viisi.<\/p>\n

Speed \u200b\u200bUp tarjoaa sinulle yksinkertaisen suodattimen, jonka voit lis\u00e4t\u00e4 alatason teeman functions.php-tiedostoon (tai liit\u00e4nn\u00e4iseen) lyk\u00e4t\u00e4ksesi haluamasi tyylisivut. Tarvitset vain kunkin ladattavan tyylitaulukon kahvat. L\u00f6yd\u00e4t t\u00e4\u00e4lt\u00e4<\/a> joitain yksinkertaisia \u200b\u200btoimintoja<\/a> kaikkien sivustollasi rekister\u00f6ityjen tyylisivujen kahvojen tulostamiseen.<\/p>\n

T\u00e4m\u00e4 on j\u00e4lleen nopeaa ja helppoa kehitt\u00e4j\u00e4lle, mutta en suosittele t\u00e4t\u00e4 ratkaisua, jos et kirjoita koodia.<\/p>\n

Johtop\u00e4\u00e4t\u00f6s<\/h2>\n

Toivottavasti opit jotain WordPressin suorituskyvyn optimoinnista<\/a> t\u00e4ss\u00e4 viestiss\u00e4.<\/p>\n

Vaikka kukin kolmesta yll\u00e4 olevista ratkaisuista voi toimia hyvin, minun on annettava viimeinen huuto WP Rocket -laajennukselle<\/a>. Sek\u00e4 bloggaajana ett\u00e4 WordPress-teeman kehitt\u00e4j\u00e4n\u00e4 minusta on niin helppoa ja kivutonta ty\u00f6skennell\u00e4.<\/p>\n

Jos haluat lis\u00e4\u00e4 vinkkej\u00e4 sivustosi nopeuttamiseen, saatat pit\u00e4\u00e4 t\u00e4st\u00e4 kuvan optimointioppaasta<\/a> tai WP Engine<\/a> -arvostelustani, johon Compete Themes luottaa nopeiden latausaikojen saavuttamiseksi.<\/p>\n

: www.competethemes.com<\/a><\/div><\/p>\n","protected":false},"excerpt":{"rendered":"

Opi nopeuttamaan WordPress-sivustoasi jollakin n\u00e4ist\u00e4 kolmesta l\u00e4hestymistavasta optimoidaksesi CSS-toimituksen. Aloittelijan ja edistyneen vinkit sis\u00e4ll\u00e4.<\/p>\n","protected":false},"author":1,"featured_media":256898,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":"","_wp_rev_ctl_limit":""},"categories":[663,652,583,610],"tags":[843],"class_list":["post-238612","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-freelance","category-miten-tehda","category-nopeuta-wordpressia","category-uncategorized-6","tag-affiai-fi"],"_links":{"self":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/posts\/238612","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/comments?post=238612"}],"version-history":[{"count":0,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/posts\/238612\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/media\/256898"}],"wp:attachment":[{"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/media?parent=238612"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/categories?post=238612"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/themewp.inform.click\/fi\/wp-json\/wp\/v2\/tags?post=238612"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}