WordPress CSS supratimas
Prieš pasinerdami, supraskime, kaip įprastas CSS veikia „WordPress“.
Kiekvieną „WordPress“ temą sudaro style.css, kuriame yra visas kodas, reikalingas svetainės stiliui sukurti. Temų kūrėjai turėtų palaikyti visas „WordPress“ funkcijas, įskaitant tinklaraščio įrašus, komentarus, produktų puslapį, narystės puslapį, formas ir kt. Kiti jūsų įdiegti papildiniai taip pat gali pridėti panašių css stilių lentelių.
Dėl to css failai gali išsipūsti ir būti dideli – 200 kb ar net daugiau.
Kas yra Critical Path CSS?
Kai jūsų CSS failai auga, jūsų naršyklė turi atsisiųsti tuos didelius failus, juos išanalizuoti ir pateikti. Taip pat žinomas kaip atvaizdavimo blokavimas. Tai taip pat padidins pirmąjį reikšmingą atvaizdavimą ir pirmąjį prasmingą atvaizdavimą.
Critical Path CSS yra CSS, reikalingas pirmiau nurodytam turiniui pateikti kiekviename tinklalapyje. Kaip rodo pavadinimas, „kritinis“ CSS, padedantis naršyklei greitai nupiešti ir pateikti jį prieš įkeliant visus CSS failus.
Paprastai kritinio kelio css yra įterpiamas į antraštę, o šaltinio css failas įkeliamas asinchroniškai arba poraštėje, kad būtų lengviau naudoti.
Kodėl Critical Path CSS toks svarbus?
Turbūt jau matėte įspėjimą iš įrankių, pvz., „Google PageSpeed Insights“ arba „GTmetrix“, kuriame sakoma „optimizuoti css pristatymą“ arba „atidėti nepanaudotą css“.
Kritinis CSS neturi nieko bendra su puslapio įkėlimo laiku. Tai nepadidina / nesumažina įkėlimo laiko. Bet suteikia daug geresnę vartotojo patirtį. Tai padeda greitai „pavaizduoti“ arba „nuspalvinti“ tinklalapį.
- Pagerina pirmąjį turinio piešimą (FCP)
- Pagerina pirmąjį reikšmingą mokėjimą (FMP)
- Pašalinkite nenaudojamą CSS (techniškai nepašalinkite, bet pirmenybę teikite „naudingam“ CSS)
Štai dvi mano tinklaraščio ekrano kopijos su kritiniu CSS ir be jo.
Kaip matote skiltyje „nėra kritinio css kelio“, prireikė beveik 5 sekundžių, kol vartotojui buvo parodyta ką nors naudingo mobiliajame įrenginyje. Naršyklė turi pateikti papildomą HTTP užklausą į css failą, jį atsisiųsti, išanalizuoti, kad galėtų pradėti atvaizdavimą. Tačiau naudojant kritinį css, visas reikalingas css turi būti įtrauktas ir naršyklė gali pradėti vaizdavimą iš karto po HTML failo įkėlimo per sekundę ar greičiau.
Kaip sukurti svarbų CSS „WordPress“?
Yra keletas būdų, kaip sukurti svarbų CSS „WordPress“.
Naudojant talpyklos papildinius
WP Rocket yra aukščiausios kokybės talpyklos papildinys, kuris veikia tikrai gerai.
Viena iš priežasčių, kodėl aš naudoju WP Rocket kiekvienoje svetainėje, yra pati kritinė CSS karta. Jie sukuria Critical CSS atskirai pagrindiniam puslapiui, įrašų puslapiui, kategorijų puslapiui, produkto puslapiui ir kt. ir įdeda jį. Jie atkurs svarbią CSS, jei bus pakeista tema ar nustatymas.
Viską galima padaryti vieno mygtuko paspaudimu.
Kiti talpyklos papildiniai, galintys generuoti kritinį CSS
„Swift Performance“ ir „LiteSpeed“ (reikalingas „LiteSpeed“ / „OpenLiteSpeed“ serveris) yra panašūs įskiepiai, galintys generuoti kritinį CSS. Abiejų šių įskiepių serveriuose yra debesis ir visa talpykla.
Naudojant Autoptimize + Free Critical CSS Generator
Yra trečiųjų šalių internetinių įrankių, kurie pateikia svarbų css įvesdami jūsų svetainės URL. pegasaas yra toks puikus nemokamas įrankis.
Štai kaip tai padaryti:
1 žingsnis. Eikite į https://pegasaas.com/critical-path-css-generator/ ir įveskite savo URL. Nukopijuokite sugeneruotą „Critical Path CSS“.
2 žingsnis Automatinio optimizavimo nustatymuose (įgalinkite išplėstinius nustatymus) skiltyje „CSS parinktys“ pažymėkite „Inline and Defer CSS“ ir įklijuokite nukopijuotą CSS.
Privalumai:
- Nemokamai
Minusai:
- Nėra atskiro kritinio CSS skirtingų tipų puslapiams (pvz., pagrindiniam puslapiui, įrašų puslapiui, kategorijos puslapiui, produkto puslapiui ir kt.)
- Nekurkite automatiškai iš naujo pakeitus temą / nustatymus
Kodėl pati „WordPress“ negali sukurti svarbios CSS?
Kaip galbūt pastebėjote, sukūrus kritinį css kelią įgalinamos išorinės paslaugos. Taigi kodėl pati „WordPress“ negali to sugeneruoti?
Sukurti Critical CSS įmanoma naudojant atvirojo kodo projektus, tokius kaip Critical (Google), CriticalCSS arba mansarda. Visi šie projektai yra pagrįsti NodeJS, o ne PHP. Taigi, savo serveryje turite įdiegti NodeJS. Dauguma bendro naudojimo / valdomų prieglobos paslaugų teikėjų to neleidžia dėl kelių priežasčių.
