Некоторые администраторы сайтов WordPress одержимы PageSpeed Insights или GTmetrix. Мой совет и совет многих других людей, которые знают об этом гораздо больше, заключается в том, что не стоит придавать этим метрикам больше значения, чем они имеют.
Если воспринимаемая скорость загрузки хорошая, нет необходимости переводить все в "зеленый" режим. Во многих случаях это даже контрпродуктивно, потому что вы можете впасть в чрезмерную оптимизацию или, что еще хуже, испортить разные вещи, пытаясь исправить что-то одно.
Тем не менее, независимо от того, являетесь ли вы поклонником WPO, энтузиастом оптимизации или просто хотите попытаться улучшить отзывчивость своего сайта, эти инструменты практически незаменимы. Проблема в том, что они предлагают "стоп-кадры", взятые с внешних серверов. Но что происходит, когда вы, как администратор, просматриваете свой сайт, что делать с рекламой, которая загружается с задержкой, или с меню, которое выскакивает именно тогда, когда вы собираетесь кликнуть?
Происхождение
Speed Auditor появился на свет как ответ на личную потребность иметь несколько простых, но мощных инструментов локальной диагностики. Это не плагин оптимизации (он ничего не меняет в вашем коде), это плагин аудита в реальном времени.
Если вы ищете хороший, возможно, лучший, платный плагин для WPO, с помощью которого можно вносить изменения и выполнять тонкую настройку, обратите внимание на Perfmatters. Если же вы ищете что-то бесплатное и простое, без заморочек с настройками и регулировками, но с широкими возможностями, попробуйте WPO Rocket Tweaks от Фернандо Телладо, доступный в репозитории WordPress.
Если вы не знаете, что такое узел DOM или метрика латентности, не волнуйтесь. Speed Auditor создан для того, чтобы помочь вам понять работу вашего сайта с первого взгляда:
- Умный индикатор: В панели администратора появится значок, меняющий цвет. Если он зеленый, то ваш LCP (время, необходимое для просмотра наиболее важных вещей) оптимален. Если он становится оранжевым или красным, значит, что-то требует вашего внимания.
- Проводите аудит во время просмотра: Вам не нужно настраивать ничего сложного. Вы активируете плагин, и пока вы проверяете свои посты, он работает в фоновом режиме, анализируя, не перегружены ли ваши изображения и не медлит ли ваш сервер.
- Больше человеческих отчетов: Одним щелчком мыши загрузите файл .txt, который можно отправить разработчику или сохранить для сравнения результатов после внесения изменений.
Под капотом
В версии 1.1.8 сделана попытка обеспечить некоторую глубину диагностики, чтобы сэкономить время на возиться в консоли браузера.
- Точная идентификация LCP: Плагин точно определяет, какой элемент (изображение или текстовый блок) вызвал срабатывание Largest Contentful Paint.
- Анализ глубины DOM: Крайне важен для предотвращения "чрезмерного размера DOM". Speed Auditor разбивает количество узлов по зонам (Header, Content, Footer) и предупреждает, если вложенность превышает 15-20 уровней.
- Монитор задержки мультимедиа: Измеряет фактическое время передачи изображений (Resource Timing API). Если загрузка изображения занимает 500 мс, плагин помечает его как критическое.
- Нулевое воздействие на сервер: Вся обработка происходит на стороне клиента (браузера). Нет никаких тяжелых запросов к базе данных или процессов PHP, которые замедляют работу сайта.
Большой скачок. Скоро будет: Speed Auditor 1.1.9 (с "Радаром CLS")
До сих пор кумулятивный сдвиг макета (CLS) был абстрактной цифрой в отчете. Вы знали, что что-то движется, но не всегда понимали, что именно. Совсем скоро, в версии 1.1.9, это изменится.
Должна быть введена кнопка "Выделитель" радара или визуальной системы CLS.
Представьте, что вы активировали режим "радара", который рисует красные рамки над любым элементом, который движется во время прокрутки. Это, что уже делают некоторые расширения, с большим или меньшим успехом, всегда очень полезная визуальная помощь, чтобы попытаться поймать те "переливы", которые иногда ускользают от глаз.
- Это баннер AdSense, продвигающий ваш контент? Вы увидите его в красной рамке. Вы можете углубиться в эту проблему здесь.
- Это изображение без определенных размеров? Радар уловит его.
- Полная настойчивость: Вы сможете просматривать весь свой сайт с включенным радаром; плагин запомнит, что вы хотите продолжать визуальный аудит каждого уголка.
В этом обновлении также появится краткий технический глоссарий, который будет дополнен советами и учебниками, интегрированными в приборную панель WordPress, так что такие термины, как ins, iframe или figure, больше не будут загадкой.
Идея состоит в том, чтобы улучшить как реакцию анализа, так и генерируемые отчеты по мере того, как я буду тестировать его в различных сценариях и получать предложения по улучшению или предупреждения об ошибках.
Версия 1.1.8 уже доступна для приведения в порядок ваших метрик, а в скором времени 1.1.9 позволит еще проще исправить визуальную стабильность WordPress. Если вы установите ее сейчас, то получите обновление в ближайшее время.
Как это работает?
Код состоит из трех шагов:
1. Наблюдатель производительности
Браузер (Chrome, Edge, Opera) имеет собственный API под названием Performance API. Плагин регистрирует "наблюдателя" под названием PerformanceObserver, специально настроенного для типа ввода layout-shift.
Каждый раз, когда что-то перемещается на экране после того, как оно было первоначально нарисовано, браузер генерирует событие. Плагин перехватывает это событие и извлекает два ключевых фрагмента данных:
- Значение смещения: (Это число равно 0,0145).
- Элемент-виновник: Браузер сообщает плагину, какой именно HTML-узел был перемещен.
2. Фильтр "Недавнее взаимодействие"
Здесь плагин пытается быть умным. Не все движения являются "плохими". Если вы нажимаете на выпадающее меню и содержимое прокручивается вниз, это ожидаемое движение пользователя.
Плагин проверяет свойство hadRecentInput. Если за последние 500 мс вы касались клавиши или нажимали кнопку мыши, браузер отмечает это движение как "ожидаемое", а плагин игнорирует его, чтобы избежать ложных срабатываний. Он обнаруживает только те движения, которые происходят неожиданно (например, внезапное появление рекламы).
3. Визуальный рендеринг (красные коробки)
После того как плагин получил элемент, который был перемещен, в дело вступает визуальная часть:
- Вычисление координат: Используется функция getBoundingClientRect() для определения местоположения элемента на экране в данный момент (пиксель вверх, пиксель влево).
- Внедрение фрейма: Создайте
divс абсолютной позицией, красной границей в 2px и очень высокимz-индексом, чтобы нарисовать его поверх всего. - Ярлык: Добавьте небольшое поле в левом верхнем углу красного поля с названием метки (ins, img, div) и значением накопленного CLS.
Почему это лучше, чем внешний отчет?
Такие инструменты, как PageSpeed, иногда не обнаруживают CLS, потому что они не прокручивают страницу до самого низа или не дожидаются загрузки определенных объявлений.
Плагин, используя постоянство, измеряет CLS , накопленный в течение всего сеанса просмотра. Если элемент немного двигается в начале и немного при прокрутке, плагин суммирует это и выделяет его, давая наиболее приблизительную реальную цифру, которую Google в итоге увидит в своем отчете"Chrome User Experience" (CrUX).
