Optimizarea CSS
Un site web construit cu CSS optimizat se încarcă mai repede și funcționează mai fluent, iar utilizatorii au astfel o experiență mai bună.
Sfaturile de mai jos îți arată cum:
1. Folosește selectori simpli
Selectorii complecși costă mai mult timp de procesare, așa că preferă-i pe cei simpli ori de câte ori poți.
Exemplu greșit
Analiza (parsing) este încetinită de un selector lung și imbricat adânc, ca acesta.
body #navlist ul li a.button:hover {
background-color: blue;
}
Exemplu mai bun
Mai scurt și mai simplu, acest selector este atât mai rapid, cât și mai ușor de întreținut.
.button:hover {
background-color: blue;
}
2. Evită selectorul universal pentru stilizare
Deoarece selectorul universal (*) vizează fiecare element de pe pagină, poate încetini randarea. Păstrează-l pentru cazurile în care este strict necesar.
Exemplu
* {
margin: 0;
padding: 0;
font-size: 16px;
}
3. Evită stilurile inline
Stilurile inline îngreunează HTML-ul și îl fac mai dificil de gestionat, așa că renunță la ele dacă nu sunt necesare.
Exemplu greșit
<div style="color: red; font-size: 18px;">Hello</div>
<p style="color: blue; font-size: 16px;">Test</p>
4. Evită @import
Încărcarea CSS-ului extern prin @import întârzie foaia de stil, așa că este mai bine să fie evitată.
Un tag <link> în secțiunea head este calea mai bună, deoarece CSS-ul se încarcă atunci înainte ca pagina să fie randată.
Exemplu
<link rel="stylesheet" href="style.css">
5. Folosește proprietăți prescurtate
Proprietățile prescurtate ocupă mai puțin spațiu și se analizează mai repede, așa că folosește-le ori de câte ori poți.
Exemplu
/* Long version */
margin-top: 10px;
margin-right: 20px;
margin-bottom: 10px;
margin-left: 20px;
/* Shorthand version */
margin: 10px 20px;
6. Redu animațiile inutile
Performanța are de suferit când animațiile sunt numeroase sau complexe, deoarece necesită mai multă putere de procesare. Păstrează doar animațiile de care ai nevoie.
7. Folosește proprietăți care nu provoacă re-randarea animațiilor
Proprietățile pe care le animezi influențează și ele performanța animației.
Evită să animezi proprietăți precum width, height, left și top, deoarece fiecare schimbare declanșează un recalcul al layout-ului.
Preferă, ori de câte ori poți, proprietăți care nu provoacă re-randare, precum transform, opacity și filter.
8. Combină și minifică CSS-ul
Fișierele mai mici se obțin eliminând spațiile și comentariile, iar un singur fișier CSS este mai bun decât mai multe ori de câte ori este posibil.
CSS Minifier, PostCSS și compresoarele online sunt exemple de instrumente care ajută.
9. Pune CSS-ul în cache
Un timp lung de expirare în configurările serverului tău îi permite browserului să pună fișierul CSS în cache, astfel încât utilizatorii să trebuiască să îl descarce din nou mai rar.
Rezumat
- Selectorii scurți și simpli sunt cei mai buni
- Este mai bine să eviți operațiile care forțează recalcularea layout-ului
- Tehnicile de animație ar trebui să fie eficiente
- Foile de stil ar trebui să fie externe, minificate și puse în cache