Как использовать pagespeed insights
Как провести аудит скорости сайта с помощью Google PageSpeed Insights и ускорить загрузку
Краткий гайд по PageSpeed Insights (PSI): проверка PageSpeed и Lighthouse — LCP/FCP/FID/CLS/TTFB, оптимизация сайта и повышение производительности.
- Что в статье: гайд, чеклист, кейс
- Какие результаты: рост PSI, снижение LCP и улучшение рейтинга
- Время чтения: ~10 мин
Что такое Google PageSpeed Insights и откуда берутся данные
PageSpeed Insights — инструмент Google, который объединяет лабораторный анализ Lighthouse (lab data) и полевые метрики из Chrome UX Report (field data). Отчёт показывает оценку по шкале 0–100: зелёная (90–100), жёлтая (50–89) и красная (<50). Лабораторные тесты имитируют загрузку: эмуляция мобильного устройства (Nexus 5, 3G), throttling и замеры latency; полевые данные отражают реальную производительность пользователей.
Метрики производительности: что измеряем и как интерпретировать
Core Web Vitals: LCP (Largest Contentful Paint) — загрузка главного блока; FCP — первая отрисовка; FID (First Input Delay) — задержка ввода; CLS (Cumulative Layout Shift) — сдвиги макета. TTI/Time to Interactive, TBT/Total Blocking Time, Speed Index (SI) и First CPU Idle показывают интерактивность; TTFB — время ответа сервера. Lab data дают filmstrip и карту эффективности, field data — реальные пользовательские показатели. Целевые ориентиры: LCP <2.5s, CLS <0.1, FID <100ms.
Пошаговая инструкция: как проводить аудит в PageSpeed Insights
Краткий алгоритм работы с PSI: проводите тесты для mobile и desktop, изучайте lab и field данные, фиксируйте бенчмарки и экспортируйте отчёты для сравнения.
- Введите URL
- Выберите mobile/desktop в интерфейсе PageSpeed Insights (PSI).
- Анализ lab vs field
- Смотрите Lighthouse audit (lab data) и Chrome UX Report (field data).
- Изучите рекомендации
- Читайте секции «Opportunities» и «Diagnostics» в report.
- Посмотрите filmstrip и таблицу ресурсов
- Оцените resource table, external scripts/сторонний код и их влияние.
- Соберите данные для отчёта
- Сделайте несколько прогонов, тестируйте разный throttling (эмуляция 3G, Nexus 5) и фиксируйте latency.
- Выгрузите и сохраните
- Экспортируйте report (PDF/JSON), сравнивайте через web.dev/measure и developers.google.com рекомендации.
Карта загрузки и таблица ресурсов: как читать и что искать
Таблица ресурсов (resource table) показывает тип, ссылку, размер и время. Ищите блокирующие ресурсы, длинные цепочки redirect, heavy third‑party scripts (счетчики, Яндекс.Метрика, Google Analytics) и высокий weight of page. Многие детали скрыты на скриншотах — собирайте HAR/Network через DevTools, WebPageTest или Lighthouse для точного отчёта.
| Ресурс | Тип | Размер | Время ответа | Блокирующий | Рекомендация |
|---|---|---|---|---|---|
| /analytics.js | script | 95 KB | 450 ms | Да | Загрузить async/отложить |
17 практических рекомендаций и приоритеты внедрения
- Устранить render‑blocking — high; эффект: ↓FCP. (WP: Autoptimize critical CSS; custom: inline Critical CSS + defer)
- Inline Critical CSS — high; эффект: быстрее рендер. (WP: критич. CSS плагин; custom: генерация крит. CSS)
- Минификация CSS/JS (minify) — high; эффект: ↓bundle size. (WP: Autoptimize; custom: webpack + minify)
- Remove unused CSS/JS — high; эффект: ↓time on main thread. (WP: PurgeCSS интеграция; custom: tree‑shaking)
- Code splitting, уменьшение bundle.js — high; эффект: ↓TBT. (WP: отключать плагин‑бандлы; custom: webpack code splitting)
- Async / defer для скриптов — high; эффект: улучшает TTI. (WP: атрибуты script; custom: добавить async/defer)
- Lazy loading изображений — medium; эффект: ↓requests. (WP: loading="lazy"; custom: native lazy or IntersectionObserver)
- Оптимизация изображений (WebP/AVIF) — high; эффект: ↓weight of page. (WP: конвертер WebP; custom: генерация WebP/AVIF + srcset/sizes)
- Добавить width/height и responsive images — medium; эффект: ↓CLS. (WP: атрибуты в теме; custom: srcset + sizes)
- Preconnect / preload / prefetch — medium; эффект: быстрее критич. ресурсы. (WP: rel tags; custom: link rel preconnect/preload)
- Кеширование (Cache‑Control, expires, ETag) — high; эффект: ↓TTFB/повторные запросы. (WP: headers через nginx; custom: настройка сервера)
- Gzip / Brotli — high; эффект: ↓transfer size. (WP: включить на сервере; custom: nginx/Apache config)
- CDN и HTTP/2 — high; эффект: мультиплексирование и быстрое delivery. (WP: подключить CDN; custom: CDN + HTTP/2)
- Уменьшение TTFB — high; эффект: быстрее ответ сервера. (WP: кеширование, оптимизация БД; custom: DB tuning, PHP‑opcache)
- Оптимизация БД/backend — high; эффект: ↓server time. (WP: чистка/индексы; custom: query optimization)
- Шрифты: font‑display: swap — medium; эффект: ↓FOIT/CLS. (WP: локальный хостинг шрифтов; custom: preconnect + preload шрифтов)
- Заменить GIF на видео/WebM — low; эффект: ↓size. (WP: заменить анимации; custom: использовать MP4/WebM)
Мониторинг Core Web Vitals и проверка через Lighthouse/WebPageTest — обязательны после внедрения.
Как ускорить сайт на WordPress и автоматизация
Используйте WP Rocket, Autoptimize, Perfmatters и плагины кеширования (WP Super Cache, WP Fastest Cache). Включите оптимизацию изображений и автоматическую конвертацию в WebP, подключите CDN и PageSpeed module на nginx или правила в .htaccess. Остерегайтесь конфликтов: двойная минификация/объединение, одновременный lazy/кеш плагинов и повторной оптимизации изображений. При необходимости — SSR for WP или AMP (AMP for WP) для критических страниц.
Кейсы: примеры улучшений и таблица результатов
Ниже два коротких case study: реальные примеры улучшений производительности (55→92, 70→94) после набора оптимизаций: оптимизация изображений, устранение render‑blocking, кеш и CDN.
| URL | LCP | CLS | TTFB | Общий балл |
|---|---|---|---|---|
| example.com/page1 | 4.8s → 1.9s | 0.18 → 0.05 | 850ms → 220ms | 55 → 92 |
| example.com/page2 | 3.6s → 1.4s | 0.12 → 0.03 | 640ms → 180ms | 70 → 94 |
Вывод: сочетание image‑optimization (WebP), inline Critical CSS, async/defer скриптов и CDN даёт быстрый эффект в performance reports и улучшает поведенческие метрики.
Контрольный чеклист, TOC и план мониторинга
Краткий чеклист для внедрения и настройка мониторинга Core Web Vitals (RUM + synthetic), хранение бенчмарков и performance budget.
- 1) A: Inline Critical CSS и убрать render‑blocking
- 2) A: Минификация CSS/JS, remove unused CSS
- 3) A: Оптимизация изображений (WebP/AVIF, srcset)
- 4) B: Настройка кеш‑заголовков (Cache‑Control, ETag)
- 5) B: Включить Brotli/Gzip и CDN
- 6) B: Async/defer для сторонних скриптов (third‑party scripts)
- 7) C: Оптимизация БД и уменьшение TTFB на сервере
- 8) C: Шрифты — font‑display: swap, предзагрузка
- 9) C: Проверка accessibility, alt у изображений
- 10) A: Внедрить performance budget (budget.json) и пороги
Мониторинг: RUM — постоянный сбор field data; synthetic — запланированные тесты (WebPageTest, web.dev/measure, GTMetrix, Pingdom). Рекомендуемая периодичность: synthetic: ежедневно/еженедельно для критичных страниц; RUM: непрерывно. Сохраняйте отчёты и бенчмарки в формате CSV/JSON и фиксируйте budget.json для автоматических алертов.
Комментарии
Оставить комментарий