Открываешь запись о кошачьих привычках, а на месте первого абзаца несколько секунд пустота. Или текст уже появился, но большая фотография подгрузилась позже и сдвинула его вниз — как раз когда начал читать. Страница вроде бы открылась, а пользоваться ею неудобно. Поэтому скорость блога важна не только для оценки в тесте: от неё зависит, насколько спокойно читается история.
Что именно чувствует читатель
Страница загружается не в один миг. Сначала появляется текст или часть оформления, потом — главный элемент первого экрана: в семейном блоге это может быть заголовок с фотографией или начало статьи. Ещё позже всё начинает нормально реагировать на действия: открывается меню, работает поиск, кнопка отвечает на касание. Если ускорить только появление фона, а чтение и управление страницей по-прежнему тормозят, разницу трудно заметить.
Есть и другая неприятность — прыгающий текст. Когда для фотографии, рекламы или встроенного блока заранее не оставили места, абзацы сдвигаются по мере загрузки. На телефоне это особенно досадно: тянешься к ссылке, а под пальцем уже другая строка. Одним сжатием фотографий такую проблему не решить.
Начните с проверки страницы, а не с установки дополнения
Возьмите три страницы: свежую запись с фотографиями, старую длинную статью и главную. Откройте каждую сначала на телефоне через мобильный интернет, затем на компьютере. Проверять лучше в приватном окне, чтобы сохранённые браузером файлы не исказили впечатление. Отметьте, что происходит до начала чтения и после первого касания.
- Долго ли приходится смотреть на пустой экран до появления заголовка?
- Остаётся ли текст на месте, пока загружаются фотографии?
- Можно ли сразу открыть меню и перейти к другой записи?
- Не задерживает ли загрузку форма подписки, видео или блок комментариев?
Автоматическая проверка поможет разобраться с тем, что вы заметили. LCP показывает, когда появился самый крупный видимый элемент, INP — насколько быстро страница отвечает на действия, CLS — есть ли неожиданные сдвиги макета. Эти показатели ничего не говорят о качестве самой статьи. Результаты могут отличаться из-за соединения или нагрузки на устройство, поэтому сравнивайте страницы в похожих условиях и проверяйте, повторяется ли задержка.
Фотографии: облегчить, не лишая статью тепла
Снимок кота у окна или детского рисунка делает семейную запись живой. Но файл прямо с камеры нередко гораздо больше, чем нужно для страницы. Если фотография показывается шириной около 800 пикселей, незачем каждый раз загружать исходник шириной в несколько тысяч. Подготовьте снимок к публикации: уменьшите до нужного размера, выберите подходящий современный формат, если сайт его поддерживает, и сожмите без заметной потери деталей.
Для разных экранов пригодятся разные размеры одного снимка. Тогда телефон не будет загружать тот же большой файл, что и ноутбук. Фотографии ниже первого экрана можно подгружать при прокрутке. Главное изображение наверху, напротив, не стоит бездумно откладывать: вместо него читатель дольше увидит пустое место.
Укажите для каждого изображения ширину и высоту либо соотношение сторон. Браузер заранее оставит место под снимок, и текст не прыгнет, когда тот загрузится. А выбирая кадр, посмотрите, как он выглядит в узкой колонке телефона. О подготовке иллюстраций мы писали в материале «Как выбирать изображения для семейного блога».
Уберите из первого экрана то, что может подождать
Чтобы начать чтение, браузеру сначала нужны разметка, стили видимой части страницы и необходимые шрифты. Счётчики, сложная анимация, виджеты соцсетей и некоторые формы не должны задерживать первый абзац. Скрипты, которые не нужны сразу, обычно загружают с отсрочкой или после построения страницы. После настройки обязательно проверьте всё руками: нельзя, чтобы меню стало открываться с задержкой или перестало работать.
Присмотритесь и к шрифтам. Несколько гарнитур с множеством начертаний — это дополнительные файлы. Небольшому блогу часто хватает одного основного шрифта и одного для акцентов; неиспользуемые начертания можно убрать. Пока выбранный шрифт загружается, текст покажет резервный системный. Проверьте только, не меняется ли при переключении резко длина строк: перестройка абзацев тоже сбивает с чтения.
Видео, формы и сторонние блоки
Встроенное видео способно загружать служебные файлы ещё до того, как человек дочитает первый абзац. Если ролик не нужен сразу, покажите обложку с кнопкой запуска, а остальное загрузите после нажатия. Так же можно поступить с другими необязательными встроенными блоками. При этом по обложке должно быть понятно, что это видео, а кнопка должна работать и с клавиатуры.
Не удаляйте полезные функции только ради баллов в тесте. Поиск, удобное меню и комментарии могут быть важнее нескольких сэкономленных миллисекунд. Лучше для каждого элемента решить: нужен ли он при открытии статьи или без ущерба для читателя появится позже?
Кеширование и сервер: когда файлы уже подготовлены
Кеширование помогает не собирать одну и ту же страницу при каждом запросе. А файлы, которые браузер сохранил, не приходится скачивать снова при следующем посещении — например, когда читатель переходит от одной семейной истории к другой. Изображения, стили и скрипты обычно можно хранить в кеше дольше, если после обновления им назначается новая версия. Для страниц с меняющимся содержимым правила нужно подбирать осторожнее.
Если фотографии уже уменьшены, первый экран разгружен, а сайт всё равно долго не отвечает, проверьте время ответа сервера. Возможные причины — перегруженный хостинг, тяжёлая тема, множество дополнений или операции с базой данных. Меняйте по одной настройке за раз и оставляйте возможность отката. Если отключить сразу несколько дополнений, потом трудно понять, из-за чего исчезла задержка или перестали работать форма и комментарии.
Сеть доставки контента бывает полезна, когда читатели живут далеко от сервера, а на сайте много статических файлов. Но маленькому блогу она не заменит подготовку фотографий и не исправит тяжёлый код страницы. Начните с самой записи и её оформления.
Как понять, что стало лучше
После каждого изменения снова откройте те же страницы. Смотрите не только на оценку инструмента: когда появляется первый абзац, сдвигается ли текст при прокрутке, отвечают ли кнопки на касание. Хороший результат легко заметить и без цифр: читать можно раньше, снимки занимают отведённое им место, а при переходе к следующей записи не приходится ждать перед пустым экраном.
Заведите короткий журнал: дата, страница, что изменили и что увидели. Например: «Уменьшили фотографию в начале статьи, указали размеры; заголовок и первый абзац больше не сдвигаются». Если после обновления темы проблема вернётся, будет проще вспомнить, с какой настройки начать проверку.
Для начала хватит одной записи с крупной фотографией. Откройте её на телефоне в приватном окне и первые секунды не прокручивайте: остаётся ли первый абзац на месте, когда появляется снимок? Если нет, проверьте, заданы ли у изображения размеры.