Быстродействие сайта: обзор Google PageSpeed ​​Insights и оптимизация

Что можно успеть за 4 секунды?

Потерять до 90% пользователей своего веб-ресурса.

Именно такой процент предполагаемых отказов прогнозирует Think with Google, если скорость загрузки страницы увеличится с 1 до 5 секунд. Считайте, что в этом случае вы потеряли большинство своих потенциальных клиентов.

На самом деле Google анализирует более 200 различных метрик, чтобы понять, кому отдать первые места поисковой выдачи. И скорость загрузки сайта входит в важнейшие показатели ранжирования. Проще говоря: нет скорости = нет места в ТОПе.

Рассказываем, как проверить скорость загрузки сайта и разбираемся с одним из самых популярных инструментов для этого — PageSpeed Insights.

Что такое Google PageSpeed Insights (PSI)?

Google PageSpeed Insights — это аналитический инструмент, измеряющий, насколько быстро загружается веб-страница, и оценивает ее с точки зрения пользовательского опыта и SEO. Он умеет не просто констатировать проблемы, а давать конкретные, практические советы по поводу того, как эти проблемы исправить. Кроме того будет полезен чтобы:

1. Сделать подробную оценку скорости загрузки и отображения вашей веб-страницы;
2. Измерить ключевые метрики, которые являются прямыми факторами ранжирования Google. Это самая важная функция для SEO;
3. Сделать анализ страницы в двух режимах: для мобильных устройств и десктопа (это важно, поскольку опыт пользователя на них может существенно отличаться).

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

Чтобы измерить скорость загрузки сайта PSI использует 2 источника данных:

• Lab Data — моделирует загрузку страницы в контролируемых условиях (на базе Lighthouse). Это помогает найти технические проблемы.

• Field Data — реальная статистика пользователей с Chrome User Experience Report (CrUX). Она отображает, как страница работает на различных устройствах, в браузерах и сетях.

На наш взгляд, PageSpeed Insights — это основной инструмент для каждого владельца сайта, SEO-специалиста и веб-разработчика. С его помощью можно быстро получить исчерпывающую картину производительности страницы и четкий план действий по ее улучшению.

Как работает PageSpeed Insights, его основные показатели и метрики

Следует понимать, что Google PageSpeed — это многогранный инструмент. Когда мы говорим, что он измеряет скорость сайта, это не означает, что вы получите какую-то константу, вроде 100 Гбит/с. Speed индекс, несомненно, важная метрика. Но PSI производит анализ еще и других параметров.

Важно! Core Web Vitals является наиболее критичным для SEO-продвижения. К этим метрикам относят: LCP, INP/FID, CLS. Другие параметры тоже учитываются, однако они более важны для разработчиков, чтобы найти «узкие места». Сайты, обладающие хорошими показателями Core Web Vitals, получают преимущество в поисковой выдаче. Это официально подтверждено Google.

По какому алгоритму работает webPageSpeed?

Алгоритм использует два типа данных, о которых мы уже говорили: данные с полей (Field Data) и лабораторные (Lab/Synthetic data). В первом случае приложение получает значения LCP, INP, CLS для ваших страниц по анонимированной статистике реальных пользователей Chrome, посетивших сайт.

Важно! Для формирования оценки на основе Field Data требуется достаточный объем трафика. Если данных недостаточно, PSI предоставит вам статистику с помощью Lighthouse. Это инструмент, который запускается на серверах Google и имитирует загрузку страницы на мощном компьютере со стабильным интернетом (вроде «стерильных лабораторных условий»).

На практике это происходит следующим образом:

1. PageSpeed Insights открывает страницу в виртуальном Chrome с типичными настройками: 3G/4G/5G сеть; «среднее» мобильное или десктопное устройство.
2. Lighthouse запускает тесты, измеряет время отображения, взаимодействия и стабильности.
3. Результат сравнивается с эталонными значениями (thresholds). На основе этого программа выводит интегральный балл.
4. Предлагаются рекомендации: оптимизация изображений, минимизация CSS/JS, использование кэширования, настройка lazy-loading и т.д. (подробнее об этом поговорим в соответствующем разделе статьи). 

Как интерпретировать результаты проверки

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

Важно! Оценка, которую вы видите на главной панели PSI (0-100), формируется на основе Lab Data. Но раздел Core Web Vitals показывает отдельно статус на основе Field Data, который является приоритетным для SEO.

Каждая метрика имеет разные единицы измерения (миллисекунды, баллы и т.п.). Алгоритм превращает «сырое» значение каждой метрики в промежуточный балл от 0 до 100 (где 100 – идеал). Для этого используются специальные шкалы оценки. Рассмотрим на примере LCP:

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

Но прежде важно «взвесить» каждый из показателей. Для этого используется процентное соотношение их «веса»:

Largest Contentful Paint = 25%

Cumulative Layout Shift = 15%

Total Blocking Time = 30%

То есть показатель TBT является наиболее весомым, потому что напрямую влияет на скорость загрузки и время отклика. А CLS имеет наименьший % веса, потому что по факту более характеризует стабильность, чем быстродействие. 

Финальная оценка = √( (LCP_score² * 0.25) + (TBT_score² * 0.30) + (CLS_score² * 0.15) + ... ) *

* Формула упрощена для демонстрации примера. В реальности она гораздо сложнее, но имеет именно такой принцип взвешивания и объединения.

Как интерпретировать оценку?

90-100 (Зеленый): Ваш сайт работает быстро. Продолжайте в том же духе.

50-89 (оранжевый): Есть пространство для улучшения. Просмотрите раздел «Opportunities» в отчете.

0-49 (Красный): Сайт медленный. Нужна серьезная оптимизация.

Почему кастомная разработка — оптимальный путь для высоких показателей PageSpeed

Готовые решения → быстрый старт.

Обычно на этом преимущества шаблонов/конструкторов/CMS «из коробки» заканчиваются. Практика показывает, что редко какие готовые решения дают высокие показатели PSI. Обычно это 60-75/100.

В то же время, кастомная разработка имеет более высокую стоимость в начале. Но в перспективе обеспечивает стабильный результат: 90–100/100 в PageSpeed Test. Google высоко оценивает оптимизированные Core Web Vitals и удобный UX. То есть,  кастомные сайты (при условии качественного исполнения) имеют на 100% лучший SEO-потенциал.

Готовые темы (WordPress, Tilda, Wix и т.д.) включают в себя сотни строк кода, которые часто не используются на конкретном сайте. Это увеличивает время загрузки, TBT и INP. Кроме того, имеют другие критические недостатки:

• Чрезмерное количество посторонних плагинов = дополнительные HTTP-запросы, скрипты и стили → ухудшение LCP и TTI.

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

• Проблемы с Core Web Vitals. CLS часто страдает из-за «прыгающих» баннеров, динамических блоков или рекламы. INP ухудшается из-за чрезмерных интерактивных элементов и больших JS-бандов.

Для SEO в Украине, где конкуренция в нишах высока, несколько секунд задержки — это потеря позиций. Поэтому именно кастомная разработка, которая может обеспечить гибкую оптимизацию под Core Web Vitals, является конкурентным преимуществом, обеспечивающим лучший шанс на топ-позиции у Google.

Рекомендации по оптимизации сайта

На первом уровне мы всегда советуем начинать с Quick Wins — это критически важные и быстрые победы. К примеру, самая частая причина медленных LCP кроется в не оптимизированных изображениях. Для улучшения этого показателя требуется:

• конвертировать изображения в современные форматы. Используйте WebP (с fallback для Safari) или AVIF. Это может снизить вес изображений на 25-50% без потери качества. 

• провести Resize — загружайте картинки именно в том размере, в котором они отображаются на экране. Не полагайтесь на стиль CSS max-width: 100%.

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

• указать атрибуты width и height, если это не было сделано раньше.

Также важно настроить кэш в браузере и на стороне сервера. Для CMS (например, WordPress) обязательно используйте плагины кэширования (W3 Total Cache, WP Rocket), генерирующие статические HTML-страницы. Это резко снизит нагрузку на сервер.

Еще один критически важный момент — использование CDN (Content Delivery Network). Это поможет сохранить копии вашего сайта на серверах по всему миру = пользователь загружает контент с ближайшего к нему сервера, что значительно ускоряет загрузку.

Углубленная оптимизация, оказывающая непосредственное влияние на Core Web Vitals, начинается с минимизации и оптимизации CSS и JavaScript. Этот уровень требует больше технических знаний, но критически важен для хороших показателей. Для начала нужно:

• удалить все ненужные символы (пробелы, комментарии, переносы строк) из CSS и JS-файлов; 

• объединить смежные CSS/JS-файлы в один, чтобы уменьшить количество HTTP-запросов;

• устранить блокирующий ресурс (Render-Blocking Resources).

• дополнить некритические скрипты с атрибутом async или defer, чтобы они не блокировали парсинг страницы;

• использовать font-display: swap: Это позволит браузеру отобразить текст системным шрифтом, пока загружается кастомный, предотвращая "invisible text" и улучшая LCP.

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

FAQ