Optimizați încărcarea imaginilor sale; Redpik
Când vorbim despre optimizarea încărcării site-ului nostru, de obicei ne gândim la codul sau la serverul său, dar un alt parametru afectează afișajul: imagini. Acesta este un criteriu important care poate fi îmbunătățit prin două tehnici: reduceți numărul de accesări la server & optimizați greutatea imaginilor sale.
1 - Reduceți numărul de accesări la server
Sprite CSS
După cum recomandă Google Page Speed, este important să limitați cât mai mult numărul de solicitări HTTP. Acest lucru se datorează faptului că browserele pot descărca doar două până la patru articole în paralel, cu cât este mai mare numărul de articole, cu atât este mai mare timpul de latență al serverului (mai multe despre acest lucru). Prin urmare, este necesar să se limiteze numărul de imagini de încărcat și există o soluție: Sprite CSS.
Pur și simplu constă în combinarea mai multor imagini într-una. Afișarea „subimaginii” în cauză se va face apoi în CSS, prin proprietatea de poziție de fundal. În teorie, aici te întrebi: „Da, dar cum o faci de fapt? ". Ei bine, există generatoare precum Css-Sprit.es care vă permit să încărcați toate imaginile dvs. cu câteva clicuri și să ieșiți cu un sprite frumos cu CSS-ul asociat. Vă rugăm să rețineți că această tehnică este potrivită numai pentru imagini mici, de obicei în .gif sau .png
Să trecem la un caz concret, tocmai am făcut un sprite al pictogramelor temelor implicite Prestashop. Ajungem cu o singură imagine, evitând astfel carantina accesului la server. Pentru a evita stricarea, greutatea totală a trecut de la 123 kb la 18 kb !
