Cum să eliminați CSS-ul neutilizat în WordPress (Modul corect)

Ca proprietari de site-uri web WordPress, toți ne străduim să oferim o experiență rapidă și optimă utilizatorilor. Acest lucru nu numai că menține vizitatorii implicați, dar ajută și site-urile noastre să se claseze mai sus în rezultatele căutării.

S-ar putea să nu realizati că temele și pluginurile dvs. încarcă adesea mult mai mult cod CSS decât au nevoie paginile dvs. Acest CSS neutilizat ar putea încetini în secret site-ul dvs. web.

Fiecare linie suplimentară de cod pe care vizitatorii dvs. trebuie să o descarce adaugă secunde prețioase la timpul de încărcare. Și în lumea de astăzi, chiar și o întârziere de o secundă vă poate costa vizitatori și vânzări.

De aceea am creat acest ghid complet despre cum să eliminați CSS-ul neutilizat din WordPress în mod corect. Vă vom arăta metodele exacte pe care le folosim pentru a curăța fișierele de stil voluminoase și pentru a accelera site-urile fără a strica nimic.

Ce este CSS-ul neutilizat în WordPress?

CSS neutilizat în WordPress se referă la codul CSS care este încărcat pe paginile dvs. web, dar nu este de fapt utilizat pentru a stiliza nimic vizibil pe acele pagini specifice.

Acest cod suplimentar forțează browserele vizitatorilor să descarce și să proceseze fișiere inutile, ceea ce încetinește timpii de încărcare a paginii. Chiar și câteva secunde în plus pot afecta experiența utilizatorului și clasamentele în motoarele de căutare, costându-vă potențial vizitatori și conversii.

Puteți verifica cu ușurință dacă CSS-ul neutilizat afectează site-ul dvs. rulându-l prin Google Pagespeed Insights. Căutați avertismentul „Remove unused CSS” în rezultate. Acesta vă va arăta exact ce fișiere încetinesc lucrurile.

De ce încarcă WordPress CSS neutilizat?

Iată problema: WordPress nu a fost conceput pentru a fi pretențios în ceea ce privește CSS-ul pe care îl încarcă. Tema WordPress vine cu o foaie de stil principală (de obicei numită style.css) care conține reguli de stil pentru fiecare element posibil, chiar și pentru cele pe care s-ar putea să nu le folosiți niciodată.

Dar tema ta este doar începutul. Fiecare plugin pe care îl instalezi adaugă propriile fișiere CSS în amestec. WooCommerce încarcă stilurile magazinului pe fiecare pagină (chiar și pe postările tale de blog), page builders încarcă CSS-ul lor global, iar plugin-urile pentru formulare de contact încarcă stilurile formularelor pe paginile fără formulare.

Adăugați fonturi personalizate, biblioteci de pictograme și alte elemente de design, și ajungeți cu multă încărcare CSS. Deși fiecare fișier individual poate fi mic, acestea se acumulează rapid și afectează viteza site-ului dvs.

Cum să eliminați CSS neutilizat în WordPress

Acum, veștile bune: există mai multe modalități eficiente de a curăța CSS-ul neutilizat pe site-ul dvs. WordPress. Am testat mai multe abordări și am găsit metode care funcționează fiabil, fără a vă defecta site-ul.

Iată ce trebuie să știți dinainte: eliminarea completă a 100% din CSS-ul neutilizat este aproape imposibilă din cauza modului în care WordPress încarcă dinamic conținutul. Un anumit CSS trebuie să rămână pregătit pentru elemente interactive, conținut condiționat și diferite tipuri de pagini.

Dar nu vă faceți griji, nu aveți nevoie de perfecțiune pentru a vedea îmbunătățiri majore. Chiar și eliminarea a 50-70% din CSS-ul neutilizat poate accelera dramatic site-ul dvs.

Vă vom prezenta două metode dovedite care stabilesc echilibrul corect între câștigurile de performanță și stabilitatea site-ului, astfel încât să puteți alege abordarea care se potrivește nivelului dvs. de confort.

1. Elimină CSS-ul nefolosit în WordPress folosind WP Rocket
2. Remove Unused CSS in WordPress Using Asset CleanUp

Metoda 1: Eliminarea CSS-ului neutilizat în WordPress folosind WP Rocket

Această metodă este mai ușoară și este recomandată începătorilor. Îmbunătățește în mare măsură livrarea generală a fișierelor CSS pe site-ul dvs. WordPress, inclusiv eliminarea majorității CSS-ului neutilizat.

Considerăm că este cea mai bună soluție pentru începători, deoarece este mai ușoară și atinge obiectivul principal de a oferi o experiență mai bună utilizatorilor dvs. Acest lucru înseamnă că site-ul dvs. web se încarcă rapid în instrumentele de testare a vitezei și, de asemenea, se simte rapid pentru utilizatorii dvs.

Mai întâi, trebuie să instalați și să activați pluginul WP Rocket. Pentru mai multe detalii, consultați ghidul nostru pas cu pas despre cum să instalați un plugin WordPress.

După activare, trebuie să vizitați pagina Setări » WP Rocket și să comutați la fila „Optimizare fișiere”.

În continuare, trebuie să derulați în jos la secțiunea Fișiere CSS și apoi să bifați căsuța de lângă opțiunea „Eliminare CSS neutilizat (Beta)”.

Deoarece această funcție de la WP Rocket este în beta, vă va întreba din nou dacă doriți să activați setarea. Puteți continua și faceți clic pe butonul „Activate Remove Unused CSS”.

Odată ce opțiunea „Elimină CSS-ul neutilizat” este activă, puteți specifica apoi numele fișierelor CSS, ID-urile sau clasele care nu ar trebui eliminate sub caseta „Safelist CSS”.

Pur și simplu introduceți-le în casetă.

În continuare, va trebui să salvați modificările derulând în jos și făcând clic pe butonul „Salvează modificările”.

Când faceți acest lucru, WP Rocket va începe să vă proceseze fișierele CSS și vă va afișa o bară de progres.

Va dura câteva minute pentru ca pluginul să proceseze și să elimine fișierele CSS neutilizate de pe site-ul dvs. web.

Veți vedea mesajul „Eliminarea CSS neutilizat este completă!” atunci când pluginul a finalizat procesul.

Acum, vizitați instrumentul Google Pagespeed Insights și testați performanța site-ului dvs.

Elimină CSS-ul care blochează randarea pentru WordPress

WP Rocket vă permite să optimizați fișierele CSS și să eliminați CSS-ul care blochează redarea de pe site-ul dvs.

Pentru a începe, puteți naviga la fila „Optimizare fișiere” din WP Rocket. De aici, derulați în jos la secțiunea Fișiere CSS și apoi bifați căsuța de lângă opțiunea „Optimizează livrarea CSS”.

Această opțiune generează un fișier CSS care conține doar codul CSS necesar pentru a afișa partea vizibilă a site-ului dvs. web. Acesta încarcă mai întâi acel fișier, afișează pagina vizitatorilor dvs. și apoi încarcă alte fișiere CSS folosind o tehnologie numită încărcare amânată.

Prin eliminarea acestui CSS care blochează redarea, site-ul dvs. devine vizibil utilizatorilor mult mai rapid decât ar fi dacă ar trebui să încărcați toate fișierele CSS înainte ca pagina să fie afișată.

După activarea opțiunii „Optimizează livrarea CSS”, faceți clic pe butonul „Salvează modificările” și așteptați ca WP Rocket să genereze fișierul CSS necesar pentru toate postările și paginile dvs. De asemenea, va șterge automat memoria cache a site-ului dvs. web.

Odată terminat, puteți continua și testa din nou performanța site-ului dvs. folosind Google Pagespeed Insights.

Ajustări suplimentare ale livrării fișierelor pentru a îmbunătăți performanța

WP Rocket vă permite, de asemenea, să eliminați șirurile de interogare din fișierele statice, să combinați fișierele Google Fonts și să minimizați HTML.

Toate aceste ajustări adaugă îmbunătățiri minuscule vitezei dvs. generale, ceea ce se adaugă la o experiență de încărcare mai rapidă pentru vizitatorii dvs.

Veți vedea, de asemenea, opțiuni pentru a minifica și combina fișierele CSS. Aceste opțiuni vor reduce cererile HTTP și vă vor oferi un impuls suplimentar de viteză.

Cu toate acestea, va trebui să verificați cu atenție site-ul dvs. pentru a vă asigurați că nimic nu este defect după activarea acestor setări.

În plus, puteți aplica aceeași optimizare pentru fișierele JavaScript de pe site-ul dvs. web.

Le puteți minimiza și combina pentru a servi ca un singur fișier și puteți amâna încărcarea fișierelor JavaScript pentru a îmbunătăți performanța.

Pentru mai multe detalii, consultați tutorialul nostru pas cu pas despre cum să configurați corect WP Rocket în WordPress.

Metoda 2: Elimină CSS-ul neutilizat în WordPress folosind Asset CleanUp

Această metodă este puțin avansată, dar incredibil de puternică și vă va permite să eliminați cu ușurință orice CSS neutilizat de pe orice pagină a site-ului dvs. WordPress.

Cu toate acestea, este un pic complicat și va trebui să testați funcționalitatea și aspectul site-ului dvs. web în mod amănunțit pentru a vă asigura că nimic nu este stricat.

Mai întâi, trebuie să instalați și să activați pluginul Asset Cleanup. Pentru mai multe detalii, consultați ghidul nostru pas cu pas despre cum să instalați un plugin WordPress.

La activare, trebuie să vizitezi pagina Asset CleanUp » Settings și să treci la fila Test Mode. De aici, trebuie să activezi opțiunea ‘Enable Test Mode’.

Acest lucru vă permite să încercați diferite setări și să le testați ca administrator, fără a afecta vizitatorii site-ului.

După aceea, trebuie să vizitați pagina Asset CleanUp » Manager CSS/JS. De aici, puteți descărca fișiere CSS și JavaScript nedorite pe bază de pagină.

Acesta va prelua mai întâi pagina dvs. de pornire și vă va arăta toate fișierele CSS și JavaScript încărcate pe acea pagină.

Trebuie să derulați în jos și să revizuiți fișierele încărcate. Dacă vedeți un fișier de care nu aveți nevoie, îl puteți descărca pentru acea pagină particulară, tip de postare sau la nivelul întregului site.

Pluginul vă permite, de asemenea, să alegeți postări sau pagini specifice de aici, sau puteți accesa aceleași opțiuni editând postarea sau pagina așa cum ați face în mod normal.

Pe ecranul de editare a postării, veți găsi caseta Asset CleanUp chiar sub editorul de postări.

Pluginul va prelua și va lista automat toate fișierele și resursele încărcate atunci când un vizitator vizualizează această pagină pe site-ul dvs.

Puteți apoi pur și simplu să descărcați fișierele CSS sau JavaScript neutilizate de care nu aveți nevoie pe acea pagină.

Important: Nu uitați să vă testați site-ul web după eliminarea oricărui CSS sau JavaScript neutilizat pentru a vă asigura că totul funcționează corect.

După ce ați terminat de descărcat și eliminat fișierele CSS și JavaScript neutilizate, puteți reveni la pagina de setări a pluginului și puteți dezactiva „Modul de testare”.

Nu uitați să faceți clic pe butonul „Actualizați toate setările” pentru a salva modificările.

Acum puteți testa site-ul dvs. web folosind Google Pagespeed Insights pentru a vedea modificarea notificării privind CSS-ul neutilizat.

Ghiduri experte pentru îmbunătățirea performanței WordPress

Sperăm că acest articol v-a ajutat să învățați cum să eliminați cu ușurință CSS-ul neutilizat în WordPress. S-ar putea să doriți să consultați și alte ghiduri legate de îmbunătățirea performanței WordPress:

• Ghidul complet pentru creșterea vitezei și performanței WordPress
• Cum să accelerezi performanța WooCommerce
• Cum să efectuați corect un test de viteză a site-ului web (Cele mai bune instrumente)
• Metrici importanți de măsurat pe site-ul dvs. WordPress
• Cum să optimizați Core Web Vitals pentru WordPress (Ghid complet)
• Cum să folosești pluginul GTmetrix pentru a îmbunătăți performanța site-ului WordPress
• Cum să optimizați ușor livrarea CSS WordPress
• Cel mai rapid hosting WordPress (teste de performanță)
• Cum să optimizați imaginile pentru performanța web fără a pierde calitatea
• Cele mai bune pluginuri de cache pentru WordPress pentru a-ți accelera site-ul web

Dacă ți-a plăcut acest articol, te rugăm să te abonezi la canalul nostru de YouTube pentru tutoriale video WordPress. Ne poți găsi, de asemenea, pe Twitter și Facebook.