Cum să eliminați CSS neutilizat din WordPress în siguranță

Doriți să eliminați CSS neutilizat din WordPress și să vă faceți site-ul mai rapid?

Un obiectiv cheie al optimizării site-ului web este eliminarea oricărui cod inutil. Acest lucru reduce dimensiunea totală a paginilor site-ului dvs. și duce la timpi mai rapidi de încărcare a paginii și la o experiență de utilizator mai bună pentru vizitatori.

Un domeniu în care puteți reduce foarte mult dimensiunea paginilor site-ului este stilul. Stilul site-ului este controlat printr-un limbaj bazat pe reguli numit Cascading Style Sheets, care este unul dintre elementele de bază ale World Wide Web alături de HTML și Javascript.

Mai frecvent prescurtate la CSS, foile de stil pot fi folosite pentru a defini culorile paginii, fonturile, fundalurile, stilul imaginii, marginile, umplutura și multe altele. În exemplul de mai jos, codul CSS se asigură că titlurile sunt centrate și afișate în roșu.

 h1 { text-align: center; color: red; }

Un site web tipic WordPress va necesita multe foi de stil pentru a afișa corect o pagină. Pe lângă stilul CSS folosit în versiunea de bază a WordPress, apelurile CSS sunt efectuate de tema WordPress activată și de pluginurile WordPress. Prin urmare, un site web WordPress poate necesita o duzină de fișiere CSS pentru a stila totul corect.

Foile de stil în cascadă pot crește timpul de încărcare a paginii dacă fișierele sunt prea mari sau dacă sunt apelate prea multe fișiere CSS. O serie de tehnici pot fi folosite pentru a rezolva această problemă, cum ar fi Defer, Minimify și Combine.

Mai jos este un rezumat al acestor tehnici.

Dacă doriți să reduceți și mai mult greutatea CSS, vă recomand să eliminați regulile CSS neutilizate din WordPress, astfel încât vizitatorii să descarce doar stilul necesar. Impiedicand browserul sa incarce cod CSS inutil, puteti accelera incarcarea paginii si le puteti oferi vizitatorilor o experienta de utilizare mai buna.

Să aruncăm o privire mai atentă la CSS neutilizat și să examinăm cum puteți elimina codul CSS neutilizat de pe site-ul dvs. WordPress.

Ce este CSS neutilizat în WordPress și de ce apare?

CSS neutilizat se referă la orice reguli CSS care nu sunt apelate pe pagina curentă. Acest lucru se întâmplă frecvent, deoarece paginile rareori trebuie să apeleze fiecare regulă CSS dintr-o foaie de stil. De exemplu, foaia de stil poate conține o regulă CSS pentru afișarea unui titlu folosind culoarea roșie, dar aceasta ar fi clasificată ca CSS neutilizată dacă nu a fost solicitată efectiv.

Deoarece browserele nu necesită reguli CSS neutilizate, codul crește în mod inutil dimensiunea fișierelor CSS. Prin urmare, puteți îmbunătăți timpul de încărcare a paginii eliminând codul CSS neutilizat din WordPress.

Temele WordPress sunt necesare pentru a utiliza fișierul styles.css ca foaie de stil principală, deși este obișnuit ca temele să folosească foi de stil suplimentare pentru fonturi, skinuri de teme și alte elemente de design. Multe dintre regulile CSS conținute în fișierele CSS de temă sunt necesare doar în anumite situații. În ciuda acestui fapt, aceste fișiere CSS sunt de obicei încărcate pe fiecare pagină a site-ului dvs.

Pluginurile WordPress sunt deosebit de proaste pentru inserarea CSS neutilizate în pagini, deoarece dezvoltatorii încarcă frecvent foi de stil pe toate paginile în mod implicit.

Este o bună practică să eliminați CSS neutilizat din WordPress, dar dacă eliminați orice cod CSS care este important pentru designul site-ului dvs., designul site-ului dvs. se va rupe.

Dar CSS critic?

Un alt termen pe care îl puteți auzi frecvent este CSS critic . Se referă la orice stil care este necesar pentru a afișa conținutul utilizatorilor imediat, fără a derula. Această zonă este denumită Above the Fold și timpul necesar unui browser pentru a încărca conținut deasupra pliului se numește First Contentful Paint (FCP).

Google recomandă ca CSS critic să fie extras, redus și afișat inline în elementul HEAD pentru a asigura că Prima vopsea cu conținut se încarcă rapid. Defer poate fi folosit pentru a încărca mai târziu fișierele CSS necritice, pentru a vă asigura că fișierele CSS mai puțin importante nu încetinesc încărcarea inițială a paginii.

Cum să găsiți CSS neutilizat

O modalitate rapidă de a descoperi CSS neutilizat pe o pagină este să introduceți adresa URL a acesteia într-un instrument de raportare a performanței, cum ar fi GTmetrix, Google PageSpeed ​​Insights sau Pingdom Website Speed ​​Test. Raportul va evidenția CSS neutilizat și va recomanda eliminarea sau amânarea regulilor neutilizate.

Browserele moderne oferă instrumente pentru dezvoltatori care vă ajută să analizați designul și codul unui site web. Opțiunile pentru dezvoltatori din Google Chrome se numesc Chrome DevTools și fila sa Acoperire poate fi folosită pentru a găsi codul Javascript și CSS neutilizat. Este o modalitate rapidă și eficientă de a găsi fișiere CSS care au multe reguli neutilizate.

Pentru a încărca Chrome DevTools, tot ce trebuie să faceți este să faceți clic dreapta pe o pagină și să selectați Inspectați . Puteți apoi să faceți clic pe fila Acoperire pentru a vedea adresa URL a fiecărui fișier și dacă fișierul este Javascript, CSS sau ambele. În dreapta, puteți vedea dimensiunea totală a fișierului în octeți și totalul de octeți neutilizați. O bară de vizualizare afișează codul neutilizat în roșu și codul necesar într-o culoare albastru-verde. Acest lucru este rezumat în panoul de jos, dar dacă faceți clic pe un anumit fișier, veți vedea regulile CSS neutilizate evidențiate cu roșu în panoul de mai sus.

Consultați pagina Acoperire pentru dezvoltatori Chrome pentru mai multe informații despre cum funcționează fila Acoperire.

Multe alte instrumente CSS gratuite și premium neutilizate pot fi găsite online.

• Instrument CSS neutilizat JitBit – Un serviciu gratuit care accesează cu crawlere fiecare pagină de pe site-ul dvs. și evidențiază selectoarele CSS care nu sunt folosite nicăieri
• PurifyCSS Online – Un instrument util gratuit care evidențiază codul neutilizat și vă oferă fișiere CSS curate
• UnusedCSS – Un serviciu premium care scanează adresele URL ale paginilor și oferă fișiere CSS mai curate, fără cod inutil (prețul începe de la 25 USD pe lună)

În timp ce instrumente precum Chrome DevTools și PurifyCSS Online pot fi utile pentru vizualizarea regulilor CSS neutilizate pe site-uri web, ele nu sunt întotdeauna practice în abordarea problemei CSS neutilizate pe o platformă dinamică precum WordPress.

Temele și pluginurile WordPress necesită diferite foi de stil pentru a fi încărcate pe site-ul dvs. web, prin urmare, cantitatea de CSS neutilizate se modifică de la o pagină la alta. De aceea cred că, în general, este mai bine să folosiți pluginuri de optimizare WordPress pentru a elimina (sau a amâna) CSS neutilizat din WordPress.

Să aruncăm o privire mai atentă la câteva pluginuri WordPress utile care ajută la eliminarea CSS neutilizate de pe site-ul dvs. WordPress.

Eliminați CSS neutilizat din WordPress folosind WP Rocket

WP Rocket este una dintre cele mai populare soluții de performanță WordPress de pe piață. O licență pentru WP Rocket este disponibilă pentru 49 USD pe an.

Pluginul are un instrument care poate elimina toate CSS neutilizate de pe site-ul dvs. cu un clic pe un buton. În fundal, ceea ce face WP Rocket este să revizuiască toate foile de stil și scripturile de pe fiecare pagină și să potrivească regulile CSS cu selectoarele CSS care se găsesc în codul HTML. Acest proces se face extern pe serverele WP Rocket, deci asigurați-vă că pluginul dvs. de securitate WordPress a trecut pe lista albă adresa IP a serverului.

Deoarece WP Rocket elimină automat tot codul CSS neutilizat, este posibil să întâlniți situații în care acest instrument poate sparge o parte a designului site-ului dvs., cum ar fi un formular de contact. Dacă se întâmplă acest lucru, adăugați fișierul, ID-ul sau clasa relevant CSS la lista sigură CSS WP Rocket.

Citire recomandată: Cum să curățați baza de date WordPress

Eliminați CSS neutilizat din WordPress folosind Perfmatters

Perfmatters este soluția de optimizare pe care o folosesc pe site-ul meu pentru a elimina codul CSS neutilizat. Este un plugin WordPress premium care este disponibil pentru doar 24,95 USD pe an.

Cu Managerul de scripturi Perfmatters, puteți activa și dezactiva fișierele CSS și fișierele Javascript pe anumite postări și pagini de pe site-ul dvs. Se pot face excepții de la excluderile de script pe baza expresiilor regulate, a stării de conectare a unui utilizator și a tipului de dispozitiv al acestuia.

Am descoperit că pluginul este foarte eficient în abordarea pluginurilor WordPress slab optimizate. Luați Jetpack, de exemplu. Chiar dacă nu utilizați module Jetpack pentru front-end-ul site-ului dvs. web, acesta va încărca în continuare un fișier CSS de 85,1 KB pe fiecare pagină a site-ului dvs. web. După cum puteți vedea mai jos, Perfmatters îmi permite să opresc încărcarea acestui fișier CSS inutil.

Eliminarea CSS neutilizate din WordPress folosind Asset CleanUp

O alternativă excelentă la Perfmatters este Asset CleanUp. Pluginul este gratuit de utilizat, deși o versiune premium este disponibilă pentru 42,08 EUR care deblochează multe funcții suplimentare.

Managerul CSS și Javascript de la Asset CleanUp vă permite să preîncărcați fișierele și să dezactivați fișierele pe anumite pagini de pe site-ul dvs. Se pot face excepții pentru utilizatorii autentificați.

Dacă faceți upgrade la Asset CleanUp Pro, veți obține mai mult control asupra zonelor site-ului dvs. CSS și fișierele Javascript care sunt încărcate și veți putea adăuga excepții suplimentare pentru dimensiunea ecranului și expresiile regulate.

Eliminarea fișierelor CSS neutilizate folosind RapidLoad

Autoptimize este un plugin WordPress eficient de optimizare care vă permite să agregați, să minimizați și să stocați în cache fișiere CSS, Javascript și HTML. Pluginul WordPress RapidLoad Power-Up extinde Autoptimize și mai mult, ajutându-vă să eliminați CSS neutilizat din WordPress.

La fel ca instrumentul de optimizare CSS de la WP Rocket, RapidLoad Power-Up reduce timpul de încărcare a paginii prin examinarea regulilor CSS care sunt de fapt necesare.

După cum sugerează și numele, pluginul utilizează serviciul RapidLoad pentru a reduce dimensiunea fișierelor CSS. Prin urmare, va trebui să vă înscrieți la serviciul RapidLoad pentru a utiliza RapidLoad Power-Up. Planurile lunare sunt disponibile pentru RapidLoad pentru 5,83 USD pe lună.

Gânduri finale

Dezvoltatorii nu fac suficient pentru a optimiza foile de stil care modelează și modelează site-urile noastre web. Veți descoperi că multe teme și pluginuri WordPress încarcă toate regulile CSS pe site-ul dvs. web, chiar și atunci când acele reguli sunt necesare doar pe anumite pagini.

Pentru a vedea cât de mult cod CSS este neutilizat pe propriul dvs. site web, vă recomand să rulați câteva benchmark-uri pe un instrument de raportare a performanței, cum ar fi GTmetrix, Google PageSpeed ​​Insights sau Pingdom Website Speed ​​Test. Instrumente pentru dezvoltatori, cum ar fi Chrome DevTools și PurifyCSS Online, pot fi, de asemenea, folosite pentru a vedea cât de multă greutate inutilă adaugă CSS paginilor.

Din fericire, putem elimina CSS neutilizat din WordPress folosind o serie de soluții de performanță WordPress. Dacă preferați să automatizați procesul, vă recomand să utilizați WP Rocket sau RapidLoad Power-Up. Aceia dintre voi care au o abordare mai practică a întreținerii WordPress vor prefera Perfmatters și Asset CleanUp, deoarece aceste plugin-uri vă oferă control deplin asupra zonelor din site-ul dvs. CSS și fișierele Javascript care sunt încărcate.

Rețineți că eliminarea codului CSS important va duce la deteriorarea designului site-ului dvs., așa că asigurați-vă că verificați periodic paginile site-ului pentru a vă asigura că totul funcționează corect.

Citire recomandată: Cum să amânați analizarea javascriptului în WordPress

Noroc.

Kevin