Автоматична оптимізація зображень для сайту

1. Що дає оптимізація зображень для сайту
2. Що таке оптимізація зображення
3. В результаті оптимізації зображень ви отримаєте
4. Як оптимізувати зображення

Добридень! Шановні читачі та гості блогу Pyatilistnik.org, продовжуємо з вами оптимізувати вас сайт на WordPress. Минулого разу, я вам докладно висвітлив питання, про те, як очистити код від сміття , І ми з вами збільшили швидкість завантаження вашого ресурсу. Сьогодні ми ще більше збільшимо швидкість завантаження, особливо на мобільних версіях вашого сайту, за рахунок автоматичної оптимізації зображень для сайту. Відразу скажу, якість зображення не постраждає.

Що дає оптимізація зображень для сайту

Погодьтеся, що на поточний момент швидкість завантаження ресурсу дуже важлива для поведінкових факторів, особисто я закриваю одразу ресурси, які вантажаться більше 4-5 секунд, за статистикою більшість чекає 3 секунди. А тепер питання, чи у всіх така швидкість? У вас може бути як і у мене супер швидкий хостинг на SSD дисках , Але вони вас не врятують, якщо ваші сторінки будуть важити мегабайти.

Ось вам приклад оптимізації зображень і збільшення швидкості, яке вплинуло на відвідуваність і конверсію.

З мого прикладу видно, що чим довше завантажується ресурс, тим менше конверсія (виконання заданих дій від користувача), таке я спостерігав на одному зі своїх проектів, де в шапці було відео 11 мегабайт, після його стиснення , Конверсія збільшилася.

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

Що таке оптимізація зображення

Оптимізація зображень для сайту - це спеціальна обробка файлів з метою зменшити його розмір, без втрати якості, це дуже важливий критерій, кому сподобається зменшити розмір зображення і вбити якість в нуль. Для виконання нашого завдання є купа інструментів, всі вони працюють за своїми алгоритмами і принцип у них схожий.

Вони поділяються як на автоматичні так і на ручні, коли вам потрібно, щось разово зробити, це одна справа, але коли у вас як і у мене сітка сайтів, то доведеться задумати, про автоматичної оптимізації картинок і зображень.

В результаті оптимізації зображень ви отримаєте

• Прискорення завантаження сторінок;
• Збільшення конверсії;
• Збільшення показників Google Pagespeed Insights;
• Зниження відмов, поліпшення поведінкових факторів на сайті;
• Покращене ранжування сайту в пошуковій видачі, це є прямий рекомендацією Google на 2018 рік ;
• Зниження навантаження на хостинг / сервер;
• Економію місця на хостингу.

Як оптимізувати зображення

Всі давайте перейдемо до практики і я розповім, як відбувається оптимізація зображень для сайту без втрати якості. Я буду розповідати про сервіс tinypng. У нього є рішення як для фотошопа, так і для WordPress, кому потрібно обробити невелику кількість зображень, можна скористатися онлайн стисненням.

Клацаємо по кнопці WordPress plugin, так як у мене завдання, це оптимізація зображень вордпресс. Вас перекине на сторінку скачування, натискаємо кнопку Download.

Далі виробляємо установку плагіна в WordPress, як це робити я вам описував, на цьому зупиняти не буду. Після чого переходимо в розділ "Додатки - Встановлені" і активуємо Compress JPEG & PNG image.

У вас активується плагін, його налаштування потрібно виробляти з меню "Налаштування - Медіафайли". Вам необхідно буде отримати місячний, безкоштовний ключ, який дозволяє обробляти до 500 зображень на WordPress. Щоб його отримати натисніть Change API key.

Вам після реєстрації дадуть API ключ, який ви вставите в "Настройки - Медіафайли"

Далі автоматична оптимізація зображень для сайту, виконується в меню "Медіафайли - Bulk Optimization"

Вам необхідно буде для оптимізації зображень натиснути кнопку Start Bulk Optimization. Зверніть увагу, що у мене в прикладі, плагін вже стиснув все зображення на 48,8% і зберіг понад 900 мегабайт дискового простору. Для хостингів на SSD дисках це дуже приємна можливість.

Починається процес оптимізації зображень вордпресс, зверніть увагу, що в середньому стиснення дає економію на 60% і без втрати якості. Ваша швидкість завантаження сторінки, тепер різко зросте.

Коли у вас закінчиться 500 безкоштовних оптимізацій, ви можете зареєструватися на нову пошту і отримати новий ключик, це по російськи. Якщо у вас виникли труднощі, то пишіть про них в коментарях, постараємося разом вирішити їх.