Как победить ошибку при проверке mobile-friendly сайта в Google?

11.01.2019

Не адаптировать сайт под мобильные устройства уже стало моветоном - это как позвать домой кучу гостей и при этом не убраться и ничего не приготовить. Навряд ли к вам зайдут еще раз. Чтобы похожего не происходило и вы не теряли клиентов, важно сделать так, чтобы Ваш сайт везде был красив, свеж и обаятелен как Фредди Меркьюри в свои лучшие годы.

Одной из самых популярных CMS является «1С-Битрикс: Управление сайтом». Именно этот продукт сегодня будет в центре внимания.

В продукт «1С-Битрикс: Управление сайтом» встроен комплекс решений для выполнения требований Google к сайтам — используется современная технология адаптивной верстки с использованием Bootstrap 3, объединение и сжатие javascript и CSS-файлов, ускорение сайта 2.0, оптимизация изображений и перенос javascript вниз страницы. Это все, конечно, прекрасно, но не помешает сделать проверку, все ли работает правильно.

Для начала давайте посмотрим насколько Ваш сайт дружелюбен для мобильных устройств с помощью следующих инструментов:

Mobile-Friendly Test

Тест поможет выявить следующие ошибки:

используются не поддерживаемые плагины;

значение мета-тега viewport не задано;

контент шире экрана;

слишком мелкий шрифт;

интерактивные элементы расположены слишком близко.

Google Page Speed Insights -

Этот инструмент показывает отчет по одной странице, где анализируется скорость загрузки, выдается балл оптимизации (отличный результат больше 85 баллов) и предлагаются решения по обнаруженным ошибкам.

После того как Вы убедились, что сайту есть куда стремится в адаптации под мобильные устройства, переходим к конкретным шагам.

Проверьте ваш файл robots.txt, часто в нем закрывают от индексации папку /bitrix/, вместе с ней файлы стилей, изображений и скриптов. При анализе бот Google видит страницы без дизайна и это не дает пройти тест вашему сайту. Откройте необходимые папки для индексации для прохождения проверки.
Обязательно подключите технологию композитного сайта на любой проект 1С-Битрикс. Также можете использовать инструмент “Скорость сайта” для постоянного мониторинга.
Оптимизируйте CSS и JS. Включите объединение и сжатие CSS и JS. Это уменьшает число файлов с 44 до 16 (на 160%) и размер js и css почти в 2 раза.
Перенесите JS вниз страницы. Как правило, после переноса JS вниз страницы скрипты продолжают работать правильно, но если Ваша ситуация требует запрета на перенос вниз, задайте его атрибутом data-skip-moving="true".

При работе с инструментом учтите несколько моментов:

- перенос JavaScript происходит по тегам <script></script>

- не учитываются сложные конструкции, например, HTML-комментарии

- document.write() будет работать неправильно

- инструмент может настраиваться отдельно для страниц и шаблонов
Оптимизация изображений. Вы потеряете доверие Google Page Speed, если Ваши картинки будут тяжелы как утро после Нового года, и при этом отображены в небольшом размере.
Кроме сторонних ресурсов, вы можете обратится к встроенному инструменту 1С-Битрикс. При включении CDN для вашего сайта и отмеченной строке “Оптимизировать ресурсы”, изображения будут отдаваться CDN в оптимизированном виде, не требуя предварительной обработки. Кроме того CDN оптимизирует файлы JS и CSS.
И конечно же, воспользуйтесь советами самого Google Page Speed Insight