Мобильная скорость: сайт видят со смартфона, и поисковик тоже

Прозрачные этапы с согласованием на каждом шагу

Общий срок:5–18 дней

1. 1

   Замер мобильной отдачи

   2–3 рабочих дня

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

2. 2

   Сервер: сжатие и протокол

   1 рабочий день

   gzip или brotli, заголовки, HTTP/2. Самый дешевый выигрыш за потраченное время: вид сайта не меняется, а разница видна в том же замере того же дня.

3. 3

   Изображение

   1–4 рабочих дня

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

4. 4

   Viewport и паритет мобильного контента

   1–2 рабочих дня

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

5. 5

   Ревизия посторонних скриптов

   1–3 рабочих дня

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

6. 6

   Шаблон, который отдает на телефон лишнее

   2–6 рабочих дней

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

7. 7

   Повторный замер и документ

   1 рабочий день

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

Полный перечень работ и того, что вы получаете на выходе

• Замер мобильной отдачи к работам на главной, в категории и в карте – три числа, с которыми через две недели будет что сравнить
• Сжатие ответа на сервере, gzip или brotli, с проверкой заголовков: по сети к телефону идет в разы меньше байтов, а сайт снаружи не меняется
• Проверка протокола — HTTP/2 параллелит запросы в одном соединении, и на мобильной сети с длинным откликом это заметнее, чем на кабеле
• Уменьшение веса разметки: уборка неиспользованного и сокращение дублированных блоков, чтобы браузер телефона начинал рисовать раньше
• Изображение: современные форматы, отложенная загрузка, размеры под мобильный экран вместо десктопных оригиналов
• Корректный viewport без блокировки масштабирования – это и удобство для человека с плохим зрением, и снято замечание в проверках доступности
• Перенос посторонних скриптов так, чтобы они не блокировали первый показ контента, с перечислением того, сколько стоит каждый
• Сверка мобильного и десктопного ответа: тот же текст, те же ссылки, та же разметка — основа индексации по мобильной версии
• Повторный замер теми же методами и документ с разницей по каждому пункту
• Правило для вашей команды дальше: добавили новый скрипт или блок — перемеряйте и сравните с цифрой в документе

Ситуации, в которых эта услуга даёт результат

Бесплатный замер того, что получает смартфон

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

Что мы измеряем

• Вес документа и сжатиеСколько весит страница сырой и сколько сжатой. В трех измеренных нами магазинах сырая разметка главной разошлась почти втрое: 103,2, 252,6 и 295,7 КБ.
• Первый ответ и полная загрузкаОтдельно для главной, категории и карты. Эти три числа часто расходятся сильнее, чем ожидает владелец.
• Мобильный viewportЗадан ли он вообще и не заблокирован ли масштабирование пальцами — последнее еще и замечание доступности.
• ИзображениеКоличество, форматы, отложенная загрузка. Измеренный ориентир сверху: 66 из 69 картинок, то есть 96%, в одном из магазинов.
• Посторонние скриптыЧаты, виджеты, пиксели – на мобильном они стоят дороже, чем на рабочем столе.
• Сжатие на сервереВключены gzip или brotli и работает HTTP/2. Это самая дешевая часть работы с самым большим эффектом.

Почему две одинаковые на вид задачи считаются по-разному

• Что покажет замерСжатие и изображение закрываются через несколько дней. Тема, которая отдает на телефон десктопную верстку целиком – это недели. Поэтому вилки к замеру мы не называем: она совпала бы с реальностью случайно.
• Уровень доступа к серверуЕсть право править конфигурацию – сжатие, протокол и заголовки закрываются за один день. Нет — действуем через хостера и упираемся в то, что позволяет тариф.
• Сколько изображений и откуда они берутсяСемьдесят картинок в шаблоне – это одна правка. Каталог, куда менеджер еженедельно заливает подлинники из фотоаппарата, требует еще и правила на будущее, иначе вес вернется за квартал.
• Кто распоряжается посторонними скриптамиУбрать счетчик – минута. Согласовать с маркетологом и подрядчиком рекламы, которые остаются пять из двенадцати, — отдельная неделя календаря, и она тоже в сроке.
• Насколько шаблон разный для мобильногоТема, где мобильный вид задается стилями поверх того же документа, дешева только с виду: браузер телефона все равно загрузил все скрытое. Разделить «спрятать» и «не отдавать» – самая дорогая часть работы.
• Количество типов страниц и языковых версийКаждый уникальный шаблон и каждая языковая ветвь – отдельный замер до и после. В измеренном магазине отопительного оборудования таких ветвей две, uk и ru с корректным x-default, то есть проверка удваивается.

Без этого не начнём — лучше подготовить заранее

1. 1Адрес сайта и список страниц, куда приходит мобильный трафик.
2. 2Доступ к шаблонам и серверу: сжатие и заголовки правятся там, а не в админке.
3. 3Данные аналитики о части мобильных посетителей — считать влияние лучше на вашей цифре, а не на отраслевом среднем.
4. 4Решение по виджетам: часть веса невозможно убрать, не трогая чужие скрипты.
5. 5Одного человека с вашей стороны, который за день может сказать «выключаем».
6. 6Перечень реально продвигаемых языковых версий: мерить до и после нужно каждую отдельно.

Если чего-то из этого нет — скажите, подскажем, как собрать или сделаем сами отдельной задачей.

Что обычно берут вместе с этой задачей

• Оптимизация Core Web Vitals — подробнее
• Аудит скорости сайта — подробнее
• Оптимизация изображений — подробнее
• HTTP-заголовки и кэширование — что входит
• JS-рендеринг для поиска — что входит