Разговор про скорость сайта обычно ведут в общих категориях: кэш, сжатие, хостинг. Это правильно, но на практике страницу тормозят конкретные файлы, и у каждого типа свои причины и свои методы лечения. Я в SEO с 2005 года и свожу работу над скоростью к простой процедуре: разложить страницу по типам ресурсов, посмотреть, кто сколько весит и сколько занимает времени, и работать по списку сверху вниз. Ниже — разбор по типам: изображения, шрифты, скрипты, стили и сторонние виджеты.
Начните с весовой раскладки
Прежде чем что-то оптимизировать, нужно знать структуру веса. Откройте инструменты разработчика, вкладку сетевых запросов, обновите страницу с очищенным кэшем и отсортируйте по размеру. Дальше сгруппируйте по типам. Типичная картина для сайта услуг выглядит примерно так.
| Тип ресурса | Доля веса страницы | Главная проблема |
|---|---|---|
| Изображения | 50–70 процентов | Отдаются в исходном размере и старом формате |
| Скрипты | 15–30 процентов | Блокируют поток и грузят процессор телефона |
| Шрифты | 3–10 процентов | Задерживают появление текста |
| Стили | 2–8 процентов | Блокируют первую отрисовку |
| HTML-документ | 1–3 процента | Обычно не проблема |
Обратите внимание на важную деталь: вес и время не одно и то же. Картинка на 400 килобайт весит много, но грузится параллельно и не мешает остальному. Скрипт на 80 килобайт может задержать отрисовку на секунду, потому что браузер обязан его выполнить. Поэтому смотреть надо оба столбца — размер и время блокировки.
Изображения: самый тяжёлый и самый благодарный ресурс
Здесь лежит основной резерв почти на любом сайте. Три типовые ошибки: картинка загружается в исходном размере с фотоаппарата, отдаётся в устаревшем формате, и все изображения страницы грузятся сразу, включая те, что находятся на пятом экране.
| Что делать | Типичный выигрыш | Сложность |
|---|---|---|
| Привести к реальному размеру отображения | В несколько раз | Низкая |
| Перевести в современный формат | 25–40 процентов сверху | Средняя |
| Отложенная загрузка ниже первого экрана | Резко сокращает стартовый вес | Низкая |
| Задать ширину и высоту в разметке | Убирает скачки вёрстки | Низкая |
| Разные размеры под разные экраны | До половины веса на мобильных | Средняя |
| Заменить декоративные картинки на CSS | Полное исключение запроса | Средняя |
Практическое правило: изображение не должно быть шире, чем место, которое оно занимает на экране, более чем в два раза. Если баннер отображается в контейнере шириной 800 точек, файл на 2500 точек по ширине — это выброшенные килобайты. Отдельная история — логотипы и иконки: их место в векторном формате, где вес измеряется единицами килобайт независимо от размера.
Ещё один момент, который часто упускают: главная картинка первого экрана не должна быть отложенной. Отложенная загрузка полезна для всего, что ниже, но применённая к верхнему изображению она наоборот замедляет появление содержимого.
Шрифты: маленький вес, заметный эффект
Шрифты редко весят много, но бьют по восприятию сильнее, чем следует из их размера. Браузер сначала скачивает файл, и только потом рисует текст выбранным начертанием. Пока файл едет, пользователь либо видит пустоту, либо видит текст системным шрифтом, который потом прыгает.
Что делать. Оставить минимум начертаний: обычное и полужирное покрывают потребности большинства сайтов, а курсив и восемь градаций толщины подключают «на всякий случай». Каждое лишнее начертание — отдельный файл. Использовать современный формат сжатия шрифтов, он заметно легче старых. Подключать шрифты со своего домена, а не со стороннего сервиса: это убирает лишнее соединение. Обрезать набор символов, оставив кириллицу и латиницу без редких блоков. И обязательно задать поведение отображения так, чтобы текст показывался системным шрифтом сразу, а не после загрузки файла.
Отдельно: если на сайте используется иконочный шрифт ради полутора десятков иконок — это плохая сделка. Замена на векторные изображения убирает целый файл из критического пути.
Скрипты: главный пожиратель процессора
Со скриптами связана самая частая иллюзия. Люди смотрят на вес и говорят: «там всего сто килобайт». Но скрипт нужно не только скачать — его надо разобрать и выполнить. На среднем телефоне выполнение занимает в разы больше времени, чем загрузка. Именно поэтому мобильные оценки скорости почти всегда хуже настольных при одинаковом наборе файлов.
| Приём | Что даёт | Когда применять |
|---|---|---|
| Отложить выполнение до разбора документа | Разблокирует отрисовку | Почти всегда для собственных скриптов |
| Асинхронная загрузка | Не блокирует поток | Для независимых сторонних скриптов |
| Загрузка по взаимодействию | Убирает скрипт со старта совсем | Чаты, карты, тяжёлые слайдеры |
| Удаление неиспользуемых библиотек | Минус десятки килобайт и время разбора | После ревизии кода |
| Разделение кода по страницам | Не грузить скрипт корзины на статье | На сайтах со сложным функционалом |
Первое, с чего стоит начать, — ревизия. Выпишите все подключённые скрипты и напротив каждого честно ответьте, что он делает. На типовом сайте регулярно обнаруживаются: библиотека слайдера, которым пользовались на старой главной; аналитический скрипт от подрядчика, с которым разошлись; вторая копия одной и той же библиотеки, подключённая разными компонентами. Такая ревизия — обязательная часть технического аудита сайта, и она обычно даёт больше, чем любые тонкие настройки.
Стили: блокируют первую отрисовку
Таблицы стилей браузер обязан скачать и разобрать до того, как покажет страницу. Поэтому важен не столько вес, сколько количество файлов и их положение. Три практических шага. Объединить множество мелких файлов в один — каждое отдельное соединение стоит времени. Убрать неиспользуемые правила: на сайтах, где тему меняли или ставили конструктор, доля мёртвого CSS доходит до половины файла. И разделить стили на критические, нужные для первого экрана, и остальные, которые можно подгрузить следом.
Сторонние виджеты: главный источник неконтролируемого веса
Это та часть страницы, где вы не управляете ни весом, ни скоростью ответа. Виджет чата, карта, счётчики, рекламные блоки, форма подписки, виджет отзывов — каждый тянет свои файлы со своих доменов.
| Виджет | Порядок веса | Что делать |
|---|---|---|
| Онлайн-чат | Сотни килобайт | Загружать по клику на собственную кнопку |
| Интерактивная карта | Сотни килобайт плюс тайлы | Показывать статичную картинку, грузить карту по клику |
| Счётчики аналитики | Десятки килобайт каждый | Оставить один-два нужных, остальные убрать |
| Рекламные блоки | Непредсказуемо | Резервировать место, откладывать нижние блоки |
| Видео с внешнего хостинга | Сотни килобайт до начала просмотра | Превью-картинка, плеер по клику |
| Виджеты соцсетей и отзывов | Десятки-сотни килобайт | Заменить статичным блоком со ссылкой |
Общий принцип для всех сторонних виджетов один: заменяйте их лёгкой заглушкой и подгружайте настоящий виджет только по действию пользователя. Кнопка чата, нарисованная своими средствами, весит около нуля и открывает реальный чат по нажатию. Карта заменяется скриншотом с подписью адреса. Видео — картинкой превью. Это самая результативная доработка сайта из всех, что касаются скорости: убираются сразу и вес, и внешние соединения, и работа процессора.
Порядок работ по отдаче
Если делать всё сразу некогда, порядок такой. Сначала изображения — самый большой вес при самой низкой сложности. Затем сторонние виджеты — перевод чата, карт и видео на загрузку по клику. Потом ревизия скриптов и удаление лишнего. Затем шрифты. И в последнюю очередь тонкая работа со стилями. Такой порядок даёт большую часть результата за первые два шага.
Важно измерять после каждого шага, а не после всех сразу. Иначе вы не поймёте, что сработало, а что было сделано зря. И измеряйте на мобильном профиле с медленным соединением — именно так сайт видит большинство посетителей.
Чего делать не стоит
- Гнаться за максимальной оценкой в тестах скорости. Разница между 85 и 95 баллами почти не ощущается человеком, а времени на неё уходит больше, чем на первые 60.
- Ставить несколько плагинов оптимизации одновременно. Они конфликтуют и ломают вёрстку чаще, чем ускоряют.
- Включать отложенную загрузку для изображения первого экрана — это замедляет появление содержимого.
- Сжимать фотографии до состояния, когда видны артефакты. Товар, снятый в кашу, стоит дороже сэкономленных килобайт.
- Оставлять счётчики «на всякий случай». Каждый неиспользуемый — это внешний скрипт на каждой странице.
- Откладывать скрипты, от которых зависит первый экран. Получите пустое место вместо меню или формы.
- Оптимизировать скорость до того, как решены базовые вещи вроде сжатия на сервере и кэширования в браузере.
- Проверять результат только на своём компьютере с быстрым интернетом и прогретым кэшем.
Частые вопросы
С какого типа ресурсов начинать? С изображений почти всегда. Они дают самую большую долю веса и правятся без вмешательства в логику сайта. Второй по отдаче шаг — перевод сторонних виджетов на загрузку по клику.
Сколько должна весить страница? Ориентир для страницы услуг — до полутора мегабайт в первой загрузке, для карточки товара с галереей чуть больше. Но важнее не общий вес, а время до появления основного содержимого на телефоне.
Стоит ли переводить все картинки в новый формат? Да, если есть автоматическая конвертация на стороне сервера или в сборке. Вручную это муторно и легко забыть про новые загрузки. Обязательно оставляйте запасной вариант для старых браузеров.
Не потеряю ли я заявки, если чат грузится по клику? Нет, если кнопка выглядит как настоящая и открывает чат мгновенно. Теряют заявки не из-за отложенного чата, а из-за страницы, которая грузилась восемь секунд и её закрыли.
Можно ли заложить скорость сразу при разработке? Это самый дешёвый путь. При создании сайта достаточно сразу задать правила: форматы и размеры изображений, ограниченный набор шрифтов, запрет на подключение библиотек ради одного эффекта. Переделывать потом дороже в разы.
Чеклист
- Снимите раскладку страницы по типам ресурсов в панели сетевых запросов с очищенным кэшем.
- Найдите три самых тяжёлых файла и разберитесь с каждым отдельно.
- Приведите изображения к реальному размеру отображения и переведите в современный формат.
- Включите отложенную загрузку для всего, что ниже первого экрана, кроме главного изображения.
- Проставьте ширину и высоту изображениям, чтобы убрать скачки вёрстки.
- Сократите набор шрифтовых начертаний до необходимых и подключите их со своего домена.
- Выпишите все подключённые скрипты и удалите те, назначение которых никто не может объяснить.
- Переведите чат, карту и видео на загрузку по действию пользователя.
- Оставьте только те счётчики аналитики, данными которых вы реально пользуетесь.
- Проверьте результат на мобильном профиле с медленным соединением после каждого шага.
Скорость — не одна большая задача, а десяток мелких, разложенных по типам файлов. Как только вы перестаёте искать волшебную настройку и начинаете работать по списку ресурсов, картина становится управляемой: видно, что весит, видно, что тормозит, и видно, сколько даст каждое действие. На большинстве сайтов первые два пункта этого списка — изображения и сторонние виджеты — закрывают основную часть проблемы.
Если нужно заказать SEO-продвижение — помогу вывести сайт в топ Яндекса и удержать позиции.
Увеличьте позиции и продажи вашего сайта
Профессиональное SEO-продвижение с гарантией результата. Выберите подходящую услугу:
Остались вопросы по продвижению?
Меня зовут Анатолий Кузнецов, я SEO-оптимизатор с 20-летним стажем. Разберу ваш сайт, отвечу на вопросы и подскажу, что улучшить для роста позиций в Яндексе и Google.
Связаться со мной →
Старт 
Стандарт 
Премиум 
