Razumevanje WordPress CSS
Preden se poglobimo, poglejmo, kako običajni CSS deluje v WordPressu.
Vsaka tema WordPress je sestavljena iz style.css, ki vsebuje vso kodo, potrebno za oblikovanje vašega spletnega mesta. Razvijalci tem bi morali podpirati vse funkcije WordPressa, ki vključujejo objave v blogu, komentarje, stran z izdelki, stran s članstvom, obrazce itd. Drugi vtičniki, ki jih namestite, lahko dodajo tudi podobne slogovne liste css.
To lahko naredi datoteke css napihnjene in velike v velikosti 200 kb ali celo več.
Kaj je Critical Path CSS?
Ko vaše datoteke CSS rastejo, mora vaš brskalnik prenesti te velike datoteke, jih razčleniti in upodabljati. Znano tudi kot blokiranje upodabljanja. Povečal bo tudi prvo smiselno upodabljanje in prvo smiselno upodabljanje.
Critical Path CSS je CSS, ki je potreben za upodabljanje zgornje vsebine na vsaki spletni strani. Kot že ime pove, "kritični" CSS, ki brskalniku pomaga, da ga hitro nariše in upodablja, preden naloži celotne datoteke CSS.
Običajno je css kritične poti vdelan v glavo, izvorna datoteka css pa se zaradi lažje uporabe naloži asinhrono ali v nogo.
Zakaj je CSS Critical Path tako pomemben?
Gotovo ste že videli opozorilo orodij, kot sta Google PageSpeed Insights ali GTmetrix, ki pravi "optimiziraj dostavo css" ali "odloži neuporabljeni css".
Kritični CSS nima nič opraviti s časom nalaganja strani. Ne poveča/zmanjša časa nalaganja. Vendar daje veliko boljšo uporabniško izkušnjo. Pomaga pri hitrem "upodabljanju" ali "barvanju" spletne strani.
- Izboljša prvo vlečenje vsebine (FCP)
- Izboljša prvo znatno plačilo (FMP)
- Odstranite neuporabljeni CSS (tehnično ga ne odstranite, ampak dajte prednost "uporabnemu" CSS-ju)
Tukaj sta dva posnetka zaslona mojega bloga s kritičnim CSS-jem in brez njega.
Kot lahko vidite v razdelku »brez kritične poti css«, je trajalo skoraj 5 sekund, da se uporabniku pokaže nekaj uporabnega v mobilni napravi. Brskalnik mora za datoteko css narediti dodatno zahtevo HTTP, jo prenesti, razčleniti, da začne upodabljati. Toda pri uporabi kritičnega css mora biti ves potrebni css vgrajen in brskalnik lahko začne upodabljati takoj po nalaganju datoteke HTML v sekundi ali manj.
Kako ustvariti kritičen CSS v WordPressu?
Obstaja več načinov za ustvarjanje kritičnega CSS v WordPressu.
Uporaba vtičnikov za predpomnjenje
WP Rocket je vrhunski vtičnik za predpomnjenje, ki deluje zelo dobro.
Eden od razlogov, zakaj uporabljam WP Rocket na vsakem spletnem mestu, je sama kritična generacija CSS. Ločeno ustvarijo kritični CSS za domačo stran, stran z objavami, stran kategorije, stran izdelka itd. in jo vdelajo. Obnovili bodo kritični CSS, če se spremeni tema ali nastavitev.
Vse je mogoče narediti s pritiskom na gumb.
Drugi vtičniki za predpomnjenje, ki lahko ustvarijo kritičen CSS
Swift Performance in LiteSpeed (zahteva strežnik LiteSpeed/OpenLiteSpeed) sta podobna vtičnika, ki lahko ustvarita kritični CSS. Oba vtičnika imata v svojih strežnikih vgrajen oblak in polni predpomnilnik.
Uporaba Autoptimize + Free Critical CSS Generator
Obstajajo spletna orodja tretjih oseb, ki zagotavljajo pomemben css z vnosom URL-ja vašega spletnega mesta. pegasaas je tako odlično brezplačno orodje.
To storite tako:
Korak 1. Pojdite na https://pegasaas.com/critical-path-css-generator/ in vnesite svoj URL. Kopirajte ustvarjen "Critical Path CSS".
2. korak V nastavitvah samodejne optimizacije (omogočite napredne nastavitve) v razdelku »Možnosti CSS« označite »Inline and Defer CSS« in prilepite kopirani CSS.
Prednosti:
- Je brezplačen
minusi:
- Ni ločenega kritičnega CSS-ja za različne vrste strani (npr. domača stran, stran z objavami, stran kategorije, stran izdelka itd.)
- Ne obnavljajte samodejno ob spremembi teme/nastavitev
Zakaj WordPress sam ne more ustvariti kritičnega CSS-ja?
Kot ste morda opazili, ustvarjanje kritične poti css omogoča zunanje storitve. Zakaj ga torej WordPress sam ne more ustvariti?
Ustvarjanje Critical CSS omogočajo odprtokodni projekti, kot so Critical (od Googla), CriticalCSS ali penthouse. Vsi ti projekti temeljijo na NodeJS in ne PHP. Torej morate na svoj strežnik namestiti NodeJS. Večina ponudnikov gostovanja v skupni rabi/upravljanju tega ne dovoljuje iz več razlogov.
