Адская неделя, день 5: проверяем оптимизацию мобильного сайта по 17 параметрам
-
Проверьте технические характеристики (13 критериев)
Robots.txt
Проверьте, что в файле robots.txt не закрыт доступ к картинкам, js и css файлам для поисковых роботов. Подробная статья о настройке robots.txt тут.
Скорость загрузки
Проверьте скорость загрузки c помощью Google Pagespeed. Google дает следующее пояснение мерной шкалы:
• Хороший результат - от 90 баллов;
• Средний результат - от 50 до 90 баллов;
• Страница загружается медленно, если набрано менее 50 баллов.Под выставленной оценкой есть рекомендации Google по улучшению скорости загрузки – ориентируетесь на них.
Тег viewport (для сайтов с адаптивной версткой)
Tег viewport служит, чтобы указать браузеру, в каком масштабе необходимо отображать видимую область страницы пользователю. То есть его цель – сделать так, чтобы страницы сайта выглядели корректно на мобильных устройствах.
Примеры использования:
1) Установить ширину окна равной ширине экрана устройства и никак не изменять масштаб страницы.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
2) Веб-страница с фиксированным макетом (например, с шириной 1024px или меньше) будет изначально отображаться на экране мобильного просмотра без прокрутки
<meta name="viewport" content="width=1024">
3) Viewport без возможности его увеличения пользователем
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
4) Vewport c возможностью его увеличения пользователем
<meta name="viewport" content="width=device-width, user-scalable=yes">
Подробнее про viewport смотрите тут.
HTTP-заголовок Vary (для динамического контента)
Если обе версии вашего сайта (и десктопная, и мобильная) доступны по одному адресу, но сайт выдает разный контент (разный html-код) в зависимости от того, с какого устройства идет запрос, то нужно сообщить поисковым роботам, что на сайте используется динамический контент.
Сделать это можно с помощью HTTP-заголовка Vary со значением User-Agent, выглядит он так:
HTTP/1.1 200 OK
Content-Type: text/html
Vary: User-Agent
Content-Length: 5710
Подробнее про Vary так же написано в справке.
Переадресация (для мобильной версии на поддомене)
Проверьте, что настроена и корректно работает переадресация с полной версии сайта на мобильную (с site.ru на m.site.ru) при просмотре с мобильных устройств.
Причем с конкретных страниц обычного сайта пользователь должен перенаправляться на аналогичные страницы мобильного сайта.
Тег (для мобильной версии на поддомене)
Проверьте, что в коде страниц основного сайта (в блоке) прописаны теги с адресами соответствующих страниц мобильного сайта.
Например:
Имеется сайт https://exaple.com и мобильная версия https://m.exaple.com
В таком случае тег будет иметь вид:
<link rel="alternate" media="only screen and (max-width: 640px)" href="<a href="https://m.exaple.com" target="_blank">https://m.exaple.com</a>">
* URL вариантов страниц должны быть указаны полностью, включая названия протокола (http или https)
Добавьте Apple touch icon
Создайте изображение, которое будет служить иконкой для сохраненной страницы сайта на рабочем столе мобильного устройства.
В коде сайта прописывается наряду с обычным favicon.ico в блоке.
<link rel="apple-touch-icon-precomposed" href="/apple-touch-icon-precomposed.png"/>
<link rel="apple-touch-icon" sizes="180x180" href="/touch-icon.png">
Подробнее в этой статье.
Контент под ширину экрана
Все содержимое сайта должно входить по ширине в экран устройства. Внизу не должно быть горизонтальной прокрутки, а справа – пустого пространства.
Размер шрифта
Проверьте, что все тексты на сайте удобно читать с мобильных — нет ни слишком мелкого шрифта, ни слишком крупного.
Размер кнопок
Проверьте, что во все интерактивные элементы – элементы, на которые можно кликнуть – легко попасть пальцем (и желательно мужским, а не детским).
Расстояние между ссылками
Проверьте, что отдельные ссылки и кнопки не расположены слишком близко друг к другу, т.к. долгие попытки попасть по нужной ссылке настроения точно не улучшают.
Картинки меньшего размера (для динамического контента)
Если ваш сайт выдает отдельный html-код при просмотре с мобильного устройства, то можно в нем указать ссылки на уменьшенные копии изображений.
Убрать Flash
Технология Flash не поддерживается мобильными устройствами. Да и современные десктопные браузеры постепенно отказываются от поддержки Flash. Компания Adobe перестанет поддерживать технологию Flash в 2020 году.
Для вставки видеороликов используйте теги HTML5, вот тут есть подробная инструкция.
-
Проверьте сайт на удобство для пользователя (4 критерия)
Удобная навигация
Проверьте, что все необходимые пункты меню доступны в мобильной версии (включая выпадающие подменю). И не забудьте про «хлебные крошки» – они помогут посетителю понять, в каком разделе сайта он находится.
Ссылки с номеров телефонов
Поставьте ссылки с номеров телефонов для быстрого набора их с мобильных устройств. Делается это так:
<a href="tel:88002007775">8-800-200-777-5</a>
Учет местоположения
На многих мобильных устройствах включена передача геоданных (информации о местоположении устройства).
Вы можете использовать эту информацию на своем сайте, например, при заполнении адреса доставки или при поиске объектов неподалеку.
Ссылка «Перейти на полную версию сайта» (для динамического контента, для мобильной версии на поддомене)
Оставьте пользователям мобильных устройств возможность посмотреть полную версию сайта.
-
Готовый отчет оформите любым удобным вам способом и отправьте нам на почту [email protected]
У вас есть 3 альтернативных выхода
На время марафона мы снизили стоимость услуг
