Optimalizálja a képek betöltését; Redpik
Amikor a webhelyünk betöltésének optimalizálásáról beszélünk, általában a kódjára vagy a szerverére gondolunk, de egy másik paraméter befolyásolja a kijelzőt: képek. Ez egy fontos kritérium, amelyet két technikával lehet javítani: csökkentse a kiszolgálóhozzáférések számát & optimalizálja a képek súlyát.
1 - Csökkentse a kiszolgálóhozzáférések számát
CSS Sprites
Amint azt a Google Page Speed tanácsolja, fontos, hogy a lehető legnagyobb mértékben korlátozza a HTTP kérések számát. Valójában a böngészők csak kettő-négy elemet tölthetnek le párhuzamosan, minél fontosabb az elemek száma, annál fontosabb a szerver késési ideje (további információ erről a témáról). Ezért korlátozni kell a betöltendő képek számát, és van egy megoldás: CSS Sprites.
Ez egyszerűen abból áll, hogy több képet egyesít. A szóban forgó "alkép" megjelenítése a CSS-ben a háttér-pozíció tulajdonságon keresztül történik. Elméletileg itt kérdezed meg magadtól: "Igen, de valójában hogyan csinálod? ". Nos, vannak olyan generátorok, mint a Css-Sprit.es, amelyek lehetővé teszik az összes kép feltöltését néhány kattintással, és egy gyönyörű sprite-t hoznak létre a hozzá tartozó CSS-sel. Felhívjuk figyelmét, hogy ez a technika csak kicsi képekhez alkalmas, általában .gif vagy .png formátumban
Térjünk át egy konkrét esetre, csak egy sprite-ot készítettem az alapértelmezett Prestashop témák ikonjairól. Végül egyetlen képpel rendelkezünk, elkerülve a szerver hozzáférési karanténját. A teljes súly elrontásának elkerülése érdekében 123 kb-ról 18 kb-ra változott !
