Kui teie WordPressi sait kasutab tasulist WordPressi teemat või mõnda populaarset ametlikust WordPressi teemade hoidlast, on tõenäoline, et teemat arendatakse erinevate kasutusjuhtude jaoks. Ja võite kasutada ainult väikest kogumit kõigist teemas saadaolevatest funktsioonidest.
Sel juhul laadib teie sait palju kasutamata CSS-i, mis pole teie saidi lehtede stiili kujundamiseks vajalik. Näiteks võivad teie kasutataval WordPressi teemal olla stiilid ka WooCommerce'i lehtede jaoks, kuid kui kasutate oma WordPressi saidil ainult ajaveebi, siis ei kasuta te oma saidil WooCommerce'i lehtede jaoks kaasas olevat CSS-i ja teenindate seega kasutamata. CSS kasutajatele.
Kui olete oma veebisaiti Google Pagespeedi tööriistaga testinud, olete tõenäoliselt juba teadlik, et teie saidil on kasutamata CSS-i probleeme. Selles juhendis näitame teile, kuidas esmalt kontrollida kasutamata CSS-i ja seejärel kasutada tasuta tööriista kasutamata CSS-i eemaldamiseks oma WordPressi saidilt.
Kuidas kontrollida kasutamata CSS-i
Google Chrome DevToolsil (see, mida näete, kui klõpsate kontekstimenüüs suvandil „Kontrolli”), on vahekaardil Allikad funktsioon Katvus. Saate kasutada valikut Katvus, et leida kasutamata CSS-i ja JS-i, mida teie veebisait laadib.
- Avage oma veebisait töölaual Chrome'is.
- Paremklõpsake saidil tühjal tühikul ja valige Kontrollige kontekstimenüüst.
- Klõpsake nuppu Allikad vahekaart, vajutage Ctrl + tõstuklahv + P käsuakna avamiseks, seejärel tippige katvus ja valige Alustage katvuse mõõtmist ja laadige leht uuesti saadaolevatest käskudest.
- Klõpsake vahekaardil Katvus nuppu URL-i filter väljale ja sisestage siia oma saidi juurdomeen, et kuvada ainult sisemised CSS/JS-failid.
└ Kontrollige Kasutamata baidid veerus, et näha teie teema CSS-/JS-faili laaditavate andmete protsenti.
- Klõpsake CSS-failil, et vaadata teie saidi poolt laaditud kasutamata CSS-i (tähistatud punaste ribadega). Praegusel lehel kasutatav CSS kuvatakse roheliste ribadega.
Kui olete analüüsinud kõiki teie veebisaidile laaditavaid kasutamata CSS-e, on aeg see eemaldada. Kasutamata CSS-i veebilehtedelt eemaldamiseks on saadaval mitu tasuta tööriista. Allpool on üks populaarsemaid tööriistu, mida olen oma projektides testinud ja kasutanud.
Kasutage kasutamata CSS-i eemaldamiseks PurifyCSS Online'i
Tavaliselt leiate WordPressist peaaegu kõige jaoks pistikprogrammi. Kuid kasutamata CSS-i eemaldamiseks pole kahjuks saadaval ühtegi pistikprogrammi. Seega kasutame teie saidilt kasutamata CSS-i eemaldamiseks käsitsi mitte-WordPressi tööriistu.
PurifyCSS on kõige rohkem sõbralik mittearendaja tööriist leiad kasutamata CSS-i käsitlemiseks. Tööriistal on lihtne kasutajaliides, mis võimaldab kasutajatel esitada kas veebisaidi URL-i VÕI HTML- ja CSS-koodi. WordPressi puhul kasutame URL-i valikut ja pakume linke teie saidi igasugustele lehtedele, et tööriist saaks kõigilt CSS-i haarata ja optimeerida kasutamata CSS-i jaoks.
Siin on kiire loend lehtedest, mille peaksite tööriista sisestama:
- Kodulehe URL
- Teie saidi igast kategooriast mitu postituslehe URL-i
└ Selle eesmärk on tagada, et kõigi postituste elementide jaoks on kaasatud CSS.
- Kontaktid, Teave, Privaatsus ja kõikvõimalikud erinevad lehed, mis teie saidil võivad olla.
- Arhiivileht, otsinguleht, autorilehed
- Kohandatud postitustüübi lehed
Kuum näpunäide: Looge funktsioonide postitus/leht kõigi teemaelementidega, mida te kasutate või võite tulevikus kasutada, nagu tabel, pildigalerii, kood, eel, järjestatud loendid, järjestamata loendid, vormid, vahelehed, akordionid, Gutenbergi plokid, mida tavaliselt kasutate. , jne.
Kasutage seda funktsioonide postituse URL-i PurifyCSS Online'i tööriistas, et tagada sagedamini kasutatavate elementide CSS-i kaasamine.
Lööge Puhastage CSS nuppu, kui olete lisanud kõik asjakohased URL-i tüübid oma saidilt PurifyCSS Online'i tööriista.
Kopeerige tööriista loodud uus CSS ja kasutage seda oma saidil. Veenduge, et teie varundage algne style.css ja muud teie teema CSS-failid enne PurifyCSS-i loodud uue CSS-i asendamist.
Näpunäide: Saate kasutada oma teema CSS-failide redigeerimiseks sisseehitatud WordPressi teemaredaktorit või kasutada FTP/SFTP-programmi serveriga ühenduse loomiseks ja failide mugavaks redigeerimiseks Notepadi redaktori abil.