Мобильная оптимизация

Общие правила оптимизации мобильных приложений такие же, как и для настольных сайтов. Тем не менее, есть ряд дополнительных рекомендаций, которые позволят сделать мобильную версию более быстрой.

Убирайте render-blocking элементы

Render-blocking элементы

Render-blocking элементы — это любые внешние Javascript и CSS файлы, которые загружаются обычным образом (не асинхронно):

<link rel="stylesheet" href="/styles.css" type="text/css" media="all" />
<script type="text/javascript" src="/scripts.js"></script>

Браузер вынужден дожидаться ответа от таких ресурсов перед тем, как показать страницу пользователю. Используйте асинхронную загрузку Javascript и CSS.

Не используйте плагины

Flash

Не используйте Flash и апплеты, многие мобильные браузеры их не поддерживают. HTML5 содержит все что нужно для работы с медиа форматами.

Настройте viewport

Viewport

Используйте viewport для настройки ширины экрана под мобильные устройства:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Размер шрифта

Размер шрифта на мобильных устройствах

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

Размер элементов управления

Размер элементов управления на мобильных устройствах

Размеры элементов управления должны быть достаточно велики, чтобы на них можно было нажать на tap-устройствах.

Анализ Pagespeed

Проведите анализ с помощью Google Pagespeed для получения рекомендаций относительно мобильной версии Вашего сайта.

Подпишитесь на Хайлоад с помощью Google аккаунта
или закройте эту хрень