Evitarea CSS „risipitoare” în proiectele tale

Se pare că designerii web se străduiesc în mod constant să-și optimizeze creațiile. Pe termen scurt, acest lucru aduce beneficii performanței. Pe termen lung, poate simplifica și întreținerea.

Destul de des, aceasta înseamnă optimizarea imaginilor, implementarea stocării în cache a paginii și servirea fișierelor printr-o rețea de livrare a conținutului (CDN). Toate acestea sunt măsuri eficiente. Dar un element care nu primește suficientă atenție este potențiala umflare în CSS-ul unui site web.

Deși s-ar putea să-ți minimizezi foile de stil sau să le difuzezi printr-un CDN, se pot face mai multe. Mai exact, scăpați de marcajul risipitor care nu este folosit și înăspriți stilurile care sunt încă relevante.

Acest lucru se face cel mai bine încă de la începutul procesului de construire. Dar este și posibil să ușurați sarcina pe site-urile web existente. Să aruncăm o privire la provocările implicate, împreună cu câteva instrumente și tehnici care pot face un site web mai rapid.

Se confruntă cu Bloat încorporat în teme și cadre

Pe vremuri, site-urile web erau construite de la zero. Aceasta a fost o abordare excelentă, deoarece designerii puteau include doar stilurile și scenariile necesare. Dacă este făcut cu grijă, acest proces ar putea duce la un site web bine reglat.

Desigur, există o serie de motive pentru care această practică a fost abandonată de mulți dintre noi. Pur și simplu nu este eficient din punct de vedere al timpului și al constrângerilor bugetare.

Site-urile web moderne sunt atât de des construite pe deasupra unui produs prefabricat. Acesta ar putea fi un cadru CSS, cum ar fi Bootstrap sau o temă WordPress elaborată. În unele cazuri, o temă CMS poate include chiar și un cadru.

Aceste produse sunt menite să fie unice pentru toate. Prin includerea tot ceea ce ați putea avea nevoie, face dezvoltarea mult mai rapidă. Din păcate, nu același lucru se poate spune despre impactul lor asupra performanței.

Deci, ce se poate face pentru a îmbunătăți situația?

Utilizați cadre bazate pe componente sau ușoare, acolo unde este posibil

Teoretic, este posibil să obțineți atât avantajele unui cadru, evitând în același timp balonarea. Acest lucru poate fi realizat prin utilizarea pachetelor bazate pe componente care vă permit să încărcați anumite caracteristici, lăsând-o pe altele. Bootstrap-ul menționat mai sus permite acest tip de personalizare – până la un punct.

O altă alternativă este Tailwind CSS, care oferă stiluri de bază și presupune că veți construi pe deasupra lor. Dacă sunteți în căutarea unui punct de plecare excelent, spre deosebire de un produs mai finit, acesta ar putea fi potrivit.

Nu este nimic în neregulă cu utilizarea unui cadru. Dar căutați unul care fie: a) vă permite să alegeți și să alegeți ce componente să încărcați sau; b) oferă o foaie de stil barebones care poate fi personalizată cu ușurință. Oricum, proiectul dumneavoastră va beneficia de sarcina redusă.

Ce să faci cu temele CMS?

Produse precum temele comerciale WordPress pot fi dificile, deoarece includ adesea o mulțime de stiluri – indiferent dacă aveți nevoie de ele sau nu.

Este posibil ca o anumită temă să fie bine organizată până la punctul în care să fie suficient de ușor să scoateți din coadă foile de stil pe care nu le doriți. Poate exista chiar și un panou cu opțiuni de temă care vă permite să faceți acest lucru cu câteva clicuri. Cu toate acestea, aceasta este mai probabil o excepție decât o regulă.

Cel mai bun mod de a evita o temă umflată este să-ți creezi propria temă. De exemplu, o temă de pornire WordPress va oferi câteva CSS simple pe care le puteți personaliza. Acest lucru ajută la asigurarea unei foi de stil mai slabe și elimină cel puțin o mică parte din costul general asociat cu un CMS.

Eliminați foile de stil existente

Schimbarea focalizării pe un site web existent, dezordinea și refactorizarea CSS se poate face într-unul din două moduri:

Revizuirea manuală a stilurilor

Pornirea editorului de cod preferat și deschiderea foilor de stil ale site-ului este întotdeauna un loc bun de început. Da, poate fi o experiență plictisitoare. Dar este, de asemenea, o modalitate eficientă de a avea grijă de fructele agățate.

Nu este necesar să analizați fiecare linie de CSS. În schimb, ideea este să găsiți orice articole despre care știți că nu sunt folosite sau nu sunt la fel de eficiente pe cât ar putea fi.

De exemplu, să presupunem că rulați un site web WordPress care are unele stiluri personalizate pentru a le suprascrie pe cele ale unui plugin. Ce se întâmplă dacă nu mai folosești acel plugin? În acest caz, stilurile pot fi îndepărtate cu ușurință.

Sau, poate că există o selecție de stiluri pe care le folosești doar sporadic – ca în timpul sărbătorilor de iarnă. Ar putea fi util să mutați aceste stiluri într-un fișier separat și să le apelați numai atunci când este necesar.

Apoi există selectoare CSS care pur și simplu nu sunt foarte bine scrise. Poate că au o serie de prefixe de browser care nu mai sunt necesare sau proprietăți duplicate inutile. Aceasta este o zonă pregătită pentru curățare.

Dacă designul site-ului dvs. are mai mult de câțiva ani, ați putea fi surprins de cât de mult exces de stil puteți găsi.

Utilizați un instrument automatizat

Există o serie de instrumente care vă vor scana site-ul (sau cel puțin o parte din acesta) și vor raporta cu o listă de CSS neutilizate. Cu toate acestea, nu-ți ține respirația în timp ce aștepți perfecțiunea.

La fel ca instrumentele automate de accesibilitate, scanerele CSS neutilizate vă pot oferi doar atât de multe informații. Prin urmare, cel mai bine este să luați rezultatele cu un sâmbure de sare și să le folosiți ca ghid – nu un răspuns final la întrebarea dvs.

Chris Coyier de la CSS-Tricks a scris un articol remarcabil despre această problemă specială, care merită verificat. El nu numai că testează unele dintre aceste instrumente, dar se uită și la problemele mai mari la îndemână, cum ar fi interogările media.

Cu toate acestea, dacă sunteți interesat să încercați unul sau mai multe dintre aceste instrumente, câteva dintre cele mai populare opțiuni sunt:

• JitBit
• PurgeCSS
• PurifyCSS
• CSS neutilizat

O combinație între un instrument automat și o revizuire manuală este probabil cea mai bună cale de acțiune. Dacă faceți ambele, vă va oferi o imagine mai completă a potențialelor optimizări ale performanței. Este posibil să nu prindeți fiecare articol, dar există totuși o oportunitate de a avea un impact măsurabil. Puteți face unele înainte și după testare cu un instrument precum GTmetrix pentru a vedea rezultatele.

Când vine vorba de CSS: Waste Not, Want Not

Este uimitor cât de mare poate deveni o foaie de stil – mai ales când se folosește un cadru CSS gata făcut. Sigur, este frumos că autorul a făcut multă muncă grea pentru tine în ceea ce privește elementele de styling. În același timp, lasă multe pe masă când vine vorba de randarea paginilor și timpii de încărcare.

Acesta este ceva la care merită să acordați atenție chiar de la începutul unui proiect. Căutând să reduceți greutatea unei foi de stil, contribuiți la eliminarea până la ultima picătură de optimizare a site-ului dvs.

Dacă site-ul dvs. este deja disponibil pentru ca lumea să-l vadă, există încă pași pozitivi pe care îi puteți lua. Examinați CSS-ul și căutați elemente de simplificat sau eliminat. Utilizați unul dintre numeroasele instrumente automate disponibile pentru a găsi articole pe care este posibil să le fi ratat.

Concluzia este că reducerea CSS-ului la elementele esențiale nu este un proces perfect. Cu toate acestea, încă merită timpul și efortul tău.