Как улучшить производительность сайта в 2025 году

Почему важна производительность сайта? ​

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

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

Что такое хорошая скорость работы сайта? ​

По данным Google, хорошее время загрузки сайта составляет менее 2,5 секунд. Время ожидания до 4 секунд все еще нормально, но Google считает всё, что выше этого значения, плохим.

Мы обнаружили, что в 2025 году веб-сайты обычно загружаются чуть менее чем за 2 секунды.

Как измерить скорость сайта

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

• Тест скорости загрузки страниц DebugBear
• Статистика Google PageSpeed
• Catchpoint WebPageTest

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

Какова лучшая стратегия для повышения производительности сайта? ​

Эффективная оптимизация работы сайта состоит из двух ключевых стратегий:

• Использование автоматизированных инструментов для выявления и тестирования высокоэффективных оптимизаций
• Анализ данных каскада запросов для понимания причин загрузки содержимого при его загрузке

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

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

Рекомендации по повышению производительности сайта

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

Давайте рассмотрим наиболее важные рекомендации по ускорению работы вашего сайта.

1. Оптимизируйте время отклика сервера

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

На низкое время отклика сервера указывает высокое значение метрики Time to First Byte.

Если вы ничего не можете сделать, чтобы ускорить время отклика, рассмотрите возможность использования 103 Ранние Подсказки*, чтобы начать загрузку других важных ресурсов до того, как HTML будет готов.

*Что такое Ранние Подсказки? ​

Когда браузер запрашивает файл с сервера, он отвечает кодом состояния, заголовками и текстом ответа. Если запрос прошел успешно, возвращается код состояния 200 OK. Если сервер не сможет найти файл, он вернет статус 404 Not Found.

Но серверы могут отправлять информационные коды ответа до того, как ответят на запрос напрямую. Эти коды состояния начинаются с цифры один: .1xx

Когда сервер предоставляет браузеру ранние подсказки, это работает путем возврата информационного ответа с кодом состояния 103 вместе с заголовком .Link

Затем заголовок может сообщить браузеру о ресурсах, которые он должен начать загружать, или об источниках, к которым он должен создать серверное соединение. Это работает так же, как и обычная предварительная загрузка или подсказки ресурсов перед подключением .Link

103 Early Hints
Link: </Open_Sans.woff2>;rel=preload;as=font;type=font/woff2;crossorigin

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

Оптимизация на стороне сервера

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

• Хостинговая среда недостаточно мощная?
• Много ли времени уходит на обработку данных и рендеринг HTML?
• Медленные ли запросы к базе данных?
• Задерживается ли ответ сторонними запросами API?

Использование сети доставки содержимого

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

С CDN вы получите два ключевых преимущества в производительности:

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

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

2. Уменьшите ресурсы, блокирующие рендеринг

После загрузки HTML-документа следующим шагом для отображения содержимого страницы является загрузка других ресурсов, блокирующих рендеринг. Это включает в себя таблицы стилей CSS и некоторый код JavaScript.

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

Отложите файлы JavaScript

Теги HTML блокируют рендеринг по умолчанию, но обычно файлы JavaScript не должны блокировать рендеринг. Вместо этого вы можете отложить выполнение кода JavaScript с помощью атрибута. После этого содержимое страницы может отображаться, даже если скрипты все еще загружаются. <script> defer

<script src="jquery.js" defer />

3. Оптимизируйте файлы изображений

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

Чтобы узнать, что такое элемент LCP на вашем сайте, запустите тест с помощью DebugBear и нажмите на заголовок метрики Largest Contentful Paint. Если элемент LCP является изображением, вы также можете увидеть дополнительные сведения о запросе изображения, такие как размер файла и продолжительность загрузки.

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

В этом случае размер изображения составляет почти 2 мегабайта, а загрузка изображения соответственно занимает 4,7 секунды.

Получите больше информации об изображениях LCP с помощью данных CrUX

Если вам интересно, соответствует ли результат синтетического теста скорости загрузки страниц тому, что испытывают реальные пользователи, вы можете проверить данные, которые Google публикует в рамках отчета о пользовательском опыте Chrome (CrUX).

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

Как уменьшить размер файла изображения

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

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

Инструменты оптимизации изображений, такие как Squoosh или Optimizilla, упрощают сжатие изображений, чтобы они могли загружаться быстрее.

4. Отдайте приоритет важному контенту

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

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

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

Почему меняется приоритет? Это когда Chrome рендерит страницу и понимает, что это изображение находится в области просмотра.

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

Оптимизируйте загрузку изображений с помощью атрибута fetchpriority

Если вы знаете, что изображение важно, вы можете добавить атрибут fetchpriority="high" к его тегу.<img>

<img
  fetchpriority="high"
  src="https://quickbooks.intuit.com/oidam/intuit/hero_utterwaffle4.jpg"
/>

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

Если мы внимательно посмотрим на сравнение водопада запросов, то увидим, что запрос образа LCP теперь начинается намного раньше. Кроме того, это занимает на 200 миллисекунд меньше времени, чем раньше.

5. Откладывайте загрузку неважных ресурсов

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

Браузеры автоматически снижают приоритет для менее важных ресурсов. Например, когда вы откладываете JavaScript-файл, это снижает приоритет его запроса.

Вы также можете использовать атрибут для пометки ресурсов, которые не являются необходимыми на ранних этапах рендеринга страницы .fetchpriority="low"

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

ПРЕДУПРЕЖДЕНИЕ!
Будьте осторожны и не используйте ленивую загрузку для всех изображений, так как это означает, что вы также будете лениво загружать изображение LCP, замедляя работу вашего сайта.

6. Убедитесь, что ключевые файлы обнаружены на ранней стадии

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

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

На той же странице мы также находим еще одну последовательную цепочку запросов, на этот раз из-за оператора CSS @import.

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

Для достижения наилучшей производительности все остальные критические запросы должны запускаться непосредственно из HTML-кода документа.

Что мы можем сделать, чтобы решить эту проблему?

• Мы можем избежать использования, или предварительно загрузить вторую таблицу стилей из HTML-кода @import
• Мы можем предварительно загрузить фоновое изображение LCP

Добавление этого кода в HTML страницы должно оказать большое положительное влияние на производительность:

<link
  rel="preload"
  href="https://www.veeva.com/wp-content/homepage-hero-mobile.jpg"
  as="image"
  fetchpriority="high"
/>
<link
  rel="preload"
  as="style"
  href="https://fonts.googleapis.com/css?family=Roboto:200,300,400,500,700"
/>

Если запустить это как эксперимент DebugBear, мы сможем увидеть картинки до и после рендеринга. Метрики First Contentful Paint и Largest Contentful Paint теперь намного лучше. Контент начинает отрисовываться раньше и сразу же рендерится с фоновым изображением.

7. Оптимизируйте загрузку шрифтов

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

• Убедитесь, что текст остается видимым во время загрузки с помощью font-display: swap
• Предварительная загрузка веб-шрифтов, чтобы они не были частью последовательной цепочки запросов

Избегайте чрезмерной предварительной загрузки веб-шрифтов

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

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

Предварительно загрузите только 2-3 наиболее важных шрифта на вашем сайте. Размер каждого файла шрифта должен быть меньше 100 килобайт.

8. Ускорьте обработку JavaScript-кода и процессора

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

Вкладка производительности DevTools может дать вам много информации о том, какие задачи обработки ЦП замедляют работу вашего кода.

В этом примере задача гидратации JavaScript блокирует ЦП и приводит к более медленному рендерингу страницы.

Если ваш сайт представляет собой одностраничное приложение, ознакомьтесь с нашими руководствами по производительности React, производительности Next.js и производительности Nuxt.

Как уменьшить нагрузку на процессор

Чтобы ускорить работу процессора на вашем сайте, вы можете:

• Определите задачи с помощью Chrome DevTools и оптимизируйте их
• Уменьшение размера DOM для ускорения рендеринга
• Просматривайте сторонние скрипты на своем сайте

9. Оптимизируйте размер файлов HTML, CSS и JavaScript

Большие файлы загружаются дольше, что приводит к снижению скорости работы сайта. Вы можете увидеть это в этом водопаде запросов, где CSS-файл размером 354 килобайта загружается за 2,8 секунды. В течение этого времени рендеринг блокируется.

Текстовые файлы, такие как HTML или CSS, имеют определенные методы, которые вы можете применить для уменьшения их размера:

• Используйте сжатие текста без потерь, такое как Gzip и Brotli
• Минимизация файлов CSS и JavaScript

Одной из распространенных причин использования больших файлов кода являются изображения или шрифты, встроенные в URL-адреса данных Base64. DebugBear может помочь вам определить их с помощью функции анализа размера. Разверните список запросов в результате теста

10. Кэширование статического контента в браузере

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

Серверы могут указывать, что ресурс может быть кэширован в браузере с помощью HTTP-заголовка cache-control. В этом случае файл может быть кэширован на срок до одного года (31 536 000 секунд).

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

11. Кэширование навигации вперед/назад

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

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

Однако иногда браузеры не могут восстановить страницы из кэша либо по причинам безопасности, либо из-за технических ограничений. Такие инструменты, как Lighthouse, могут сообщить вам, предотвращает ли ваша страница восстановление кэша назад/вперед, например, из-за заголовка.cache-control: no-store

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

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

Чтобы настроить правила спекуляции, вам просто нужно добавить тег с атрибутом в ваш HTML.<script>type="speculationrules"

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

<script type="speculationrules">
  {
    "prerender": [
      {
        "where": {
          "href_matches": "/*"
        },
        "eagerness": "moderate"
      }
    ]
  }
</script>

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

Core Web Vitals: выход за рамки времени загрузки

В этом посте мы рассмотрели метрику Largest Contentful Paint, которая измеряет, насколько быстро загружается страница. LCP — это один из основных веб-показателей Google, влияющих на ранжирование. Тем не менее, есть также два других Core Web Vitals.

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

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

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

Как поддерживать повышение производительности веб-сайта с течением времени

После развертывания улучшений на вашем сайте вам необходимо сделать две вещи:

• Убедитесь, что оптимизация действительно улучшает производительность сайта
• Убедитесь, что улучшение устойчиво и вы не откатитесь назад

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

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

По материалам сайта debugbear