Če vaše spletno mesto WordPress uporablja plačljivo temo WordPress ali priljubljeno iz uradnega skladišča tem WordPress, je verjetno, da bo tema razvita za različne primere uporabe. Morda pa uporabljate le majhen nabor vseh funkcij, ki so na voljo v temi.
V tem primeru vaše spletno mesto nalaga veliko neuporabljenega CSS-ja, ki ni potreben za oblikovanje strani vašega spletnega mesta. Na primer, tema WordPress, ki jo uporabljate, ima lahko sloge tudi za strani WooCommerce, vendar če na svojem spletnem mestu WordPress vodite samo spletni dnevnik, potem ne uporabljate CSS, ki je vključen za strani WooCommerce na vašem spletnem mestu in tako servirate neuporabljeno CSS uporabnikom.
Če ste svoje spletno mesto preizkusili z orodjem Google Pagespeed, se verjetno že zavedate, da ima vaše spletno mesto neuporabljene težave s CSS. V tem priročniku vam bomo pokazali, kako najprej preverite, ali je neuporabljen CSS, nato pa uporabite brezplačno orodje za odstranitev neuporabljenega CSS s svojega spletnega mesta WordPress.
Kako preveriti neuporabljen CSS
Orodja za razvijalce Google Chrome (tisto, ki ga vidite, ko kliknete možnost »Pregled« v kontekstnem meniju) imajo na zavihku Viri funkcijo Pokritost. Z možnostjo Pokritost lahko poiščete neuporabljena CSS in JS, ki ju naloži vaše spletno mesto.
- Odprite svoje spletno mesto v Chromu na namizju.
- Z desno tipko miške kliknite prazen prazen prostor na vašem spletnem mestu in izberite Preglejte iz kontekstnega menija.
- Kliknite na Viri zavihek, pritisnite Ctrl + Shift + P da odprete ukazno okno, nato vnesite pokritost in izberite Začnite s pokrivanjem instrumentov in znova naložite stran iz razpoložljivih ukazov.
- Pod zavihkom Pokritost kliknite na URL filter in tukaj vnesite korensko domeno vašega spletnega mesta, da prikažete samo notranje datoteke CSS/JS.
└ Preverite Neuporabljeni bajti stolpec, da si ogledate odstotek podatkov, ki se naložijo v datoteko CSS/JS iz vaše teme.
- Kliknite datoteko CSS za ogled neuporabljenega CSS (označenega z rdečimi črtami), ki ga je naložilo vaše spletno mesto. CSS, ki se uporablja na trenutni strani, bo prikazan z zelenimi črtami.
Ko analizirate vse neuporabljene CSS, ki se nalagajo na vaše spletno mesto, je čas, da ga odstranite. Za odstranitev neuporabljenega CSS s spletnih strani je na voljo več brezplačnih orodij. Spodaj je eno izmed priljubljenih orodij, ki sem jih preizkusil in uporabil pri svojih projektih.
Uporabite PurifyCSS Online za odstranitev neuporabljenega CSS
Običajno lahko najdete vtičnik za skoraj vse v WordPressu. Toda za odstranitev neuporabljenega CSS na žalost ni na voljo niti enega vtičnika. Za odstranitev neuporabljenega CSS-ja z vašega spletnega mesta bomo uporabljali ročna orodja, ki niso specifična za WordPress.
PurifyCSS je najbolj prijazno orodje za nerazvijalce lahko najdete, da se ukvarjate z neuporabljenim CSS. Orodje ima preprost uporabniški vmesnik, ki uporabnikom omogoča, da navedejo URL spletnega mesta ALI kodo HTML in CSS. Za WordPress bomo uporabili možnost URL in zagotovili povezave do vseh vrst strani na vašem spletnem mestu, da bo orodje lahko zgrabilo CSS od vseh in optimiziralo za neuporabljene CSS.
Tukaj je kratek seznam strani, ki jih morate vnesti v orodje:
- URL domače strani
- Več URL-jev strani z objavo iz vsake kategorije na vašem spletnem mestu
└ To zagotavlja, da je CSS vključen za vse elemente objave.
- Kontakt, Vizitka, Zasebnost in vse vrste različnih strani, ki jih imate na svojem spletnem mestu.
- Arhivska stran, Iskalna stran, Avtorske strani
- Strani vrste objave po meri
Vroč nasvet: Ustvarite objavo/stran »funkcije« z vsemi elementi teme, ki jih uporabljate ali jih boste morda uporabljali v prihodnosti, kot so tabela, galerija slik, koda, predhodno, urejeni seznami, neurejeni seznami, obrazci, zavihki, harmonike, Gutenbergovi bloki, ki jih običajno uporabljate , itd
Uporabite ta URL objave »funkcije« v spletnem orodju PurifyCSS, da zagotovite, da je vključen CSS za pogosto uporabljene elemente.
Pritisnite na Očistite CSS Ko dodate vse ustrezne vrste URL-jev s svojega spletnega mesta v spletno orodje PurifyCSS.
Kopirajte nov CSS, ki ga je ustvarilo orodje, in ga uporabite na svojem spletnem mestu. Prepričaj se da varnostno kopirajte izvirni style.css in druge datoteke CSS v vaši temi, preden zamenjate nov CSS, ki ga je ustvaril PurifyCSS.
Nasvet: Za urejanje datotek CSS vaše teme lahko uporabite vgrajen urejevalnik tem WordPress ali pa uporabite program FTP/SFTP za povezavo s strežnikom in udobno urejanje datotek z urejevalnikom Notepad.