Оптимізація завантаження зображень на веб-сайті SoftFluent

завантаження

Веб-сторінки з кожним роком стають важчими. Щоб переконатись у цьому, ви можете подивитися цю графіку, зроблену Таммі Евертс у блозі Soasta.

Як видно, зображення складають трохи більше 60% від загальної ваги сторінки. Це тому, що зв’язки стають швидшими, і тому розробники веб-сайтів дозволяють собі додавати все більше і більше зображень для ілюстрації своїх сторінок. Але ця важкість супроводжується, на жаль, кількома негативними моментами, включаючи:

  • Передача зображень займає пропускну здатність сервера
  • Сторінки завантажуються довше
  • Додаткові витрати на хостинг, якщо ви платите за обсяг (зберігання та пропускна здатність)
  • Додаткові витрати для замовника, якщо ми платимо за обсягом

Як це виправити ?

Стискати зображення

Перше рішення - зменшити розмір зображень при збереженні прийнятної якості. Для цього вам потрібно використовувати формати, які пропонують хороший рівень стиснення і які підтримуються різними браузерами. Формати PNG або JPG - хороші кандидати. Завдяки різноманітним методам, таким як зменшення кольорової палітри зображення, можна досягти кращих показників стиснення без візуальної втрати якості (завжди пам’ятайте перевіряти візуалізацію). Для стиснення зображень існують різні веб-служби або програмне забезпечення: tinyjpg, tinypng, jpegmini, compressor.io. Якщо ви використовуєте Grunt, Gulp або будь-яке інше рішення на основі Node, також є рішення: imagemin (Node), grunt-contrib-imagemin (Grunt), gulp-imagemin (Gulp).

У прикладі нижче друге зображення майже В 3 рази легше:

Іншим рішенням є використання векторних зображень, коли це можливо, і є посилення. Векторне зображення описує зображення геометричними примітивами (точки, лінії, криві Безьє тощо). Тому ми розуміємо, що складне зображення може бути важчим у векторі, ніж у пікселізованому (Bitmap/Raster). Переважна більшість браузерів підтримує формат SVG (джерело: Чи можу я використовувати). Наприклад, логотип SoftFluent (вгорі ліворуч на цій сторінці) є SVG, із відхиленням до зображення PNG у разі помилки.

Надайте зображення правильного розміру

Другий крок - це надання зображення відповідного розміру. Немає сенсу надавати зображення шириною 1000 пікселів, тоді його розмір буде змінено до 200 пікселів за допомогою CSS. Це дуже легко для зображення фіксованого розміру, але коли ви хочете створити адаптивний сайт, важче надіслати найкраще зображення. HTML5 все ще пропонує рішення, зокрема з атрибутом srcset, що дозволяє браузеру завантажувати зображення, найбільш підходяще для клієнта, використовуючи розмір екрану, а також щільність пікселів:

У випадку із зображенням у CSS, наприклад фоновим зображенням, можна використовувати медіа-запити для вибору потрібного зображення:

Ми також можемо надати різні таблиці стилів:

Поєднання зображень (спрайтів/шрифтів)

CSS дозволяє вказати зображення для певних властивостей, таких як фон або елемент списку. Це дає можливість прикрасити сторінку зображеннями або піктограмами. Коли кількість невеликих зображень, зазначених у CSS, стає великою, це може сповільнити час завантаження сторінки (менш вірно для HTTP/2). Рішення полягає в об’єднанні всіх малих зображень в одне і використанні властивості css background-position для вказівки області відображення великого зображення.

Існує багато служб для створення спрайтів та пов'язаних CSS-листів зі списку зображень. Наприклад: спрайтген, вузол-спрайт або грунт-спрайтміт.

Якщо ваші зображення є векторними, можна створити шрифти. Кожен символ шрифту відповідатиме піктограмі. Так працює, наприклад, Font Awesome. Для створення шрифту ви можете використовувати різні інструменти: gulp-iconfont, grunt-webfont тощо.

Завантажуйте зображення за потреби

Якщо ми подивимось на більшість сторінок, ми зрозуміємо, що кілька зображень видно, як тільки сторінка завантажується, а інші видимі лише після початку прокрутки. Ми можемо використати це, завантажуючи ці зображення, лише коли вони потрапляють у видиму користувачеві область (область перегляду).

Існує багато бібліотек для динамічного завантаження зображень на сторінці. Ось кілька прикладів: Lazy load XT, Unveil, lazyload. Ці бібліотеки надають більш-менш важливу функціональність. Однак принцип завжди однаковий - використовувати атрибут, відмінний від src, такий як часто data-src для визначення URL-адреси зображення. Скрипт перетворить його на src, коли елемент буде видимий користувачеві.

Якщо ви хочете створити свій ледачий навантажувач, ось хороша основа (у TypeScript):

Повний код доступний на GitHub: https://gist.github.com/meziantou/8807ee968f1d0b7c5464. Зокрема, ви знайдете код методу дросельної заслінки, не представлений вище.

Кілька речей можна вдосконалити. Наприклад, ми могли б додати допуск на завантаження зображень трохи раніше, ніж вони будуть видимими. Атрибут srcset і тег зображення не підтримуються. Ми також можемо додати завантажувальне зображення ... Якщо користувач вимкне сценарії, можна використовувати тег noscript. Однак для врахування цього випадку потрібно буде адаптувати вищезазначений сценарій.

Висновок

Час завантаження сторінки є важливим фактором для взаємодії користувачів. Різні техніки можуть його вдосконалити. Розглянуті в цій статті статті щодо покращення часу завантаження зображень можуть бути корисними для довгих сторінок із великою кількістю зображень. Як і будь-яка оптимізація, уникайте їх передчасної роботи. Зачекайте, поки не побачите реальних проблем, і застосуйте заходи щодо їх усунення.