WordPress CSS:n ymmärtäminen
Ennen kuin sukeltaamme, ymmärrämme, kuinka tavallinen CSS toimii WordPressissä.
Jokainen WordPress-teema koostuu style.css-tiedostosta, joka sisältää kaiken sivustosi tyyliin tarvittavan koodin. Teemankehittäjien tulee tukea kaikkia WordPressin ominaisuuksia, kuten blogitekstejä, kommentteja, tuotesivuja, jäsensivuja, lomakkeita jne. Muut asentamasi laajennukset voivat myös lisätä samanlaisia css-tyylitaulukoita.
Tämä voi tehdä css-tiedostoista paisuneita ja suuria 200 kt tai jopa enemmän.
Mikä on Critical Path CSS?
CSS-tiedostojesi kasvaessa selaimesi on ladattava suuret tiedostot, jäsennettävä ja renderöitävä ne. Tunnetaan myös nimellä renderöinnin esto. Se lisää myös ensimmäistä merkityksellistä renderöintiä ja ensimmäistä merkityksellistä renderöintiä.
Critical Path CSS on CSS, jota tarvitaan yllä olevan sisällön hahmontamiseen jokaisella verkkosivulla. Kuten nimestä voi päätellä, "kriittinen" CSS, joka auttaa selainta nopeasti piirtämään ja renderöimään sen ennen täydellisten CSS-tiedostojen lataamista.
Yleensä kriittisen polun css upotetaan otsikkoon ja lähde css-tiedosto ladataan asynkronisesti tai alatunnisteeseen käytön helpottamiseksi.
Miksi Critical Path CSS on niin tärkeä?
Olet jo nähnyt varoituksen työkaluista, kuten Google PageSpeed Insights tai GTmetrix, jossa sanotaan "optimoi css-toimitus" tai "lykkää käyttämätöntä css:tä".
Kriittisellä CSS:llä ei ole mitään tekemistä sivun latausajan kanssa. Se ei lisää/vähennä latausaikaa. Mutta tarjoaa paljon paremman käyttökokemuksen. Se auttaa nopeasti "renderöimään" tai "värjäämään" verkkosivun.
- Parantaa FCP (First Content Draw)
- Parantaa ensimmäistä merkittävää maksua (FMP)
- Poista käyttämätön CSS (teknisesti älä poista sitä, vaan aseta etusijalle "hyödyllinen" CSS)
Tässä on kaksi kuvakaappausta blogistani kriittisen CSS:n kanssa ja ilman.
Kuten näet "ei kriittistä css-polkua" -osiosta, kesti melkein 5 sekuntia näyttää käyttäjälle jotain hyödyllistä mobiililaitteella. Selaimen on tehtävä ylimääräinen HTTP-pyyntö css-tiedostolle, ladattava se, jäsennettävä se, jotta se voi aloittaa renderöinnin. Mutta kriittistä css:tä käytettäessä kaiken tarvittavan css:n on oltava rivissä ja selain voi aloittaa renderöinnin välittömästi HTML-tiedoston lataamisen jälkeen.
Kuinka luoda kriittistä CSS:ää WordPressissä?
On olemassa useita tapoja luoda kriittistä CSS:ää WordPressissä.
Välimuistilaajennusten käyttäminen
WP Rocket on huippuluokan välimuistilaajennus, joka toimii todella hyvin.
Yksi syy, miksi käytän WP Rocketia jokaisessa sivustossa, on itse kriittinen CSS-sukupolvi. Ne luovat kriittisen CSS:n erikseen kotisivulle, viestisivulle, kategoriasivulle, tuotesivulle jne. ja upottavat sen. Ne palauttavat kriittisen CSS:n, jos teemaan tai asetukseen tehdään muutoksia.
Kaikki voidaan tehdä napin painalluksella.
Muut välimuistilaajennukset, jotka voivat luoda kriittistä CSS:ää
Swift Performance ja LiteSpeed (vaatii LiteSpeed/OpenLiteSpeed-palvelimen) ovat samankaltaisia laajennuksia, jotka voivat luoda kriittistä CSS:ää. Molemmilla näillä laajennuksilla on palvelimiinsa sisäänrakennettu pilvipalvelu ja täysi välimuisti.
Käytä Autoptimize + Free Critical CSS Generator
On olemassa kolmannen osapuolen verkkotyökaluja, jotka tarjoavat tärkeitä css-tiedostoja syöttämällä sivustosi URL-osoitteen. pegasaas on loistava ilmainen työkalu.
Voit tehdä sen seuraavasti:
Vaihe 1. Siirry osoitteeseen https://pegasaas.com/critical-path-css-generator/ ja kirjoita URL-osoitteesi. Kopioi luotu "Critical Path CSS".
Vaihe 2 Valitse automaattisen optimoinnin asetuksista (ota lisäasetukset käyttöön) CSS-valinnat-kohdasta "Inline and Defer CSS" ja liitä kopioitu CSS.
Plussat:
- On ilmainen
Miinukset:
- Ei erillistä kriittistä CSS:ää eri sivutyypeille (esim. kotisivu, viestisivu, luokkasivu, tuotesivu jne.)
- Älä rakenna uudelleen automaattisesti teeman/asetuksen muutoksen yhteydessä
Miksi WordPress ei itse pysty luomaan kriittistä CSS:ää?
Kuten olet ehkä huomannut, kriittisen css-polun luominen mahdollistaa ulkoiset palvelut. Joten miksi WordPress ei itse voi luoda sitä?
Critical CSS:n luomisen mahdollistavat avoimen lähdekoodin projektit, kuten Critical (Google), CriticalCSS tai kattohuoneisto. Kaikki nämä projektit perustuvat NodeJS:ään, eivät PHP:hen. Joten sinun on asennettava NodeJS palvelimellesi. Useimmat jaetut/hallitut hosting-palveluntarjoajat eivät salli tätä useista syistä.
