Оптимізація мобільної версії односторінкового сайту (лендінгу)

Потрібно покращити мобільну версію односторінкового сайту. Оптимізувати швидкість завантаження, адаптувати перший екран та оновити структуру основних блоків контенту. Зробити сайт більш зручним та швидким для користувачів на мобільних пристроях.

Завдання:

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

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

  • Проблема: На мобільних пристроях постер не відображається, користувач бачить білий екран до моменту завантаження відео.

  • Очікувана поведінка:

    • Постер має з’являтись миттєво, ще до завантаження відео.

    • Після старту відео постер має зникнути.

    • Перевірити на iOS Safari.

  • Застосувати lazy loading для всіх зображень нижче першого екрану.
  • Видалити блокуючі скрипти і стилі (особливо для mobile). Дублі та конфлікти стилів. По можливості розбити JS на async/defer.
  • Пріоритизувати контент першого екрану в HTML.
  • Розміщення блоків на мобільних: Вирівняти та адаптувати дивні/зламані розміщення (особливо на малих екранах).

• Адаптація першого екрану для мобільних (ширина 320–375px)

  • Усі тексти та основна кнопка мають бути повністю видимі на першому екрані без прокрутки.

  • Перевірити поведінку на iOS Safari (перевірити верстку для 320×693).

• Блок “Про продукт” 

  • Скоротити текст до одного короткого абзацу (не більше 3–4 рядків).

  • Додати кнопку “Показати більше” для відкриття повного тексту за бажанням. Для ПК версії нехай текст залишиться відкритим за замовчуванням. 

  • Для десктопу — повний текст залишається відкритим.

  • На мобільних:

    • Зображення ліворуч.

    • Текст праворуч (не під картинкою!). Зараз текст на моб відображається під величезною картинкою, так не повинно бути.

  • Після блоку має бути додана кнопка дії “Отримати безкоштовні заміри”.

• Блок "Галерея"

  • Зробити плитки більшими, а відстані між ними — меншими.

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

  • Додати ще кнопку “Отримати безкоштовні заміри” одразу після галереї.