Cum să eliminați CSS și JS neutilizate din WordPress (foarte ușor)

A avea o mulțime de CSS și JS neutilizate pe site-ul dvs. web poate afecta timpul de încărcare a site-ului dvs. Dacă rulați site-ul dvs. prin intermediul unor instrumente de testare a vitezei, cum ar fi Google PageSpeed ​​Insight, este posibil să primiți un avertisment pentru a elimina CSS neutilizat.

Din fericire, există o modalitate foarte ușoară de a face asta. Nu trebuie să aveți cunoștințe tehnice speciale pentru a putea elimina CSS și JS neutilizate de pe site-ul dvs. WordPress.

Acest lucru se datorează unui plugin uimitor cunoscut sub numele de Asset CleanUp: Page Speed ​​Booster. Cu acest plugin, eliminarea CSS neutilizate este la fel de ușoară ca și a face clic pe câteva butoane. Alternativ, dacă nu vă deranjează să cheltuiți câțiva dolari pe an, cu WP Rocket, există un buton CSS neutilizat eliminat, doar activați-l și pluginul va elimina automat toate CSS neutilizate.

Checkout: Top 7 Găzduire WordPress Google Cloud gestionată

Ce este CSS neutilizat?

CSS neutilizat este un fișier CSS care este prezent într-o pagină, dar în general nu este necesar pentru încărcarea paginii. Când un vizitator deschide un site web, browserul trebuie de obicei să descarce, să analizeze și să proceseze toate foile de stil externe de pe pagina vizitată înainte de a putea afișa conținutul paginii vizitatorului. Dacă pe o astfel de pagină există vreun CSS care nu este utilizat pe pagină, browserul își va pierde timpul cu el.

Un exemplu clasic în acest sens este majoritatea pluginurilor de formulare de contact care sunt utilizate. Aceste plugin-uri, deși sunt utilizate în cea mai mare parte numai pe pagina Contactați-ne, își încarcă CSS-ul pe tot site-ul. Nu contează dacă este pagina de pornire unde nu este folosit, CSS-ul se va încărca.

Dacă există prea multe CSS care nu sunt necesare, dar care se încarcă și încetinesc timpul browserului pentru a citi și afișa o pagină, poate deveni o problemă.

În afară de pluginuri, dezvoltatorii de teme scriu o mulțime de lucruri în style.css care nu sunt în mare parte necesare. Dar indiferent dacă este necesar sau nu, se încarcă ori de câte ori site-ul dvs. este încărcat!

Un CSS neutilizat poate să nu fie o problemă, dar multe CSS neutilizate pot afecta timpul de încărcare a site-ului dvs.

Checkout: Top 10 cele mai rapide și cele mai bune teme WordPress

Cum se identifică CSS neutilizat

Găsirea CSS și JS neutilizate este un lucru foarte ușor de făcut. Sunt două abordări pe care le voi recomanda.

Una este să vă analizați site-ul prin Google PageSpeed ​​Insight. Verificați dacă site-ul dvs. are o problemă de eliminare CSS neutilizată. Faceți clic pe el și veți putea identifica componenta site-ului dvs. responsabilă pentru aceasta.

Puteți vedea de sus că există un caz de CSS neutilizat înregistrat. Pot vedea pluginul și locația CSS-ului nefolosit uitându-mă la asta.

A doua opțiune este să obțineți o analiză mai detaliată. Puteți realiza acest lucru utilizând instrumentele Chrome Dev.

În browserul Chrome, deschideți Instrumentele Chrome Dev, apoi accesați acoperire. Apoi faceți clic pe butonul de reîncărcare din interiorul zonei de acoperire. Puteți găsi un ghid cuprinzător despre cum să faceți acest lucru la instrumentul Google Developers.

Cealaltă opțiune este să utilizați jitbit pentru a căuta selectoare CSS neutilizate. De asemenea, puteți utiliza PurifyCSS pentru a găsi CSS neutilizat

Cum să eliminați CSS neutilizat

Urmați acești pași pentru a elimina CSS neutilizat din WordPress:

1. Instalați Asset CleanUp

Accesați pluginul apoi Adăugați nou. Apoi tastați „Asset CleanUp” în caseta de căutare a paginii Adăugați un nou plugin. Instalați și activați pluginul.

2. Accesați setările pluginului

Pentru a accesa setările pluginului, din tabloul WordPress faceți clic pe setări, apoi pe Asset CleanUp.

3. Descărcați CSS și JS nedorite

În setările pluginului, este posibil să trebuiască să acceptați că știți cum funcționează pluginul sub robinetul de eliminare a grăsimii înainte de a începe.

Pentru a descărca CSS și JS, faceți clic pe CSS și JSS manager. De acolo puteți elimina orice CSS și JS de care nu aveți nevoie. Îl puteți elimina doar pentru pagina de pornire, pentru întregul site sau pentru o anumită adresă URL. Puteți elimina și pentru postări, pagini sau categorii.

Un exemplu este descărcarea oricărui formular de contact de la încărcare pentru întregul site, cu excepția paginii de contact

Luați-vă timp și descărcați fiecare CSS și JS despre care știți că nu sunt necesare. Asigurați-vă că vă testați site-ul după ce ați terminat pentru a vă asigura că totul este în regulă.

Eliminați pluginurile CSS WordPress neutilizate

Iată câteva pluginuri pe care le puteți folosi pentru a elimina CSS neutilizat din WordpPress:

1. Asset CleanUp: Page Speed ​​Booster

Asset CleanUp: Page Speed ​​Booster facilitează eliminarea CSS și JSin WordPress neutilizate chiar și pentru începători. Tot ce trebuie să faceți este să dezactivați un anumit CSS care nu este necesar pentru o anumită pagină.

De asemenea, puteți dezactiva numai postările individuale. Cu versiunea premium, puteți dezactiva CSS/JS neutilizate prin pluginuri.

Acest plugin este un plugin complet de performanță cu multe alte opțiuni pentru a accelera WordPress. Eliminarea CSS/JS neutilizate este doar o parte a acesteia.

În această postare, am folosit acest plugin are un ghid.

2. WP Rocket

WP Rocket este pluginul WordPress de performanță premium numărul unu. Dacă sunteți un noob, adică dacă nu sunteți experimentat sau confortabil cu WordPress, atunci WP Rocket este cea mai ușoară modalitate de a elimina CSS neutilizat pentru.

Trebuie să achiziționați pluginul, odată ce ați făcut asta, îl puteți descărca din contul dvs. sau puteți verifica e-mailul pentru un link de descărcare.

Instalați pluginul prin Dashboard>plugins>Add new>Upload.

Doar navigați la setările WP Rocket, apoi faceți clic pe fila „Optimizare fișier”. Apoi derulați în jos și veți vedea „Eliminați CSS neutilizat”, bifați caseta, salvați și ștergeți memoria cache.

3. Perfmatters

Perfmatters este un plugin premium dezvoltat de Brian Jackson și fratele său, Brett Jackson. Acest plugin poate ajuta la eliminarea CSS neutilizate foarte ușor.

În primul rând, trebuie să achiziționați pluginul. Apoi instalați-l. Activați licența. Când navigați la setări, activați managerul de scripturi.

Doar accesați orice pagină sau postare de pe site-ul dvs. web, veți vedea pictograma managerului de scripturi în meniul tabloului de bord, faceți clic pe ea. Veți putea elimina CSS și JS neutilizate din pagină sau la nivel global.

Acest plugin este un plugin de performanță, vine cu multe alte opțiuni pentru a accelera WordPress. Eliminarea CSS/JS neutilizate este o parte a acesteia.

4. CSS JS Manager

CSS JS Manager poate elimina în mod specific CSS sau JS de pe mobil sau desktop. În funcție de ceea ce vrei să obții.

Acest plugin poate amâna și încărcarea fișierelor CSS sau JS.

Concluzie

Dacă aveți o mulțime de CSS și JS neutilizate, veți observa o îmbunătățire mare a vitezei și a scorurilor de performanță.

Poate fi imposibil să eliminați toate CSS-urile neutilizate, dar le puteți reduce la minimum. Folosesc Asset CleanUp pentru a elimina CSS neutilizat pentru TargetTrend.

Amintiți-vă, optimizați, dar nu fiți prea obsedat de el, cu excepția cazului în care doriți ca site-ul dvs. să arate ca cel mai rapid site din lume.

Citește și:

Cum să eliminați resursele care blochează randarea din WordPress

Cum să faci WordPress foarte rapid

Cum să atragi trafic către blogul tău