Зображення є важливою частиною контенту веб-сайту, але також і "головним винуватцем" повільного завантаження — неоптимізоване зображення у високій роздільній здатності (наприклад, 5 МБ) може призвести до збільшення часу завантаження сторінки на 3–5 секунд, що відразу ж змушує користувачів втратити терплячість. На щастя, оптимізація зображень — це простий процес, який можна виконати за допомогою двох основних методів: "стиснення розміру" та "відкладене завантаження". Це дозволить скоротити час завантаження зображень більш ніж на 501 ТП4Т. У цьому розділі ми покажемо, як це зробити за допомогою плагінів, що дозволить навіть новачкам без технічних знань оптимізувати зображення автоматично.
1. Чому зображення повинні бути оптимізовані? 3 шокуючі факти.
- Зображення зазвичай займають 601 ТП4Т-801 ТП4Т від загального об'єму завантаження веб-сайту (набагато більше, ніж текст, код тощо).
- Кожен додатковий секунду завантаження призводить до збільшення відсотка користувачів, які залишають сайт, на 201% (особливо це стосується користувачів на мобільних пристроях, які більш чутливі до швидкості завантаження).
- Неоптимізовані зображення безпосередньо знижують рейтинг Google PageSpeed (що впливає на позицію в пошуковій видачі).
Основна метаЗменшити розмір зображень на 501 ТБ4Т-801 ТБ4Т без помітної втрати якості та налаштувати завантаження неосновних зображень "за потреби".
II. Спосіб 1: Стиснення зображень (автоматичне зменшення розміру за допомогою плагіна)
Принцип стиснення зображень полягає у видаленні зайвої інформації (наприклад, інформації про пристрій, з яким було зроблено знімок, або не відображених деталей пікселів), зберігаючи при цьому якість зображення, яку можна побачити неозброєним оком. Рекомендується використовувати плагін Smush для автоматичного стиснення, який підтримує пакетну обробку існуючих зображень і автоматичне стиснення нових завантажених зображень.
Крок 1: Встановіть і активуйте плагін Smush.
- Увійдіть до адміністративної панелі WordPress і перейдіть до розділу "Плагіни → Встановлення плагінів".
- Знайдіть плагін під назвою "Smush", позначений як "розроблений WPMU DEV", у пошуку, а потім натисніть "Встановити" → "Активізувати".
Крок 2: Налаштуйте автоматичне стиснення (для нових зображень не потрібно обробляти їх вручну).
Після активації плагін автоматично переходить на сторінку налаштувань, де можна виконати налаштування відповідно до наступних кроків:
- Включити автоматичне стиснення.На вкладці "Налаштування" переконайтеся, що вибрано пункт "Автоматичне стискання нових завантажених зображень" (вибрано за замовчуванням), щоб зображення, завантажені в майбутньому, автоматично стискалися без необхідності в ручному втручанні.
- Виберіть режим стиснення.：
- Для новачків рекомендується "безвитратне стиснення" (вибір за замовчуванням): видаляються лише зайві дані, якість зображення не погіршується, а ступінь стиснення становить приблизно 301 ТБ/4 ТБ – 501 ТБ/4 ТБ.
- Якщо ви прагнете до більшого ступеня стиснення (наприклад, якщо розмір зображення все ще занадто великий), ви можете вибрати "стиснення з втратами": з невеликою втратою якості (майже непомітною для неозброєного ока), ступінь стиснення може досягати 601 ТП4Т-801 ТП4Т (для цього необхідно натиснути "Додаткові налаштування").
- Зберегти налаштуванняНатисніть "Зберегти налаштування" у нижній частині сторінки.
Крок 3: масове стиснення існуючих зображень (один раз, для оптимізації всієї мережі).
Якщо на веб-сайті є багато нескомпресованих зображень (наприклад, зображення, які були раніше завантажені для статей), скористайтеся функцією "Масове стиснення", щоб оптимізувати їх одним кліком:
- На сторінці плагіна Smush натисніть на вкладку "Smush у пакетному режимі" зліва.
- Натисніть "Почати зараз", і плагін автоматично відсканує всі зображення у медіатеці.
- Після завершення сканування натисніть "Застосувати Smush до XX зображень", і система здійснить масове стиснення (процес може зайняти кілька хвилин, немає необхідності чекати, він може працювати у фоновому режимі).
- Перегляньте ефект стиснення.Після завершення стиснення відображатиметься "загальна економія місця" (наприклад, "збережено 12 МБ"), а також порівняння розміру кожного зображення до і після стиснення.
III. Метод 2: відкладене завантаження (змусити зображення завантажуватися "за потреби")
Принцип лінивої завантаження (Lazy Load) полягає в тому, що:Зображення почне завантажуватися тільки тоді, коли користувач прокрутить сторінку до місця розташування зображення.Таким чином, зображення на першому екрані (тобто те, що ви бачите першим, коли відкриваєте сторінку) завантажуватимуться в пріоритетному порядку, а зображення, які не є частиною першого екрану (наприклад, зображення статей нижче або зображення у футері), завантажуватимуться пізніше, що значно скоротить час першого завантаження.
За допомогою плагіна Smush ви можете одним кліком активувати відкладену завантаження (не потрібно додаткових плагінів).
Smush вже має вбудовану функцію відкладеного завантаження, тому немає необхідності встановлювати додаткові плагіни. Кроки налаштування:
- На сторінці плагіна Smush натисніть на вкладку "Відкладене завантаження" зліва.
- Встановіть прапорець "Включити відкладене завантаження" і налаштуйте його відповідно до наступних рекомендацій:
- "Тип зображень, які завантажуються із затримкою": виберіть усе (зображення, аватари, мініатюри тощо).
- "Видалити зображення на першому екрані": рекомендується встановити прапор (зображення на першому екрані не затримуються, щоб користувачі могли швидко побачити основний вміст при відкриванні сторінки).
- "Анімація завантаження": залишити за умовчанням (показувати невелику анімацію, що інформує користувача про те, що зображення завантажується).
- Натисніть "Зберегти налаштування", і відстрочене завантаження негайно вступить в силу.
Перевірте, чи працює відкладене завантаження.
- Відкрийте сторінку будь-якої статті на веб-сайті (що містить кілька зображень) і натисніть F12, щоб відкрити інструменти розробника браузера.
- Натисніть на вкладку "Мережа", оновіть сторінку і перевірте, як завантажуються зображення:
- При першому завантаженні у списку "Мережа" відображатимуться лише зображення на першому екрані.
- Прокрутіть сторінку вниз, і коли зображення, що не потрапили на перший екран, з'являться в полі зору, записи про завантаження цих зображень з'являться в списку "Мережа", що означає, що відкладене завантаження працює.
4. Додаткові поради щодо оптимізації зображень, які необхідно знати новачкам.
1. Виберіть правильний формат зображення (це навіть важливіше, ніж стиснення).
Перш ніж завантажувати зображення, виберіть відповідний формат, щоб зменшити його розмір на етапі завантаження:
- Фото / Складні зображенняЗа допомогою плагіна Smush можна автоматично конвертувати JPG/PNG у WebP (активуйте "Автоматичне перетворення на WebP" у розділі "Додаткові налаштування"). Формат WebP має на 301% менший розмір, ніж JPG, при цьому якість зображення залишається вищою.
- Прості графіки / іконкивикористовуйте формат PNG (підтримує прозорий фон, має невеликий розмір), а не JPG.
- Категорично не використовуйте формати BMP та TIFF.Ці формати дуже великі і не підходять для використання на веб-сторінках.
2. Контролюйте розмір зображень (не використовуйте "великі зображення для відображення в зменшеному розмірі").
Багато новачків просто завантажують високоякісні зображення, зроблені на камеру (наприклад, 3000х2000 пікселів), а потім налаштовують WordPress так, щоб він відображав їх у розмірі 300х200 пікселів — це неправильно! Адже браузер все одно завантажуватиме оригінальні великі зображення, витрачаючи пропускну здатність і час.
Належна процедура：
- Перед завантаженням скористуйтеся інструментами для обробки зображень (наприклад, вбудованим у комп'ютер додатком "Пензел" або онлайн-інструментом Canva), щоб обрізати зображення до фактичного розміру відображення (наприклад, ширина банера на головній сторінці має бути 1200 пікселів).
- Якщо ви не знайомі з інструментами для роботи з картинками, можете встановити плагін "Imsanity", який автоматично стискатиме завантажені великі зображення до заданого розміру (наприклад, максимальна ширина 1200 пікселів).
3. Уникайте зловживання зображеннями (чим менше, тим краще).
- Якщо інформацію можна передати за допомогою тексту, не використовуйте для цього зображення (наприклад, прості інструкції).
- Кілька послідовних зображень можна об’єднати в карусель (наприклад, для демонстрації продукту), щоб зменшити кількість зображень, які завантажуються одночасно.
5. Вирішення поширених проблем.
1. Якість зображень після стиснення значно погіршилася?
- Якщо ви використовуєте "стиснення з втратами", ви можете знизити ступінь стиснення в налаштуваннях Smush ( "Додаткові налаштування" → "Ступінь стиснення" на 50%).
- Рекомендується віддати перевагу "безвтратному стисненню" та "формату WebP", щоб збалансувати розмір та якість зображення.
2. Чому при затримці завантаження зображення відображаються некоректно (наприклад, порожні або не на своїх місцях)?
- Перевірте, чи ви виключили зображення на першому екрані (якщо їх не виключити, це може призвести до затримки завантаження зображень на першому екрані та появи короткої паузи).
- Якщо деякі зображення повинні завантажуватися негайно, ви можете ввести ім'я класу CSS зображення у поле "Виключити" в налаштуваннях "Відкладене завантаження" Smush (для цього потрібні базові знання кодування; новачки можуть тимчасово відключити відкладене завантаження для сторінки, на якій знаходиться зображення).
3. Після оптимізації швидкість не значно зросла?
- Знову протестуйте за допомогою GTmetrix (для довідки) Інструмент для перевірки швидкості вебсайту.Після цього перегляньте "водопадову діаграму", щоб перевірити, чи скоротився час завантаження зображень.
- Якщо швидкість все ще низька, це може бути пов'язано з іншими факторами (наприклад, повільна реакція сервера, надто багато плагінів), тому необхідно використати подальші методи оптимізації (наприклад, увімкнути кешування).
підсумок
Оптимізація зображень — це процес із найвищим співвідношенням витрат і результатів у контексті оптимізації швидкості веб-сайту. За допомогою плагіна Smush ви можете за 10 хвилин налаштувати його та скоротити час завантаження зображень більш ніж на 501 КБ. Основні кроки: встановлення Smush → увімкнення автоматичного стискання та пакетного стискання → увімкнення відкладеного завантаження (виключення зображень на першому екрані).
Пам'ятайте, що принцип оптимізації зображень — "достатньо добре": немає необхідності прагнути до максимальної стискання або завантажувати надвисокоякісні зображення. Краще знайти баланс між якістю та швидкістю, щоб користувачі могли чітко бачити вміст і при цьому сторінка швидко завантажувалася.
Українська