Izpratne par WordPress CSS
Pirms ienirt, sapratīsim, kā parastais CSS darbojas pakalpojumā WordPress.
Katrs WordPress motīvs sastāv no style.css, kurā ir viss kods, kas nepieciešams vietnes stila veidošanai. Motīvu izstrādātājiem ir jāatbalsta visas WordPress funkcijas, tostarp emuāra ziņas, komentāri, produktu lapa, dalības lapa, veidlapas utt. Arī citi jūsu instalētie spraudņi var pievienot līdzīgas css stila lapas.
Tādējādi css faili var kļūt uzpūsti un lieli, sasniedzot 200 kb vai pat vairāk.
Kas ir kritiskā ceļa CSS?
Pieaugot jūsu CSS failiem, jūsu pārlūkprogrammai ir jālejupielādē šie lielie faili, tie jāparsē un jāatveido. Zināms arī kā renderēšanas bloķēšana. Tas arī palielinās pirmo nozīmīgo renderēšanu un pirmo nozīmīgo renderēšanu.
Critical Path CSS ir CSS, kas nepieciešama iepriekš minētā satura renderēšanai katrā tīmekļa lapā. Kā norāda nosaukums, "kritiskā" CSS, kas palīdz pārlūkprogrammai ātri to uzzīmēt un renderēt pirms pilnu CSS failu ielādes.
Parasti kritiskā ceļa css tiek iegults galvenē, un avota css fails tiek ielādēts asinhroni vai kājenē lietošanas ērtībai.
Kāpēc Critical Path CSS ir tik svarīga?
Noteikti jau esat redzējis brīdinājumu no tādiem rīkiem kā Google PageSpeed Insights vai GTmetrix, kurā teikts "optimizēt css piegādi" vai "atlikt neizmantoto css".
Kritiskajam CSS nav nekāda sakara ar lapas ielādes laiku. Tas nepalielina/samazina ielādes laiku. Bet sniedz daudz labāku lietotāja pieredzi. Tas palīdz ātri "renderēt" vai "izkrāsot" tīmekļa lapu.
- Uzlabo pirmo satura izlozi (FCP)
- Uzlabo pirmo ievērojamo maksājumu (FMP)
- Noņemiet neizmantoto CSS (tehniski nenoņemiet to, bet piešķiriet prioritāti "noderīgajam" CSS)
Šeit ir divi mana emuāra ekrānuzņēmumi ar kritisku CSS un bez tā.
Kā redzams sadaļā "nav kritiska css ceļa", bija nepieciešamas gandrīz 5 sekundes, lai mobilajā ierīcē parādītu lietotājam kaut ko noderīgu. Lai sāktu renderēšanu, pārlūkprogrammai ir jāveic papildu HTTP pieprasījums css failam, tas jālejupielādē, parsē. Bet, izmantojot kritisko css, visam nepieciešamajam css ir jābūt iekļautam, un pārlūkprogramma var sākt renderēšanu uzreiz pēc HTML faila ielādes sekundes vai ātrāk.
Kā izveidot kritisku CSS programmā WordPress?
Ir vairāki veidi, kā ģenerēt svarīgu CSS pakalpojumā WordPress.
Kešatmiņas spraudņu izmantošana
WP Rocket ir augstākās kvalitātes kešatmiņas spraudnis, kas darbojas ļoti labi.
Viens no iemesliem, kāpēc es izmantoju WP Rocket katrā vietnē, ir pati kritiskā CSS paaudze. Tie ģenerē kritisko CSS atsevišķi mājas lapai, ziņu lapai, kategoriju lapai, produkta lapai utt. un iegulsta to. Tie atjaunos kritisko CSS, ja tiks veiktas izmaiņas motīvā vai iestatījumā.
Visu var izdarīt, nospiežot pogu.
Citi kešatmiņas spraudņi, kas var ģenerēt kritisku CSS
Swift Performance un LiteSpeed (nepieciešams LiteSpeed/OpenLiteSpeed serveris) ir līdzīgi spraudņi, kas var ģenerēt kritisko CSS. Abiem šiem spraudņiem savos serveros ir iebūvēts mākonis un pilna kešatmiņa.
Izmantojot automātisko optimizāciju + bezmaksas kritisko CSS ģeneratoru
Ir trešo pušu tiešsaistes rīki, kas nodrošina svarīgu css, ievadot jūsu vietnes URL. pegasaas ir tik lielisks bezmaksas rīks.
Lūk, kā to izdarīt:
1. darbība. Dodieties uz vietni https://pegasaas.com/critical-path-css-generator/ un ievadiet savu URL. Kopējiet ģenerēto "Critical Path CSS".
2. darbība Automātiskās optimizācijas iestatījumos (iespējojiet papildu iestatījumus) sadaļā "CSS opcijas" atzīmējiet "Iekļauts un atlikt CSS" un ielīmējiet kopēto CSS.
Plusi:
- Par brīvu
Mīnusi:
- Nav atsevišķa kritiskā CSS dažādiem lapu veidiem (piemēram, sākumlapa, ziņu lapa, kategorijas lapa, produkta lapa utt.)
- Nepārveidojiet automātiski, mainot motīvu/iestatījumu
Kāpēc WordPress pati nevar ģenerēt svarīgu CSS?
Kā jūs, iespējams, pamanījāt, css kritiskā ceļa izveide iespējo ārējos pakalpojumus. Tātad, kāpēc pati WordPress nevar to ģenerēt?
Critical CSS izveide ir iespējama, izmantojot atvērtā pirmkoda projektus, piemēram, Critical (no Google), CriticalCSS vai penthouse. Visi šie projekti ir balstīti uz NodeJS, nevis PHP. Tātad, jums ir jāinstalē NodeJS savā serverī. Lielākā daļa koplietoto/pārvaldīto mitināšanas pakalpojumu sniedzēju to neatļauj vairāku iemeslu dēļ.
