Карточка приложения открылась быстро, но через секунду обложка сдвинула кнопку и начало описания. Посетителю приходится искать место, на котором он остановился. Поэтому скорость сайта — это не только время загрузки. Важно, когда появляется полезный текст, как быстро страница реагирует на касание и остаются ли элементы на месте.
На Android-смартфоне с мобильным соединением задержки заметнее: дома по Wi‑Fi страница может открываться быстро, а вне дома — медленно показывать скриншоты и реагировать на меню. Выбирайте исправления по наблюдаемой проблеме, а не устанавливайте сразу несколько плагинов «для ускорения».
Сначала зафиксируйте, что именно мешает посетителю
Выберите несколько типичных страниц: главную, рубрику, статью с большим числом изображений и карточку приложения. Проверьте каждую на телефоне при первом открытии и при повторном посещении. Первый просмотр показывает, сколько времени занимают ресурсы без готового кеша; повторный — работают ли настройки кеширования. Общего балла теста недостаточно: он не объяснит, почему посетитель не может прочитать описание или нажать кнопку.
Ориентироваться помогают три показателя Core Web Vitals. LCP показывает, когда появился крупнейший видимый элемент — часто заголовок, крупное изображение или обложка. Хороший ориентир — не более 2,5 секунды. INP отражает задержку реакции интерфейса на действия; целевой уровень — до 200 миллисекунд. CLS оценивает неожиданные сдвиги элементов; желательно не выше 0,1. Если данных достаточно, смотрите показатели реальных посещений: один лабораторный запуск на быстром компьютере не заменит опыт людей с разными устройствами и сетями.
Перед правками запишите адрес страницы, дату, условия проверки и саму неполадку. Например: «На мобильной сети заголовок виден быстро, но первый скриншот загружается поздно и сдвигает текст». С такой записью проще отличить улучшение от случайного колебания результатов.
Уменьшите изображения, не ухудшая полезные детали
Иллюстрации часто составляют заметную часть веса страницы об Android-приложении. Но уменьшать их нужно с оглядкой на содержание: текст на скриншоте интерфейса должен оставаться читаемым, а декоративную обложку необязательно загружать в исходном разрешении. Сначала найдите изображения, которые передаются в размере намного больше того, в котором отображаются. Если картинка занимает примерно ширину экрана телефона, не стоит отправлять файл, рассчитанный на большой монитор.
- Подготовьте несколько размеров. Адаптивные изображения позволяют браузеру выбрать файл с учётом ширины экрана и плотности пикселей. Проверьте, не подставляет ли CMS оригинал там, где хватило бы уменьшенной версии.
- Подберите формат. WebP или AVIF могут уменьшить вес без заметной потери качества, но результат зависит от снимка. После обработки сравните читаемость мелкого текста и иконок. Сохраните возможность вернуться к исходникам.
- Задайте размеры блока. Атрибуты width и height либо соотношение сторон в стилях резервируют место до загрузки файла. Текст и кнопки не будут прыгать при появлении картинки.
- Отложите изображения ниже первого экрана. Ленивая загрузка экономит трафик в длинных статьях, но главную иллюстрацию лучше проверить отдельно: из-за отложенной загрузки она может появиться позже и ухудшить LCP.
Не забудьте о превью в списках материалов. Если десятки миниатюр загружаются как полноразмерные скриншоты, рубрика будет медленной, даже когда отдельная статья открывается быстро. Анимированные демонстрации тоже не стоит запускать все сразу: неподвижное превью с воспроизведением по нажатию часто удобнее.
Дайте браузеру раньше показать текст
На странице приложения в первую очередь нужны название, совместимость, описание функций и сведения о версии. Если их отображение задерживают стили, шрифты или скрипты, экономия нескольких килобайт на иконках мало поможет. Посмотрите, какие файлы загружаются до основного содержимого, и определите, какие из них действительно нужны сразу.
Стили и шрифты
Удалите неиспользуемые правила шаблона там, где это не нарушит другие страницы. Стили первого экрана должны загружаться вовремя; стили редких компонентов можно загрузить позже. Автоматическое объединение и минификация файлов иногда помогают, но сами по себе не цель. После включения проверьте меню, таблицы и мобильную вёрстку.
Для веб-шрифтов сократите число начертаний и предусмотрите системный запасной шрифт. Если текст скрыт до загрузки шрифта, посетитель видит пустое место. Если запасной шрифт сильно отличается по ширине, при замене сдвинутся строки и кнопки. Подберите близкий вариант и проверьте страницу на узком экране.
Скрипты и элементы, которые загружаются отдельно
Счётчики, виджеты, встроенные видео и сложные блоки рекомендаций часто загружают собственный JavaScript. Уберите то, чем читатели не пользуются, а оставшееся подключайте так, чтобы оно не задерживало основной текст. Для подходящих скриптов можно использовать отложенное выполнение, но смена порядка запуска способна сломать поиск, меню или галерею. Проверяйте каждое действие, а не только внешний вид страницы.
Встроенное видео ниже текста необязательно загружать вместе с первым экраном — до нажатия хватит лёгкого превью. Если сторонний блок недоступен, сведения о приложении всё равно должны оставаться видимыми. Не прячьте основную информацию внутри внешнего виджета.
Настройте сервер и кеш без устаревших страниц
Если страница долго ждёт HTML, одни только картинки проблему не решат. Проверьте время ответа сервера, нагрузку при открытии типичных страниц и сообщения об ошибках. Причиной могут быть тяжёлый шаблон, запросы к базе данных, лишние плагины или ограничения размещения сайта. Отключайте компоненты по одному и сравнивайте результат: удаление наугад может нарушить работу формы или публикации.
Кеш готовых страниц снижает нагрузку на сервер при повторяющихся запросах. Кеш браузера позволяет не скачивать заново неизменные изображения, стили и скрипты. Если файлы хранятся долго, после обновления меняйте их имена или версии — иначе посетитель может получить старые стили с новой разметкой. Срок хранения HTML выбирайте с учётом того, как часто меняются сведения о приложениях и исправляются статьи.
Сжатие помогает быстрее передавать HTML, CSS и JavaScript; уже сжатые изображения обычно не выигрывают от повторного сжатия на сервере. Сеть доставки контента может ускорить выдачу файлов посетителям из разных регионов, но потребует отдельно настроить кеш. После её включения проверьте, появляются ли исправленные сведения и новые скриншоты вместо старой копии.
Не меняйте скорость на нестабильный интерфейс
Быстро показанная страница всё равно раздражает, если кнопка сдвигается прямо перед касанием. Резервируйте место для изображений, рекламных блоков, встроенных роликов и других элементов, которые появляются позже. Не вставляйте после загрузки большую панель над заголовком. При этом высота зарезервированного блока должна подходить для мобильного экрана, иначе останется пустота, мешающая чтению.
В длинной статье полезнее быстро показать заголовок и первые абзацы, чем загружать все скриншоты до начала чтения. Но отложенная загрузка не должна скрывать важные сведения. Минимальную версию Android, особенности совместимости и ограничения приложения давайте обычным текстом, а не только на изображении — так их можно прочитать и при медленном соединении.
Отзывчивость на касание проверяйте отдельно. Если меню, вкладка или изображение открываются с задержкой, возможно, JavaScript надолго занимает основной поток. Упростите обработчики событий, уберите ненужные эффекты и проверьте результат на устройстве среднего класса, а не только на новом флагмане.
Проверяйте изменения по одному сценарию
После каждой заметной правки повторяйте один и тот же маршрут: откройте страницу с чистым кешем, дождитесь первого экрана, прокрутите до скриншотов, откройте меню и вернитесь к тексту. Сравните показатели до и после и запишите, что изменилось на экране. Улучшение LCP не поможет читателю, если уменьшенный скриншот стал нечитаемым или кнопка перестала работать.
- Начните с одной проблемной страницы и одной вероятной причины — например, слишком крупной обложки.
- Сохраните исходные настройки и файл, чтобы при необходимости отменить изменение.
- Внесите правку, очистите соответствующий кеш и проверьте первый и повторный визит.
- Откройте страницу на Android с узким экраном и проверьте текст, изображения, меню и касания.
- Если результат устойчив, примените настройку к похожим страницам и проверьте несколько примеров, а не только исходный.
Для первой небольшой правки возьмите статью с тремя скриншотами. Задайте каждому размеры в разметке, подготовьте файлы под фактическую ширину мобильной колонки и не откладывайте загрузку первого видимого скриншота. Затем откройте страницу на телефоне с очищенным кешем: абзац под изображением должен оставаться на месте, пока файл загружается.