Razumijevanje WordPress CSS-a
Prije nego što zaronimo, shvatimo kako obični CSS funkcionira u WordPressu.
Svaka WordPress tema sastoji se od style.css koji sadrži sav kod potreban za stiliziranje vaše stranice. Programeri tema trebali bi podržavati sve značajke WordPressa koje uključuju postove na blogu, komentare, stranicu proizvoda, stranicu za članstvo, obrasce itd. Ostali dodaci koje instalirate također mogu dodati slične css tablice stilova.
To može učiniti css datoteke napuhanim i velikim u veličini od 200 kb ili čak više.
Što je Critical Path CSS?
Kako vaše CSS datoteke rastu, vaš preglednik mora preuzeti te velike datoteke, analizirati ih i generirati. Također poznat kao blokiranje renderiranja. Također će povećati prvi smisleni render i prvi smisleni render.
Critical Path CSS je CSS potreban za prikazivanje gore navedenog sadržaja na svakoj web stranici. Kao što naziv sugerira, "kritičan" CSS, koji pomaže pregledniku da ga brzo nacrta i generira prije učitavanja cijelih CSS datoteka.
Obično je css kritičnog puta ugrađen u zaglavlje, a izvorna css datoteka se učitava asinkrono ili u podnožje radi lakše upotrebe.
Zašto je Critical Path CSS toliko važan?
Sigurno ste već vidjeli upozorenje od alata kao što su Google PageSpeed Insights ili GTmetrix koje kaže "optimiziraj isporuku css-a" ili "odgodi neiskorišteni css".
Kritični CSS nema nikakve veze s vremenom učitavanja stranice. Ne povećava/smanjuje vrijeme učitavanja. Ali daje puno bolje korisničko iskustvo. Pomaže brzo "prikazivanje" ili "obojavanje" web stranice.
- Poboljšava prvo izvlačenje sadržaja (FCP)
- Poboljšava prvo značajno plaćanje (FMP)
- Uklonite nekorišteni CSS (tehnički ga nemojte uklanjati, ali dajte prednost "korisnom" CSS-u)
Evo dvije snimke zaslona mog bloga sa i bez kritičnog CSS-a.
Kao što možete vidjeti u odjeljku "bez kritične css putanje", trebalo je gotovo 5 sekundi da se korisniku pokaže nešto korisno na mobilnom uređaju. Preglednik mora napraviti dodatni HTTP zahtjev za css datoteku, preuzeti je, raščlaniti kako bi započeo renderiranje. Ali kada koristite kritični css, sav potreban css mora biti ugrađen i preglednik može početi prikazivati odmah nakon učitavanja HTML datoteke za sekundu ili manje.
Kako stvoriti kritični CSS u WordPressu?
Postoji nekoliko načina za generiranje kritičnog CSS-a u WordPressu.
Korištenje dodataka za predmemoriju
WP Rocket je vrhunski dodatak za caching koji radi jako dobro.
Jedan od razloga zašto koristim WP Rocket na svakoj stranici je sama kritična CSS generacija. Oni generiraju Critical CSS zasebno za početnu stranicu, stranicu s postovama, stranicu kategorije, stranicu proizvoda, itd. i ugrađuju ga. Oni će vratiti kritični CSS ako dođe do promjena u temi ili postavci.
Sve se može učiniti pritiskom na gumb.
Drugi dodaci za predmemoriju koji mogu generirati kritični CSS
Swift Performance i LiteSpeed (zahtijeva LiteSpeed/OpenLiteSpeed poslužitelj) slični su dodaci koji mogu generirati Critical CSS. Oba ova dodatka imaju oblak i punu predmemoriju ugrađenu u svoje poslužitelje.
Korištenje Autoptimize + Free Critical CSS Generator
Postoje online alati trećih strana koji pružaju važan css unosom URL-a vaše stranice. pegasaas je tako izvrstan besplatni alat.
Evo kako to učiniti:
Korak 1. Idite na https://pegasaas.com/critical-path-css-generator/ i unesite svoj URL. Kopirajte generirani "Critical Path CSS".
Korak 2 U postavkama automatske optimizacije (omogućite napredne postavke), u odjeljku "Opcije CSS-a", označite "Inline and Defer CSS" i zalijepite kopirani CSS.
Prednosti:
- Besplatno je
minusi:
- Nema zasebnog kritičnog CSS-a za različite vrste stranica (npr.: početna stranica, stranica s postovama, stranica kategorije, stranica proizvoda itd.)
- Nemojte automatski obnavljati na temelju promjene teme/postavke
Zašto sam WordPress ne može generirati kritični CSS?
Kao što ste možda primijetili, stvaranje css kritičnog puta omogućuje vanjske usluge. Pa zašto ga sam WordPress ne može generirati?
Stvaranje kritičnog CSS-a omogućeno je projektima otvorenog koda kao što su Critical (od Googlea), CriticalCSS ili penthouse. Svi ovi projekti temelje se na NodeJS-u, a ne na PHP-u. Dakle, morate instalirati NodeJS na svoj poslužitelj. Većina dijeljenih/upravljanih pružatelja usluga hostinga to ne dopušta iz nekoliko razloga.
