Перейти к содержимому
Mera News

Руководство для издателей, глава 2

Структура страницы на телефоне и компьютере

Последняя проверка: ноябрь 2026

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

Показатели, к которым стоит стремиться

Core Web Vitals от Google дают три метрики и понятную цель для каждой.

МетрикаЧто измеряетХорошо
Largest Contentful Paint (LCP)Загрузку2,5 секунды или меньше
Interaction to Next Paint (INP)Отклик на действия200 миллисекунд или меньше
Cumulative Layout Shift (CLS)Визуальную стабильность0,1 или меньше

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

Используйте полевые данные реальных посещений: отчёт Core Web Vitals в Search Console, PageSpeed Insights или Chrome User Experience Report. Lighthouse полезен в лабораторных условиях, но он не может измерить INP и вместо него показывает Total Blocking Time.

Google говорит, что единого сигнала удобства страницы не существует. При этом Core Web Vitals используются его системами ранжирования, а остальные аспекты удобства страницы напрямую не помогают сайту в ранжировании, хотя и могут сделать его удобнее.

Одна страница для обоих экранов

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

  • Основное содержимое
  • Заголовки
  • Структурированные данные
  • Мета-теги robots (случайный noindex может не пустить мобильную страницу в индекс)

Начните с тега viewport, затем проверьте, что страница перестраивается при ширине 320 CSS-пикселей без горизонтальной прокрутки.

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

На телефоне

  • Сначала разместите заголовок, подпись автора и видимую дату, затем главное изображение или первый абзац.
  • Держите текст статьи в HTML. Кнопка «читать дальше», которая подгружает остальное по касанию, может скрыть этот текст от Google, который не нажимает, не листает и не вводит текст.
  • Делайте области касания не меньше 24 на 24 CSS-пикселя: это минимум уровня WCAG 2.2 AA. Для меню и кнопок закрытия стремитесь к 44 на 44, это уровень AAA.
  • Делайте закреплённую шапку невысокой и задавайте scroll-padding-top, равный её высоте, чтобы сфокусированная ссылка никогда не пряталась за ней.

На компьютере

  • Держите основной текст не длиннее 80 символов в строке, а для китайского, японского и корейского не длиннее 40. Это рекомендация WCAG уровня AAA, и она помогает всем читателям.
  • Задавайте межстрочный интервал не меньше 1,5 внутри абзацев.
  • Размещайте дополнительное содержимое в боковой колонке, которая не сдвигает статью при загрузке.

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

Самый крупный элемент новостной страницы часто главное изображение. Относитесь к нему как к самому важному запросу на странице.

<img
  src="/images/lead-1200.jpg"
  srcset="/images/lead-800.jpg 800w, /images/lead-1200.jpg 1200w"
  sizes="(min-width: 768px) 720px, 100vw"
  width="1200"
  height="675"
  alt="Describe what the photo shows"
  fetchpriority="high">
  • Никогда не загружайте изображение LCP лениво.
  • Размещайте его в исходном HTML, чтобы браузер нашёл его до запуска любого скрипта.
  • Используйте fetchpriority="high" не более чем для одного-двух изображений. Больше уже не помогает.
  • Используйте loading="lazy" только для изображений и iframe за пределами первого экрана.
  • Сокращайте редиректы и сохраняйте возможность кеширования страницы. Уникальные параметры URL могут отправлять запросы на ваш исходный сервер вместо CDN.

Страница, которая не дёргается

  • Задавайте width и height для каждого изображения и видео и оставляйте в CSS height: auto.
  • Используйте одинаковое соотношение сторон для всех изображений в srcset.
  • Резервируйте место под рекламу, встроенные элементы и iframe до их загрузки. Размеры рекламных мест описаны в главе о рекламе.
  • Показывайте уведомления о cookie и приглашения подписаться поверх страницы или заранее резервируйте для них место, чтобы они не сдвигали статью вниз.
  • Используйте font-display: optional или запасной шрифт, подогнанный под метрики вашего веб-шрифта.
  • Анимируйте через transform. Анимация top или left вызывает сдвиги вёрстки.

Быстрый отклик

Полное время взаимодействия состоит из трёх частей: ожидание до запуска вашего кода, ваш код и последующая отрисовка. Любая задача длиннее 50 миллисекунд считается долгой.

  • Делайте в обработчиках событий как можно меньше. Сначала обновите экран, остальное отложите.
  • Разбивайте долгую работу с помощью scheduler.yield() и используйте setTimeout в браузерах, которые его не поддерживают.
  • Держите DOM небольшим. В длинных списках статей можно использовать content-visibility, чтобы элементы за экраном отрисовывались позже.
  • Помните, что у каждого iframe свой основной поток, поэтому проверяйте, из какого фрейма пришло медленное взаимодействие.

Длинные страницы и бесконечная прокрутка

Если страница раздела прокручивается бесконечно, дайте каждому фрагменту собственный постоянный URL с абсолютным номером страницы, например ?page=12, и свяжите эти страницы ссылками по порядку. Обновляйте адрес с помощью History API по мере движения читателя. Google не прокручивает и не нажимает, поэтому лениво загружаемое содержимое должно загружаться, когда попадает в область просмотра, без каких-либо действий.

Чек-лист

  • Проверьте LCP, INP и CLS в Search Console, отдельно для мобильных и настольных устройств.
  • Откройте самый посещаемый шаблон статьи на телефоне и убедитесь, что заголовок и дата находятся на первом экране.
  • Убедитесь, что полный текст статьи есть в HTML, который отправляет сервер.
  • Сравните мобильную и настольную версии: содержимое, заголовки, структурированные данные и теги robots должны совпадать.
  • Уберите loading="lazy" у главного изображения и добавьте fetchpriority="high".
  • Добавьте width и height к каждому изображению и видео.
  • Зарезервируйте место под каждую рекламу, встроенный элемент и баннер.
  • Задайте scroll-padding-top под высоту закреплённой шапки.
  • Проверьте страницу при ширине 320 CSS-пикселей.
  • Дайте каждому фрагменту страницы с бесконечной прокруткой собственный URL.

Источники