Cum să Eliminați CSS Neutilizat pe WordPress
Căutați o modalitate simplă să eliminați CSS neutilizat fără și cu ajutorul pluginurilor? Continuați să citiți! Veți afla tot ce ar trebui să știți pentru a elimina CSS-urile neutilizate și pentru a vă accelera site-ul.
„Eliminați CSS neutilizat” (sau cel mai recent: „Reduceți CSS neutilizat”) este una dintre recomandările PageSpeed Insights pe care probabil le veți primi atunci când testați viteza site-ului.
Veți citi apoi explicația PSI: „Eliminați regulile moarte din foile de stil și amânați încărcarea CSS care nu este utilizată pentru conținutul de mai sus pentru a reduce octeții inutili consumați de activitatea de rețea”.
Într-o românească simplă, înseamnă că unele fișiere CSS afectează timpul de încărcare al site-ului dvs. și ar trebui să abordați problema pentru a îmbunătăți viteza.
În acest articol, veți afla ce înseamnă CSS neutilizat și cum îl puteți elimina sau reduce și optimiza site-ul pentru viteză și performanță – manual și cu un plugin.
Ce este CSS Neutilizat și De Ce Face Site-ul dvs. Mai Lent
CSS neutilizate sunt foi de stil complet inutile pentru redarea și încărcarea paginii – totuși, acestea sunt incluse în codul paginii. Dacă le eliminați pe toate, nu se va întâmpla nimic. Pagina va fi afișată corect deasupra și dedesubtul paginii.
În același timp, CSS neutilizat afectează timpul de încărcare a paginii. Dacă se află pe pagină, browserul trebuie să le descarce, să le analizeze și să le redea – și durează ceva timp.
Acest lucru este valabil mai ales pentru CSS de deasupra paginii – acesta este conținutul esențial de pe pagină și ar trebui redat cât mai repede posibil. O redare rapidă înseamnă că cel mai relevant conținut va fi afișat rapid, iar utilizatorii pot începe să interacționeze rapid cu pagina.
De aceea, ar trebui să eliminați sau să reduceți toate fișierele neutilizate care încetinesc site-ul și nu oferă o experiență bună de utilizare.
Și mai sunt.
Impactul CSS Neutilizat Asupra Performanței
CSS neutilizat afectează timpul de încărcare și valorile specifice, cum ar fi Largest Contentful Paint (LCP) și Total Blocking Time (TBT).
Atât LCP, cât și TBT joacă un rol crucial în scorul PageSpeed Insights: fiecare dintre ele deține 25% din scorul PSI final. În plus, noua modificare a Lighthouse v8 va face ca timpul total de blocare să fie și mai critic – TBT va reprezenta 30%. LCP și TBT vor avea un total de 55% în greutate pe gradul PSI.
În plus, Largest Contentful Paint este unul dintre elementele vitale de bază ale web Core Web Vitals și poate afecta și performanța SEO.
Iată de ce este crucial să abordăm problemele CSS neutilizate și să le remediem.
Ca un beneficiu suplimentar de performanță, eliminarea CSS neutilizate va reduce numărul de solicitări HTTP și va oferi un nou impuls vitezei site-ului dvs.
Cum să Găsiți Fișierele CSS Neutilizate
Cele mai frecvente instrumente pentru identificarea CSS neutilizate sunt PageSpeed Insights și fila Coverage din Chrome DevTools.
Găsirea CSS Neutilizate prin PageSpeed Insights
Testând adresa URL a paginii dvs. pe instrumentul Google PageSpeed, veți obține scorul de performanță și recomandările PageSpeed de abordat.
Dacă pagina are orice CSS neutilizat de eliminat (sau redus), veți găsi un steag portocaliu sau roșu în secțiunea Oportunități, alături de fișierele CSS.
Găsirea CSS Neutilizate prin Chrome DevTools
Un alt mod de a identifica CSS neutilizat este prin fila Coverage din Chrome DevTools.
După deschiderea meniului Command și selectarea comenzii Show Coverage, puteți analiza fila Coverage.
Veți găsi toate fișierele care rulează pe codul paginii, inclusiv CSS.
După cum puteți vedea în captura de ecran de mai jos, tabelul conține informații utile, cum ar fi tipul de fișier și mărimea octeților neutilizați (cu un procent destul de util).
Apoi, este ușor să identificați și să acordați prioritate fișierelor neutilizate de gestionat.
Cum se Elimină (sau se Reduc) Fișierele CSS Neutilizate de pe WordPress
Acum întrebarea este: cum eliminați CSS neutilizat sau să-l reduceți de pe site-ul dvs.? O puteți face atât manual, fie cu un plugin.
Cum se Elimină (sau se Reduc) Manual Fișierele CSS Neutilizate
Modul manual necesită unele cunoștințe tehnice.
Dacă doriți să eliminați complet CSS-urile neutilizate, puteți utiliza un instrument precum PurifyCSS pentru a afla cât de mult poate fi redus dimensiunea fișierului CSS. Odată ce obțineți codul CSS pe care ar trebui să îl eliminați, trebuie să îl eliminați manual din pagină.
Dacă doriți să studiați mai amănunțit o soluție manuală, puteți citi articolul detaliat al trucurilor CSS.
Pe de altă parte, dacă doriți să reduceți impactul CSS neutilizat, puteți utiliza un plugin de gestionare a activelor precum Asset CleanUp. Rețineți că un astfel de plugin va elimina doar foile de stil neutilizate. Nu va elimina codul neutilizat din foile de stil neutilizate. Deci, recomandarea PageSpeed Insights nu va dispărea.
Este posibil ca aceste instrumente să nu fie 100% precise – și să facă procesul foarte exact este dificil. Este întotdeauna cel mai bine să personalizați codul site-ului și să utilizați numai codul CSS prezent pe pagină.
Cum să Eliminați (sau să Reduceți) Fișierele CSS Neutilizate cu Un Plugin: Un Mod Ușor
Să eliminați CSS-urile neutilizate cu un plugin este cel mai simplu mod de a vă optimiza site-ul WordPress fără niciun efort.
WP Rocket 3.9 include o nouă caracteristică importantă: Eliminați CSS neutilizat. După cum vă puteți imagina, această caracteristică va elimina toate CSS-urile neutilizate de pe o pagină. Este un mod eficient de a reduce dimensiunea paginii și timpul de încărcare a paginii.
Rețineți că Eliminarea CSS neutilizat este o funcție beta și va primi îmbunătățiri în curând. În prezent, procesul de generare a CSS neutilizat poate dura ceva timp, în funcție de coada de servicii și de complexitatea site-ului dvs. web.
Veți găsi opțiunea în fila Optimizare fișiere:
WP Rocket oferă o altă caracteristică puternică care merge mână în mână cu Eliminarea CSS neutilizate – puteți utiliza ambele funcții în același timp pentru a profita la maximum de plugin.
Opțiunea de optimizare a livrării CSS va amâna mai multe CSS inutile, ceea ce înseamnă mai puțin CSS de analizat pentru browser. În general, această caracteristică va ajuta la rezolvarea problemei de performanță CSS. În timp ce Optimize CSS Delivery nu va modifica dimensiunea paginii, va îmbunătăți metrica First Contentful Paint și timpul de încărcare general.
Veți găsi această opțiune în secțiunea Optimizare fișiere, chiar deasupra opțiunii Eliminare CSS neutilizate:
După cum puteți vedea, ambele caracteristici sunt ușoare și simple. Trebuie doar să activați opțiunile pentru a începe optimizarea performanței site-ului dvs. WordPress. Nu este necesar niciun efort sau cunoștințe tehnice!
4 Sfaturi Suplimentare de Performanță
Eliminarea sau reducerea CSS neutilizate poate fi dificilă și alegerea celui mai bun plugin de cache WordPress vă poate ajuta cu siguranță.
Există câteva sfaturi de optimizare a performanței pe care trebuie să le țineți cont întotdeauna și acestea vor fi utile pentru a minimiza impactul CSS neutilizat:
- Alegeți o temă WordPress ușoară și slabă – dacă nu sunteți sigur cu privire la cea pe care o alegeți, consultați acest articol.
- Dați prioritate folosind teme și pluginuri cu includere CSS modulară (încărcați doar codul necesar pentru a le stiliza modulele sau pentru a le scoate pe pagină).
- Minimizați cât mai mult posibil numărul de pluginuri care adaugă mult cod pe front-end.
- Utilizați pluginurile de control al activelor pentru a elimina fișierele CSS inutile din temele și pluginurile umflate.
Începeți Acum să Eliminați CSS Neutilizat
Să eliminați CSS-urile neutilizate vă va ajuta să minimizați impactul codului asupra performanței – iar WP Rocket vă poate ajuta rapid să vă accelerați site-ul și să remediați toate problemele de performanță fără niciun efort!
Nu sunteți încă client WP Rocket? Economisiți timp și lăsați-l pe WP Rocket să facă treaba pentru dvs. WP Rocket este cel mai simplu mod de a vă îmbunătăți scorul PageSpeed Insights.
Puteți oricând să vă bazați pe garanția lor de rambursare de 100%. Deși nu credem că veți dori vreodată una, vă vor oferi cu plăcere o rambursare dacă o solicitați în termen de 14 zile de la cumpărare.
Singurul risc pe care îl veți avea cu acest plugin este accelerarea site-ului dvs. web. WP Rocket aplică automat 80% din cele mai bune practici de performanță web, sporind instantaneu scorurile dvs. Core Web Vitals.
