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

Мобильный трафик за последние годы превзошёл десктопный: теперь более 54% всего трафика в интернете приходится на мобильные устройства. Если сайт не оптимизирован для них, он упускает значительное количество пользователей.

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

Что такое мобилопригодный сайт

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

Мобилопригодность — это не только удобство пользователей, но и важный фактор ранжирования. ПС стремятся показывать пользователю наиболее релевантный и удобный для использования контент, поэтому сайты, оптимизированные под мобильные, показываются в выдаче выше.

Блог веб‑мастеров Яндекса — об оптимизации для мобильных

Справка Google — Как оптимизировать сайт под мобильные

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

Способы оптимизации под мобильные

Обычно используют один из трёх вариантов: полноценная мобильная версия, адаптивная вёрстка и RESS — динамическая вёрстка.

Полноценная мобильная версия

Это отдельная от основной версия сайта. Как правило, адрес мобильной версии выглядит так: m.mysite.com.

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

Справка Google — рекомендации по индексированию с приоритетом мобильного контента

Вебмастер Справка — о сайтах для мобильных устройств

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

Плюсы

• Можно добавить дополнительный функционал, нерелевантный для десктопной версии.

• У пользователя остается возможность перейти на полную версию, если ему так удобнее.

Минусы

• Придётся оптимизировать и администрировать версии отдельно — а значит, тратить больше ресурсов, настраивать редиректы и т. п.

• Разработка мобильной версии обойдётся дороже адаптивной вёрстки.

Как сделать мобильную версию

1. Сначала нужно создать поддомен m.site.com на хостинге. Для этого зайдите в панель управления хостингом и найдите раздел «Создание поддоменов», нажмите «Создать».

2. Теперь нужно скопировать файлы с основного сайта на новый поддомен. Для этого зайдите в файловый менеджер хостинга, найдите папку с основным сайтом и скопируйте её содержимое в папку с мобильным сайтом (с поддоменом «m»).

3. Далее необходимо настроить автоматическую переадресацию пользователей на мобильную версию сайта. Есть несколько способов:

С помощью JavaScript

При загрузке страницы нужно написать скрипт, который проверяет ширину экрана пользователя; если она меньше порогового значения, скрипт перенаправляет пользователя на мобильную версию сайта.

Пример:

if (screen.width < 768) {

 window.location = "http://example.com/mobile"; 

}

С использованием серверного скрипта

При обращении к сайту можно использовать серверный скрипт, который проверяет User Agent браузера; если он указывает на мобильное устройство, скрипт перенаправляет пользователя на мобильную версию сайта.

Пример:

if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) { window.location = "http://example.com/mobile"; }

С использованием метатега "viewport"

При настройке метатега "viewport" можно указать параметр "user‑scalable=no", который запретит масштабирование страницы на мобильных устройствах. Также можно указать параметр "width=device‑width", который позволит браузеру правильно отображать содержимое страницы на мобильном устройстве.

<meta name="viewport" content="width=device‑width, user‑scalable=no">

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

Для мобильных страниц нужно настроить тег <link> с элементом rel="canonical", который указывает на страницу для компьютеров. Это означает, что мобильная страница является копией страницы для компьютеров и указывает на её URL; а тег помогает поисковым системам понимать, что эти страницы являются одной и той же страницей — просто в разных версиях и для разных устройств.

Canonical: что это за атрибут и как прописать канонический адрес страницы

Для десктопных страниц, в свою очередь, нужно настроить тег <link> с элементом rel="alternate", который указывает на соответствующую мобильную страницу.

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

Можно использовать специальные атрибуты в файле Sitemap для задания тега rel="alternate" — для этого нужно указать URL мобильной страницы вместе с тегом rel="alternate". Поисковые системы поддерживают такие теги в файле sitemap.xml. Это может выглядеть таким образом:

<url>

  <loc>https://www.site.ru/page.html</loc>

  <xhtml:link 

    rel="alternate"

    media="only screen and (max‑width: 640px)"

    hreflang="x‑default"

    href="https://m.site.ru/page.html"

  />

</url>

Здесь <loc> указывает на URL десктопной версии страницы, а <xhtml:link> с атрибутами rel="alternate" и hreflang="x‑default" указывает на URL соответствующей мобильной версии страницы на поддомене m.site.ru.

В атрибуте media можно указать условие для перенаправления на мобильную версию. Например, only screen and (max‑width: 640px) означает, что перенаправление будет происходить только для устройств с шириной экрана не более 640 пикселей.

5. Протестируйте мобильную версию сайта на разных устройствах и в браузерах. Для этого можно использовать реальные смартфоны и планшеты или онлайн‑сервисы BrowserStack, CrossBrowserTesting, Sauce Labs и другие. Убедитесь, что автоматическая переадресация работает корректно и на смартфонах действительно открывается мобильная, а не десктопная версия.

Адаптивная вёрстка

Адаптивная вёрстка — это технология вёрстки, которая позволяет сайту автоматически адаптироваться под разные разрешения экранов устройств. Это значит, что сайт будет одинаково удобно отображаться на мониторе компьютера, планшете или смартфоне. При этом адрес сайта используется тот же.

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

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

Плюсы

• Сайт выглядит хорошо на любом устройстве с любым разрешением экрана.

• Изменения достаточно внести в десктопную версию.

• Не нужно продвигать две версии по отдельности.

• Работа над адаптивной вёрсткой дешевле и проще.

Минусы

• Требует дополнительного времени и технических знаний для разработки.

• Сложно адаптировать некоторые элементы — например, сложные таблицы и графики.

• Невозможно точно настроить под разные устройства. При адаптивной вёрстке сайт может выглядеть по‑разному на разных устройствах, и точную настройку для каждого из них выполнить довольно сложно.

Как сделать адаптивную вёрстку

1. Первым делом нужно спланировать структуру сайта: решить, какие элементы и блоки будут использоваться на каждой странице, и создать прототип этой страницы.

2. Далее нужно создать основной макет страницы с помощью HTML‑кода. Для каждого блока контента добавляются стили CSS; устанавливаются ширина, высота, цвет фона, границы, отступы и другие свойства в соответствии с макетом.

3. Для адаптивной вёрстки также необходимо использовать CSS‑правила, которые будут подстраивать элементы сайта под разные устройства. Для этого можно использовать медиазапросы, которые позволяют задавать различные стили в зависимости от размеров экрана.

Пример медиазапроса для устройств с максимальной шириной 768 px:

@media (max‑width: 768px) {

  /* стили для экранов меньше 768px */

}

4. Также в создании адаптивной вёрстки важна установка тега Viewport в раздел head HTML‑кода:

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

Этот тег определяет ширину области просмотра и отображение на мобильных устройствах. Благодаря этим данным браузер строит модель CSSOM.

Справка Google о viewport

Для чего используется метатег viewport и как его настроить

5. После завершения разработки и настройки адаптивной вёрстки необходимо протестировать результат на разных устройствах. Можно использовать эмуляторы устройств в браузере — для этого нужно открыть в браузере «Инструменты разработчиков» («Меню» → «Инструменты» → «Инструменты для разработчиков») или воспользоваться комбинацией клавиш:

• для Windows OS — Ctrl + Shift + I;

• для Mac OS — Alt + Command + I.

Чтобы активировать эмулятор, нужно кликнуть по иконке в левом верхнем углу Toggle device toolbar:

Также тестировать адаптивную версию на разных устройствах можно через расширение для Chrome «Мобильный симулятор».

RESS

RESS (адаптивный дизайн + серверные компоненты, от англ. responsive design + server side components) — это технология, которая позволяет адаптировать сайт для мобильных устройств на стороне сервера. Это означает, что сервер может определить тип устройства, на котором пользователь просматривает сайт, и отправить соответствующую версию страницы.

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

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

Что касается индексации RESS‑сайтов поисковиками: они воспринимают их как обычные сайты и легко индексируют, в том числе Яндекс и Google.

Плюсы

• Облегчает код для мобильного устройства; можно настроить разные отображения для разных устройств.

• Снижает нагрузку на мобильный трафик, что, в свою очередь, экономит затраты на передачу данных.

• Подходит для больших и сложных сайтов.

Минусы

• Могут быть проблемы с непопулярными моделями гаджетов.

• Реализация дороже и сложнее: может понадобиться дополнительное серверное программное обеспечение.

• Ограничения в анимации и интерактивности на мобильных устройствах.

Как сделать RESS

1. Изучите, откуда люди чаще всего заходят на ваш сайт, и разбейте их на группы по устройствам с разными параметрами: размер экрана, скорость интернет‑соединения, тип устройства и т. д.

Детальную информацию о посетителях сайта и их устройствах можно посмотреть в Яндекс Метрике в разделе «Отчёты» → «Аудитория».

2. Определите, какой контент необходимо отображать для пользователей на разных устройствах и различных скоростях соединения с интернетом. Например, для мобильных устройств можно показывать меньше изображений и вообще скрыть элементы, которые замедляют загрузку страницы (анимации или длинные видео).

3. Разработайте основной макет страницы, который будет использоваться на всех устройствах.

4. Используйте медиазапросы CSS для определения размеров экрана и скорости соединения. Медиазапросы позволяют определять, какие стили будут применяться к элементам страницы на разных устройствах.

5. Используйте серверную технологию — например, PHP или Node.js, — для определения параметров устройства и настроек соединения пользователя. Эти параметры могут быть переданы в HTML‑код страницы, чтобы определить, какие ресурсы должны быть загружены.

6. Используйте технологию WebP, чтобы оптимизировать размер изображений, и технологию minification для оптимизации кода. Это поможет ускорить загрузку страницы.

Справка по Node.js

Справка по PHP

Справка по WebP

7. Протестируйте итоговый сайт на разных устройствах и с разными скоростями интернета, чтобы убедиться, что она отображается корректно и загружается быстро.

Сделать это можно в эмуляторе устройств в браузере и вручную на нескольких устройствах, как и в случае с адаптивной вёрсткой.

Принципы мобилопригодного сайта

При создании сайта, дружественного к мобильным устройствам, стоит следовать опредёленным принципам.

Интерфейс одинаково хорошо отображается на любых экранах

Контент должен корректно отображаться независимо от того, какой тип устройства использует человек — смартфон или планшет. Это означает, что дизайн сайта должен быть адаптирован под все возможные размеры и разрешения экранов.

Сайт доступен для роботов

Роботы — это программы, которые позволяют поисковым системам проиндексировать сайт и добавить его в свою базу данных. Чтобы роботы могли обойти сайт и проиндексировать все страницы, нужно проверить наличие файла robots.txt на мобильной версии сайта и убедиться, что в нём разрешен доступ роботам.

Чтобы роботы могли проиндексировать адаптивную вёрстку или RESS, необходимо использовать метатеги, которые будут указывать на то, что сайт адаптивный. Например, можно использовать метатег <meta name="viewport" content="width=device‑width, initial‑scale=1.0">. Он указывает на то, что ширина страницы должна соответствовать ширине устройства, с которого просматривается сайт. Также важно, чтобы контент на адаптивной версии сайта был аналогичен контенту на основной версии, тогда поисковые роботы смогут корректно индексировать сайт и отображать его в выдаче.

Правила оформления robots.txt у Яндекса

Правила оформления robots.txt у Google

Сервер должен отдавать ответ 200 ОК

Когда пользователь открывает страницу сайта, его браузер отправляет запрос на сервер, который отвечает на этот запрос соответствующим ответом.

Код ответа сервера 200 ОК говорит о том, что сервер успешно обработал запрос и вернул запрашиваемую страницу. Это важно для SEO, так как если сервер не отвечает, то поисковые системы будут считать, что страница недоступна, и могут снизить её позиции в выдаче. Поэтому нужно убедиться, что все страницы сайта возвращают ответ 200 ОК.

О том, как проверить коды ответа сервера на вашем сайте, мы расскажем ниже.

Коды ошибок HTTP: полный список ошибок сервера

Поддержка всех технологий

На мобильном сайте не должно быть элементов Flash, апплетов Java или плагинов Silverlight. Эти технологии замедляют загрузку и могут не поддерживаться на мобильных устройствах. Поэтому рекомендуется отключить их и публиковать контент с помощью HTML5.

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

Быстрая загрузка

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

Поисковые системы также занижают позиции медленных сайтов — за это отвечает алгоритм Google Speed Update. Об этом Джон Мюллер говорил в своём выступлении ещё в 2018 году. Поэтому следует убедиться, что сайт загружается быстро на всех устройствах.

О том, как проверить скорость загрузки страниц сайта, мы рассказываем ниже.

Что сделать, чтобы мобильный сайт загружался быстрее

• Оптимизируйте изображения. Стремитесь использовать меньшие размеры изображений, чтобы они загружались быстрее. Например, вы можете сжимать изображения или использовать формат WebP, который обеспечивает лучшее сжатие без потери качества.

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

• Оптимизируйте код страниц. Объёмный неоптимизированный код может вызывать задержки при загрузке сайта. Чтобы уменьшить размер файлов и ускорить загрузку сайта, можно использовать сжатие CSS, JavaScript и HTML‑кода.

Помогут сервисы:

• Online CSS Minifier/Compressor,

• UglifyJS — JavaScript Minifier,

• HTML Minifier,

• Gzip Compression Tool,

• плагины для сжатия файлов, например WP Super Minify для CMS WordPress.

Для использования этих инструментов необходимо загрузить файлы на сервер, где они будут минифицированы и сжаты. Затем их можно использовать на сайте. Также существуют специализированные сервисы, которые позволяют автоматически оптимизировать файлы на лету при загрузке страницы, такие как Cloudflare.

• Включите Lazy Load изображений. Все изображения, которые не попадают в поле зрения пользователя, не будут загружаться до тех пор, пока пользователь не прокрутит страницу. Использование «ленивой загрузки» оптимизирует загрузку страницы и ускоряет её.

• Используйте Content Delivery Network (CDN). Это сеть серверов, расположенных по всему миру для ускорения загрузки контента на сайте. Советуем использовать CDN, чтобы быстрее доставлять контент на мобильные устройства пользователей в разных частях мира.

Для этого нужно:

• выбрать провайдера CDN и зарегистрироваться на его сайте (например, Ngenix, Selectel, CDNvideo);

• получить специальный адрес (URL), который будет использоваться для загрузки контента с CDN сервера, а не с вашего сайта;

• заменить ссылки на контент на вашем сайте на ссылки с CDN URL. Например, вместо ссылки на изображение https://example.com/images/image.jpg нужно использовать ссылку на изображение с CDN URL https://cdn.example.com/images/image.jpg.

• Используйте кэширование. Оно позволяет сохранять копии страниц на устройствах пользователей для более быстрой загрузки сайта при следующих посещениях.

• Включите сжатие GZIP. Это способ уменьшить размер файлов на сервере, чтобы они загружались быстрее на смартфоне пользователя. Оно особенно полезно для тех, у кого медленное интернет‑соединение или ограниченный трафик. Например, если вы посещаете веб‑сайт с большим количеством изображений со сжатием GZIP, эти изображения будут уменьшены, а страница загрузится быстрее. Чтобы использовать сжатие GZIP, нужно настроить его на сервере. Обычно это делается с помощью специальных плагинов для сервера. Например, плагины для настройки сжатия есть в популярных CMS: WordPress, Joomla, Drupal и других.

Отдельный фавикон

Фавикон — это иконка сайта, которая отображается в левой части вкладки в браузере перед названием страницы. Часто в фавиконе размещают уменьшенную копию логотипа компании: это работает на узнаваемость бренда.

Вот так фавикон выглядит в десктопной версии сайта:

В мобильных браузерах фавиконок на вкладках нет; их можно увидеть, если добавить сайт в закладки / избранное / список для чтения.

При оптимизации сайта для мобильных устройств нужно использовать отдельные упрощённые фавиконы. Мобильный фавикон указывается в HTML‑коде главной страницы. Он может выглядеть так:

<link rel="icon" href="/favicon.ico" type="image/x‑icon">

Что такое фавикон и как его создать самостоятельно

Только вертикальный скролл

Горизонтальная прокрутка страницы — явный признак устаревшего сайта. На мобилопригодном сайте весь контент должен располагался внутри границ экрана. Это упрощает юзабилити, а пользователю не приходится лишний раз напрягаться и двигать страницу, чтобы прочитать весь текст.

Крупные значки

Кликабельные элементы должны быть достаточно крупными, чтобы пользователь мог легко и точно попасть пальцем на нужную кнопку или иконку.

Рекомендуемая ширина активных элементов — не менее 48 px CSS на сайте. Также важно обеспечить достаточное расстояние между элементами, чтобы исключить случайные нажатия. В идеале элементы должны располагаться таким образом, чтобы пользователи могли действовать без труда одним большим пальцем, не затрагивая соседние элементы.

Крупный шрифт

Мелкий размер шрифта неудобен для чтения: приходится увеличивать страницу, чтобы не перенапрягать глаза. Это неудобно, особенно если на странице много текста. Оптимальный размер шрифта на мобильных сайтах — от 16 до 18 px. Высота строки для комфортного чтения — 50–75 символов с пробелами.

Чтобы текст было легче читать, нужно добавлять между строками небольшой промежуток с высотой, пропорциональной основному размеру шрифта. Обычно это 130–150% от размера текста.

Ещё важно правильно подобрать размеры заголовков, используемых в тексте, чтобы подчеркнуть иерархию. По правилам типографики заголовок H1 должен составлять примерно 300% от размера основного шрифта, H2 — 200%. Например, для основного шрифта размером 16 px в заголовках можно применять такие параметры:

H1 — 48 px,

H2 — 32 px.

Контрастный текст

Цвет текста должен быть контрастным по отношению к фону, на котором он находится. Например, белый текст на чёрном фоне или чёрный текст на белом фоне. Резкая разница в контрасте улучшит читаемость, а глаза пользователей не будут уставать от просмотра страниц.

Всплывающие окна не закрывают контент

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

Если вы всё же решите использовать всплывающие окна, убедитесь, что они не закрывают контент и легко скрываются.

Упрощённая регистрация

Регистрация с множеством обязательных полей для заполнения только утомляет пользователей, а кто‑то вовсе уходит с сайта, потому что лень регистрироваться. Главное правило здесь — чем меньше полей, тем лучше. Запрашивайте только самое необходимое: email, телефон, пароль. Остальные поля либо лучше убрать, либо сделать не обязательными к заполнению.

Стоит добавить возможность регистрации через соцсети, аккаунты Google и Яндекс. Так пользователям ничего не придётся вводить: для входа на сайт достаточно нажать на иконку соцсети, например ВК, и разрешить сайту использовать данные учётной записи.

Использование геоданных

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

Использование геоданных в мобильной вёрстке можно прописать с помощью HTML5‑элемента <geolocation> внутри тега <body>. Этот элемент позволяет получать информацию о местоположении пользователя через GPS, Wi‑Fi или сотовую связь.

Кроме того, можно использовать сторонние библиотеки или API для работы с геоданными, например Google Maps API или OpenStreetMap.

Упрощённая связь с компанией

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

Стоит разместить контактную информацию на главной странице сайта, а также на каждой странице, если это возможно, например в шапке страницы или в подвале. Номер телефона должен быть активным, чтобы при нажатии на него оставалось только нажать на вызов. Это удобно: не надо ничего копировать.

Настроить активный номер можно с помощью кода:

<a href="tel:+7900000000">Call me</a>

Код можно добавить в часть HTML‑кода внутри элемента <body>. Например, если нужно добавить ссылку на номер телефона в тексте страницы, то код можно вставить внутрь тега <p>, <h1>‑<h6> или другого тега, который используется для оформления текста. Если нужно добавить ссылку на номер телефона в меню сайта, то код можно вставить внутрь тега <li> или <a> в зависимости от структуры меню.

Вот так это будет выглядеть на сайте:

Для людей, которые не любят звонить, нужны иконки‑ссылки на Telegram, WhatsApp, Viber — тоже активные, чтобы при нажатии на иконку открывался мессенджер с чатом. Также на сайт можно добавить онлайн‑чат, где пользователь может написать консультанту, не уходя с сайта.

Как проверить оптимизацию

Самый очевидный способ проверить сайт на мобилопригодность — открыть его на разных устройствах. Просто зайдите на сайт со своего смартфона или планшета и оцените основные характеристики. Сколько секунд загружается? Не сдвигается ли дизайн на маленьком экране? Удобно ли читать текст? Видны ли картинки? Удобна ли навигация?

Кроме этого, можно воспользоваться сервисами для тестирования.

Топвизор

Нам поможет инструмент «Анализ сайта».

1. Создайте проект или выберите существующий.

2. Перейдите в инструмент «Анализ сайта». Нажмите «Настроить» или откройте «Настройки» → «Страницы для проверки»:

3. В открывшемся окне нажмите на плюсик («Импорт URL») и введите список URL / загрузите их из файла. Нажмите «Импорт»:

4. Чтобы собрать показатели Core Web Vitals для определенного устройства, нажмите «Настройки» → «Дополнительные настройки»:

5. В открывшемся окне выберите нужный тип устройства для проверки:

6. Затем нажмите кнопку «Проверить»:

7. После завершения аудита перейдите на вкладку «Сводка», чтобы увидеть все замечания и проблемы в общем отчёте:

8. Перейдите в раздел «Страницы» → «Индексируемость». В первом столбце будет указан код ответа для каждой страницы:

9. Чтобы посмотреть аналитику по CSS, перейдите в соответствующую вкладку:

10. Показатели Core Web Vitals смотрите во вкладке «Страницы» → Core Web Vitals. Здесь будут собраны все показатели CWV, включая LCP, FID и CLS, для каждой страницы:

11. Проанализируйте данные из отчётов и исправьте ошибки и предупреждения, если они есть.

Mobile‑Friendly Test (Google)

Сервис покажет, соответствует ваш сайт стандартам Google для мобильных страниц или нет.

Как проверить мобильную оптимизацию сайта:

1. Перейдите на страницу Mobile‑Friendly Test → введите URL или код для проверки → нажмите «Проверить страницу».

2. Результат появится через 1–2 минуты. Если тестируемая страница оптимизирована для мобильных устройств, он будет положительным:

3. Если Google обнаружит проблемы, он укажет, какие изменения нужно внести, чтобы улучшить работу с мобильными устройствами:

Проверка мобильных страниц (Яндекс Вебмастер)

Этот инструмент поможет обнаружить следующие проблемы:

• отсутствие viewport;

• использование Flash‑элементов, ;

• Java‑апплетов, ;

• Silverlight‑плагинов;

• наличие Турбо‑версии;

• горизонтальная прокрутка контента;

• неправильный размер шрифта.

В сервисе можно проверить как весь сайт, так и отдельные его страницы.

1. Перейдите на страницу инструмента «Проверка мобильных страниц». Войдите в аккаунт Яндекса и подтвердите права на сайт, если ещё этого не сделали.

2. Выберите из списка сайт, страницу которого хотите проанализировать → нажмите кнопку «Проверить».

3. Через несколько минут инструмент покажет результат. Например:

Как проверить весь сайт на мобилопригодность:

1. Перейдите на страницу «Всё, что проверяет Яндекс Вебмастер».

2. Выберите сайт, страницу которого вы хотите проверить, из списка доступных.

3. В разделе «Рекомендации» найдите строку «Сайт не оптимизирован для мобильных устройств» и нажмите кнопку «Проверить». Проверка может занять около двух недель.

4. После проверки вы сможете увидеть рекомендации по оптимизации сайта на странице «Диагностика» → «Диагностика сайта».

5. Яндекс Вебмастер регулярно проверяет сайт, поэтому вы можете настроить уведомления о результатах проверки.

Яндекс Справка: как Яндекс проверяет сайты на мобильную адаптивность

Проверка скорости загрузки страниц в Google PageSpeed Insights

1. Перейдите на сайт PageSpeed Insights, введите URL в верхнюю строку и нажмите «Анализировать».

2. Через несколько секунд откроется отчёт с результатами проверки сайта с мобильных устройств.

3. В первую очередь следует смотреть на три показателя:

• скорость загрузки основного контента (LCP). Рекомендуется ориентироваться на 2,5 секунды или меньше;

• время ожидания до первого взаимодействия с контентом (FID). Рекомендуется стремиться к тому, чтобы время ожидания до первого взаимодействия с контентом составляло 100 миллисекунд или меньше;

• совокупное смещение макета (CLS). Рекомендуется стремиться к тому, чтобы показатель CLS не превышал 0,1.

В идеале показатели должны быть в зелёной зоне или близко к ней. Если показатели в жёлтой и в красной зоне, требуется доработка.

Чек‑лист: что важно проверить в мобильной версии

• Проверьте, как смотрится дизайн сайта на различных размерах экранов: не съезжает ли текст и картинки. Для этого у сайта должна быть мобильная версия, адаптивная вёрстка или RESS.

• Убедитесь, что в файле robots.txt роботам разрешено сканировать CSS и JavaScript.

• Проверьте ответ кода страницы. Успешный запрос должен показать 200 OK. Это можно проверить инструментом «Анализ сайта» в Топвизоре.

• На мобильном сайте не должно быть элементов Flash, апплетов Java или плагинов Silverlight. Интерактивные элементы будут снижать скорость загрузки страницы, что может вылиться в потерю посетителей.

• Проверьте скорость загрузки страниц сайта. Сайт должен загружаться не дольше 3 секунд. Уточнить скорость загрузки можно в PageSpeed Insights или в «Анализе сайта» в Топвизоре.

• Для мобильного сайта нужен отдельный фавикон. Убедитесь, что он есть, или добавьте его в HTML‑код.

• Убедитесь, что на сайте только вертикальная прокрутка и контент помещается в размеры экрана.

• Проверьте, что на сайте достаточно крупные значки и расстояние между ними, чтобы было удобно на них нажимать одним пальцем. Рекомендуемая ширина активных элементов — не менее 48 px CSS на сайте.

• Проверьте размер шрифта. Оптимальный размер шрифта для обычного текста — 16–18 px. Оптимальная длина строки — 50–75 символов с пробелами. Размеры заголовков зависят от основного шрифта. Так, для 16 px можно использовать H1 — 48 px, для H2 — 32 px.

• Проверьте контрастность цвета текста по отношению к фону. Подобрать удачное сочетание можно с помощью сервиса WebAIM: Contrast Checker.

• Если на сайте есть всплывающие окна, проверьте, не закрывают ли они контент.

• Чем проще регистрация на сайте, тем лучше. Дайте пользователям возможность авторизоваться через соцсети или через аккаунты Google и Яндекс.

• Если для вас важно местоположение пользователя, можно запрашивать геоданные для улучшения пользовательского опыта. Например, автоматически заполнять поле «Город» при оформлении заказа и рассчитывать стоимость доставки.

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

У нас ещё много полезных статей

Как отслеживать и измерять результаты SEO

Как посмотреть сайт «глазами» поискового робота с помощью Google Chrome

Подборка лучших ресурсов по SEO: книги, подкасты, каналы