Modul corect de a elimina CSS neutilizat din WordPress

A avea o mulțime de cod neutilizat poate încetini considerabil site-ul dvs. Și unul dintre suspecții obișnuiți în WordPress este codul CSS inutil. Din fericire, există câteva modalități de a preveni performanța slabă a site-ului dvs. și de a nu distruge experiența utilizatorului. Deși o modalitate de a face acest lucru este o metodă manuală, aceasta necesită o experiență semnificativă de dezvoltare. O altă opțiune, mai prietenoasă pentru începători, este să vă concentrați pe instrumentele existente și să eliminați CSS neutilizat din WordPress, adăugat de teme și pluginuri, cu doar câteva clicuri.

Cum să eliminați cu succes CSS neutilizat din WordPress

După cum probabil știți, WordPress folosește multe plugin-uri, teme și alte biblioteci terțe. Toate aduc numeroase funcții pentru a vă îmbunătăți funcționalitatea site-ului. Dar, de cele mai multe ori, majoritatea vin cu o mulțime de funcții pe care nu le utilizați de fapt. Cu toate acestea, dacă nu folosiți special profesioniști WordPress pentru a vă întreține și optimiza site-ul web, acesta va încărca totul pentru fiecare vizitator. Acest lucru are ca rezultat transferul de cantități mari de CSS neutilizate și încetinirea site-ului în sine. În consecință, performanța slabă va reduce traficul site-ului dvs. și va reduce clasamentul în căutare.

În multe cazuri, eliminarea a 100% din codul neutilizat este destul de dificilă, aproape imposibilă. Dar chiar și eliminarea celei mai mici sume sau a unui script conflictual, vă va îmbunătăți performanța site-ului. Pe lângă o „minimizare” tipică a codului, există mai multe moduri de a reduce impactul codului CSS neutilizat fără a vă distruge site-ul web.

De ce CSS-ul nefolosit este chiar acolo?

Deoarece CSS este responsabil pentru stilul aspectului site-ului dvs. WordPress, fiecare temă pe care o puteți găsi îl include. Și nu numai temele, ci și o mulțime de plugin-uri vin cu propriile lor opțiuni de stil și personalizare. Ca să nu mai vorbim de toate tipurile de constructori de site-uri web, biblioteci și chiar elemente individuale, în care utilizați doar o mică parte din ele. În general, câteva plugin-uri nu vor afecta atât de mult site-ul web. Dar, dacă aveți o mulțime, efectul cumulat poate încetini într-adevăr site-ul dvs.

Instrumente pentru eliminarea CSS neutilizate

Deși există multe instrumente care vă pot ajuta să eliminați CSS neutilizat, majoritatea nu sunt aplicabile pentru fiecare situație. Desigur, pentru site-urile web statice, cele mai multe dintre ele vor fi destul de utile. Cu toate acestea, site-urile web dinamice încarcă adesea și stilează elemente prin injectarea de clase CSS cu JavaScript. Și aceasta este partea mai grea, deoarece este greu să detectezi aceste clase. De exemplu, site-uri de comerț electronic care stilează în mod dinamic produsele și paginile coșului.

Gândiți-vă la asta în timpul dezvoltării

O soluție pentru a scăpa de CSS neutilizat de la început este să te gândești la asta în timpul dezvoltării site-ului web. Practic, puteți împărți codul CSS în fișiere diferite, fiecare având un scop specific. Cu toate acestea, majoritatea oamenilor preferă să folosească teme WordPress pentru a evita construirea unui site web de la zero. Și aici trebuie fie să fii foarte priceput, fie să găsești experți WordPress care să o facă pentru tine.

Utilizarea soluției online UnusedCSS

O altă modalitate este să utilizați soluții premium precum UnusedCSS pentru a găsi și curăța cu ușurință problemele dvs. CSS. Avantajul acestui instrument este că este capabil să scaneze fișierele JavaScript și să caute injecții. Unele dintre cele mai notabile caracteristici ale sale sunt:

• Găsirea automată a regulilor CSS neutilizate
• Vă oferă CSS curat pentru descărcare
• Explorarea designului receptiv și a regulilor de interogări media
• Verifică site-ul pentru modificări
• Previzualizarea modificărilor
• și altele

PurgeCSS pentru a elimina CSS suplimentar

Acesta este un alt instrument destul de util în timpul dezvoltării. Cei care lucrează cu Bootstrap, Foundation și cadre CSS similare îl consideră foarte util. Deoarece probabil că utilizați doar o fracțiune din regulile CSS, acest instrument vă poate ajuta să filtrați toate stilurile neutilizate. Practic, aceasta este o modalitate excelentă de a face fișierul CSS considerabil mai mic.

Plugin de optimizare automată

Următorul în linie este foarte popularul plugin WordPress. Cu el, puteți reduce, combina și stoca cu ușurință stilurile în cache. Injectează regulile necesare în capul paginii, CSS critic inline, minimizează HTML și mută scripturile în subsol. În esență, poate fi folosit pentru a implementa „încărcare lenenă” pentru imagini, pentru a optimiza fonturile și pentru a sincroniza JavaScript necombinat. Fiecare site web poate beneficia de acest plugin extins.

WP Rocket

Una dintre cele mai prietenoase opțiuni pentru începători pe care le puteți găsi. WP Rocked oferă soluții eficiente pentru optimizarea paginii dvs. și a vitezei. Nu numai că vă va oferi rezultate satisfăcătoare la testele de viteză, ci va îmbunătăți vizibil experiența utilizatorului pentru vizitatori. Când doriți să eliminați CSS neutilizat, pur și simplu activați-l, activați „Optimizare fișier” și treceți la opțiunea „Optimizare livrare CSS”. Vă va oferi un fișier CSS cu doar regulile CSS necesare, care se va încărca înaintea altora. În plus, WP Rocket va șterge automat memoria cache și vă va permite să minimizați și să agregați fișierele CSS.

Eliminați CSS neutilizat cu Asset CleanUp

Puteți folosi Asset CleanUp pentru a descărca fișierele neutilizate din teme și pluginuri. Vă permite să finalizați această sarcină pentru fiecare pagină separat. Deși acesta este un mod puțin complex și consumator de timp, este o metodă foarte eficientă de utilizat. La fel ca și alte plugin-uri, are opțiunea „Mod de testare” pentru a preveni efectele nedorite pe site-ul dvs. live. Cu toate acestea, Asset CleanUp vă poate ajuta și să eliminați fișierele JavaScript neutilizate. În cele din urmă, când testați ceea ce văd vizitatorii dvs., puteți alege pur și simplu să descărcați tot ceea ce nu este necesar.

Optimizați-vă CSS cu Perfmatters

Ultimul, dar nu în ultimul rând important din această listă este unul dintre pluginurile de performanță premium. Perfmatters vă va ajuta să eliminați atât CSS, cât și JavaScript neutilizat. După înregistrare, instalare și activare, veți putea accesa managerul de scripturi. Aceasta, printre alte opțiuni, vă poate ajuta să modificați cu ușurință fiecare dintre paginile sau postările dvs. În esență, vă oferă un meniu simplu de tablou de bord pe care îl puteți utiliza pentru a elimina orice CSS și JavaScript neutilizat pe pagini separate sau pentru întregul site web. La fel ca pentru CSS, îl puteți folosi pentru a combina sau reduce fișierele JavaScript pentru o performanță mai bună.

Considerații suplimentare pentru îmbunătățirea vitezei site-ului web

Luați în considerare utilizarea CDN pentru a livra fișiere CSS - pentru a reduce considerabil viteza de încărcare a CSS-ului dvs. sau a oricăror alte fișiere.

Reduceți și combinați în mod regulat majoritatea fișierelor dvs. CSS - pentru a elimina regulile, clasele și caracterele suplimentare inutile din CSS în WordPress. Cu toate acestea, este discutabil dacă acest lucru este util pentru toate site-urile web mari din cauza complexității codului, a dimensiunii unor astfel de fișiere și a optimizării suplimentare ulterioare.

Eliminarea absolută a oricărei porțiuni de CSS neutilizat din WordPress este aproape imposibilă. Dar, puteți folosi metodele de mai sus pentru a vă accelera site-ul destul de echitabil. Va depinde de numărul de cazuri, dar dacă site-ul dvs. WordPress are într-adevăr o mulțime de cod neutilizat, diferența va fi destul de vizibilă. Pe de altă parte, uneori, chiar și o mică schimbare poate însemna totul. Deși scopul nu este de a avea cel mai rapid site web din lume, schimbările ușoare contează. Dar, alte eforturi ar trebui să se concentreze pe conținut și pe utilitatea utilizatorilor, mai degrabă decât pe câștigarea pozițiilor de vârf în testele motoarelor de căutare.