Оптимизирайте зареждането на неговите изображения; Redpik

Когато говорим за оптимизиране на зареждането на нашия сайт, обикновено мислим за неговия код или неговия сървър, но друг параметър влияе върху дисплея: изображения. Това е важен критерий, който може да бъде подобрен чрез две техники: намаляване на броя на сървърните достъпи & оптимизиране на тежестта на нейните изображения.

1 - Намалете броя на достъпите до сървъра

CSS спрайтове

Както съветва Google Page Speed, важно е да ограничите максимално броя на HTTP заявките. Всъщност браузърите могат да изтеглят само два до четири елемента паралелно, колкото повече е броят на елементите, толкова по-важно е времето на латентност на сървъра (повече информация по този въпрос). Следователно е необходимо да се ограничи броят на изображенията за зареждане и има решение: CSS спрайтове.

Той просто се състои от комбиниране на няколко изображения в едно. Показването на въпросното "под-изображение" след това ще се извърши в CSS, чрез свойството background-position. На теория тук се питате: „Да, но как всъщност го правите? ". Ами има генератори като Css-Sprit.es, които ви позволяват да качите всичките си изображения само с няколко щраквания и да излезете с красив спрайт със свързания с него CSS. Моля, обърнете внимание, че тази техника е подходяща само за малки изображения, обикновено в .gif или .png

Нека да преминем към конкретен случай, току-що направих спрайт от иконите на стандартните теми на Prestashop. В крайна сметка получаваме едно изображение, поради което избягваме карантината за достъп до сървъра. За да се избегне разваляне, общото тегло се е увеличило от 123 kb на 18 kb !