Производительность и Core Web Vitals

4 min read

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

Влияние на Core Web Vitals

LCP (Largest Contentful Paint)

Влияние: отсутствует

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

Тест: запустите аудиты Lighthouse до и после. Показатели LCP остаются в пределах нормального разброса.

CLS (Cumulative Layout Shift)

Влияние: нулевое

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

INP (Interaction to Next Paint)

Влияние: пренебрежимо малое

JavaScript плеера работает в одном небольшом файле (около 15 КБ в сжатом виде). Обработчики кликов используют debounce и выполняются через requestIdleCallback там, где это поддерживается. Типичный вклад в INP: менее 5 мс на взаимодействие.

FID (First Input Delay, заменён на INP в 2024 году)

Влияние: нулевое

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

Размеры ресурсов

Нагрузка на страницу при использовании плеера:

Ресурс Размер (сжатый) Когда загружается
CSS публичного плеера 3 КБ При отображении плеера
JS публичного плеера 15 КБ При отображении плеера
Вспомогательный файл формы волны (PRO) 4 КБ При включённой форме волны
JS фиксированной панели (PRO) 2 КБ При включённой фиксации
Иконка меню в панели админа 0,5 КБ Только для администраторов

Суммарная нагрузка на посетителей при первой загрузке: 0 байт, пока они не прокрутят страницу до плеера.

Совместимость с плагинами кэширования

TTSWP работает со всеми основными плагинами кэширования (WP Rocket, LiteSpeed, W3 Total Cache, WP Super Cache, Cache Enabler). Плагин автоматически регистрирует свои ресурсы для корректного кэширования.

Аудиофайлы (MP3) имеют собственные заголовки кэша и загружаются по запросу из хранилища. Они не засоряют кэши страниц.

См. Плагины кэширования.

Доставка через CDN

На платных тарифах аудиофайлы раздаются через Amazon CloudFront. Это означает:

  • Аудио воспроизводится в течение миллисекунд после нажатия Play, даже для посетителей, далёких от вашего сервера
  • Пропускная способность вашего сервера WordPress остаётся свободной для HTML

На бесплатных тарифах аудио передаётся с вашего сервера WordPress. Для большинства блогов этого достаточно. Сайты с высоким трафиком могут заметить использование полосы пропускания на страницах с большим количеством аудио.

Нагрузка на базу данных

TTSWP добавляет небольшое количество таблиц и строк в базу данных:

  • Таблица кэша аудио (одна строка на каждый сгенерированный файл)
  • Таблицы статистики (одна строка на каждое событие воспроизведения - небольшие целочисленные данные)
  • Строки настроек (несколько десятков параметров)

Размер базы данных растёт линейно с количеством записей с аудио. Для сайта с 500 записями общий объём базы данных, как правило, не превышает 200 КБ.

Память и процессор

  • Overhead PHP-памяти на каждую загрузку страницы в админке: ~2 МБ
  • Overhead PHP-памяти на каждую публичную страницу с плеером: пренебрежимо малый (только CSS и JS, без обработки PHP на горячих путях)
  • Фоновые процессы: отсутствуют (никаких cron-задач при каждом запросе)

Тестирование вашего сайта

Используйте эти инструменты, чтобы убедиться, что TTSWP не снижает производительность:

  • PageSpeed Insights - официальный тест Core Web Vitals от Google
  • WebPageTest - детальная разбивка по водопаду
  • GTmetrix - оценка производительности и рекомендации

Запустите тест один раз с включённым TTSWP, затем с временно отключённым. Сравните результаты.

Если вы заметили регрессию производительности

Сообщите нам. Мы считаем регрессии производительности ошибками:

  1. Укажите, какая страница работает медленно
  2. Запустите PageSpeed Insights и поделитесь URL
  3. Обратитесь в PRO Support или напишите на форуме ru.wordpress.org

Мы поможем вам диагностировать и устранить проблему.

Связанные страницы