Niektorí správcovia stránok WordPress sú posadnutí službou PageSpeed Insights alebo GTmetrix. Moja rada a rada mnohých ďalších, ktorí o tom vedia oveľa viac, je, že by ste týmto metrikám nemali pripisovať väčšiu dôležitosť, ako majú.
Ak je vnímaná rýchlosť načítavania dobrá, nie je potrebné umiestniť všetko "na zeleno". V mnohých prípadoch je to dokonca kontraproduktívne, pretože môžete upadnúť do nadmernej optimalizácie, alebo ešte horšie, môžete nakoniec zničiť rôzne veci, keď sa budete snažiť opraviť jednu vec.
Napriek tomu, či už ste nadšencom WPO, optimalizácie alebo sa len chcete pokúsiť zlepšiť odozvu svojej stránky, tieto nástroje sú takmer nevyhnutné. Problémom je, že ponúkajú "statické obrázky" prevzaté z externých serverov. Čo sa však stane, keď si ako správca prezeráte svoju stránku, čo s tými reklamami, ktoré sa načítajú neskoro, alebo s tým menu, ktoré vyskočí práve vtedy, keď sa chystáte kliknúť?
Pôvod
Speed Auditor vznikol ako reakcia na osobnú potrebu mať niekoľko jednoduchých, ale výkonných lokálnych diagnostických nástrojov. Nie je to optimalizačný zásuvný modul (nič nemení vo vašom kóde), je to zásuvný modul na audit v reálnom čase.
Ak hľadáte dobrý, prípadne najlepší platený plugin pre WPO, pomocou ktorého môžete vykonávať zmeny a jemné ladenie, pozrite sa na Perfmatters. Ak naopak hľadáte niečo bezplatné a jednoduché, bez toho, aby ste si museli lámať hlavu s nastaveniami a úpravami, ale s veľkými možnosťami, môžete vyskúšať WPO Rocket Tweaks od Fernanda Tellada, ktorý je k dispozícii v repozitári WordPress.
Ak neviete, čo je to uzol DOM alebo metrika latencie, nemusíte sa obávať. Nástroj Speed Auditor je navrhnutý tak, aby vám pomohol pochopiť vašu webovú stránku na prvý pohľad:
- Inteligentný indikátor: V paneli správcu sa zobrazí ikona meniaca farbu. Ak je zelená, váš LCP (čas potrebný na zobrazenie najdôležitejších vecí) je optimálny. Ak sa zmení na oranžovú alebo červenú, niečo si vyžaduje vašu pozornosť.
- Audit počas prehliadania: Nemusíte nič zložito konfigurovať. Aktivujete doplnok a zatiaľ čo kontrolujete svoje príspevky, pracuje na pozadí a analyzuje, či sú vaše obrázky príliš ťažké alebo či váš server reaguje pomaly.
- Ďalšie správy o ľuďoch: Jedným kliknutím si stiahnite súbor .txt, ktorý môžete poslať vývojárovi alebo uložiť na porovnanie výsledkov po aplikácii zmien.
Pod kapotou
Verzia 1.1.8 sa pokúša poskytnúť určitú hĺbku diagnostiky, aby sa ušetril čas strávený manipuláciou v konzole prehliadača.
- Presná identifikácia LCP: Zásuvný modul presne zistí, ktorý prvok (obrázok alebo textový blok) spustil funkciu Largest Contentful Paint.
- Hĺbková analýza DOM: Dôležité je vyhnúť sa "nadmernej veľkosti DOM". Speed Auditor rozdeľuje počet uzlov podľa zón (hlavička, obsah, päta) a varuje vás, ak vnorenie prekročí 15 - 20 úrovní.
- Monitor oneskorenia médií: Meria skutočný čas prenosu (Resource Timing API) obrázkov. Ak sťahovanie obrázka trvá 500 ms, zásuvný modul ho označí ako kritický.
- Nulový vplyv na server: Všetko spracovanie prebieha na strane klienta (prehliadača). Neexistujú žiadne náročné dotazy do databázy ani procesy PHP, ktoré by spomaľovali web.
Veľký skok. Už čoskoro: Rýchlostný audítor 1.1.9 (s "Radar CLS")
Kumulatívny posun rozloženia (CLS ) bol doteraz abstraktným údajom v správe. Vedeli ste, že sa niečo hýbe, ale nie vždy ste vedeli čo. Už čoskoro, vo verzii 1.1.9, sa to zmení.
Zavádza sa tlačidlo radaru alebo vizuálneho CLS "Highlighter".
Predstavte si, že aktivujete režim "radaru", ktorý pri posúvaní nakreslí červené rámčeky nad každý prvok, ktorý sa pohybuje. Toto, čo už niektoré rozšírenia s väčším či menším úspechom robia, je vždy veľmi užitočná vizuálna pomôcka, ktorou sa môžete pokúsiť zachytiť tie "preteky", ktoré niekedy unikajú oku.
- Je to banner AdSense, ktorý tlačí váš obsah? Uvidíte ho s červeným rámčekom. Hlbšie sa týmto problémom môžete zaoberať tu.
- Je to obrázok bez definovaných rozmerov? Radar ho zachytí.
- Celková vytrvalosť: Zásuvný modul si zapamätá, že chcete naďalej vizuálne kontrolovať každý kút.
Táto aktualizácia bude obsahovať aj krátky technický slovník, ktorý bude rozšírený o tipy a návody, ktoré budú integrované do ovládacieho panela WordPress, takže pojmy ako ins, iframe alebo figure už nebudú záhadou.
Zámerom je zlepšiť odozvu analýzy aj generované správy, keď ju budem testovať v rôznych scenároch a keď dostanem nejaké návrhy na zlepšenie alebo upozornenia na chyby.
Teraz je k dispozícii verzia 1.1.8, ktorá vám pomôže upratať metriky, a čoskoro bude vďaka verzii 1.1.9 ešte jednoduchšie opraviť vizuálnu stabilitu systému WordPress. Ak si ju nainštalujete teraz, aktualizácia vám bude čoskoro doručená.
Ako to funguje?
Kód sa skladá z týchto troch krokov:
1. Funkcia PerformanceObserver
Prehliadač (Chrome, Edge, Opera) má vlastné rozhranie API s názvom Performance API. Zásuvný modul registruje "pozorovateľa" s názvom PerformanceObserver, ktorý je špeciálne nakonfigurovaný pre typ vstupu layout-shift.
Zakaždým, keď sa niečo na obrazovke pohne po tom, čo bolo pôvodne namaľované, prehliadač vygeneruje udalosť. Zásuvný modul túto udalosť zachytí a získa dva kľúčové údaje:
- Hodnota posunu: (Toto číslo je 0,0145).
- Prvok vinníka: Prehliadač presne informuje zásuvný modul o tom, ktorý uzol HTML bol presunutý.
2. Filter "Nedávna interakcia"
Tu sa zásuvný modul snaží byť šikovný. Nie všetky pohyby sú "zlé". Ak kliknete na rozbaľovaciu ponuku a obsah sa posunie nadol, je to očakávaný pohyb používateľa.
Zásuvný modul kontroluje vlastnosť hadRecentInput. Ak ste sa v posledných 500 ms dotkli klávesu alebo klikli, prehliadač označí tento pohyb ako "očakávaný" a zásuvný modul ho ignoruje, aby sa zabránilo falošným poplachom. Zisťuje len pohyby, ktoré sa vyskytnú neočakávane (napríklad náhle zobrazená reklama).
3. Vizuálne zobrazenie (červené rámčeky)
Keď má zásuvný modul presunutý prvok, prichádza na rad vizuálna časť:
- Výpočet súradníc: Používa funkciu getBoundingClientRect() na zistenie, kde sa daný prvok na obrazovke v danom okamihu nachádza (pixel hore, pixel vľavo).
- Vstrekovanie rámu: Vytvorte
divs absolútnou pozíciou, 2px červeným okrajom a veľmi vysokýmz-indexom, ktorý sa nakreslí na všetko. - Štítok: V ľavom hornom rohu červeného poľa pridajte malý rámček s názvom štítku (ins, img, div) a hodnotou kumulovaného CLS.
Prečo je to lepšie ako externá správa?
Nástroje, ako je PageSpeed, niekedy nedokážu odhaliť CLS, pretože sa neposúvajú na spodok alebo nepočkajú na načítanie určitých reklám.
Zásuvný modul pomocou perzistencie meria CLS nahromadené počas relácie prehliadania aktuálneho používateľa. Ak sa nejaký prvok pohne trochu na začiatku a trochu pri posúvaní, zásuvný modul to sčíta a zvýrazní, čím sa získa čo najpresnejší reálny údaj, ktorý spoločnosť Google nakoniec zobrazí vo svojej správe"Chrome User Experience" (CrUX).
