WordPress optimalizace: Jak analyzovat webové stránky za 7 vteřin

Jan Hornung Naposledy aktualizováno 12.
9 min.
S těmito tipy a naším tahákem můžete analyzovat WordPress stránky za pouhých 7 sekund a ještě lepší než Google PageSpeed Insights
Naposledy aktualizováno 12.

Pokud chcete optimalizovat WordPress, jsou některá opatření křišťálově jasná, dobře známá a osvědčeně účinná. Ale i údajně dobře optimalizované stránky se často dají vylepšovat. Proto to stojí za to, se podívat na víc než jen na Google PageSpeed Insights a spol. Protože mnoho výkonnostních nástrojů poskytuje skutečný zlatý důl dat, který umožňuje velmi komplexní analýzu – pokud víte, co hledat. Dnes vám ukážu 7 tipů, se kterými dosáhnete analýzyza pouhých 7 vteřin.

Jednoduché nástroje pro výkonnost, jako je Google Test My Site nebo Google PageSpeed Insights doporučují především seznam opatření. To může pro začátek stačit. Pokud chcete WordPress projekty však efektivně sledovat a WordPress smysluplně optimalizovat, měli byste se dříve nebo později uchýlit k nástroji pro výkonnost, který také poskytuje přehled o době načítání vaší stránky a přesně ukazuje, jak se váš blog, váš obchod a stránka vaší společnosti chová při nakupování.

Patří mezi ně například Pingdom, GTMetrix nebo Webpagetest. Ty často poskytují tzv. vodopádový graf . Těmto poněkud objemným souborům údajů málokterý uživatel věnuje pozornost. Pokud však s WordPressem pracujete na profesionální úrovni, měli byste pochopit, jak fungují. Protože: Neexistuje žádný jiný zdroj dat, který by vám ukázal, jak rychle se vaše stránka načte, jak dobrý je váš hoster, jak efektivně se vaše stránka načte a kde se na vašem webu nacházejí různá staveniště.

A s trochou praxe můžete analyzovat každou stránku na první pohled a za 7 vteřin (sám jsem si to změřil)  😉

Jak to má fungovat? To vám dnes ukážu krok za krokem!

WordPress optimalizace: Bez vodopádového grafu vídíte pouze povrch

Možná se nyní divíte: Proč vynaložit celé to úsilí? Existují skvělé výkonnostní nástroje, které mi již ukazují všechny důležité optimalizační opatření. Kromě toho jsou obvykle tak jako tak omezeny na následující body:

Jistě, jakmile jste objasnili a optimalizovali tyto body, vytvořili jste velmi dobrý základ pro opravdu rychlou stránku. Proto jsou tyto důvody (zcela správně) zahrnuty ve všech dobrých výkonnostních průvodců.

Například

A i u nejčastějších bzrd načítací doby WordPress stránek najdete tyto důvody vždy na předních místech.

Naše zkušenosti ze stovek systematických analýz výkonnosti s testováním webových stránek a rozsáhlými kontrolami stránek ukazují: I u údajně "optimalizovaných" WordPress stránkách jsou vždy nalezeny výkonnostní úskalí. A tady pomůže vodopádový graf. Protože ten umí něco navíc: ukáže vám, jak se vaše stránka načte, které prvky jsou načteny a jak rychle se to všechno děje.

Jak se dostat k datovému pokladu

Všechny dobré analýzy výkonnosti také vydávají vodopádové grafy. Například pokud používáte Pingdom Tools, musíte jen scrollovat dostatečně dolů.

WordPress optimalizovat Pingdom Vodopád
U Pingdom Tools musíte nejdřív trochu scrollovat, abyste se dostali k vodopádovému grafu. Odpovídající část se nazývá File Requests. Test webových stránek a GT-Metrix mají své vlastní karty pro diagramy.

Abyste porozuměli všem těmto informacím správně, musíte pochopit, jak vodopádové grafy číst.

Jak číst vodopádové diagramy správně

Koncentrované informace vedou k tomu, že vodopádové grafy nejsou zrovna nejsnáž pochopytelné. Ve skutečnosti musíte vědět pouze čtyři věci, abyste soubory údajů pochopili:

  1. Čas se nachází na ose X.
    Vodopádové grafy jsou strukturovány chronologicky: Osa X umožňuje přesně vidět, kdy se prvek začne načítat a jak dlouho načtení trvá. Je to právě tato chronologická struktura, která dělá vodopádový graf tak cenným. Tímto způsobem můžete přesně vidět, kde dochází ke ztrátě doby načítání a jaké procesy musíte začít optimalizovat pro rychlost načítání.
  2. Každý požadavek HTTP se zaznamenává na ose Y.
    U většiny vodopádových grafů můžete získat informace o danných elementech kliknutím na prvky na ose Y.
  3. Legenda označuje, jaký druh zdroje se načítá.
    Webpagetest označuje HTML, CSS, obrázky, flash atd. barevně, Pingdom používá pro tento účel symboly.
  4. Další kódovací systém poskytuje informace o způsobu provádění jednotlivých požadavků, například jak dlouho trvá připojení k serveru nebo zda se používá protokol HTTPS.
WordPress optimalizace: Jak analyzovat webové stránky za 7 vteřin
WordPress optimalizace oblastí vodopádového diagramu
Na tomto obrázku najdete čtyři výše popsané oblasti.

WordPress optimalizace pomocí 7mi vteřinové analýzy

Takže teď je jasné, jak číst vodopádový graf - ale jaké postřehy z něj můžete čerpat?

V naší analýze výkonnosti se u nás etablovala analýza za 7 vteřin : Diagram vám poskytne pohled na sedm důležitých faktorů pro rychlost načítání. Těchto sedm vychytávek vám pomůže přesně pochopit, jak a jak rychle jsou vaše webové stránky rendovány. A ukazují, kde je potenciál k urychlení, opravě problémů, nebo dalšímu vylepšení.

Poznámka

V našich příkladech budeme mimochodem vždy odkazovat na vodopádové grafy od Webpagetest, protože jsme vždy používat tento nástroj, ať už ručně nebo automaticky.

Tip #1: Záleží na velikosti

Čím delší vodopád je (tj. čím více prvků se nachází na ose Y), tím více požadavků je třeba zpracovat a tím pomaleji se stránka načte. Přesto nemusí být dlouhý vodopád špatný. Existují funkce a externí zdroje, bez kterých se prostě nemůžete nebo nechcete obejít. Jedním z takových nástrojů je například live chat. Načítání chatového programu samozřejmě zpomaluje naše stránky. Podpora rychlého chatu je však klíčovou součástí našeho hostingu. Takže vzdát se tohoto pluginu nemůžeme.

I HTTP/2 zajišťuje, že pouhý počet požadavků již není tak důležitý, jak tomu bylo ještě před několika lety.

Protože s novým webovým standardem mohou být požadavky zpracovány současně, nikoli jeden po druhém. Kromě toho server již odesílá soubory HTML do prohlížeče preventivně v HTTP/2. Nový standard kompenzuje nevýhody, které mohou nacházet z velkého počtu požadavků HTTP. Aby však bylo možné využívat protokol HTTP/2, musí být vaše webové stránky načteny prostřednictvím protokolu HTTPS, tj. přes certifikát SSL .

V každém případě nám zkušenosti ukázaly, že neexistuje přímá korelace mezi délkou vodopádu a skutečnou rychlostí načítání. Alespoň do určitého limitu: U více než 100 dotazů existuje ve většině případů celá řada potenciálů k úspoře.

Pokud váš web tuto hranici překročí, měli byste se podrobně podívat na požadavky HTTP. Například naše domovská stránka se načte s více než 130 požadavky HTTP. Tady je potenciál pro optimalizaci.

Pokud váš vodopád obsahuje více než 100 žádostí, podívejte se, bez kterých se můžete obejít.

Tip #2: Zjišťování doby načítání

Maximální hodnota na ose X je nezbytná pro analýzu rychlosti načítání: zde můžete vidět, kolik času uplyne, než bude váš web zcela vykreslen. Čím menší je tato hodnota, tím lepší.

Pokud je maximální hodnota osy X vyšší než 10, měli byste se určitě zabývat s rychlostí nabíjení vaší strany.

Celková doba načítání stránky by měla být kratší než 10 vteřin

Tip #3: Poznat pociťovanou dobu načítání

Většině uživatelů je jedno, jaké hodnoty vyplivnou analytické nástroje. Jediná věc, která je zajímá, je: jak rychle se stránka načte podle pocitu.

Pro vás jako provozovatele webu je proto důležité, maximálně zlepšit tento pocit rychlosti. Toho můžete dosáhnout například optimálním ukládáním do mezipaměti, nadstandardní optimalizací nebo – pokud vaši zákazníci sídlí v zahraničí – využitím sítě pro doručování obsahu (Content Delivery Networks, CDN).

Naštěstí se ale i tato pociťovaná doba načítání dá snadno zjistit přes vodopádový graf. Co víme, je Webpagetest jediný bezplatný nástroj, který rozlišuje mezi technicky měřenou dobu načítaní a uživatelem pociťovanou dobu načítání.

Celý diagram ukazuje - méně důležitou - technickou dobu načítání. Doba načítání je skryta mezi modrými a zelenými čárami v diagramu.

Zelená čára označuje, kdy je načten první vizuální prvek webové stránky (zde se nazývá bod "Start Render"). Modrá čára označuje, kdy uživatel vnímá stránku jako plně načtenou – od tohoto okamžiku se výrazně zvyšuje pravděpodobnost interakce se stránkou. Tyto dva řádky by měly být co nejdále vlevo a co nejblíže u sebe.

WordPress optimalizovat mapování doby nabíjení plstění
Oranžová oblast zobrazuje fázi, ve které není vykreslen žádný viditelný obsah. Až do konce této fáze návštěvník vidí pouze jednu bílou stranu. Modrá oblast označuje časový rozsah mezi počátečním vykreslením a časem načítání, během kterého může návštěvník vnímat proces viditelného vykreslování (např. přesýpací hodiny). Oba dohromady tvoří pociťovanou dobu načítání.

Webpagetest je jediný nástroj, který vám tato data poskytuje. Nevíme o tom, že by Pingdom Tools nebo GTMetrix toho obsahovali. Proto to platí pouze, když používáte Webpagetest:

Zelená čára by se měla objevit asi po 2 až 3 sekundách, modrá čára nejpozději po 7 sekundách.

Tip #4: HTTP/2 vs. HTTP/1

Ve srovnání s HTTP/1 nabízí HTTP/2 rozhodující výhodu: S novějším webovým standardem se stránky načítají mnohem rychleji. Kromě certifikátu SSL však potřebujete také vašeho hostera, který vám tuto službu poskytne. Mnoze provozovatelů stránek není jasné, zda to u nich skutečně jde nebo ne.

Jednou z největších výhod HTTP/2 je současné zpracování více požadavků. A můžete přesně tyto vidět ve vašem vodopádovém grafu. Vzhledem k tomu, že jsou požadavky odebrány chronologicky, začíná několik pruhů ve stejném bodě osy X při použití HTTP/2.

WordPress optimalizovat nabíjecí chování WordPress stránka s http/2 a bez něj
Na levé straně je typické načítání WordPress bez HTTP/2. Jednotlivé požadavky HTTP jsou prováděny postupně. Vpravo můžete vidět, jak se chová stejná stránka s HTTP/2: Jednotlivé požadavky jsou načteny současně.

Pokud se jednotlivé požadavky načítají paralelně, běží vaše stránka s HTTP/2.

Tip #5: Poznat příliš velké obrázky

U přibližně 30 procent webových stránek, které analyzujeme, stále nacházíme potenciál, pokud jde o velikost obrázků. A to přesto, že většina webmasterů předpokládá, že již dostáhli maxima.

Podle našich zkušeností jsou obrázky nejdůležitějším faktorem doby načítání stránky po ukládání do mezipaměti. Pro každý obrázek, který nahrajete v backendu, zobrazí WordPress automaticky celou řadu dalších souborů, miniatur nebo vybraných obrázků. Správná komprese těchto souborů je jedním z nejúčinnějších způsobů, jak snížit velikost a tím rychlost načítání vaší stránky.

Jak rozumně optimalizovat obrázky vám ukáží například:

Ve vodopádovém grafu lze obrázky rychle identifikovat pomocí legendy: Webpagetest je zobrazuje fialovými pruhy, Pingdom ikonou. Pouze GTMetrix nerozlišuje obrázky samostatně. V každém případě, pokud jsou odpovídající pruhy mnohem delší než pruhy zbývajících požadavků, znamená to dlouhou dobu načítání obrázku.

WordPress Optimalizujte to, jak to vypadá, když obrázky jsou opravdu příliš velké
Extrémní, ale velmi názorný příklad nekomprimovaných obrazů. Některé soubory samy o sobě trvají více než 8 sekund, než se načtou a zpomalujou celou stránku.

V takovém případě, jak je uvedeno výše, byste se měli podívat na vaše obrázky. Kliknutím na odpovídající požadavek můžete obvykle přesně vidět, které soubory jsou na vodopádovém grafu. Díky tomu je hledání brzd doby načítání mnohem jednodušší.

Dlouhé pruhy načítání pro obrazové zdroje označují potenziál komprese.

Tip #6: Hledání přesměrování

Vodopádový graf vám pomůže pochopit nejen to, které položky jsou načteny, kdy a jak rychle, ale také kolik přesměrování bylo nastaveno a kam ukazují.

Požadavky s přesměrováním jsou obvykle zvýrazněny barevně. Graf také ukáže, které přesměrování je nastaveno a kam vede.

WordPress optimalizovat předávání identifikovat
Tato stránka má několik 302 přesměrování.

S vodopádovým grafem můžete na první pohled vidět, kolik a které přesměrování bylo nastaveno. To také pomáhá najít smyčky přesměrování po změně DNA. Díky žlutým značkám jsme byli schopni několikrát najít zbytečná nebo dokonce škodlivá přesměrování.

Žluté čáry označují přesměrování.

Tip #7: Poznat chyby na první pohled

Občas se stane, že se prvky webové stránky nevykreslí správně. To může ovlivnit například rámce AdSense, ale také vložené mapy a písma.

WordPress optimalizovat v vodopádu diagramchyby jsou označeny červenými čarami
Tato stránka vyvolá chybu 404.

V tomto případě vyvolá vodopádový graf chybovou zprávu a označí řádek s požadavkem červeně. Diagram také označuje, o kterou chybu se jedná a který zdroj chybu vytvoří.

Červené čáry označují chyby při vykreslování stránky.

S cheat sheetem máte přehled o všech tipech

Vodopádový graf je pravděpodobně nejcennějším vyhodnocením, které můžete pro své WordPress stránky získat. Zde jsou kombinována různá data, o kterých byste jako operátor stránky měl mít přehled: časy načítání, pořadí vykreslování a chybové hlášení. Vyzbrojeni tipy z tohoto článku rozpoznáte rychle a efektivně, kde je ještě třeba zlepšit optimalizaci:

  • Je vodopád příliš dlouhý (více než 100 žádostí)?
  • Je maximální hodnota osy X příliš velká (větší než 10)?
  • Načítají se požadavky paralelně (přes HTTP/2)?
  • Jsou obrázky příliš velké (takže špatně optimalizované)?
  • Jsou zelené a modré čáry příliš daleko vpravo nebo příliš daleko od sebe (vnímá uživatel tedy stránku jako pomalou)?
  • Existují neočekávané žluté čáry (přesměrování)?
  • Existují červené čáry (chyby)?

Je pravda, že poprvé budete pro tuto analýzu potřebovat ještě déle. Ale s trochou zkušeností vám vodopádové grafy umožní WordPress mnohem lépe pochopit a lépe optimalizovat projekty.

Jeden z prvních členů u RAIDBOXES a vedoucí podpory. Na Bar a WordCamps, preferuje mluvit o PageSpeed a výkonnosti webových stránek. Nejlepší způsob, jak ho podplatit, je espresso – nebo bavorský preclík.

Komentáře k tomuto článku

Napsat komentář

Vaše e-mailová adresa nebude zveřejněna. Povinná pole jsou označena * .