21 moduri de a vă optimiza CSS și accelerați site-ul dvs.

Sep 13, 2025
să
Speed up your sites with optimised CSS

CSS trebuie să treacă printr-o conductă relativ complexă, la fel ca HTML și JavaScript. Browserul trebuie să descărcați fișierele de pe server și apoi să continuați la parsare și să le aplicați la DOM. Datorită nivelurilor extreme de optimizare, acest proces este de obicei destul de rapid - pentru proiecte web mai mici care nu sunt bazate pe cadre, CSS, de obicei, reprezintă doar o mică parte din consumul total de resurse.

Cadrele au deranjat acest echilibru. Includeți un stack JavaScript Gui, cum ar fi JQuery UI, și vizionați CSS, JS și HTML dimensiuni SkyRocket. Adesea, dezvoltatorii simt, de obicei, vârful "atunci când se află în spatele unei stații de lucru puternice de opt-core cu Internet T3, nimănui nu-i pasă de viteză. Aceste modificări ca latențe sau dispozitive constrânse CPU vin să joace.

  • 19 exemple de animație CSS cool pentru a recrea

Optimizarea CSS necesită o abordare multidimensională. În timp ce codul scris manual poate fi slăbit folosind diverse tehnici, deplasarea codului-cadru cu mâna este ineficientă. În aceste cazuri, utilizarea unui minimizator automat dă rezultate mai bune.

Următorii pași ne vor duce într-o călătorie prin lumea optimizării CSS. Nu fiecare dintre ele ar putea fi direct aplicabilă proiectului dvs., dar păstrați-i în minte. Vrei ceva mai simplu? Încercați a. Builder de site-uri web .

01. Utilizați stenograma

Speed up your sites with optimised CSS:

Shorthand poate face fișierele CSS mult mai mici

Cea mai rapidă clauză CSS este una care nu este niciodată analizată. Folosind clauze de stenografie, cum ar fi declarația de marjă prezentată mai jos, reduce radical dimensiunea fișierelor CSS. O mulțime de forme de scurtă durată pot fi găsite prin googling "CSS Shorthand". 

 P {Margin-top: 1px;
    Marginea-dreapta: 2px;
    Margin-fund: 3px;
    Margin-stânga: 4px; }

p {margine: 1px 2px 3px 4px; }

02. Găsiți și eliminați CSS neutilizate

Speed up your sites with optimised CSS:

Dacă codul nu face nimic, scapă de ea

Eliminarea părților neadevărate ale marcajului dvs. determină, evident, câștiguri imense de viteză. Browserul Chrome Google are această funcție din cutie. Pur și simplu mergeți la View & Gt; Dezvoltator & gt; Instrumente de dezvoltator și deschideți fila Surse într-o versiune recentă și deschideți meniul de comandă. După aceasta, selectați Afișați acoperirea și văzuiți-vă ochii pe fereastra de analiză de acoperire evidențiază codul neutilizat pe pagina web curentă.

03. Fă-o într-un mod mai confortabil

Speed up your sites with optimised CSS:

Utilizați auditul performanței web pentru a tăia cu ușurință codul redundant

Navigarea prin analiza liniei de linie nu este neapărat confortabilă. Auditul de performanță web al lui Chrome returnează informații similare - pur și simplu deschideți-l din bara de instrumente, vizualizați & GT; Dezvoltator & gt; Instrumente de dezvoltatori & GT; Audituri și lăsați-o să ruleze. Când se va termina, va apărea o listă de elemente problematice.

04. Fiți conștienți de probleme

Rețineți că o analiză automată a unui CSS poate duce întotdeauna la erori. Efectuați un test aprofundat al întregului site după înlocuirea fișierelor CSS cu cele mintificate - nu știe niciodată ce greșeală cauzată de optimizatorul cauzat. Și în avans, decent web hosting vă poate ajuta să călcați în călcâiele din site-ul dvs.

05. Inline CSS critică

Încărcarea de stiluri externe a costurilor Timpul datorită latenței - oricine minte "Flash of conținut nemaipomenit"? Prin urmare, cei mai critici biți de cod pot intra în eticheta antetului. Asigurați-vă că nu puteți exagera, totuși. Rețineți că codul trebuie, de asemenea, citit de către oameni care efectuează sarcini de întreținere. 

 & html & gt;
  & lt; head & gt;
    & lt; stil & gt;
      .blue {culoare: albastru;}
    & lt; / stil & gt;
    & lt; / head & gt;
  & lt; corp & gt;
    & lt; div clasa = "albastru" & gt;
      Salut Lume!
    & lt; / div & gt;

06. Permite parsarea antiparalelor

@Import adaugă structura codului CSS. Din păcate, beneficiile nu sunt gratuite: deoarece importurile pot cuib, parsarea lor în paralel nu este posibilă. Un mod mai paralelizabil utilizează o serie de & Link & gt; Etichete, pe care browserul le poate aduce o dată. 

 URL-ul @import ("A.CSS");
@ URL-ul @import ("B.css");
@ URL-ul @Import ("C.Css");
V & LT; Link Rel = "Stylesheet" Href = "A.CSS" & GT;
& Link Rel = "Stylesheet" href = "b.css" & gt;
& lt; link rel = "Stylesheet" href = "c.css" & gt;

07. Înlocuiți imaginile cu CSS

Cu ani în urmă, un set de PNG-uri semi-transparente pentru a crea efecte translucide asupra site-urilor web a fost obișnuit. În zilele noastre, filtrele CSS oferă o alternativă de economisire a resurselor. De exemplu, fragmentul însoțitor care însoțește acest pas asigură că imaginea în cauză apare ca o versiune în gri. 

 img {
    -em-filtru-filtru: gri (100%); /* vechi
Safari * /
    Filtru: Grayscale (100%);
}

08. Utilizați comenzile rapide de culoare

Înțelepciunea comună învață că descriptorii de șase cifre sunt cea mai eficientă modalitate de a exprima culorile. Acest lucru nu este cazul - în unele cazuri, descrierile de scurtă durată sau numele de culoare pot fi mai scurte. 

 țintă {fundal-culoare: #ffffff; }
țintă {fundal: #ffff; }

09. Eliminați zerourile și unitățile nedorite

CSS acceptă o mare varietate de unități și formate de numere. Acestea sunt o țintă recunoscătoare pentru optimizare - atât în ​​urmă, cât și după zerouri pot fi îndepărtate, așa cum se demonstrează în fragmentul de mai jos. Mai mult, rețineți că un zero este întotdeauna un zero și că adăugarea unei dimensiuni nu adaugă valoare informațiilor conținute. 

 Hadding: 0,2em;
Marja: 20,0em;
Avalue: 0px;
padding: .2em;
Marja: 20EM;
Avalue: 0;

10. Eliminați semicolonii excesivi

Această optimizare este oarecum critică, deoarece afectează schimbările de cod. Specificația CSS vă permite să omiteți ultimul punct și virgulă într-un grup de proprietăți. Pe măsură ce economiile realizate de această metodă de optimizare sunt minime, menționăm acest lucru în principal pentru cei care lucrează la un optimizator automatizat. 

 P {
. . .
Font-dimensiune: 1.33em
}

11. Utilizați un atlas de textură

Încărcarea mai multor sprite mici este ineficientă datorită cheltuielilor generale de protocol. CSS Sprites combină o serie de imagini mici într-un singur fișier PNG Big, care este apoi spart prin intermediul regulilor CSS. Programe precum TexturePacker. Simplificați foarte mult procesul de creare. 

. Descărcați {
  Lățime: 80px;
  Înălțime: 31px;
  Poziție de fundal: -160px -160px
}
. Descărcați: Hover {
  Lățime: 80px;
  Înălțime: 32px;
  Poziția de fundal: -80px -160px
}

12. Chase în jos px-ul

Un mod curat de a crește performanța utilizează o specialitate a standardului CSS. Valorile numerice fără o unitate sunt presupuse a fi pixeli - îndepărtarea Px salvează doi octeți pentru fiecare număr. 

 H2 {padding: 0px; Marja: 0px;}
H2 {padding: 0; Marja: 0}

13. Evitați proprietățile scumpe

Analiza a arătat că unele etichete sunt mai scumpe decât altele. Lista care însoțește acest pas este considerată a fi deosebit de foame - evită-i atunci când a fost dată posibilitatea de a face acest lucru. 

 Radius de frontieră
    Box-umbra
    transforma
    filtru
    : NTH-COPIL
    Poziție: fixă;
    etc

14. Îndepărtați spațiul alb

Whitespace - Gândiți-vă la tabele, returnările și spațiile de transport - face ca codul să fie mai ușor de citit, dar servește puțin scop din punctul de vedere al unui parser. Eliminați-le înainte de expediere. O modalitate și mai bună implică delegarea acestui loc de muncă unui script de coajă sau unui aparat similar.

15. Eliminați comentariile

Comentariile nu servesc niciun scop compilatorului. Creați un parser personalizat pentru a le elimina înainte de livrare. Nu numai că salvează lățimea de bandă, dar asigură, de asemenea, că atacatorii și clonerele au un timp mai greu de înțeles gândirea din spatele codului la îndemână.

16. Utilizați compresia automată

Echipa de experiență a utilizatorului Yahoo a creat o aplicație care gestionează multe sarcini de compresie. Se livrează ca fișier JAR, disponibil aici și poate fi rulat cu un JVM de alegere. 

 java -jar yuicompressor-x.y.z.jar
Utilizare: Java-Jar yuicompressor-x.y.z.jar
 [Opțiuni] [Fișier de intrare]
Opțiuni globale
    -h, ahelp afișează acest lucru
 informație
    - TYPE & LT; JS | CSS & GT; Specifică.
 Tipul fișierului de intrare

17. Rulați-l de la NPM

Dacă preferați să integrați produsul în NODE.JS, vizitați npmjs.com/package/yuicompressor. . Reparatul grav întreținut conține un set de fișiere de ambalaj și un API JavaScript. 

 compresor var = necesită ("yuicompresor");
compresor.compress ('/ calea / la /
fișier sau șir de js ', {
// Opțiuni compresoare:
Charset: "UTF8",
Tipul: "JS",

18. Păstrați-l pe Sass și colab.

Speed up your sites with optimised CSS:

Sass poate obține complexul inutil, deci optimizați-l dacă puteți

În timp ce performanța selectorului CSS nu este aproape la fel de importantă ca și acum câțiva ani (vezi resursa), cadrele precum SASS emit uneori un cod extrem de complex. Uitați-vă la fișierele de ieșire din când în când și gândiți-vă la modalitățile de a optimiza rezultatele. Aveți rezultate pentru a le împărtăși cu o echipă? Păstrați fișierele în actionare Stocare in cloud .

  • Ce este SASS?

19. Configurați cache-ul

Un vechea zicală susține că cel mai rapid fișier este unul care nu este trimis niciodată prin fire. Efectuarea solicitărilor cache-ului browserului realizează acest lucru eficient. Din păcate, configurarea anteturilor de cache trebuie să aibă loc pe server. Folosiți bine cele două instrumente afișate în capturile de ecran - ele oferă o modalitate rapidă de a analiza rezultatele modificărilor dvs.

20. Bustul cache-ului

Designerii adesea displace cache-ul din cauza fricii de probleme cu schimbările viitoare. Un mod curat în jurul problemei implică includerea etichetelor cu numele fișierului. Din păcate, schema prezentată în codul care însoțește acest pas nu funcționează peste tot, deoarece unele proxy-uri refuză fișierele cache cu căi "dinamice". 

 & Link Rel = "Stylesheet" href = "stil.css? V = 1.2.3" & gt;

21. Nu uitați de elementele de bază

Optimizarea CSS este doar o parte a jocului. Dacă serverul dvs. nu utilizează compresia HTTP / 2 și GZIP, se pierde o mulțime de timp în timpul transmisiei de date. Din fericire, stabilirea acestor două probleme este de obicei simplă. Exemplul nostru arată câteva tweaks la serverul Apache utilizat în mod obișnuit. Dacă vă aflați într-un alt sistem, consultați pur și simplu documentația serverului. 

 pico /etc/httpd/conf/httpd.conf
AddoutputFilterByType Deflați text / HTML
Addoutputfilterbytype de defilare text / css

Acest articol a fost publicat inițial în numărul 282 de revista Creative Web Design Web designer . Cumpăra problema 282 aici sau Aboneaza-te la designerul web aici .

Articole similare:

  • 10 tehnici uimitoare noi CSS
  • Care este cel mai bun preprocesor CSS?
  • O introducere în proprietățile personalizate CSS

să - Cele mai populare articole

Creați un bot personalizat

să Sep 13, 2025

(Credit Imagine: Web Designer) Slack este un instrument din ce în ce mai popular pentru întreprinderi și echipe ca..

10 lucruri pe care nu le cunoașteți că puteți face cu Photoshop

să Sep 13, 2025

Photoshop este un exemplu perfect al întregii ființe mai mare decât suma părților sale, dintre care există multe; O comoar�..

vopsea un iepure răutăcios în acuarelă

să Sep 13, 2025

După ce am studiat zoologia, animalele și viața sălbatică au fost întotdeauna o mare pasiune pentru mine și nu mă obosesc niciodată de a le picta. Suntem norocoși să trăim în zon..

Desenați un portret creion al unui câine

să Sep 13, 2025

Când trageți portretele de companie, nu trebuie doar să știți Cum de a desena animalele : Sarcina este captar..

Cum se adaugă video la PDF-uri interactive

să Sep 13, 2025

O imagine este în valoare de o mie de cuvinte, iar un videoclip merită un milion. Video poate transmite mai multe informații mai rapide decât imaginile tipărite sau statice. Poate face c..

Cum se creează o cârpă reală CG

să Sep 13, 2025

Când lucrați cu pânză și țesături în 3D, poate fi greu să se obțină atât o rezoluție bună, cât și o privire minun..

textura un Droid K-2SO autentic

să Sep 13, 2025

Pagina 1 din 2: Pagina 1 Pagina 1 Pagina..

Cum se creează un banner web animat în Photoshop

să Sep 13, 2025

Crearea de bannere web nu este cea mai plină de farmec de locuri de muncă din lume, dar este ceva ce fiecare designer va fi obligat să facă la un moment dat în cariera lor, probabil de m..

Categorii