Как оптимизировать сайт для мобильных устройств с помощью PageSpeed Insights

Уровень подготовки веб-мастера: для всех

Мы опубликовали на сайте PageSpeed Insights ^[1] новые рекомендации, которые помогут улучшить сайты для мобильных устройств.

Недостаточная оптимизация может свести на нет все преимущества быстрой загрузки сайта. В среднем загрузка одной страницы на мобильных устройствах длится более 7 секунд ^[2], но правильное использование инструмента PageSpeed Insights ^[1] позволяет значительно сократить это время ^[3]. Предположим, вам удалось добиться загрузки сайта не за семь секунд, а всего за две. Но какой в этом смысл, если пользователю все равно придется потратить ещё 5 секунд на то, чтобы увеличить размер шрифта и прокрутить страницу до нужного места? Новые рекомендации PageSpeed Insights помогут выявить и устранить подобные проблемы.

Вот список новых рекомендаций:

• Настройте область просмотра. Если на сайте отсутствует метатег viewport, современные мобильные браузеры не обнаружат оптимизированную версию страницы и покажут версию для компьютеров. В результате текст на странице может отображаться слишком крупным шрифтом. Оптимизацию сайта для мобильных устройств следует начинать с настройки тега viewport ^[4] и установки параметра width=device-width.

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

• Адаптируйте размер контента для области просмотра. На сайтах для мобильных устройств пользователи предпочитают видеть вертикальную прокрутку, а не горизонтальную. Указав область просмотра, убедитесь, что ваше содержание не выходит за ее пределы ^[5]. Помните, что существует множество стандартов ширины для экранов мобильных устройств.
• Используйте шрифты легко читаемого размера. Сайт, на котором посетителям приходится увеличивать масштаб для того, чтобы прочитать текст на экране смартфона, не может считаться оптимизированным. PageSpeed Insights проверяет, подойдет ли размер шрифта на сайте ^[6] для пользователей мобильных устройств.
• Увеличьте размер активных элементов на странице. Область касания при сенсорном управлении значительно больше курсора мыши, и не всегда удается нажать нужную кнопку или ссылку. Это раздражает пользователей смартфонов и планшетов. Убедитесь в том, что размер активных элементов ^[7] позволяет попасть по ним пальцем.
• Откажитесь от плагинов. Большинство смартфонов не поддерживает Flash и другие плагины для браузеров, поэтому не следует рассчитывать на них, создавая мобильную версию сайта. ^[8]

Подробнее об этих рекомендациях можно прочитать в Справочном центре для разработчиков ^[9]. После оптимизации вы сможете протестировать страницу с помощью инструмента PageSpeed Insights ^[1]. Также мы усовершенствовали этот инструмент, адаптировав его для мобильных устройств, и перевели соответствующие разделы справки на русский язык.
Если у вас возникли вопросы или предложения, мы будем рады услышать их в группе для обсуждения ^[10] этого сервиса.

Автор:

Источник ^[11]