Как ускорить сайт и что из этого дает результат

Кто-то прогнал сайт через сервис проверки скорости, получил число в районе сорока, и теперь это число надо поднять. Разработчика просят, работа делается, число растет, а посетители ничего не замечают.

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

Почему оценка в баллах ничего не гарантирует

Оценку рассчитывают как взвешенное среднее нескольких замеров на смоделированном устройстве и смоделированном соединении.

Из этого следует две вещи. Первая: одна и та же страница, проверенная дважды, дает разные оценки, иногда на десяток баллов, потому что моделирование зависит от того, чем еще занят сервер, на котором идет проверка. Гнаться за разницей в три балла значит гнаться за шумом.

Вторая: веса в этой формуле отражают чье-то представление о том, что важно. Страница может улучшиться по тому замеру, который человек действительно чувствует, а оценка при этом упадет, потому что другая составляющая среднего сдвинулась в обратную сторону.

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

Метрики, которые показывают, что чувствует посетитель

Сколько ждут до первой картинки

Замер, ближе всего соответствующий ощущению ожидания, это время до появления самого крупного видимого элемента на экране.

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

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

Почему страница прыгает под пальцем

Второй замер считает, насколько содержимое двигается после того, как впервые появилось.

Посетитель начинает читать, картинка догружается выше текста и толкает его вниз, или появляется блок и абзац подпрыгивает. На телефоне это особенно раздражает, потому что кнопка уезжает, пока палец опускается, и нажатие приходится не туда.

Причины почти всегда одни и те же: изображения без заданных размеров, подгружаемые шрифты, реклама и виджеты, которые появляются после основного содержимого. Проставить размеры это одна из самых дешевых правок и одна из самых заметных.

Задержка ответа на касание

Третий замер показывает, сколько страница думает, прежде чем отреагировать на действие.

Посетитель нажимает на меню, и полсекунды ничего не происходит, потому что браузер занят выполнением скриптов и ответить не может. Страница выглядит готовой и ведет себя как зависшая, что хуже, чем выглядеть незаконченной.

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

Время ответа сервера отдельно от остального

До всего перечисленного есть промежуток между запросом и первым байтом ответа.

Этот промежуток целиком серверный, и ничто из сделанного в браузере на него не влияет. Если он большой, все последующее стартует поздно, и никакая оптимизация картинок этого не компенсирует. Когда причина в самом сервере, его настройкой и обслуживанием занимаемся в рамках администрирования серверов.

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

Что реально дает результат

Список короче списка доступных оптимизаций, и порядок в нем имеет значение.

• Кеширование готовых страниц. Самый большой выигрыш на большинстве сайтов.
• Картинки в современных форматах и нужного размера. Обычно самое тяжелое на странице.
• Отложенная загрузка того, что ниже экрана. Не грузится то, чего не видят.
• Удаление неиспользуемого кода. Стили и скрипты, которые никому не нужны.
• Удаление чужих скриптов. Каждый это чужой сервер.
• Указание размеров элементов. Убирает прыжки от картинок и блоков без размеров.

Первые два вместе дают большую часть улучшения на типичном сайте, и оба пункта относятся к обычной работе, без сложной разработки.

Картинки заслуживают отдельного внимания. У большинства сайтов, которые плохо проходят проверку, главная проблема это фотографии, залитые в исходном разрешении и показанные в разы меньше, так что посетитель скачивает во много раз больше данных, чем видит. Починка этого по всему каталогу механическая работа с большим и немедленным эффектом.

Что работает слабо или не работает

Несколько популярных оптимизаций стоит знать в основном для того, чтобы не тратить на них время.

• Склейка всех файлов в один. Имело значение годы назад, сейчас редко.
• Удаление пробелов из кода. Бесплатно и почти ничего не дает.
• Встраивание стилей первого экрана. Выигрыш плюс постоянная работа по поддержке.
• Предзагрузка всего подряд. Задерживает то, что было важным.
• Отключение аналитики ради баллов. Обмен данных на число.
• Установка плагина-ускорителя. Поднимает число в тесте и ломает то, что работало.

Склейка стилей и скриптов в один файл была важна во времена, когда соединения плохо работали с параллельными запросами. Сейчас на части сайтов она только вредит, потому что браузеру приходится загрузить все, прежде чем отрисуется хоть что-то.

Встраивание стилей первого экрана дает измеримый выигрыш на некоторых сайтах и создает проблему поддержки на всех, потому что эти встроенные стили надо пересобирать при каждом изменении дизайна. На сайте, который часто правят, это обычно не оправдывает постоянных издержек.

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

Опаснее всего плагины, которые обещают ускорение одной кнопкой. Они агрессивно откладывают загрузку скриптов и стилей, число в тесте растет, а часть сайта перестает работать, и замечают это не сразу.

С чего начинать проверку

Такой порядок проверки быстрее всего выявляет крупные проблемы.

• Сначала измерьте время ответа сервера. Если сервер отвечает медленно, начинайте с него.
• Посмотрите общий вес страницы. И какие файлы самые тяжелые.
• Посчитайте чужие скрипты. Аналитика, чат, пиксели, шрифты.
• Проверьте на телефоне через мобильный интернет. Не через офисный Wi-Fi.
• Сравните две-три страницы. Главная не показательна.

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

Пятый важен, потому что главная обычно самая оптимизированная страница на любом сайте. Мерить стоит те страницы, которые получают поисковый трафик, и они нередко заметно хуже.

Лабораторные данные против полевых

Есть два вида измерения скорости, и отвечают они на разные вопросы.

Лабораторные это тест, запущенный по требованию в контролируемых условиях. Он повторяем, доступен сразу и говорит, что страница делает на конкретном смоделированном устройстве.

Полевые собираются с реальных пользователей Chrome за последние недели. Они отражают настоящие устройства, настоящие соединения и настоящие места, поэтому показывают то, что реально видят посетители. Но есть они только у сайтов с достаточным трафиком, и если в отчете их нет, ориентируйтесь на лабораторный тест на мобильном профиле.

Когда они расходятся, права полевая. Страница, хорошо проходящая тест и плохо выглядящая в полевых данных, быстрая на мощном компьютере и медленная на тех телефонах, которые держат в руках ваши клиенты.

Практическое следствие в том, что после изменений результат теста обновляется сразу, а полевые данные через недели. Судить о починке по полевым данным значит ждать, а судить только по тесту значит, возможно, не улучшить ничего.

Нормы, на которые стоит ориентироваться

Разумные цели ставят по отдельным замерам, для них есть опубликованные пороги.

Самый крупный элемент на экране должен появляться примерно за две с половиной секунды, смещение макета после появления оставаться в пределах 0,1, а ответ на нажатие укладываться в 200 миллисекунд.

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

Мобильная и десктопная оценка расходятся всегда

Разрыв между ними нормален и велик, и владельцев он удивляет каждый раз.

Мобильный тест моделирует средний телефон на мобильном соединении, настольный моделирует быструю машину на быстром канале. Одна и та же страница регулярно получает под девяносто в одном и около пятидесяти в другом, и ни одно из чисел не является ошибочным.

Какая из двух оценок важнее, покажет ваша статистика. У большинства бизнесов большая часть посетителей на телефонах, и мобильная цифра поэтому и есть та, которая описывает бизнес.

Чужие скрипты и сколько они стоят

Каждый скрипт с чужого сервера это зависимость, и у большинства сайтов их накопилось несколько.

Аналитика, виджет чата, рекламный пиксель, внешний шрифт, виджет отзывов, карта. Каждый это запрос к серверу, которым вы не управляете, и если сегодня этот сервер медленный, ваша страница сегодня медленная.

Прежде чем решить, что оставить, посмотрите, сколько обычно стоит каждый тип.

• Аналитика. Небольшая, и обычно ее стоит оставить.
• Рекламный пиксель. По отдельности небольшой, и они накапливаются.
• Внешние шрифты. Заметные, и легко размещаются у себя.
• Карта. Тяжелая, и нужна только на странице контактов.
• Виджет чата. Часто самый тяжелый из чужих скриптов.
• Виджет отзывов. Тяжелый и часто грузится на всех страницах.

Ревизию стоит делать раз в год. Перечислить все внешние скрипты, выяснить, кто их добавил и зачем, и убрать те, у которых причина уже исчезла. На сайте, работающем несколько лет, половина списка обычно бесхозная.

Что из этих цифр можно исправить быстро

Часть работ тянет на отдельный проект, часть делается за вечер, и начинать стоит с тех, что за вечер.

Включить кеширование страниц, сжать и уменьшить уже загруженные картинки, проставить размеры изображениям, отложить загрузку того, что ниже экрана, и убрать мертвые чужие скрипты это короткие задачи с видимым эффектом. Такая работа считается по часам, $25/час, и на типичном сайте занимает день или два.

Не быстро чинится тяжелый шаблон, база, накопившая годы записей, или сайт на тридцати расширениях, треть из которых делает одно и то же дважды. Это структурные проблемы, они разобраны в статье о том, почему сайт медленно загружается, а как определить, к какой категории относится ваш случай, описано в материале про аудит сайта.

Удержать результат отдельная задача, потому что скорость деградирует по мере накопления содержимого и расширений. Следить за этим входит в задачи поддержки и развития проектов, и без такого наблюдения сайт, оптимизированный весной, к следующему году возвращается туда, откуда начинал. Что вообще входит в регулярную заботу, описано в статье про поддержку сайта.

Когда гнаться за сотней не стоит

Есть точка, после которой дальнейшая работа стоит больше, чем возвращает.

Пройти путь от плохой оценки до приличной дешево, и посетитель это чувствует. Пройти от приличной до идеальной обычно означает убрать функциональность, которую бизнес выбрал осознанно, вроде аналитики, чата или карты, а убирать их или нет, решает бизнес.

Интернет-магазин, убравший виджет чата ради восьми баллов и потерявший разговоры, которые этот виджет приносил, гнался не за той цифрой.

Вся проверка сводится к одному вопросу: чувствует ли изменение посетитель с телефона. Если да, делайте. Если оно двигает только оценку, это украшение.

Выводы

Работать над скоростью стоит по отдельным показателям, а не по общей оценке, и важны три замера: как быстро появляется главный элемент, не сдвигается ли после этого страница и как быстро она реагирует на касание.

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

Если ваш сайт плохо проходит проверку и вы не понимаете, к какой категории относится проблема, пришлите адрес. Мы измерим время ответа сервера отдельно от самой страницы, скажем, идет ли речь о дне работы или о структурной проблеме, и назовем те два-три изменения, которые почувствует посетитель, а не только тест.