Пошукові алгоритми Google та Яндекс почали враховувати швидкість завантаження сайту під час його ранжування у результатах пошукової видачі. Отже, оптимізація графіки безпосередньо впливає на рейтинг сторінок та позиції у пошуку. Щоб ваш сайт працював швидко і добре знаходився потрібно виконувати оптимізацію всіх фото, правильно розміщувати зображення на сторінці і обов'язково їх підписувати.
— Які вимоги висувають пошукові системи до зображень на сайті?
- Як правильно оптимізувати картинки?
— Яких дотримуватися стандартів та форматів?
Як швидко оптимізувати цілий пакет фотографій?
На всі ці питання ми намагатимемося дати вичерпні відповіді у цій статті. Матеріал може бути корисним як web розробникам, так і адміністраторам сайтів та соц. мереж.
Вимоги пошукових систем до зображень
У 2021 році всі пошукові системи враховуватимуться такі показники завантаження сайтів як:
- Найбільша вмісна фарба (LCP) — це показник вимірює час, за який стає видимим та доступним весь контент на сторінці вашого сайту. Швидкість відображення безпосередньо залежить від розміру зображення.
- Затримка першого введення (FID) - Позначає час затримки відгуку сайту на дію відвідувача. Цей показник визначається якістю оптимізації коду та технічними параметрами сервера.
- Зсувний макет зрушення - або по-простому "Зсув макета" - негативний фактор, його наявність означає неправильну програмну побудову сайту, при якому під час завантаження та промальовування сторінка важливі елементи сайту зсуваються, дезорієнтуючи відвідувача.
Перший показник LCP відповідає за швидкість завантаження сторінки. Добре оптимізований сайт повинен повністю завантажуватися за час 1-2,5 сек, для великих сайтів допустимі значення до 4 сек, все web сайти, час завантаження яких перевищує вказаний діапазон, ризикують залишитися без пошукового трафіку.
Якщо на сайті зображення завантажувалися без попередньої підготовки та не оптимізовані, то значення Largest Contentful Paint буде високим. В результаті зображення впливають на ранжування безпосередньо через швидкість завантаження сторінки і опосередковано через метрики оцінки дизайну.
Фото є на будь-якому сайті, і ця проблема актуальна для багатьох. Як же оптимізувати зображення ефективно та безкоштовно?
Створення сайтів для бізнесу!
Допоможемо із контентом, SEO, запустимо рекламу. Безкоштовна підтримка. Сучасні сайти будь-якої складності та масштабу. Телефонуйте +38 (066) 688-8566. Консультації безкоштовні!Оптимізація фото для сайту
Повноцінна покрокова оптимізації зображень має складатися з таких етапів:
- Стиснення графіки без втрати якості.
- Вибір розміру зображення відповідно до розміру екрана пристрою відвідувача.
- Ліниве завантаження зображень (Lazy Loading).
Ліниве завантаження включається через атрибут loading=lazy. Метод є прогресивним, отже, жодних проблем не створює. Ліниве завантаження не впливає на індексацію зображень. Найчастіше на маленьких екранах завантажуються великі зображення з надмірним розміром без використання стиснення. І це проблема швидкості завантаження сайту на мобільних пристроях.
Спочатку розберемося із темою стиснення зображень.
Google має спеціальний сервіс для стиснення фото, про яке мало хто знає. Інструмент називається Squoosh.app. Сервіс з'явився у 2018 році. Днями було оновлено до другої версії.
Squoosh розроблений у відділі Google Chrome Labs є БЕЗКОШТОВНИМ сервісом для стиснення зображень з інтуїтивно зрозумілим та зручним інтерфейсом. Інструмент дозволяє використовувати розширені параметри, які надаються різними компресорами зображень.
Працювати в Google Squoosh дуже просто:
- Відкрийте Squoosh: https://squoosh.app/
- Завантажте зображення.
- Система автоматично оптимізує файл. У лівій частині екрана розміщується вихідне зображення. У правій частині екрана розміщується зображення після оптимізації.
- У правій колонці ви можете вказати потрібний формат (рекомендуємо JPEG) і задати рівень стиснення фото, 80% буде більш ніж достатньо.
- Пересуваючи центральний повзунок-дільник на екрані вправо або вліво, ви можете оцінити якість фото до і після стиснення. У правому нижньому куті виводиться значення у відсотках, яке показує, наскільки вдалося зменшити зображення.
- Завантажте отриманий файл.
У цьому сервісі доступна також пакетна обробка зображень, наприклад, можна стиснути одночасно всі зображення магазину. Налаштування за промовчанням пропонують використовувати максимальну компресію за мінімальної втрати якості. Візуальна точність зображення оцінюється за допомогою спеціальної метрики.
CompressJPEG.com - альтернативний сервіс
Можемо також порекомендувати вам перевірений часом БЕЗКОШТОВНИЙ сервіс стиснення та пакетної обробки фото. Усі налаштування вже встановлено автоматично, вам залишається тільки завантажити вихідне фото, почекати його перетворення і завантажити вже стислий файл. Пакетна обробка фотографій також є. До того ж є можливість зживати не лише JPG, а й інші формати PNG, SVG, GIF та ін.
Чому оптимізація фото така важлива
Представники Google заявили, що 40% користувачів залишають сторінку, якщо час завантаження становить більше 10 секунд. Дослідження показують, що 74% користувачів закривають сайт, якщо сторінки не завантажиться протягом 5 секунд.
Усім подобається швидке завантаження сайтів і щоб досягти найкращих показників швидкості потрібно виконувати попереднє стиснення фото. Якщо розміщувати заздалегідь підготовлені фото, підвищується значення конверсії та зменшується розмір сторінок.
Стиснення файлів зображень є простим та надійним способом вирішити покращити ситуацію зі швидкістю завантаження сайту. Оптимізація зображень для сайту входить до списку важливих завдань, тому що дозволяє досягти таких цілей: покращити ранжування сайту в пошуковій видачі та лояльність пошукових систем; Значно підвищити швидкість роботи сайту, що обов'язково оцінять ваші відвідувачі.
