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

Нужно улучшить мобильную версию одностраничного сайта. Оптимизировать скорость загрузки, адаптировать первый экран и обновить структуру основных блоков контента. Сделать сайт более удобным и быстрым для пользователей на мобильных устройствах.

Задача:

• Оптимизация скорости загрузки мобильной версии

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

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

  • Ожидаемое поведение:

    • Постер должен появляться мгновенно, еще до загрузки видео.

    • После запуска видео постер должен исчезнуть.

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

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

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

  • Все тексты и основная кнопка должны быть полностью видимы на первом экране без прокрутки.

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

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

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

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

  • Для десктопа — полный текст остается открытым.

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

    • Изображение слева.

    • Текст справа (не под картинкой!). Сейчас на мобильных текст отображается под огромной картинкой, так не должно быть.

  • После блока должна быть добавлена кнопка действия “Получить бесплатные замеры”.

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

  • Сделать плитки больше, а расстояния между ними — меньшими.

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

  • Добавить еще кнопку “Получить бесплатные замеры” сразу после галереи.