Лучшие способы ускорить сайт

Сначала измерить

без этого шага вы ускоряете не то, что тормозит

Инструменты разработчика в браузере показывают водопад загрузки: что запрашивается, в каком порядке, сколько весит и что кого ждёт. Обычно уже здесь видно виновника — одна картинка на несколько мегабайт, сторонний скрипт, который блокирует отрисовку, или ответ сервера, приходящий через пару секунд.

Замер в лаборатории и в поле — разные вещи. Синтетический прогон удобен: он повторяем и показывает подробности. Но он говорит только о том, как страница ведёт себя на конкретной машине. Данные от реальных пользователей показывают, что происходит на самом деле, и почти всегда картина там хуже.

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

Проверяйте на медленном. В инструментах разработчика есть замедление процессора и сети. Открыть свой сайт в таком режиме — самое отрезвляющее упражнение из возможных.

• Показывает настоящее узкое место за десять минут
• Не требует ничего менять в коде
• Даёт точку отсчёта, чтобы потом доказать улучшение

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

первый шаг · оценка 9,5

Картинки

самая тяжёлая часть страницы и самая простая для исправления

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

Отдавайте нужный размер. Несколько вариантов одной картинки под разные экраны — и телефон получает маленький файл вместо огромного. Это самая скучная и самая результативная часть работы.

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

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

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

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

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

быстрый выигрыш · оценка 9,4

Меньше JavaScript

килобайт скрипта дороже килобайта картинки

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

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

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

Сторонние скрипты — отдельная боль. Счётчики, чаты поддержки, виджеты соцсетей и рекламные вставки живут на чужих серверах, тормозят непредсказуемо и не подчиняются вам. Каждый такой скрипт должен быть подключён отложенно и иметь ответ на вопрос «что случится с сайтом, если этот домен сегодня недоступен».

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

• Выкидывание зависимостей — это уже рефакторинг с риском регрессий
• Сторонние скрипты обычно требует не разработчик, и убрать их сложно
• Слишком мелкое дробление даёт много запросов и свои задержки

большой выигрыш · оценка 9,3

Кеширование на всех уровнях

самый быстрый запрос — тот, которого не было

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

Страницы. Здесь срок короткий или условный: браузер спрашивает у сервера, изменилось ли что-то, и получает короткий ответ «нет», если не изменилось. Это дешевле, чем перекачивать страницу целиком.

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

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

• Повторные визиты становятся почти мгновенными
• Снимает нагрузку с сервера и базы
• Настраивается один раз на уровне сервера

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

важно · оценка 9,2

Серверная часть и база

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

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

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

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

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

• Ускоряет вообще всё сразу, включая отдачу страниц
• Часто одна найденная проблема даёт основной эффект
• Виден результат в объективных метриках, а не в баллах

• Требует навыков работы с базой и профилирования
• Изменения затрагивают логику и требуют тестов
• Фоновые задачи — ещё один компонент, который надо обслуживать

основа · оценка 9,1

Сжатие, протокол и соединения

почти бесплатные улучшения на уровне настройки сервера

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

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

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

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

• Выигрыш заметно меньше, чем от картинок и скриптов
• Максимальное сжатие на лету нагружает процессор
• Часть настроек зависит от хостинга, и не везде до них есть доступ

дёшево · оценка 9,0

Шрифты

маленькая тема с непропорционально заметным эффектом

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

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

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

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

• Текст появляется сразу, а не после загрузки шрифта
• Подмножество символов сокращает вес в разы
• Правится за один вечер и больше не возвращается

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

мелочь с эффектом · оценка 8,8