Optimizare manuală CSS pentru a îmbunătăți viteza de încărcare • Silo Creativo
Buna! Numele meu este Ricardo Prieto și lucrez (și scriu) la designul web, aspectul și experiența utilizatorului la SiloCreativo, de unde ajutăm oamenii să-și dezvolte proiectele cu tutoriale, sfaturi și resurse.
20% reducere
Teme WordPress precum Divi pentru 1 USD fiecare
Viteza de încărcare a unui site web a devenit unul dintre cei mai importanți factori în designul web în ultimii ani și, deși există multe elemente care pot fi optimizate pentru a ușura greutatea totală a fișierelor descărcate, în acest articol ne vom concentra asupra optimizați fișierele CSS, mai precis atunci când scriem CSS.
Faptul că un site web cântărește puțin și se încarcă rapid este o îmbunătățire evidentă a UX (User Experience), deoarece vizitatorii ajung să acceseze conținutul mai devreme și să interacționeze cu acesta. Dar este, de asemenea, asociat cu alte avantaje, cum ar fi a consum mai mic de date și chiar economii la bateria dispozitivului.
Acest lucru era deja important cu ceva timp în urmă. Dar a fost decizia Google să includă viteza de încărcare printre factorii care determină poziționarea în cadrul motorului de căutare, care ne-a făcut pe toți să nebunim cu SEO încercând să reducem zecimi din timpul de încărcare și să economisim niște kb unde poate fi.
Acest lucru a dat naștere la ceea ce numim WPO (Web Performance Optimization), un domeniu de lucru în care obiectivul este optimizați încărcarea web cât mai mult posibil prin tehnici de compresie și optimizarea conținutului.
Cum să reduceți greutatea fișierelor dvs. CSS
Mergeți mai departe, există multe tehnici pentru a reduce greutatea fișierelor CSS. Cei mai cunoscuți trec grupați toate foile de stil a site-ului dvs. într-un singur fișier, micșorează-l și servește-l comprimat folosind Gzip. Apoi am putea activa memoria cache a fișierului menționat, astfel încât, atunci când vizitatorul se întoarce, să nu fie nevoie să descarce din nou fișierul CSS.
Cu toate acestea, astăzi ne vom concentra asupra pașilor anteriori. Vom detalia câteva sfaturi pentru a integra sarcini de optimizare din faza de aspect, atunci când creăm regulile CSS ale site-ului nostru web.
Toate pornesc de la un principiu foarte de bază: fiecare personaj cântărește aproximativ 1 byte. Dacă reducem numărul de caractere, vom putea reduce greutatea fișierului, ușor, nu-i așa? Să vedem cum să o facem. (Notă: într-adevăr regula 1 caracter = 1 octet nu este întotdeauna așa, este o problemă mult mai complexă în care intră tipul de codificare și tipul de caracter, dar pentru a ilustra următoarele puncte, vom lua această echivalență definitiv ).
1. Proprietăți de stenografie în CSS
Proprietăți de stenografie ne permite să definim mai multe valori într-o singură linie. Cel mai clar exemplu îl avem în definiția marginii sau a umpluturii, unde putem defini cele patru valori într-o singură linie, începând din partea de sus și mergând în sensul acelor de ceasornic.