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

Jan Hornung Naposledy aktualizováno 12. října 2020
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. října 2020

Chceš WordPress některá opatření jsou křišťálově jasná, dobře známá a prokázaná účinnost. Ale i údajně dobře optimalizované stránky mají často stále potenciál. To je důvod, proč to stojí za to mimo Google PageSpeed Insights a spol. Protože mnoho výkonnostních nástrojů poskytuje skutečná data goldminen, což umožňuje velmi komplexní analýzu - pokud víte, co potřebujete hledat. Dnes vám ukážu 7 tipů, jak udělat analyt eza pouhých 7 sekund.

Jednoduché nástroje pro sledování výkonu, jako je například testovací můj web společnosti Google neboGoogle PageSpeed Insights v důsledku toho seznam doporučení pro opatření. To by mohlo být pro začátek v pořádku. Pokud chcete WordPress projekty však efektivně sledovat a WordPress Pokud chcete smysluplně optimalizovat, měli byste se dříve nebo později uchýlit k nástroji pro výkon, který také vysídlí dobu načítání stránky a ukáže vám přesně, jak se váš blog, váš obchod, 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ý diagram. Těchto poněkud objemných datových sad si mnoho uživatelů sotva všimne. Pokud jste však profesionální WordPress Měl bys pochopit, jak fungují. Protože: Neexistuje žádný jiný zdroj dat, který by vám ukázal, jak rychle se vaše stránka načítá, jak dobrý je hostitel, jak efektivně se stránka načítá a kde se nacházejí staveniště vašeho webu.

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? Dnes vám to 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 také s nejčastějšími Brzdy doby nabíjení od WordPress stránky, tyto důvody vždy končí na předních místech.

Naše zkušenosti ze stovek systematických analýz výkonu s testováním webových stránek a rozsáhlými kontrolami stránek však ukazují: I v údajně "optimalizovaných" WordPress Stránky jsou vždy nalezeny výkonnostní úskalí. A to je místo, kde vodopádová mapa pomáhá. Protože může udělat něco zvláštního: ukáže vám, jak se vaše stránka načítá, 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 optimalizace vodopádu Pingdom
S nástroji Pingdom se musíte trochu posouvat, abyste dosáhli vodopádového diagramu. Odpovídající oddíl se nazývá Žádosti o soubor. Test webových stránek a GT-Metrix mají pro diagramy své vlastní karty.

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 na ose X odebral.
    Vodopádové diagramy jsou strukturovány chronologicky: Osa X umožňuje přesně zjistit, kdy se prvek začne načítat a jak dlouho trvá načtení. Právě tato chronologická struktura činí vodopádový diagram tak cenným. Tímto způsobem můžete přesně vidět, kde je doba nabíjení ztracena a jaké procesy musíte začít optimalizovat rychlost nabíjení.
  2. Každý požadavek HTTP je zaznamenán na ose Y.
    U většiny vodopádových grafů můžete klepnutím na prvky na ose Y získat další informace o nich.
  3. Legenda označuje, jaký druh prostředku se načítá.
    Webové stránkytest barvy HTML, CSS, obrázky, flash atd., Pingdom používá symboly pro tento účel.
  4. Další kódovací systém poskytuje informace o tom, jak jsou jednotlivé požadavky prováděny, například jak dlouho trvá připojení k serveru nebo zda je použit 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ýkonu se osvědčila 7 sekundová analýza: Diagram vám na první pohled poskytne informace o sedmi důležitých faktorech rychlosti nabíjení. Těchto sedm hacků vám pomůže přesně pochopit, jak a jak rychle je váš web vykreslen. A ukazují, kde je potenciál je urychlit, vyřešit problémy nebo je dále zlepšit.

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.

S novým webovým standardem mohou být požadavky zpracovávány současně, nikoli jeden po druhém. Kromě toho server již preventivně odesílá soubory HTML do prohlížeče pod HTTP/2. Nový standard kompenzuje nevýhody, ke které může dojít z velkého počtu požadavků HTTP. Chcete-li však těžit z HTTP/2, musí být vaše webové stránky načteny přes HTTPS, tj. mají certifikát SSL.

V každém případě 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: S více než 100 dotazy je ve většině případů určitě potenciál proúspory.

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 plivají analytické nástroje. Jediná věc, která se pro ně počítá, je: jak rychle se načítání stránky cítilo.

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í je však tato plstěná doba načítání pomocí vodopádových diagramů také velmi dobrá pro tečení. Pokud víme, Webpagetest je jediný bezplatný nástroj, který rozlišuje mezi technicky měřenou dobu načítání a dobu načítání vnímanou uživatelem.

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 optimalizace mapování doby nabíjení plsti
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í.

Test webové stránky je jediný nástroj, který poskytuje tato data. Nejsme si toho vědomi od Pingdom Tools nebo GTMetrix. Toto pravidlo se proto použije pouze v případě, že používáte webovou stránkutest:

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 hostitele, 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 je jasně vidět ve vašem vodopádu. Vzhledem k tomu, že požadavky jsou odebrány chronologicky, několik pruhů začíná ve stejném bodě osy X při použití protokolu HTTP/2.

WordPress optimalizovat chování nabíjení 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 tak, jak to vypadá, když jsou obrázky 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 identifikaci předávání
Tato stránka má několik 302 přesměrování.

Pomocí vodopádového diagramu můžete na první pohled vidět, kolik a která přesměrování byla nastavena. To také pomáhá detekovat forwardloops po změně DNS. Díky žlutým značkám jsme byli několikrát schopni detekovat zbytečné nebo dokonce škodlivé smísící se písky.

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

Tip 7: Detekce chyb 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 diagram chyby jsou identifikovány č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 tahákem jsou zobrazeny všechny tipy

Vodopádový graf je pravděpodobně nejcennějším hodnocením, které můžete použít pro WordPress lze získat stránky. To kombinuje různá data, která byste jako operátor stránky měli mít na paměti: časy načítání, pořadí vykreslování a chybové zprávy. Vyzbrojeni tipy z tohoto článku můžete rychle a efektivně zjistit, kde je stále třeba zvětšovat potenciál optimalizace:

  • 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.

Podobné články

Komentáře k tomuto článku

Napsat komentář

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