Někteří správci stránek WordPress jsou posedlí službou PageSpeed Insights nebo GTmetrix. Moje rada a rada mnoha dalších, kteří o tom vědí mnohem více, zní, že byste těmto metrikám neměli přikládat větší význam, než jaký mají.
Pokud je vnímaná rychlost načítání dobrá, není nutné dávat vše "do zeleného". V mnoha případech je to dokonce kontraproduktivní, protože můžete upadnout do přílišné optimalizace, nebo ještě hůře, můžete nakonec zničit různé věci, když se snažíte opravit jednu věc.
Ať už jste příznivcem WPO, nadšencem do optimalizace nebo se jen chcete pokusit zlepšit odezvu svých stránek, jsou tyto nástroje téměř nezbytné. Problémem je, že nabízejí "statické obrázky" pořízené z externích serverů. Ale co se stane, když jako správce procházíte své stránky, co s těmi reklamami, které se načítají pozdě, nebo s nabídkou, která naskočí právě ve chvíli, kdy se chystáte kliknout?
Původ
Speed Auditor vznikl jako reakce na osobní potřebu mít několik jednoduchých, ale výkonných lokálních diagnostických nástrojů. Nejedná se o optimalizační zásuvný modul (v kódu nic nemění), ale o zásuvný modul pro audit v reálném čase.
Pokud hledáte dobrý, možná nejlepší placený plugin pro WPO, pomocí kterého můžete provádět změny a jemné ladění, podívejte se na Perfmatters. Pokud naopak hledáte něco bezplatného a jednoduchého, aniž byste si lámali hlavu s nastavením a úpravami, ale s velkými možnostmi, můžete vyzkoušet WPO Rocket Tweaks od Fernanda Tellada, který je k dispozici v repozitáři WordPressu.
Pokud nevíte, co je to uzel DOM nebo metrika latence, nezoufejte. Nástroj Speed Auditor je navržen tak, aby vám pomohl porozumět vašim webovým stránkám na první pohled:
- Chytrý indikátor: Na panelu správce se objeví ikona měnící barvu. Pokud je zelená, je vaše LCP (doba potřebná k zobrazení nejdůležitějších věcí) optimální. Pokud se změní na oranžovou nebo červenou, něco vyžaduje vaši pozornost.
- Audit při procházení: Nemusíte nic složitě konfigurovat. Aktivujete doplněk a zatímco kontrolujete své příspěvky, pracuje na pozadí a analyzuje, zda jsou vaše obrázky příliš těžké nebo zda váš server reaguje pomalu.
- Další zprávy o lidech: Jedním kliknutím stáhnete soubor .txt, který můžete poslat svému vývojáři nebo uložit pro porovnání výsledků po provedení změn.
Pod kapotou
Verze 1.1.8 se pokouší poskytnout určitou hloubku diagnostiky, aby se ušetřil čas strávený v konzoli prohlížeče.
- Přesná identifikace LCP: Zásuvný modul přesně zjistí, který prvek (obrázek nebo textový blok) spustil funkci Largest Contentful Paint.
- Hloubková analýza DOM: Klíčové je vyhnout se "nadměrné velikosti DOM". Speed Auditor rozděluje počet uzlů podle zón (Header, Content, Footer) a varuje vás, pokud vnoření přesáhne 15-20 úrovní.
- Monitor zpoždění médií: Měří skutečnou dobu přenosu (Resource Timing API) obrazů. Pokud stažení obrázku trvá 500 ms, označí jej zásuvný modul jako kritický.
- Nulový dopad na server: Veškeré zpracování probíhá na straně klienta (prohlížeče). Neexistují žádné náročné dotazy do databáze nebo procesy PHP, které by zpomalovaly web.
Velký skok. Již brzy: Rychlostní auditor 1.1.9 (s "Radar CLS")
Až dosud byl kumulativní posun rozložení (CLS) abstraktním údajem ve zprávě. Věděli jste, že se něco hýbe, ale ne vždy jste věděli co. To se ve verzi 1.1.9 velmi brzy změní.
Zavádí se radarové nebo vizuální tlačítko CLS "Highlighter".
Představte si, že aktivujete režim "radaru", který při posouvání vykreslí červené rámečky nad každým prvkem, který se pohybuje. To, co již některá rozšíření s větším či menším úspěchem dělají, je vždy velmi užitečná vizuální pomůcka, která se snaží zachytit ty "přetečení", která občas unikají oku.
- Jedná se o banner AdSense, který se tlačí na váš obsah? Uvidíte ho v červeném rámečku. Hlouběji se tímto problémem můžete zabývat zde.
- Jedná se o obrázek bez definovaných rozměrů? Radar ho zachytí.
- Celková vytrvalost: Zásuvný modul si bude pamatovat, že chcete vizuálně kontrolovat každý kout.
Součástí této aktualizace bude také krátký technický slovníček, který bude rozšířen o tipy a návody, jež budou integrovány do ovládacího panelu WordPressu, takže pojmy jako ins, iframe nebo figure již nebudou záhadou.
Záměrem je zlepšit odezvu analýzy i generované zprávy, jakmile ji otestuji v různých scénářích a pokud obdržím nějaké návrhy na zlepšení nebo upozornění na chyby.
Nyní je k dispozici verze 1.1.8, která vám pomůže upravit metriky, a brzy bude díky verzi 1.1.9 ještě snazší opravit vizuální stabilitu WordPressu. Pokud si ji nainstalujete nyní, obdržíte aktualizaci v nejbližší době.
Jak to funguje?
Kód se skládá z těchto tří kroků:
1. PerformanceObserver
Prohlížeč (Chrome, Edge, Opera) má nativní rozhraní API nazvané Performance API. Zásuvný modul registruje "pozorovatele" s názvem PerformanceObserver, který je speciálně nakonfigurován pro typ vstupu layout-shift.
Pokaždé, když se na obrazovce něco pohne poté, co to bylo původně namalováno, prohlížeč vygeneruje událost. Zásuvný modul tuto událost zachytí a získá dva klíčové údaje:
- Hodnota posunu: (Toto číslo je 0,0145).
- Prvek viníka: Prohlížeč zásuvnému modulu přesně sdělí, který uzel HTML byl přesunut.
2. Filtr "Nedávná interakce"
Zde se zásuvný modul snaží být chytrý. Ne všechny pohyby jsou "špatné". Pokud kliknete na rozbalovací nabídku a obsah se posune dolů, je to očekávaný pohyb uživatele.
Zásuvný modul kontroluje vlastnost hadRecentInput. Pokud jste se v posledních 500 ms dotkli klávesy nebo klikli, prohlížeč označí tento pohyb jako "očekávaný" a zásuvný modul jej ignoruje, aby nedocházelo k falešným poplachům. Zjišťuje pouze pohyby, které se objeví neočekávaně (například náhle se objevivší reklama).
3. Vizuální ztvárnění (červené rámečky)
Jakmile je v zásuvném modulu zobrazen přesunutý prvek, přichází na řadu vizuální část:
- Výpočet souřadnic: Používá funkci getBoundingClientRect() ke zjištění, kde se daný prvek na obrazovce v daném okamžiku nachází (pixel nahoru, pixel doleva).
- Vstřikování do rámu: Vytvořte
divs absolutní pozicí, 2px červeným rámečkem a velmi vysokýmz-indexem, který se bude vykreslovat nad vším. - Štítek: Přidejte malý rámeček v levém horním rohu červeného rámečku s názvem štítku (ins, img, div) a hodnotou nahromaděného CLS.
Proč je to lepší než externí zpráva?
Nástroje, jako je PageSpeed, někdy nedokážou detekovat CLS, protože neprocházejí až na konec nebo nepočkají na načtení určitých reklam.
Zásuvný modul pomocí perzistence měří CLS nashromážděné během relace prohlížení aktuálního uživatele. Pokud se nějaký prvek pohne trochu na začátku a trochu při posouvání, zásuvný modul to sečte a zvýrazní, čímž získáte co nejpřesnější skutečný údaj, který Google nakonec zobrazí ve své zprávě"Chrome User Experience" (CrUX).
