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

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

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

Почему сайт загружается медленно: диагностика и поиск узких мест

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

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

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

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

Основные причины медленной загрузки сайта

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

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

  • Тяжёлые изображения. Фотографии с избыточным разрешением и без эффективного сжатия увеличивают объём загрузки. Особенно ощутимо такая проблема влияет на страницы интернет-магазинов с большим количеством карточек товаров.

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

  • Ресурсы, блокирующие отображение. Подключение таблиц CSS и некоторых JavaScript-файлов в начале HTML-документа может задержать появление контента на экране.

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

  • Сторонние сервисы. Онлайн-чаты, рекламные пиксели, карты и внешние виджеты добавляют сетевые запросы и JavaScript-код. Их влияние зависит от способа подключения и объёма вычислений.

Как определить, что именно тормозит сайт

Для подробной диагностики откройте проблемную страницу в Google Chrome, нажмите F12 и перейдите во вкладку Network в инструментах разработчика. Активируйте Disable cache, затем перезагрузите страницу при открытой панели. Браузер покажет последовательность запросов, размер передаваемых файлов и время получения каждого ресурса. Отключение кэша поможет изучить загрузку без повторного использования ресурсов из браузерного кэша.

Особое внимание уделите диаграмме Waterfall. По горизонтальным полосам можно определить, когда браузер отправил запрос, сколько времени ожидал ответ и как долго загружал файл. Если начальный HTML-документ долго ожидает первый байт, проверьте серверную часть. Если основную задержку создают изображения, изучите их размеры и порядок загрузки. Большое количество последовательно загружаемых ресурсов может указывать на зависимость одних запросов от других.

Для сопоставления симптомов и возможных причин используйте таблицу:

Признак проблемы

Возможная причина

Что проверить

Страница долго остаётся пустой

Медленный ответ сервера или блокирующие отображение ресурсы

TTFB, время загрузки HTML, CSS и JavaScript

Текст появился, но крупное изображение загружается позже

Большой размер файла, позднее обнаружение ресурса или низкий приоритет загрузки

Размер изображения, цепочку запросов, приоритет ресурса

Кнопки и меню реагируют с задержкой

Длительные задачи JavaScript в основном потоке

Вкладку Performance, обработчики событий и длительные задачи

Повторное посещение почти не ускоряет загрузку

Неэффективная настройка браузерного или серверного кэширования

Заголовки Cache-Control, повторные запросы и использование кэша

Страницы каталога открываются медленнее обычных информационных страниц

Сложная серверная генерация, запросы к базе данных или большой объём ресурсов

Время ответа HTML, SQL-запросы, серверные логи и сетевую активность


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

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

Закажите технический аудит в Rookee

Заказать

Как измерить скорость загрузки: метрики и инструменты

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

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

Core Web Vitals: LCP, INP, CLS — что важно для Google

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

Метрика

Что измеряет

Хороший результат

LCP

Время появления самого крупного элемента контента в видимой области

До 2,5 секунды

INP

Задержку реакции интерфейса на действия пользователя

До 200 мс

CLS

Неожиданные смещения элементов страницы

До 0,1


LCP (Largest Contentful Paint) помогает обнаружить задержку загрузки основного содержимого. Например, если фотография товара появляется через четыре секунды после открытия карточки, проверьте размер изображения, приоритет его загрузки и время ответа сервера.

INP (Interaction to Next Paint) показывает, насколько быстро интерфейс реагирует на нажатия, касания и ввод с клавиатуры. Если после выбора фильтра каталог долго не обновляет содержимое, изучите обработчики событий и выполнение JavaScript. При этом INP оценивает задержку до следующего визуального обновления, а полное получение результатов фильтрации может занять дополнительное время.

CLS (Cumulative Layout Shift) помогает найти неожиданные изменения расположения элементов. Например, рекламный блок без заранее заданной высоты может сдвинуть текст и кнопки после загрузки страницы. Чтобы устранить проблему, задайте размеры изображений и зарезервируйте место для динамических элементов.

При оценке Core Web Vitals Google ориентируется на 75-й процентиль результатов реальных посещений. Для хорошей оценки значения LCP, INP и CLS должны соответствовать установленным порогам.

Сервисы для проверки скорости: PageSpeed Insights, Lighthouse, GTmetrix

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

  • PageSpeed Insights. Откройте pagespeed.web.dev, введите адрес страницы и запустите анализ. Сервис покажет лабораторные результаты Lighthouse и, при наличии достаточной статистики, данные реальных пользователей Chrome за последние 28 дней. Отдельные отчёты доступны для мобильных устройств и компьютеров.

  • Lighthouse. Запустите аудит через инструменты разработчика Chrome или Edge. Изучите время появления контента, блокирующие ресурсы, нагрузку JavaScript и рекомендации по оптимизации.

  • GTmetrix. Проверьте сайт на gtmetrix.com. Изучите диаграмму Waterfall, чтобы определить продолжительность сетевых запросов, размер загружаемых файлов и последовательность получения ресурсов.

Для проверки в разных браузерах используйте встроенные инструменты разработчика. В Chrome и Edge откройте вкладки Network и Performance, в Firefox воспользуйтесь Network Monitor и Performance, а в Safari откройте Web Inspector. Сравните время загрузки ресурсов, выполнение скриптов и поведение интерфейса.

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

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

Оптимизация изображений и медиа

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

Современные форматы: WebP и AVIF

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

Формат

Особенности

Где использовать

WebP

Поддерживает сжатие с потерями и без потерь, прозрачность и анимацию

Фотографии товаров, баннеры, иллюстрации

AVIF

Поддерживает высокоэффективное сжатие, прозрачность и HDR

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

SVG

Сохраняет чёткость векторной графики при масштабировании

Иконки, логотипы и простые графические элементы

JPEG и PNG

Широкая совместимость; PNG поддерживает сжатие без потерь и прозрачность

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


Современные версии Chrome, Firefox, Safari и Edge поддерживают WebP и AVIF. Для совместимости с браузерами, которые не распознают нужный формат, можно использовать элемент picture. Браузер самостоятельно выберет первый подходящий источник из предложенных. 

< picture>
  < source srcset="product.avif" type="image/avif">
  < source srcset="product.webp" type="image/webp">
  < img src="product.jpg" width="800" height="600" alt="Фотография товара">
< /picture>

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

Ленивая загрузка (lazy load) и адаптивные изображения

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

Для включения встроенной ленивой загрузки добавьте к тегу img атрибут loading="lazy": 

< img src="product.webp" loading="lazy" width="400" height="300" alt="Товар в каталоге">

Не применяйте lazy loading к основному изображению первого экрана, особенно если браузер использует его для расчёта LCP. Отложенная загрузка может задержать появление такого элемента. Для приоритетного изображения допустимо указать fetchpriority="high", но только после проверки, действительно ли ресурс влияет на скорость отображения основного содержимого.

Адаптивные изображения помогают передавать файлы подходящего разрешения для конкретного экрана. Атрибут srcset содержит варианты изображения, а sizes сообщает браузеру предполагаемую ширину его отображения. На основании этих данных, плотности пикселей и других условий браузер выбирает подходящий файл. 

< img
  src="photo-800.webp"
  srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1200.webp 1200w"
  sizes="(max-width: 600px) 100vw, 600px"
  width="1200"
  height="800"
  alt="Фотография товара">

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

Атрибуты width и height помогают браузеру заранее рассчитать пропорции изображения и зарезервировать место на странице. Добавляйте их даже для фотографий с ленивой загрузкой, чтобы после появления файла соседние элементы не смещались.

Для видеороликов, которые пользователь запускает самостоятельно, можно ограничить предварительную загрузку. Атрибут preload="none" сообщает браузеру, что видеоданные не нужно скачивать заранее, а poster задаёт изображение-заставку. 

< video controls preload="none" poster="preview.webp" width="800" height="450">
  < source src="video.webm" type="video/webm">
  < source src="video.mp4" type="video/mp4">
< /video>

После оптимизации проверьте страницу на смартфоне и компьютере. Сравните объём передаваемых данных в Network, убедитесь, что изображения первого экрана загружаются без задержек, а фотографии ниже по странице появляются при прокрутке. Дополнительно проверьте качество изображений и корректность отображения в Chrome, Firefox, Safari и Edge.

Ускорение на уровне сервера и инфраструктуры

Сервер влияет на скорость получения HTML-документа и остальных ресурсов страницы. Если браузер долго ожидает ответ, проверьте TTFB (Time to First Byte). Показатель включает сетевую задержку и время обработки запроса. Для ускорения сайта необходимо определить, какая часть задержки связана с хостингом, серверным приложением или передачей данных.

Хостинг, CDN и HTTP/2–HTTP/3

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

Для сайтов с посетителями из разных регионов рассмотрите подключение CDN. Сеть доставки контента хранит копии статических файлов на распределённых серверах, сокращая расстояние передачи данных. Например, фотографии товаров, CSS и JavaScript можно отдавать через CDN, а динамические страницы продолжать получать с основного сервера.

При настройке CDN проверьте три параметра:

  • Cache Hit Ratio, долю запросов, которые CDN обслуживает из кэша;

  • правила очистки кэша после обновления файлов и страниц;

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

Проверьте также поддержку HTTP/2 и HTTP/3. Оба протокола передают несколько потоков данных в рамках одного соединения. HTTP/3 использует QUIC и может сократить влияние потерь сетевых пакетов на параллельные потоки. В Chrome и Edge версию соединения можно посмотреть в Network, добавив столбец Protocol. Значения h2 и h3 соответствуют HTTP/2 и HTTP/3.

Кэширование: браузерное и серверное

Браузерный кэш сокращает повторную загрузку CSS, JavaScript, шрифтов и изображений. Срок хранения регулирует заголовок Cache-Control. Для статических ресурсов с версионированием URL можно использовать следующую настройку:

Cache-Control: public, max-age=31536000, immutable

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

Для HTML с регулярно обновляемым содержимым можно установить Cache-Control: no-cache. Браузер сможет сохранить страницу, но перед повторным использованием должен проверить её актуальность. Для персональных ответов дополнительно учитывайте директиву private, а при необходимости полностью запретить хранение используйте no-store.

Серверный кэш сокращает время генерации HTML и количество обращений к базе данных. Для WordPress можно настроить страничное кэширование через LiteSpeed Cache при использовании LiteSpeed Server либо через совместимые решения для других веб-серверов. Redis помогает ускорить повторные обращения к данным через объектный кэш.

Проверяйте кэширование в Network по заголовкам ответа и времени повторной загрузки. Если используете CDN, изучите также заголовки, которые показывают попадание запроса в кэш. Их названия зависят от провайдера.

Сжатие файлов: Gzip и Brotli

Gzip и Brotli уменьшают размер HTML, CSS, JavaScript и других текстовых ресурсов при передаче. Brotli нередко достигает более высокой степени сжатия, чем Gzip, особенно при подходящих настройках кодирования. Для статических файлов можно заранее подготовить сжатые версии.

В Nginx базовая настройка Gzip может выглядеть следующим образом: 

gzip on;
gzip_vary on;
gzip_min_length 1024;
gzip_comp_level 5;
gzip_types text/css application/javascript application/json application/xml image/svg+xml;

Сжатие Brotli в Nginx зависит от наличия соответствующего модуля. Если модуль установлен и поддерживается текущей конфигурацией, можно настроить сжатие следующим образом: 

brotli on;
brotli_comp_level 5;
brotli_types text/plain text/css application/javascript application/json application/xml image/svg+xml;

Параметры конфигурации необходимо проверить перед применением. Для Gzip Nginx обрабатывает text/html по умолчанию, а для Brotli поддержка и набор директив зависят от установленного модуля.

Убедитесь, что сервер действительно передаёт сжатые файлы. В Network откройте заголовки ответа и проверьте Content-Encoding. Значение gzip подтверждает использование Gzip, а br указывает на Brotli. Для корректной работы промежуточных кэшей проверьте наличие Vary: Accept-Encoding.

JPEG, WebP, AVIF и видеофайлы обычно не нуждаются в дополнительном HTTP-сжатии, поскольку уже используют собственные алгоритмы кодирования. Для них эффективнее уменьшить разрешение или изменить настройки сжатия при подготовке файлов.


Оптимизация кода и ресурсов страницы

Избыточный CSS и JavaScript увеличивают объём загрузки и расходуют ресурсы процессора. Особенно заметны задержки на мобильных устройствах, где браузер тратит дополнительное время на обработку скриптов и построение страницы. Ускорить сайт помогают удаление неиспользуемого кода, минификация файлов и изменение порядка загрузки ресурсов.

Минификация CSS, JavaScript и HTML

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

/* До минификации */
.product-card {
    margin: 0px;
    padding: 20px;
    color: #ffffff;
}

/* После минификации */
.product-card{margin:0;padding:20px;color:#fff}

Для минификации CSS используют cssnano или Lightning CSS, для JavaScript подходят Terser и esbuild, а для HTML можно применить html-minifier-terser. В проектах на React, Vue и других современных фреймворках минификацию обычно настраивают через инструменты сборки.

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

Откройте DevTools, вызовите командное меню через Ctrl+Shift+P и выберите Show Coverage. Запустите запись, обновите страницу и изучите долю неиспользуемого CSS и JavaScript. Затем проверьте дополнительные состояния интерфейса, включая меню, модальные окна и вкладки, поскольку код для скрытых компонентов может понадобиться после взаимодействия пользователя.

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

Отложенная загрузка скриптов и приоритизация критического CSS

Обычный внешний JavaScript-файл без специальных атрибутов может остановить разбор HTML до завершения загрузки и выполнения скрипта. Для изменения порядка обработки используют defer и async.

Способ

Поведение браузера

Применение

defer

Загружает внешний скрипт параллельно с разбором HTML и выполняет после завершения разбора документа с сохранением порядка таких скриптов

Основные скрипты интерфейса, которым необходим готовый DOM

async

Загружает скрипт параллельно и выполняет сразу после получения, без гарантии порядка выполнения

Независимые скрипты, которым не нужен определённый порядок выполнения

type="module"

По умолчанию откладывает выполнение до завершения разбора HTML

Модульный JavaScript


Например, если скрипт управления каталогом обращается к HTML-элементам страницы, подключите его через defer. Для независимого внешнего скрипта можно использовать async, предварительно проверив зависимости. 

< script src="/js/catalog.js" defer>< /script>
< script src="/js/analytics.js" async>< /script>

Атрибуты defer и async не сокращают время выполнения JavaScript. Если скрипт надолго занимает основной поток браузера, необходимо уменьшить объём вычислений или разделить тяжёлые операции на более короткие задачи.

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

const button = document.querySelector('#open-gallery');

button.addEventListener('click', async () => {
  const { openGallery } = await import('./gallery.js');
  openGallery();
}, { once: true });

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

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

Критический CSS (Critical CSS) включает правила оформления элементов, которые пользователь видит сразу после открытия страницы. Небольшой объём таких стилей можно разместить непосредственно в head HTML-документа: 

< head>
  < style>
    body{margin:0;font-family:Arial,sans-serif}
    .header{min-height:70px}
    .hero{padding:40px 20px}
    .hero h1{font-size:36px}
  < /style>
< /head>

Остальные стили можно загрузить отдельно, если они не нужны для первоначального отображения. Например, CSS для печати достаточно подключить с атрибутом media="print". Для некритичных экранных стилей допустима асинхронная загрузка с последующим применением, но предварительно проверьте страницу на появление элементов без оформления и резкие изменения макета.

Избегайте длинных цепочек CSS-импортов через @import, если файлы можно подключить непосредственно из HTML. Браузер обнаруживает ресурсы из link раньше, чем стили, ссылки на которые находятся внутри ещё не загруженной таблицы CSS.

После оптимизации сравните размер CSS и JavaScript в Network, проверьте выполнение скриптов во вкладке Performance и повторно измерьте LCP и INP. Отдельно протестируйте меню, формы, фильтры и другие интерактивные элементы в Chrome, Firefox, Safari и Edge. Изменение порядка загрузки ресурсов не должно нарушать работу сайта.

Провести техническую оптимизацию сайта

Провести

Заключение

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

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

(Голосов: 2, Рейтинг: 5)