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

Оптимизация сайта для мобильных устройств — этап важный этап SEO-оптимизации. Более 60% посетителей заходят в интернет с телефонов. Качество мобильной версии напрямую влияет на ранжирование. Мы расскажем, какие показатели применяются для оценки мобилопригодности, и как оптимизировать дизайн для маленьких экранов.

Получите 3% с договора за рекомендацию

Предлагаем 3% вознаграждения за рекомендацию, если вы приведёте для нас клиента.

Есть клиент

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

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

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

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

Принципы работы адаптивной версии:

• Изменение горизонтальной верстки на вертикальную.
• Пропорциональное уменьшение фрагментов дизайна интерфейса.
• Уменьшение веса картинок, фото и прочих медиафайлов.
• Скрытие части контента в формате выпадающего меню. 

Создать адаптивный дизайн можно с помощью языков гипертекстовой разметки HTML5 и CSS3. Можно использовать CSS-фреймворки, такие как Bootstrap и Foundation. Еще один удобный инструмент для создания мобильной версии — препроцессоры CSS (Sass, Less). Прежде чем писать код, следует создать прототипы в Adobe XD или Figma. На этапе прототипирования можно увидеть ошибки в дизайне страниц и улучшить адаптивную верстку.

Оптимизация адаптивной версии для Яндекс

Мобильная оптимизация влияет на позиции в Яндексе с 2016 года, когда был запущен алгоритм «Владивосток». Приоритет при ранжировании получают проекты:

• С адаптивным дизайном, который меняется в зависимости от разрешения и размера экрана. URL и код не меняются для разных устройств.
• С динамической версткой. Сайт доступен по одному общему URL. Пользователи, которые открывают его с разных устройств, получают разные варианты кода HTML и CSS.
• С мобильной версией на отдельном поддомене. Префиксы для новой версии: m. или mob. Дальнейшая структура домена должна совпадать с основным адресом домена.

Роботы Яндекса проверяют на адаптивность основной домен и поддомен. Адреса должны быть доступны для автоматической индексации. Прописать разрешения роботам можно в служебном файле robots.txt.

Полезные советы

Чек-лист по оптимизации от сотрудников Яндекс:

• В служебном файле robots.txt откройте сканирование кода CSS и JavaScript.
• Убедитесь, что страницы отправляют ответ с кодом 200 OK. Посмотрите отчет в Яндекс Вебмастере в разделе «Инструменты» на вкладке «Проверка ответа сервера» и исправьте ошибки.

• Не используйте технологии Flash, Applet и Silverlight для создания сложных интерактивных элементов. На многих смартфонах и планшетах не поддерживаются эти технологии.
• Для оптимизации сайта размещайте контент так, чтобы его было удобно воспринимать на маленьких экранах, и подбирайте подходящие размеры шрифтов и изображений.
• При верстке ориентируйтесь на минимальную ширину экрана смартфона 320 пикселей. Изображения и тексты должны открываться без горизонтальной прокрутки даже на самых узких экранах.

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

На каждой странице следует прописать код по образцу:

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

Код width=device-width привязывает ширину адаптивной верстки страницы к экрану устройства. Фрагмент кода initial-scale=1 устанавливает пропорцию 1:1 между пикселями CSS и пикселями смартфона или планшета. Когда тег Viewport отсутствует, смартфоны будут открывать версию дизайна для компьютеров и ноутбуков. 

Тестирование оптимизации

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

Как провести диагностику проекта:

1. В меню Яндекс Вебмастера откройте раздел «Оптимизация».
2. Перейдите в подраздел «Диагностика». 
3. В выпадающем меню выберите домен, для которого вы хотите провести диагностику.
4. Получите отчет со списком ошибок и советами по SEO-оптимизации.
5. Исправьте найденные проблемы, чтобы улучшить ранжирование.

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

Оптимизация адаптивной версии для Google

С 2023 года оптимизация сайта для мобильных устройств — главный критерий для ранжирования в Google, потому что система теперь работает по принципу mobile-first indexing. Это значит, что на первую страницу больше не попадают проекты, не адаптированные для смартфонов.

Советы по оптимизации от сотрудников Google:

• Используйте адаптивные шрифты и изображения в дизайне.
• Пользуйтесь языками HTML и CSS, чтобы дизайн адаптировался к размерам экрана.
• Не используйте сложный код на JavaScript, он замедляет работу поисковых роботов. Из-за тяжелого кода страница может быть не проиндексирована.
• Заполняйте метатеги, используя ключевые слова для SEO-оптимизации. Алгоритмы Google генерируют описания и изображения для поисковой выдачи по метатегам.
• Следите, чтобы заголовки и метатеги в основной и адаптивной версии совпадали.
• Создайте файл Sitemap, чтобы ускорить индексацию.
• Оптимальная скорость загрузки: не более 2.5 секунды.
• Не загружайте тяжелые картинки, анимации, видео и другие медиафайлы в адаптивную версию. Помните, что некоторые читатели пользуются бюджетными смартфонами, а другие живут в районах со слабым интернет-сигналом.
• Каждый видеоролик лучше публиковать на отдельной странице.
• Реклама не должна мешать пользователям воспринимать контент.

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

2 месяца SEO продвижения в подарок

Закажите у нас разработку сайта и сэкономьте 2 месяца SEO продвижения, потому как мы сразу проводим базовую SEO оптимизацию.

Заказать

Анализ производительности

Оценивать эффективность мобильной оптимизации сайтов можно с помощью Google PageSpeed Insights. Полезный сервис от Google показывает скорость загрузки страниц и производительность адаптивной версии.

Как провести анализ:

1. Открыть сервис Google PageSpeed Insights.
2. Указать в поле ввода URL-адрес страницы, которую нужно проверить.
3. Нажать кнопку на кнопку «Анализ».
4. Дождаться результатов проверки.
5. Получить отчет о производительности.

Google PageSpeed Insights анализирует скорость загрузки отдельной страницы. Если указать адрес в поле ввода, сервис проверит главную страницу. Оценка производительности выражается в баллах, а не в секундах. 

Хорошим считается результат 90-100 баллов. Если страница получила более низкую оценку, ее нужно оптимизировать.

Отчеты из Google PageSpeed Insights показывают, какие причины приводят к медленной загрузке. Например, если в коде есть файлы на JavaScript и CSS, которые ухудшают производительность, информация о них будет указана в отчете.

Метрики Core Web Vitals 

Чтобы поисковая выдача работала по принципу mobile-first indexing, Google запустил метрики Core Web Vitals для оценки мобильной оптимизации сайтов (LCP, FID, CLS, TBT). Алгоритмы используют сотни критериев для ранжирования доменов. Core Web Vitals интересна тем, что это метрики с простой открытой механикой. Возможно измерять их самостоятельно, чтобы оценивать эффективность SEO-продвижения.

LCP

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

LCP зависит от:

• Скорости ответа сервера на запрос пользователя.
• Веса изображений, шрифтов, анимаций, видео и других элементов веб-дизайна.
• Наличия тяжелых файлов JavaScript и CSS, которые замедляют выполнение кода.
• Технологии рендеринга (сборки) страниц: в браузере пользователя или на сервере.

Чем меньше LCP, тем лучше выполнена оптимизация. Основное содержимое главной страницы должно загружаться в течение 2.5 секунд. Если за это время пользователь не сможет оценить качество контента, он с большой вероятностью закроет вкладку в браузере и вернется к результатам поиска.

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

FID

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

Хорошим считается FID менее 100 мс, для оптимизации сайта для мобильных устройств нужно проверить размеры JavaScript бандлов. Бандл используется для решения одной конкретной задачи и состоит из одного или нескольких файлов с JS—кодом. Оптимальный размер бандла 200-300 Кб. Чем тяжелее бандл, тем дольше браузер будет исполнять код, что повышает время отклика на действия пользователя.

FID зависит от:

• скорости ответа сервера;
• сложности выполнения JS—кода;
• размера JS—бандлов;
• наличия блокировки отображения контента до выполнения кода.

FID нельзя измерить на этапе веб-разработки. Метрика измеряется только при участии реальных пользователей.

TBT

TBT — общее время блокировки. Эта метрика показывает, сколько времени может пройти от появления первого видимого контента до готовности сайта отвечать за запросы. Можно измерять TBT на этапе веб-разработки или оптимизации проекта после релиза.

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

Чтобы уменьшить число отказов, нужно следить за тем, чтобы каждая задача при загрузке выполнялась не более 50 мс.

CLS

Метрика CLS, которая используется для проверки мобильной оптимизации сайтов, тесно связана с понятием Viewport (видимая область на экране смартфона или планшета). Во время загрузки видимая область может меняться или оставаться неизменной. 

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

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

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

Где увидеть перечисленные метрики

Проверить перечисленные метрики можно с помощью специальных инструментов:

• Lighthouse — сервис из набора Chrome DevTools, встроенного в браузер Google Chrome. С его помощью можно проверять оптимизацию, скорость загрузки, доступность сервера и прочие аспекты SEO-продвижения.
• Google PageSpeed Insights — бесплатный сервис для мобильной оптимизации сайтов. Он анализирует производительность страниц и дает советы, как ускорить загрузку.
• Google Search Console — бесплатный сервис для проверки видимости сайта в поисковой выдачи от Google и проверки Core Web Vitals.

Метрики Web Vitals напрямую влияют на ранжирование Google. Работа над их улучшением делает веб-дизайн удобнее, это часто приводит и к повышению видимости в Яндексе. Чем выше позиции в результатах поиска, тем выше доходность проекта. 

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

Советы, как улучшить мобилопригодность

Уменьшайте скорость загрузки. Выбирайте форматы картинок, которые быстрее загружаются. Меньше всего весят изображения SVG, WebP и TinyPNG. Отключите тяжелые скрипты, анимации и стили.

Упростите навигацию. Сделайте выпадающее меню, где разделы раскрываются при нажатии на них. Добавьте кнопку «Наверх» для быстрого возврата к шапке.

Оптимизируйте кнопки. Подходящий размер кнопок для мобильной оптимизации сайта: от 48×48 пикселей. Они не должны быть расположены слишком близко, чтобы при попытке нажать на одну кнопку пользователь не задевал соседних.

Увеличьте мелкий шрифт. Подходящий размер шрифта для мобильной оптимизации сайта: не менее 16 пикселей. 

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

Тестируйте готовые решения. Проверяйте дизайн и работу сайта в эмуляторах. Для проведения тестов можно использовать бесплатные инструменты: Google Mobile-Friendly Test и «Инструмент проверки мобильности» от Яндекс Вебмастера.

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

Бесплатный экспресс аудит

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

Заказать аудит

Выводы

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

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

Если у вас нет времени, чтобы разбираться, как создать или улучшить адаптивную версию сайта, обратитесь к специалистам по SEO-продвижению. Специалисты проведут аудит вашего проекта и предложат стратегию по комплексной оптимизации.