AMP-оптимізація сайту VIDI Marine

1. Загальна інформація

• Назва проєкту: Оптимізація швидкості та мобільної версії сайту VIDI Marine

• Посилання на сайт: https://vidi-marine.com/ua/

• Основні завдання:

• Оптимізація швидкості завантаження сторінок.

• Впровадження AMP (Accelerated Mobile Pages) для мобільної версії.

• Покращення SEO, структурованих даних та внутрішньої перелінковки.

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

• Валідація сайту відповідно до Google Core Web Vitals.

2. Оптимізація швидкості завантаження сайту

Аналіз проблем:

• Велика кількість зовнішніх JS-скриптів сповільнює завантаження.

• Некешовані ресурси та великі зображення.

• Відсутність затриманого завантаження (lazy loading) для зображень та відео.

Рішення:

• Видалити або відкласти завантаження необов’язкових JS-скриптів (asynchronous / defer loading).

• Впровадити lazy loading для всіх зображень та відео.

• Використовувати кешування статичних ресурсів через .htaccess або відповідний плагін (якщо сайт на CMS).

• Оптимізувати CSS, об’єднавши кілька файлів у один (мінімізація через CSS Minify).

• Використовувати CDN (Cloudflare, BunnyCDN) для швидшого завантаження контенту.

• Впровадити стиснення зображень у формат WebP.

✅ Очікуваний результат: Підвищення оцінки Google PageSpeed Insights до 85+.

3. Впровадження AMP (Accelerated Mobile Pages)

Аналіз проблем:

• Сайт не використовує AMP, що уповільнює завантаження на мобільних пристроях.

• Поточний код містить заборонені скрипти, несумісні з AMP.

Рішення:

• Створити AMP-версію для головних сторінок (головна, категорії товарів, картки товарів, блог).

• Використати AMP-компоненти:

• <amp-img> – для зображень.

• <amp-video> – для відеоконтенту.

• <amp-carousel> – для слайдерів.

• <amp-sidebar> – для мобільного меню.

• Оптимізувати стилі (inline CSS, не більше 75 KB).

• Використовувати AMP-форму для зворотного зв’язку.

• Валідувати AMP-версію через AMP Validator.

✅ Очікуваний результат: Сторінки AMP повністю проходять перевірку Google та швидше завантажуються на мобільних пристроях.

4. Покращення SEO та структурованих даних

Аналіз проблем:

• Відсутня структурована розмітка schema.org для товарів.

• Мета-теги не оптимізовані (довжина заголовків/описів перевищує рекомендовані межі).

• Відсутня логічна внутрішня перелінковка.

Рішення:

• Додати структуровану розмітку schema.org для товарів, категорій та статей блогу.

• Оптимізувати meta title та description на всіх сторінках.

• Впровадити хлібні крихти (breadcrumbs) для покращення навігації.

• Додати відкриті графи (Open Graph, Twitter Cards) для коректного відображення в соцмережах.

• Внутрішня перелінковка:

• Додати блок “Схожі товари” на сторінках товарів.

• Додати блок “Читайте також” у блозі.

✅ Очікуваний результат: Покращення SEO-рейтингу та зростання органічного трафіку.

5. Оптимізація зображень

Аналіз проблем:

• Важкі PNG/JPG зображення без стиснення.

• Відсутня адаптація під мобільні пристрої.

Рішення:

• Конвертувати всі зображення у формат WebP.

• Використовувати responsive images (srcset) для адаптивного завантаження.

• Оптимізувати великі зображення через TinyPNG або автоматичні компресори.

✅ Очікуваний результат: Менше навантаження на сервер, швидше завантаження сторінок.

6. Впровадження Google Core Web Vitals

Аналіз проблем:

• Поганий LCP (Largest Contentful Paint) – довге завантаження основного контенту.

• Високий CLS (Cumulative Layout Shift) – зміщення елементів на сторінці.

Рішення:

• Зменшити розмір шрифтів та стилів, використовуючи font-display: swap.

• Відкласти завантаження непотрібних ресурсів (async та defer для скриптів).

• Додати фіксовані розміри для всіх зображень, банерів та відео, щоб уникнути зміщення контенту.

• Використовувати preload для найважливіших ресурсів (шрифти, логотипи).

✅ Очікуваний результат: Покращення LCP, FID, CLS для відповідності Google Core Web Vitals.

7. Тестування та перевірка

• Валідація AMP через AMP Validator.

• Перевірка швидкості сайту через Google PageSpeed Insights.

• Тестування Core Web Vitals у Google Search Console.

• Перевірка SEO через Ahrefs / Screaming Frog.

8. Терміни виконання

• Аудит сайту: 2-3 дні.

• Оптимізація швидкості: 7-10 днів.

• Впровадження AMP: 10-14 днів.

• SEO-оптимізація: 5-7 днів.

• Фінальне тестування та виправлення багів: 3-5 днів.

• Загальний термін виконання: 20-30 днів.

9. Вимоги до виконавця

• Досвід роботи з AMP та оптимізацією швидкості сайтів.

• Розуміння SEO та Core Web Vitals.

• Вміння працювати з CDN та кешуванням.

• Досвід з структурованими даними schema.org.

Очікуваний результат після впровадження всіх змін

✅ Оцінка Google PageSpeed Insights: 85+.

✅ Швидкість завантаження: менше 2 секунд.

✅ Покращення SEO та видимості в Google.

✅ Відсутність AMP-помилок.