Как ускорить загрузку сайта

Три секунды. Столько в среднем готов ждать посетитель, прежде чем закроет вкладку и уйдёт к конкуренту. А поисковик это запомнит. Скорость влияет и на позиции, и на продажи — медленный сайт теряет и то, и другое одновременно. Хорошая новость: чаще всего тормозит он по двум-трём простым причинам, и их реально устранить самому.

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

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

Сожмите картинки — это №1

В девяти случаях из десяти главный тормоз — изображения. Фотографию с телефона весом в 4 МБ браузер тащит дольше, чем весь остальной сайт. Что делать? Уменьшайте размер до реального (не нужна картинка 4000 пикселей в блоке шириной 600), сжимайте через TinyPNG или Squoosh, переводите в современный формат WebP. Одно это часто ускоряет страницу вдвое. А для мгновенной загрузки на мобильных Яндекс предлагает ускоренные Турбо-страницы (аналог AMP).

Уберите лишние скрипты

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

Включите кэш и сжатие

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

Проверьте хостинг

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

Core Web Vitals: метрики Google

У Google есть три формальных показателя скорости и удобства — Core Web Vitals. По ним он оценивает реальный опыт посетителей:

LCP отвечает за то, как быстро прорисовывается главный контент, INP — за отзывчивость на действия, CLS — за то, не «прыгает» ли вёрстка во время загрузки. Подробный разбор каждой метрики — в статье про Core Web Vitals.

Картинки глубже: WebP, размеры и ленивая загрузка

Раз картинки — главный тормоз, разберём их детальнее. Три приёма решают почти всё. Современный формат WebP весит на 25–35% меньше привычных JPEG и PNG при том же качестве. Адаптивные размеры (атрибут srcset) отдают телефону маленькую версию, а большому экрану — крупную, вместо одной тяжёлой на всех. А ленивая загрузка (lazy load) подгружает картинки только когда пользователь до них доскроллил, а не все сразу. Подробнее — в статьях про сжатие изображений и ленивую загрузку.

Шрифты и критический CSS

Два менее очевидных тормоза. Веб-шрифты: пока браузер качает красивый шрифт, текст может быть невидим или «прыгать». Лечится свойством font-display: swap и подгрузкой только нужных начертаний. Критический CSS: браузер не покажет страницу, пока не загрузит все стили, поэтому самое важное — то, что видно на первом экране, — выносят в маленький блок и встраивают прямо в HTML, а остальное грузят следом. Звучит технически, но эффект на скорость первой отрисовки заметный. Детали — в статьях про веб-шрифты и критический CSS.

CDN: быстро во всех регионах

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

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