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