Cum să eliminați CSS neutilizat din WordPress

Dacă site-ul dvs. WordPress utilizează o temă WordPress plătită sau una populară din depozitul oficial de teme WordPress, sunt probabil ca tema să fie dezvoltată pentru o varietate de cazuri de utilizare. Și este posibil să utilizați doar un set mic din toate funcțiile disponibile în temă.

În acest caz, site-ul dvs. încarcă o mulțime de CSS neutilizate, care nu sunt necesare pentru stilarea paginilor site-ului dvs. De exemplu, tema WordPress pe care o utilizați ar putea avea stiluri și pentru paginile WooCommerce, dar dacă rulați doar un blog pe site-ul dvs. WordPress, atunci nu utilizați CSS-ul inclus pentru paginile WooCommerce de pe site și, prin urmare, nu utilizați. CSS pentru utilizatori.

Dacă v-ați testat site-ul web cu instrumentul Google Pagespeed, probabil că știți deja că site-ul dvs. are probleme CSS neutilizate. În acest ghid, vă vom arăta mai întâi cum să verificați dacă există CSS neutilizate, apoi folosiți un instrument gratuit pentru a elimina CSS neutilizat de pe site-ul dvs. WordPress.

Cum să verificați CSS neutilizat

Google Chrome DevTools (cel pe care îl vedeți când faceți clic pe opțiunea „Inspectați” din meniul contextual) are o funcție de acoperire în fila Surse. Puteți utiliza opțiunea Acoperire pentru a găsi CSS și JS neutilizate pe care le încarcă site-ul dvs.

  1. Deschide-ți site-ul web în Chrome pe desktop.
  2. Faceți clic dreapta pe un spațiu alb gol de pe site-ul dvs. și selectați Inspecta din meniul contextual.
  3. Faceți clic pe Surse filă, apăsați Ctrl + Shift + P pentru a deschide o fereastră de comandă, apoi tastați acoperire și selectați Începeți să instrumentați acoperirea și să reîncărcați pagina din comenzile disponibile.
  4. Sub fila Acoperire, faceți clic pe filtru URL câmp și introduceți aici domeniul rădăcină al site-ului dvs. pentru a afișa numai fișierele interne CSS/JS.

    Filtru de adresă URL a filei Acoperire sursă Chrome

    └ Verificați Octeți neutilizați pentru a vedea procentul de date încărcate într-un fișier CSS/JS din tema dvs.

  5. Faceți clic pe un fișier CSS pentru a vizualiza CSS-ul neutilizat (marcat cu bare roșii) încărcat de site-ul dvs. CSS-ul care este utilizat pe pagina curentă va fi afișat cu bare verzi.

    CSS View Chrome neutilizat

Odată ce ați analizat toate CSS neutilizate încărcate pe site-ul dvs. web, este timpul să-l eliminați. Există mai multe instrumente gratuite disponibile pentru a elimina CSS neutilizat din paginile web. Mai jos este unul dintre instrumentele populare pe care le-am testat și folosit în propriile proiecte.

Utilizați PurifyCSS Online pentru a elimina CSS neutilizat

De obicei, puteți găsi un plugin pentru aproape orice în WordPress. Dar pentru a elimina CSS neutilizat, din păcate, nu există un singur plugin disponibil. Prin urmare, vom folosi instrumente manuale care nu sunt specifice wordpress pentru a elimina CSS neutilizat de pe site-ul dvs.

PurifyCSS este cel mai mult instrument prietenos non-dezvoltator puteți găsi pentru a face față cu CSS neutilizat. Instrumentul are o interfață simplă pentru a permite utilizatorilor să furnizeze fie adresa URL a site-ului, fie codul HTML și CSS. Pentru WordPress, vom folosi opțiunea URL și vom oferi link-uri către tot felul de pagini de pe site-ul dvs. pentru a permite instrumentului să preia CSS din toate și să optimizeze pentru CSS neutilizat.

Remove-unused-CSS-PurifyCSS-Online-instrument

Iată o listă rapidă de pagini pe care ar trebui să le introduceți în instrument:

  • Adresa URL a paginii de pornire
  • Mai multe adrese URL de pagini de postare din fiecare categorie de pe site-ul dvs

    └ Acest lucru este pentru a ne asigura că CSS este inclus pentru toate elementele postării.

  • Contact, Despre, Confidențialitate și tot felul de pagini diferite pe care le puteți avea pe site-ul dvs.
  • Pagină de arhivă, pagină de căutare, pagini de autor
  • Pagini cu tip de postare personalizate

Sfat valoros: Creați o postare/pagină „funcții” cu toate elementele tematice pe care le utilizați sau le puteți utiliza în viitor, cum ar fi un tabel, galerie de imagini, cod, liste prealabile, liste ordonate, liste neordonate, formulare, file, acordeoane, blocuri Gutenberg pe care le utilizați în general , etc.

Utilizați această adresă URL a postării „funcții” în instrumentul PurifyCSS Online pentru a vă asigura că este inclus CSS pentru elementele utilizate în mod obișnuit.

Loveste Curățați CSS butonul odată ce ați adăugat toate tipurile de adrese URL relevante de pe site-ul dvs. în instrumentul PurifyCSS Online.

Copiați noul CSS generat de instrument și utilizați-l pe site-ul dvs. Asigură-te că backup pentru stilul original.css și alte fișiere CSS din tema dvs. înainte de a înlocui noul CSS generat de PurifyCSS.

Bacsis: Puteți fie să utilizați editorul de teme WordPress încorporat pentru a edita fișierele CSS ale temei, fie puteți utiliza un program FTP/SFTP pentru a vă conecta la server și a edita fișierele confortabil folosind un editor Notepad.