Jos WordPress-sivustosi käyttää maksettua WordPress-teemaa tai suosittua WordPress-teemaa virallisesta WordPress Themes -arkistosta, on todennäköistä, että teemaa kehitetään useisiin käyttötapauksiin. Ja saatat käyttää vain pientä sarjaa kaikista teeman ominaisuuksista.
Siinä tapauksessa sivustosi lataa paljon käyttämätöntä CSS:ää, jota ei tarvita sivustosi sivujen tyylin luomiseen. Esimerkiksi käyttämässäsi WordPress-teemassa saattaa olla tyylejä myös WooCommerce-sivuille, mutta jos pidät vain blogia WordPress-sivustollasi, et käytä sivustosi WooCommerce-sivuille sisältyvää CSS:ää, joten se toimii käyttämättömänä. CSS käyttäjille.
Jos olet testannut verkkosivustoasi Google Pagespeed -työkalulla, olet todennäköisesti jo tietoinen, että sivustollasi on käyttämättömiä CSS-ongelmia. Tässä oppaassa näytämme, kuinka voit ensin tarkistaa käyttämättömät CSS-syötteet ja sitten poistaa käyttämättömän CSS:n WordPress-sivustoltasi ilmaisella työkalulla.
Kuinka tarkistaa käyttämätön CSS
Google Chrome DevTools (joka näet, kun napsautat "Tarkista" -vaihtoehtoa pikavalikosta) sisältää kattavuusominaisuuden Lähteet-välilehdellä. Voit käyttää Coverage-vaihtoehtoa löytääksesi käyttämättömät CSS- ja JS-tiedostot, jotka verkkosivustosi lataa.
- Avaa verkkosivustosi työpöydän Chromessa.
- Napsauta hiiren kakkospainikkeella tyhjää tyhjää kohtaa sivustollasi ja valitse Tarkastaa kontekstivalikosta.
- Klikkaa Lähteet välilehti, paina Ctrl + Vaihto + P avataksesi komentoikkunan ja kirjoita sitten kattavuus ja valitse Aloita kattavuuden instrumentointi ja lataa sivu uudelleen käytettävissä olevista komennoista.
- Napsauta Coverage-välilehden alla URL-suodatin -kenttään ja syötä tähän sivustosi pääverkkotunnus, jotta näet vain sisäiset CSS/JS-tiedostot.
└ Tarkista Käyttämättömät tavut sarakkeessa nähdäksesi prosenttiosuuden teemastasi CSS/JS-tiedostoon ladattavista tiedoista.
- Napsauta CSS-tiedostoa nähdäksesi sivustosi lataaman käyttämättömän CSS:n (merkitty punaisilla palkeilla). Nykyisellä sivulla käytössä oleva CSS näkyy vihreillä palkeilla.
Kun olet analysoinut kaikki käyttämättömät CSS:t, jotka ladataan verkkosivustollesi, on aika poistaa se. Käytettävissä on useita ilmaisia työkaluja käyttämättömän CSS:n poistamiseen verkkosivuilta. Alla on yksi suosituimmista työkaluista, joita olen testannut ja käyttänyt omissa projekteissani.
Käytä PurifyCSS Onlinea poistamaan käyttämätön CSS
Yleensä voit löytää laajennuksen melkein kaikkeen WordPressistä. Mutta käyttämättömän CSS:n poistamiseen ei valitettavasti ole saatavilla yhtä laajennusta. Käytämme siis manuaalisia, ei-wordpress-spesifisiä työkaluja käyttämättömän CSS:n poistamiseen sivustostasi.
PurifyCSS on eniten ystävällinen ei-kehittämistyökalu voit löytää käsittelemään käyttämätöntä CSS:ää. Työkalussa on yksinkertainen käyttöliittymä, jonka avulla käyttäjät voivat antaa joko verkkosivuston URL-osoitteen TAI HTML- ja CSS-koodin. WordPressissä käytämme URL-vaihtoehtoa ja tarjoamme linkkejä kaikenlaisille sivustosi sivuille, jotta työkalu voi napata CSS:n kaikilta ja optimoida käyttämättömälle CSS:lle.
Tässä on nopea luettelo sivuista, jotka sinun tulee laittaa työkaluun:
- Kotisivun URL-osoite
- Useita viestisivujen URL-osoitteita kustakin sivustosi luokasta
└ Tällä varmistetaan, että CSS sisältyy kaikkiin viestielementteihin.
- Yhteystiedot, Tietoja, Yksityisyys ja kaikenlaiset erilaiset sivut, joita sinulla saattaa olla sivustollasi.
- Arkistosivu, Hakusivu, Tekijäsivut
- Mukautetun viestityypin sivut
Kuuma vinkki: Luo "ominaisuuksia" sisältävä viesti/sivu, jossa on kaikki käyttämäsi tai mahdollisesti tulevaisuudessa käytettävät teemaelementit, kuten taulukko, kuvagalleria, koodi, ennakko, järjestetyt luettelot, järjestämättömät luettelot, lomakkeet, välilehdet, haitarit, Gutenberg-lohkot, joita yleensä käytät. , jne.
Käytä tätä "ominaisuuksien" julkaisun URL-osoitetta PurifyCSS Online -työkalussa varmistaaksesi, että yleisesti käytettyjen elementtien CSS on mukana.
Lyö Puhdista CSS -painiketta, kun olet lisännyt kaikki asiaankuuluvat URL-osoitteet sivustostasi PurifyCSS Online -työkaluun.
Kopioi työkalun luoma uusi CSS ja käytä sitä sivustossasi. Varmista, että sinä varmuuskopioi alkuperäinen style.css ja muut teemasi CSS-tiedostot ennen kuin korvaat PurifyCSS:n luoman uuden CSS-tiedoston.
Kärki: Voit joko käyttää sisäänrakennettua WordPress-teemaeditoria muokataksesi teemasi CSS-tiedostoja, tai voit käyttää FTP/SFTP-ohjelmaa muodostaaksesi yhteyden palvelimeen ja muokataksesi tiedostoja mukavasti Muistio-editorin avulla.