Kako ukloniti nekorišteni CSS i JS u WordPressu (vrlo jednostavno)

Puno neiskorištenog CSS-a i JS-a na vašoj web stranici može utjecati na vrijeme učitavanja web stranice. Ako svoju web stranicu vodite putem a alati za testiranje brzine kao što Google PageSpeed ​​Insight, možda ćete dobiti upozorenje da uklonite neiskorišteni CSS.

Srećom, postoji vrlo jednostavan način za to. Ne morate imati nikakvo posebno tehničko znanje da biste mogli ukloniti nekorišteni CSS i JS sa svoje WordPress stranice.

To je zbog nevjerojatnog dodatka poznatog kao Asset CleanUp: Pojačivač brzine stranice. S ovim dodatkom uklanjanje neiskorištenog CSS-a jednostavno je poput klikanja nekoliko gumba. Alternativno, ako vam ne smeta potrošiti nekoliko dolara godišnje, sa WP Rocket, postoji uklonjeni neiskorišteni CSS gumb, samo ga aktivirajte i dodatak će automatski ukloniti sav neiskorišteni CSS.

Blagajna: Top 7 upravljanih Google Cloud WordPress hostinga

Što je neiskorišteni CSS?

Neiskorišteni CSS je CSS datoteka koja je prisutna na stranici, ali uglavnom nije potrebna za učitavanje stranice. Kada posjetitelj otvori web stranicu, preglednik obično mora preuzeti, analizirati i obraditi sve vanjske tablice stilova na posjećenoj stranici prije nego što može prikazati sadržaj stranice posjetitelju. Ako na takvoj stranici postoji CSS koji se ne koristi na stranici, preglednik će gubiti vrijeme na to.

Klasičan primjer ovoga je većina dodataka za kontakt obrazac koji se koriste. Ovi dodaci, iako se uglavnom koriste samo na stranici Kontaktirajte nas, učitavaju svoj CSS na cijeloj web stranici. Nije bitno je li to početna stranica na kojoj se ne koristi, CSS će se učitati.

Ako postoji previše CSS-a koji nije potreban, ali se učitava i usporava preglednik da pročita i prikaže stranicu, to može postati problem.

Osim dodataka, programeri tema u style.css upisuju mnogo stvari koje uglavnom nisu potrebne. No bili potrebni ili ne, učitavaju se kad god se učita vaša stranica!

Jedan neiskorišteni CSS možda i nije problem, ali puno neiskorištenog CSS-a može utjecati na vrijeme učitavanja vaše web stranice.

Blagajna: Top 10 najbržih i najboljih WordPress tema 

Kako prepoznati neiskorišteni CSS

Pronalaženje neiskorištenog CSS-a i JS-a vrlo je jednostavna stvar. Postoje dva pristupa koja ću preporučiti.

Jedan je analizirati svoju web stranicu putem Google PageSpeed ​​Insight. Provjerite ima li vaša web stranica problem s uklanjanjem neiskorištenog CSS-a. Kliknite na njega i moći ćete identificirati komponentu vaše stranice koja je za to odgovorna.

Možete vidjeti gore da je zabilježen jedan slučaj neiskorištenog CSS-a. Gledajući ovo, mogu vidjeti dodatak i lokaciju neiskorištenog CSS-a.

Druga opcija je detaljnija analiza. To možete postići pomoću Chrome Dev alata.

U pregledniku Chrome otvorite Chrome Dev alate, a zatim idite na pokrivenost. Zatim kliknite gumb za ponovno učitavanje unutar područja pokrivenosti. Možete pronaći a opsežan vodič o tome kako to učiniti u alatu Google Developers.

Druga mogućnost je korištenje jitbit za skeniranje neiskorištenih CSS selektora. Također možete koristiti PurifyCSS pronaći neiskorišteni CSS

Kako ukloniti neiskorišteni CSS

Slijedite ove korake za uklanjanje neiskorištenog CSS-a iz WordPressa:

1. Instalirajte Asset CleanUp

Idite na dodatak, a zatim Dodaj novi. Zatim upisujete "Asset CleanUp" u polje za pretraživanje na stranici Dodaj novi dodatak. Instalirajte i aktivirajte dodatak.

2. Idite na postavke dodatka

Za pristup postavkama dodatka, na nadzornoj ploči WordPressa kliknite na postavke, a zatim kliknite na Asset CleanUp.

3. Uklonite neželjeni CSS i JS

U postavkama dodatka, možda ćete morati prihvatiti da znate kako dodatak radi pod skidanjem masti prije nego što počnete.

Za učitavanje CSS-a i JS-a kliknite na CSS i JSS upravitelj. Od tamo možete ukloniti bilo koji CSS i JS koji vam ne trebaju. Možete ga ukloniti samo za početnu stranicu, za cijelu web-lokaciju ili za određeni URL. Također možete ukloniti za postove, stranice ili kategorije.

Primjer je uklanjanje bilo kojeg obrasca za kontakt od učitavanja za cijelu stranicu osim stranice za kontakt

Uzmite si vremena i oslobodite svaki CSS i JS za koji znate da nisu potrebni. Svakako testirajte svoju stranicu nakon što završite kako biste bili sigurni da je sve u redu.

Uklonite nekorištene CSS WordPress dodatke

Evo nekoliko dodataka koje možete koristiti za uklanjanje neiskorištenog CSS-a u WordpPressu:

1. Asset CleanUp: Pojačivač brzine stranice

Asset CleanUp: Pojačivač brzine stranice olakšava uklanjanje nekorištenog CSS-a i JS-a u WordPressu čak i za početnike. Sve što trebate učiniti je deaktivirati određeni CSS koji nije potreban za određenu stranicu.

Također možete deaktivirati samo za pojedinačne objave. S premium verzijom možete deaktivirati neiskorišteni CSS/JS pomoću dodataka.

Ovaj je dodatak potpuni dodatak za izvedbu s mnogim drugim opcijama za ubrzavanje WordPressa. Uklanjanje neiskorištenog CSS/JS samo je dio toga.

U ovom postu koristio sam ovaj dodatak koji ima vodič.

2. WP Rocket

WP Rocket je broj jedan WordPress premium dodatak za izvedbu. Ako ste noob, mislim ako niste iskusni ili se ne osjećate ugodno s WordPressom, WP Rocket je najlakši način za uklanjanje neiskorištenog CSS-a.

Morate kupiti dodatak, nakon što to učinite, možete ga preuzeti sa svog računa ili u e-pošti potražite vezu za preuzimanje.

Instalirajte dodatak preko Dashboard>plugins>Add new>Upload.

Samo idite na postavke WP Rocket, a zatim kliknite na karticu "Optimizacija datoteke". Zatim se pomaknite prema dolje i vidjet ćete "Ukloni neiskorišteni CSS", označite kućicu, spremite i izbrišite predmemoriju.

3. Perfmatters

Perfmatters je premium dodatak koji su razvili Brian Jackson i njegov brat, Brett Jackson. Ovaj dodatak može vrlo lako ukloniti neiskorišteni CSS.

Prvo morate kupiti dodatak. Zatim ga instalirajte. Aktiviraj licencu. Kada prijeđete na postavke, uključite upravitelja skriptama.

Samo idite na bilo koju stranicu ili objavite na svojoj web stranici, vidjet ćete ikonu upravitelja skripti na izborniku nadzorne ploče, kliknite na nju. Moći ćete ukloniti nekorišteni CSS i JS sa stranice ili globalno.

Ovaj je dodatak za izvedbu, dolazi s mnogim drugim opcijama za ubrzavanje WordPressa. Uklanjanje nekorištenog CSS/JS dio je toga.

4. CSS JS Manager

CSS JS upravitelj može posebno ukloniti CSS ili JS s mobilnog ili stolnog računala. Ovisno o tome što želite postići.

Ovaj dodatak također može odgoditi učitavanje CSS ili JS datoteka.

Zaključak

Ako imate puno neiskorištenih CSS-a i JS-a, primijetit ćete veliki napredak u brzini i rezultatima izvedbe.

Možda je nemoguće ukloniti sav neiskorišteni CSS, ali možete ih svesti na minimum. Koristim Asset CleanUp za uklanjanje neiskorištenog CSS-a za TargetTrend.

Upamtite, optimizirajte, ali nemojte biti previše opsjednuti time, osim ako ne želite da vaša stranica izgleda ovako najbrža web stranica na svijetu.

Također pročitajte:

Kako eliminirati resurse koji blokiraju prikaz u WordPressu

Kako napraviti WordPress vrlo brz

Kako privući promet na svoj blog