Перейти до вмісту
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-адресу.

Джерела