Някои администратори на WordPress сайтове са обсебени от PageSpeed Insights или GTmetrix. Моят съвет, както и съветът на много други хора, които знаят много повече за това, е да не придавате на тези метрики по-голямо значение, отколкото имат.
Ако възприеманата скорост на зареждане е добра, не е необходимо да поставяте всичко "в зелено". В много случаи това дори е контрапродуктивно, защото може да се стигне до прекомерна оптимизация или още по-лошо - може да се стигне до разрушаване на различни неща в опит да се поправи едно.
Въпреки това, независимо дали сте почитател на WPO, ентусиаст на оптимизацията или просто искате да подобрите отзивчивостта на сайта си, тези инструменти са почти задължителни. Проблемът е, че те предлагат "неподвижни снимки", взети от външни сървъри. Но какво се случва, когато вие, като администратор, разглеждате сайта си, какво става с онези реклами, които се зареждат със закъснение, или с менюто, което скача точно когато сте на път да кликнете?
Произход
Speed Auditor се роди в отговор на личната ми нужда да разполагам с няколко прости, но мощни локални инструмента за диагностика. Това не е плъгин за оптимизация (той не променя нищо в кода ви), а плъгин за одит в реално време.
Ако търсите добър, а може би и най-добрия платен плъгин за WPO, с който да правите промени и фина настройка, погледнете Perfmatters. Ако пък търсите нещо безплатно и просто, без да си блъскате главата с настройки и корекции, но с много възможности, можете да опитате WPO Rocket Tweaks на Fernando Tellado, наличен в хранилището на WordPress.
Ако не знаете какво е DOM възел или метрика за латентност, не се притеснявайте. Одиторът на скоростта е създаден, за да ви помогне да разберете уебсайта си с един поглед:
- Интелигентният индикатор: В лентата на администратора ще се появи променяща цвета си икона. Ако тя е зелена, вашето LCP (времето, необходимо за виждане на най-важните неща) е оптимално. Ако стане оранжева или червена, нещо се нуждае от вашето внимание.
- Одит, докато сърфирате: Не е необходимо да конфигурирате нищо сложно. Активирате приставката и докато проверявате публикациите си, тя работи във фонов режим, като анализира дали изображенията ви са прекалено тежки или дали сървърът ви реагира бавно.
- Още човешки доклади: С едно кликване изтеглете .txt файл, който можете да изпратите на разработчика си или да запазите, за да сравните резултатите след прилагане на промените.
Под капака на двигателя
Във версия 1.1.8 е направен опит да се осигури известна дълбочина на диагностиката, за да се спести време за работа в конзолата на браузъра.
- Прецизна идентификация на LCP: Плъгинът открива точно кой елемент (изображение или текстов блок) е задействал картината с най-голямо съдържание.
- Дълбочинен анализ на DOM: Изключително важно, за да се избегне "прекомерният размер на DOM". Speed Auditor разбива броя на възлите по зони (Header (Заглавие), Content (Съдържание), Footer (Стъпало)) и ви предупреждава, ако вложенията надхвърлят 15-20 нива.
- Монитор на закъснението на медиите: Измерва действителното време за прехвърляне (API за времетраене на ресурсите) на изображенията. Ако изтеглянето на дадено изображение отнема 500 ms, приставката го отбелязва като критично.
- Нулево въздействие върху сървъра: Цялата обработка се извършва от страна на клиента (браузъра). Няма тежки заявки към базата данни или PHP процеси, които да забавят сайта.
Големият скок. Очаквайте скоро: Speed Auditor 1.1.9 (с "Radar CLS")
Досега кумулативното изместване на оформлението (CLS) беше абстрактна цифра в доклада. Знаехте, че нещо се движи, но не винаги знаехте какво. Съвсем скоро, във версия 1.1.9, това ще се промени.
Въвежда се бутонът " Highlighter" на радара или Visual 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 ms, браузърът отбелязва това движение като "очаквано" и приставката го игнорира, за да избегне фалшиви положителни резултати. Тя открива само движения, които се появяват неочаквано (например внезапно появила се реклама).
3. Визуална визуализация (червените полета)
След като плъгинът разполага с елемента, който е бил преместен, идва ред на визуалната част:
- Изчисляване на координати: Използва функция, наречена getBoundingClientRect(), за да установи къде точно се намира този елемент на екрана в този момент (пиксел нагоре, пиксел наляво).
- Инжектиране на рамката: Създайте
divс абсолютна позиция, 2px червена рамка и много високz-индекс, който да се изрисува върху всичко. - Етикетът: Добавете малко поле в горния ляв ъгъл на червеното поле с името на етикета (ins, img, div) и стойността на натрупания CLS.
Защо това е по-добре от външен доклад?
Инструменти като PageSpeed понякога не успяват да открият CLS, защото не скролират до дъното или не изчакват зареждането на определени реклами.
Чрез използване на постоянство приставката измерва CLS, натрупани по време на сесията за сърфиране на потребителя. Ако даден елемент се движи малко в началото и малко при скролиране, плъгинът го добавя и подчертава, давайки ви най-близката реална цифра, която Google ще види в своя доклад"Chrome User Experience" (CrUX).
