[Хд] logo

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

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

Убирайте 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 для получения рекомендаций относительно мобильной версии Вашего сайта.

  read in english
[Хд]

Подписывайтесь на отборные материалы по продвинутой разработке

Google Email

Esc, чтобы подписаться позже