WordPressi CSS-i mõistmine
Enne kui sukeldume, mõistame, kuidas tavaline CSS WordPressis töötab.
Iga WordPressi teema koosneb failist style.css, mis sisaldab kogu teie saidi stiili kujundamiseks vajalikku koodi. Teema arendajad peaksid toetama kõiki WordPressi funktsioone, sealhulgas ajaveebipostitusi, kommentaare, tootelehte, liikmesuslehte, vorme jne. Sarnaseid css-laaditabeleid võivad lisada ka muud installitavad pistikprogrammid.
See võib muuta css-failid ülespuhutud ja mahukaks kuni 200 kb või isegi rohkem.
Mis on kriitilise tee CSS?
Kui teie CSS-failid kasvavad, peab teie brauser need suured failid alla laadima, neid sõeluma ja renderdama. Tuntud ka kui renderduse blokeerimine. See suurendab ka esimest tähenduslikku renderdust ja esimest tähenduslikku renderdust.
Kriitilise tee CSS on CSS, mis on vajalik ülaltoodud sisu renderdamiseks igal veebilehel. Nagu nimigi ütleb, "kriitilise tähtsusega" CSS, mis aitab brauseril seda enne täielike CSS-failide laadimist kiiresti joonistada ja renderdada.
Tavaliselt on kriitilise tee css manustatud päisesse ja lähte-css-fail laaditakse kasutamise hõlbustamiseks asünkroonselt või jalusesse.
Miks on Critical Path CSS nii oluline?
Olete kindlasti juba näinud hoiatust sellistest tööriistadest nagu Google PageSpeed Insights või GTmetrix, mis ütleb "optimeerige css-i edastamist" või "lükkata kasutamata css".
Kriitilisel CSS-il pole lehe laadimisajaga midagi pistmist. See ei pikenda/vähenda laadimisaega. Aga annab palju parema kasutuskogemuse. See aitab veebilehte kiiresti "renderdada" või "värvida".
- Parandab esimest sisu loosimist (FCP)
- Parandab esimest olulist makset (FMP)
- Eemaldage kasutamata CSS (tehniliselt ärge eemaldage seda, vaid eelistage "kasulikku" CSS-i)
Siin on kaks minu ajaveebi ekraanipilti kriitilise CSS-iga ja ilma.
Nagu näete jaotises "Kriitiline css-tee puudub", kulus peaaegu 5 sekundit, et kasutajale mobiilseadmes midagi kasulikku näidata. Renderdamise alustamiseks peab brauser tegema css-failile täiendava HTTP-päringu, selle alla laadima, sõeluma. Kuid kriitilise tähtsusega css-i kasutamisel peab kogu vajalik css olema sees ja brauser saab hakata renderdama kohe pärast HTML-faili laadimist sekundi või vähema aja jooksul.
Kuidas WordPressis kriitilist CSS-i luua?
Kriitilise CSS-i loomiseks WordPressis on mitu võimalust.
Vahemällu salvestamise pistikprogrammide kasutamine
WP Rocket on esmaklassiline vahemällu salvestamise pistikprogramm, mis töötab väga hästi.
Üks põhjusi, miks ma igal saidil WP Rocketit kasutan, on kriitiline CSS-i põlvkond ise. Nad loovad kriitilise CSS-i eraldi avalehe, postituste lehe, kategoorialehe, tootelehe jne jaoks ja manustavad selle. Need taastavad kriitilise CSS-i, kui teemat või seadet muudetakse.
Kõike saab teha ühe nupuvajutusega.
Muud vahemällu salvestavad pistikprogrammid, mis võivad luua kriitilist CSS-i
Swift Performance ja LiteSpeed (vajab LiteSpeedi/OpenLiteSpeedi serverit) on sarnased pistikprogrammid, mis võivad luua kriitilist CSS-i. Mõlemal pistikprogrammil on nende serveritesse sisse ehitatud pilv ja täielik vahemälu.
Kasutades automaatset optimeerimist + tasuta kriitilist CSS-i generaatorit
On olemas kolmanda osapoole võrgutööriistad, mis pakuvad olulist css-i, sisestades teie saidi URL-i. pegasaas on suurepärane tasuta tööriist.
Seda saab teha järgmiselt.
Samm 1. Minge aadressile https://pegasaas.com/critical-path-css-generator/ ja sisestage oma URL. Kopeerige loodud "kriitilise tee CSS".
2. samm Märkige automaatse optimeerimise seadetes (täiustatud seadete lubamine) jaotises "CSS-i suvandid" märkeruut "Inline and Defer CSS" ja kleepige kopeeritud CSS.
Plussid:
- On vaba
Miinused:
- Erinevate lehetüüpide jaoks (nt avaleht, postituste leht, kategoorialeht, tooteleht jne) pole eraldi kriitilist CSS-i.
- Ärge ehitage automaatselt ümber teema/seadete muutmisel
Miks ei saa WordPress ise kriitilist CSS-i luua?
Nagu olete ehk märganud, võimaldab css-i kriitilise tee loomine välisteenuseid. Miks siis WordPress ise seda genereerida ei suuda?
Kriitilise CSS-i loomine on võimalik tänu avatud lähtekoodiga projektidele, nagu Critical (Google), CriticalCSS või katusekorter. Kõik need projektid põhinevad NodeJS-il, mitte PHP-l. Niisiis, peate oma serverisse installima NodeJS-i. Enamik jagatud/hallatud hostimisteenuse pakkujaid ei luba seda mitmel põhjusel.
