Деякі адміністратори сайтів на WordPress одержимі PageSpeed Insights або GTmetrix. Моя порада, як і порада багатьох інших, хто знає про це набагато більше, полягає в тому, що не варто надавати цим метрикам більшого значення, ніж вони мають.
Якщо швидкість завантаження хороша, не обов'язково робити все "зеленим". У багатьох випадках це навіть контрпродуктивно, тому що ви можете впасти в надмірну оптимізацію, або, що ще гірше, ви можете зіпсувати різні речі, намагаючись виправити щось одне.
Проте, незалежно від того, чи є ви прихильником WPO, ентузіастом оптимізації, чи просто хочете спробувати покращити адаптивність вашого сайту, ці інструменти є майже необхідними. Проблема в тому, що вони пропонують "стоп-кадри", взяті із зовнішніх серверів. Але що відбувається, коли ви, як адміністратор, переглядаєте свій сайт, як щодо реклами, яка завантажується із запізненням, або меню, яке вискакує саме тоді, коли ви збираєтесь натиснути?
Походження
Speed Auditor народився як відповідь на особисту потребу мати кілька простих, але потужних локальних інструментів діагностики. Це не плагін для оптимізації (він нічого не змінює у вашому коді), це плагін для аудиту в реальному часі.
Якщо ви шукаєте хороший, можливо, найкращий платний плагін для WPO, за допомогою якого можна вносити зміни і тонкі налаштування, зверніть увагу на Perfmatters. Якщо, з іншого боку, ви шукаєте щось безкоштовне і просте, без зайвих налаштувань і коригувань, але з великою кількістю можливостей, ви можете спробувати WPO Rocket Tweaks від Фернандо Телладо (Fernando Tellado), доступне в репозиторії WordPress.
Якщо ви не знаєте, що таке DOM-вузол або метрика затримки, не хвилюйтеся. Speed Auditor допоможе вам зрозуміти ваш сайт з першого погляду:
- Розумний індикатор: На панелі адміністратора з'явиться значок, що змінює колір. Якщо він зелений, ваш LCP (час, необхідний для перегляду найважливіших речей) є оптимальним. Якщо він стає помаранчевим або червоним, щось потребує вашої уваги.
- Аудит під час перегляду: Вам не потрібно налаштовувати нічого складного. Ви активуєте плагін, і поки ви перевіряєте свої публікації, він працює у фоновому режимі, аналізуючи, чи не занадто важкі ваші зображення або чи не повільно реагує ваш сервер.
- Більше людських звітів: Одним кліком завантажте файл .txt, який ви можете надіслати розробнику або зберегти, щоб порівняти результати після застосування змін.
Під капотом
У версії 1.1.8 зроблено спробу надати деяку глибину діагностики, щоб заощадити час, який ви витрачаєте на роботу в консолі браузера.
- Точна ідентифікація LCP: Плагін точно визначає, який саме елемент (зображення або текстовий блок) викликав найбільшу змістовну замальовку (Largest Contentful Paint).
- Аналіз глибини DOM: Дуже важливий, щоб уникнути "надмірного розміру DOM". Speed Auditor розбиває кількість вузлів за зонами (Header, Content, Footer) і попереджає вас, якщо вкладеність перевищує 15-20 рівнів.
- Media Latency Monitor: Вимірює фактичний час передачі (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. PerformanceObserver
Браузер (Chrome, Edge, Opera) має власний API, який називається Performance API. Плагін реєструє "спостерігача" під назвою PerformanceObserver, спеціально налаштованого на тип введення з перемиканням розкладки.
Щоразу, коли щось рухається на екрані після того, як воно було намальоване, браузер генерує подію. Плагін перехоплює цю подію і витягує два ключові фрагменти даних:
- Значення зсуву: (Це число дорівнює 0.0145).
- Елемент-винуватець: Браузер повідомляє плагіну, який саме вузол HTML було переміщено.
2. Фільтр "Нещодавня взаємодія"
Тут плагін намагається бути розумним. Не всі дії є "поганими". Якщо ви натискаєте на випадаюче меню і вміст прокручується вниз, це очікувана дія користувача.
Плагін перевіряє властивість hadRecentInput. Якщо ви торкнулися клавіші або клацнули протягом останніх 500 мс, браузер позначає цей рух як "очікуваний", і плагін ігнорує його, щоб уникнути хибних спрацьовувань. Він виявляє лише ті рухи, які відбуваються несподівано (наприклад, раптова поява реклами).
3. Візуальний рендеринг (червоні квадратики)
Після того, як плагін отримав елемент, який було переміщено, вступає в дію візуальна частина:
- Обчислення координат: Використовує функцію getBoundingClientRect(), щоб з'ясувати, де знаходиться елемент на екрані у цей момент (піксель вище, піксель лівіше).
- Впровадження фрейму: Створіть
divз абсолютною позицією, червоною рамкою 2px і дуже високимz-індексом, щоб намалювати поверх усього. - Мітка: Додайте невелику рамку вгорі ліворуч від червоного поля з назвою мітки (ins, img, div) і значенням накопиченого CLS.
Чому це краще, ніж зовнішній звіт?
Такі інструменти, як PageSpeed, іноді не можуть виявити CLS, оскільки вони не прокручують сторінку донизу або не чекають, поки завантажиться певна реклама.
Плагін, використовуючи персистентність, вимірює CLS, накопичений протягом усього сеансу роботи користувача в браузері. Якщо елемент трохи рухається на початку і трохи під час прокрутки, плагін підсумовує це і виділяє його, даючи вам найбільш приблизну реальну цифру, яку Google в кінцевому підсумку побачить у своєму звіті"Chrome User Experience"(CrUX).
