Google PageSpeed ​​Insights Как да оптимизираме изображенията

С този запис започвам поредица от публикации за WPO за да видим как можем да подобрим резултата си Google PageSpeed ​​Insights в WordPress.

google

The WPO (Оптимизиране на уеб ефективността) са набор от техники или мерки на всяко ниво, за да подобряване на производителността и скоростта на зареждане на нашия уебсайт. Ето защо ще подобрим потребителското изживяване (UX) и SEO, тъй като скоростта на зареждане е ключов фактор, който търсещите машини вземат предвид.

Има много инструменти, които могат да измерват скоростта на вашия уебсайт. В тази поредица от 7 статии, за които ще говорим Google PageSpeed ​​Insights и как да се реши в WordPress някои от ключовите му точки.

За това ще използваме пример. Създадох основен html, който използвах като тест, съдържащ или зареждащ:

  • 2 шрифта от Google Fonts
  • Bootstrap, FontAwesome, персонализирана таблица със стилове
  • jQuery
  • Едно изображение върху тялото и едно на страничната лента
  • Много основен заглавие и тяло с 5 абзаца от lorem ipsum

Поставих се в най-лошия случай:

  • Зареждам CSS и JS, без да минимизирам
  • jquery-3.1.1.js и bootstrap.js са в главата
  • Съдържанието на изображението има размери 6016x3384px и тежи 25.3MB
  • Изображението на страничната лента има размери 2048x769px и тежи 1MB
  • В .htaccess няма нищо

При тази панорама резултатът в PageSpeed ​​е следният

От този сценарий започваме да виждаме как да подобрим резултата си в PageSpeed ​​Insights.

Оптимизирайте изображенията

От само себе си се разбира колко важен е този момент за подобряване на времето за зареждане. Просто е, колкото повече тежи изображението ни, толкова по-бавно ще се зарежда мрежата, вече няма мистерия.

Проблемът ще се влоши при по-неоптимизираните изображения, които имаме на нашия уебсайт. Това е съобщението, което тестът на Google връща:

Оптимизирайте изображенията
Правилното форматиране и компресиране на изображения може да спести голям брой байтове данни.
Оптимизирайте тези изображения, за да намалите размера им с 996,2 KB (99% намаление).
• Като компресирате или модифицирате размера на https://mydomain.com/img/vialactea2.jpg можете да спестите 996,2 KB (99% по-малко).

Google PageSpeed ​​Insights

25-мегабайтовото изображение е толкова тежко, че дори не го анализирате. Можем да оптимизираме изображението по два начина: размер и качество.

Оптимизирайте изображението по размер

Когато говорим за оптимизиране на изображение по размер, имаме предвид, че трябва да мислим за реалното пространство, което то ще заема на нашия уебсайт. Много е изкушаващо да изтеглите най-висококачественото изображение от нашата рефлекс камера и да го качите директно на нашата страница, но това ще убие нашата производителност.

В примера използваме изображение за съдържанието с ширина 6016 пиксела, когато контейнерът е само 848px. Същото се случва и с нас в страничната лента, изображението е 2048 пиксела, а ширината на страничната лента е 263px.

Използваме много по-големи изображения, отколкото наистина ни трябват. Ако преди да ги качим в мрежата, ги редактираме с редактор на изображения и ги мащабираме до размера на нашия дизайн, ще получим значително подобрение в размера:

  • Изображение 1 от 6016x3384px и 25.3MB до 848x477px и 432KB
  • Изображение 2 от 2048x769px и 1MB при 263x99px и 46KB