У наших матеріалах ми приділяємо велику увагу поданню інформації, намагаємося доповнювати тексти фотографіями, графіками, ілюстраціями і інфографікою. З одного боку, це покращує сприйняття наших статей читачами, з іншого - створює навантаження на систему зберігання і швидкість завантаження матеріалів. Якщо рішення першої проблеми чисто технічне і ми з нею успішно справляємося, то про питання оптимізації зображень ми задумалися порівняно недавно.
Якщо ще кілька років тому основна наша аудиторія приходила на сайт з персональних комп'ютерів, то в графіках за останній квартал смартфони впритул підбираються десктопів.
А ось швидкість мобільного доступу в мережу інтернет все ще в два рази нижче фіксованого підключення, і це при ідеальних умовах. Найчастіше, далеко від великих міст закінчується не тільки 4G, а й замість 3G смартфон показує тільки значок «E» - це означає максимальну для стандарту EDGE швидкість не більше 474 кбіт / с. На завантаження неоптимізованою картинки розміром 500 кбайт буде потрібно не менше 10 секунд, а якщо їх в статті з десяток, то не кожен читач дочекається відкриття запитаного матеріалу.
Висновок - необхідний інструмент оптимізації, що дозволяє «на льоту» стискати графіку, прискорювати відображення статті читачеві і робити сайт більш «дружнім» для пошукових систем.
Вирішити нашу проблему запропонували творці сервісу OptiPic .
OptiPic - сервіс для автоматичної оптимізації і стиснення зображень. Автори стартапу заявляють, що оптимізують зображення відповідно до рекомендацій Google PageSpeed Insights, завдяки чому прискорюється доступ до сайту, підвищується конверсія і поведінкові чинники.
Сервіс PageSpeed Insights - це по суті тест, що дозволяє виявити помилки в технічній оптимізації сторінки і дає рекомендації, як ці помилки усунути. Не дивлячись на назву, Google PageSpeed Insights не сподівається швидкість завантаження сторінки, а лише виявляє фактори, які можуть на швидкість завантаження вплинути. Серед них: оптимізація коду веб-сторінки (html, css, java script), час відповіді сервера, налаштування кешування та оптимізація зображень. Допомогти з останнім аспектом якраз і обіцяє сервіс OptiPic.
Обсяг зображень найчастіше є головним фактором в швидкості завантаження всієї сторінки, особливо, якщо не приділяти належної уваги оптимізації розміру картинок. Так само вважає і Google PageSpeed Insights: його оцінка оптимізації всієї сторінки сильно залежить від оцінки оптимізації зображень. Можна застосувати всі інші прийоми оптимізації, але отримати оцінку 50 балів зі 100, тільки тому, що сервіс вважає, що оптимізація зображень на сторінці далека від ідеалу. І, якщо мова йде про декілька картинках, то завдання по оптимізації не виглядає такою складною: розміри і обсяг зображень можна зменшити за допомогою онлайн і оффлайн редакторів вручну. Але коли нам треба викласти на сайт кілька сотень зображень, або оптимізувати картинки за всю історію існування сайту, завдання перестає бути тривіальної. Зрештою, якщо публікація зображень відбувається регулярно і є рутиною, то її хотілося б автоматизувати. І OptiPic пропонує це зробити в кілька простих кроків, а саме:
- Реєстрація,
- Установка модуля на сайт,
- Налагодження та запуск оптимізації.
Проходимо просту процедуру реєстрації нового аккаунта, підключаємо до нього свій сайт і отримуємо пропозицію встановити модуль OptiPic. Модуль можна завантажити автоматично, вказавши настройки доступу до свого FTP / SFTP-серверу, а можна скачати і встановити вручну. Качаємо модуль і встановлюємо його на сайт, відповідно до рекомендацій.
Модуль являє собою набір з трьох php-файлів: основний файл зі скриптом, файл конфігурації (доступу до сервісу OptiPic) і html-сторінка з рекламою сервісу. В основному файлі міститься скрипт, функціональність якого полягає в індексації файлів зображень на вашому сайті, відправлення зображень в хмару OptiPic для оптимізації і збереженні оптимізованих зображень і їх оригіналів на вашому сервері. Так, варто відзначити, що OptiPic - це не CDN, все зображення після оптимізації залишаються на вашому сервері. У хмара OptiPic зображення завантажуються тільки для оптимізації, а потім разом з оригіналами викачуються назад на ваш сайт.
Після завантаження модуля на сайт необхідно зробити настройки індексації та оптимізації зображень в особистому кабінеті на сайті OptiPic. Налаштування досить прості і більшість опцій можна залишити в варіантах за замовчуванням. Ми внесли зміни тільки в опцію «Чи індексувати тільки», вказавши шлях до папки, в яку помістили зображення для тестової оптимізації.
При реєстрації OptiPic видає безкоштовну квоту 10 мегабайт якраз для того, щоб користувачі мали можливість протестувати сервіс. Нам же виділили квоту побільше, і ми змогли прогнати через OptiPic 1,22 ГБ картинок.
Після завершення налаштувань запускаємо індексацію і через кілька хвилин отримуємо результат: у зазначеній нами папці скрипт знайшов 10038 картинок загальним обсягом 1,22 ГБ. Перед запуском оптимізації зображень ми протестували деякі наші сторінки за допомогою Google PageSpeed Insights і отримали наступні результати:
сторінка:
https://www.computerra.ru/
Мобільні: 70/100
Музичні кліпи: 38/100
оптимізація:
сторінка:
https://www.computerra.ru/category/gadgets/
Мобільні: 67/100
Музичні кліпи: 46/100
оптимізація:
сторінка:
https://www.computerra.ru/229153/zritelnaya-kora-i-prochie-mozgi-dlya-avtopilota/
Мобільні: 76/100
Музичні кліпи: 61/100
оптимізація:
На кожній сторінці PageSpeed Insights вимагав оптимізувати зображення і передбачав, що існуючі картинки можна стиснути до 10% від їх початкового об'єму.
Запускаємо оптимізацію і йдемо займатися іншими справами. За прогнозами гігабайт з гаком картинок буде оброблятися кілька годин. Так і вийшло: весь процес зайняв без малого 9 годин і повністю завершився тільки пізно вночі.
До слова, процеси індексації та оптимізації зображень не потрібно кожного разу включати окремим дією. Можна один раз їх включити, і вони будуть проходити в тлі в міру появи нових зображень в індексі до тих пір, поки не скінчиться оплачена квота трафіку.
Після закінчення процесу в нашій папці з'явилися оптимізовані зображення. Оригінали картинок залишилися там же, тільки поміняли розширення на optipic-orig. Оптимізацію картинок можна скасувати, замінивши нові картинки на їх оригінали, для цього в особистому кабінеті передбачена функція «Повернути оригінали». Якщо ж оригінали зберігати не потрібно, їх можна видалити.
В особистому кабінеті підсумки оптимізації представлені у вигляді статистики в загальному і по кожному зображенню окремо.
OptiPic заявляє, що стислими виявилися всі 10038 картинок із загальною ефективністю стиснення 51,60%. «Вага» папки з картинками на диску цю інформацію підтверджує.
Перейдемо до тестування сторінок за допомогою Google PageSpeed Insights.
сторінка:
https://www.computerra.ru/
Мобільні: 71/100
Музичні кліпи: 81/100
сторінка:
https://www.computerra.ru/category/gadgets/
Мобільні: 82/100
Музичні кліпи: 88/100
сторінка:
https://www.computerra.ru/229153/zritelnaya-kora-i-prochie-mozgi-dlya-avtopilota/
Мобільні: 76/100
Музичні кліпи: 80/100
За результатами тесту більшість зображень сервіс Google порахував оптимізованими і лише кілька картинок запропонував «дооптімізіровать». Під результатами тесту є посилання, по якій можна скачати приклади файлів, які Google PageSpeed Insights вважає оптимальними. Ми завантажили і подивилися пропоновані картинки, і всі вони були незадовільної якості. Такі картинки ми не стали б використовувати на сайті. Все-таки іноді треба вибирати між якістю зображень і їх обсягом. Підхід OptiPic в даному аспекті ми порахували оптимальним.
Варто так само відзначити, що в налаштуваннях індексації та стиснення зображень в особистому кабінеті на сайті OptiPic є опція «Якість зберігається зображення». За допомогою цієї нехитрої налаштування можна вибрати баланс якість / стиснення, який ви вважаєте оптимальним.
Ми не стали експериментувати з цією настройкою, залишивши її в значенні «за замовчуванням». Тим більше, що результати тестування з ростом загальної оцінки оптимізації до 100% нас повністю задовольнили. На цьому ми закінчили тестування сервісу Optipic і зробили висновків про його ефективності і сфері застосування.
Даний сервіс може бути корисний власникам сайтів, які постійно працюють з картинками і не хочуть витрачати на цю роботу велику кількість ресурсів (наприклад, програмістів для написання скриптів оптимізації, або тримати окремого контент-менеджера). Це можуть бути фотографи, які розміщують в мережі своє портфоліо; онлайн-магазини з великою базою карток товарів; блогери, що публікують фоторепортажі та інші. За допомогою OptiPic можна не тільки зменшувати обсяг зображень, але і їх розміри: всі налаштування присутні в особистому кабінеті і дуже прості. Досить один раз все налаштувати, а потім процес індексації та оптимізації зображень буде проходити перманентно в тлі поки не скінчиться оплачена квота трафіку. В такому випадку рівень автоматизації сервісу дозволить повністю позбудеться від завдання оптимізації графіки.
