Kuidas eemaldada kasutamata CSS ja JS WordPressis (väga lihtne)

Paljude kasutamata CSS-i ja JS-i olemasolu teie veebisaidil võib teie laadimisaega halvendada. Kui kasutate oma veebisaiti kiirustestimise tööriistade , näiteks Google PageSpeed ​​Insighti abil , võite saada hoiatuse, mis nõuab kasutamata CSS-i eemaldamist.

Õnneks on selleks väga lihtne viis. Kasutamata CSS-i ja JS-i oma WordPressi saidilt eemaldamiseks ei pea teil olema erilisi tehnilisi teadmisi.

See on tänu hämmastavale pluginale nimega Asset CleanUp: Page Speed ​​Booster . Selle pluginaga on kasutamata CSS-i eemaldamine sama lihtne kui paari nupu klõpsamine. Teise võimalusena, kui te ei pahanda mõne dollari kulutamist aastas, on WP Rocketis olemas nupp „Eemalda kasutamata CSS”, lihtsalt aktiveerige see ja plugin eemaldab automaatselt kogu kasutamata CSS-i.

Kassasse: 7 parimat hallatud Google Cloud WordPressi majutust

Mis on kasutamata CSS?

Kasutamata CSS on CSS-fail, mis on lehel olemas, kuid mida enamasti pole lehe laadimiseks vaja. Kui külastaja avab veebisaidi, peab brauser tavaliselt alla laadima, sõeluma ja töötlema kõik külastatud lehe välised stiilitabelid, enne kui saab külastajale lehe sisu kuvada. Kui sellisel lehel on mõni CSS, mida sellel lehel ei kasutata, raiskab brauser sellele oma aega.

Selle klassikaline näide on enamik kontaktvormide pistikprogramme, mida kasutatakse. Kuigi neid pistikprogramme kasutatakse enamasti ainult lehel Võta meiega ühendust, laadivad need CSS-i kogu veebisaidil. Pole tähtis, kas see on koduleht, kus seda ei kasutata, CSS laaditakse.

Kui on liiga palju CSS-e, mida pole vaja, kuid mis laadivad ja aeglustavad brauseri lehe lugemise ja kuvamise aega, võib see muutuda probleemiks.

Peale pistikprogrammide kirjutavad teemaarendajad style.css-i palju asju, mida enamasti pole vaja. Kuid olenemata sellest, kas see on vajalik või mitte, laaditakse need teie saidi laadimisel alati!

Üks kasutamata CSS ei pruugi olla probleem, kuid palju kasutamata CSS-i võib mõjutada teie veebisaidi laadimisaega.

Kassa: 10 kiireimat ja parimat WordPressi teemat

Kuidas tuvastada kasutamata CSS-i

Kasutamata CSS-i ja JS-i leidmine on väga lihtne asi. Soovitan kahte lähenemisviisi.

Üks on oma veebisaidi analüüsimine Google PageSpeed ​​Insighti kaudu. Kontrollige, kas teie veebisaidil on kasutamata CSS-i eemaldamise probleem. Klõpsake sellel ja saate tuvastada selle eest vastutava saidi komponendi.

Ülevalt näete, et on registreeritud üks kasutamata CSS-i juhtum. Seda vaadates näen kasutamata CSS-i pistikprogrammi ja asukohta.

Teine võimalus on saada üksikasjalikum analüüs. Seda saate saavutada Chrome Devi tööriistade abil.

Ava oma Chrome'i brauseris Chrome Dev Tools ja mine jaotisse „Leviala“. Seejärel klõpsa leviala sees oleval uuestilaadimise nupul. Põhjaliku juhendi selle kohta leiad Google Developersi tööriistast.

Teine võimalus on kasutada jitbit'i, et otsida kasutamata CSS-i selektoreid . Kasutamata CSS-i leidmiseks võite kasutada ka PurifyCSS-i.

Kuidas eemaldada kasutamata CSS

Järgige neid samme, et eemaldada WordPressist kasutamata CSS:

1. Installige Asset CleanUp

Minge pistikprogrammi ja seejärel Lisa uus. Seejärel tippige uue pistikprogrammi lisamise lehe otsingukasti "Asset CleanUp". Installige ja aktiveerige pistikprogramm.

2. Avage pistikprogrammi seaded

Pistikprogrammi sätetele juurdepääsemiseks klõpsake WordPressi juhtpaneelil seadeid ja seejärel nuppu Vara puhastamine.

3. Laadige maha soovimatud CSS ja JS

Pistikprogrammi seadetes peate võib-olla enne alustamist nõustuma sellega, et teate, kuidas plugin rasva eemaldamise kraani all töötab.

CSS-i ja JS-i mahalaadimiseks klõpsake CSS-i ja JSS-i halduril. Sealt saate eemaldada kõik CSS-i ja JS-id, mida te ei vaja. Saate selle eemaldada ainult avalehe, kogu saidi või konkreetse URL-i jaoks. Saate eemaldada ka postituste, lehtede või kategooriate jaoks.

Näide on kogu saidi kontaktivormide laadimisest mahalaadimine, välja arvatud meiega ühenduse võtmise leht

Võtke aega ja laadige maha kõik CSS-id ja JS-id, mida teate, et need pole vajalikud. Pärast lõpetamist kontrollige kindlasti oma saiti, et veenduda, et kõik on korras.

Eemaldage kasutamata CSS-i WordPressi pistikprogrammid

Siin on mõned pistikprogrammid, mille abil saate WordpPressist kasutamata CSS-i eemaldada:

1. Varade puhastamine: lehe kiiruse suurendaja

Asset CleanUp: Page Speed ​​Booster teeb kasutamata CSS-i ja JSin-i WordPressist eemaldamise lihtsaks isegi algajatele. Kõik, mida peate tegema, on deaktiveerida konkreetne CSS, mida konkreetse lehe jaoks pole vaja.

Saate inaktiveerida ka ainult üksikute postituste jaoks. Lisatasu versiooniga saate pistikprogrammide abil deaktiveerida kasutamata CSS/JS-i.

See pistikprogramm on täielik jõudlusplugin koos paljude muude võimalustega WordPressi kiirendamiseks. Kasutamata CSS/JS-i eemaldamine on vaid osa sellest.

Selles postituses kasutasin seda pistikprogrammi, millel on juhend.

2. WP Rocket

WP Rocket on WordPressi esmaklassiliste jõudluspluginide seas esikohal. Kui oled algaja, ehk siis, kui sul pole WordPressiga kogemusi või sa ei tunne end sellega mugavalt, on WP Rocket lihtsaim viis kasutamata CSS-i eemaldamiseks.

Peate ostma pistikprogrammi. Kui olete selle teinud, saate selle oma kontolt alla laadida või vaadata oma meili allalaadimislinki.

Installige pistikprogramm menüüst Armatuurlaud> Pluginad> Lisa uus> Laadi üles.

Lihtsalt navigeerige WP Rocketi sätete juurde ja klõpsake vahekaarti „Faili optimeerimine”. Seejärel kerige alla ja näete valikut „Eemalda kasutamata CSS”, märkige ruut, salvestage ja tühjendage vahemälu.

3. Perfmatters

Perfmatters on Brian Jacksoni ja tema venna Brett Jacksoni loodud premium-plugin. See plugin aitab väga lihtsalt eemaldada kasutamata CSS-i.

Esiteks peate ostma pistikprogrammi. Seejärel installige see. Aktiveeri litsents. Seadetesse navigeerides lülitage sisse skriptihaldur.

Lihtsalt minge oma veebisaidi mis tahes lehele või postitusse, näete armatuurlaua menüüs skriptihalduri ikooni ja klõpsake sellel. Saate eemaldada kasutamata CSS-i ja JS-i lehelt või globaalselt.

See pistikprogramm on jõudlusplugin, mis sisaldab palju muid võimalusi WordPressi kiirendamiseks. Kasutamata CSS/JS-i eemaldamine on selle osa.

4. CSS JS-i haldur

CSS JS Manager saab CSS-i või JS-i spetsiaalselt mobiili- või lauaarvutiversioonist eemaldada. Sõltuvalt sellest, mida saavutada soovite.

See pistikprogramm võib ka CSS- või JS-failide laadimise edasi lükata.

Järeldus

Kui teil on palju kasutamata CSS-i ja JS-i, märkate kiiruse ja jõudluse skooride suurt paranemist.

Kogu kasutamata CSS-i eemaldamine võib olla võimatu, aga saate neid minimeerida. Mina kasutan TargetTrendi jaoks kasutamata CSS-i eemaldamiseks Asset CleanUp-i.

Pea meeles, et optimeeri, aga ära ole sellega liiga kinnisideeks, kui sa just ei taha, et su sait näeks välja nagu maailma kiireim veebisait.

Loe ka:

Kuidas WordPressis renderdamist blokeerivaid ressursse kõrvaldada

Kuidas muuta WordPress väga kiireks

Kuidas oma ajaveebi liiklust juhtida