Ovládněte GTmetrix: nepostradatelný nástroj pro optimalizaci vašeho webu

Špatně optimalizovaný web znamená pro vaše návštěvníky pomalé a nepříjemné procházení. To se projevuje zejména na tom, jak dlouho na webu zůstávají, na výkonu serverů, a dokonce i na umístění vašeho webu ve vyhledávačích. Existuje však vynikající nástroj, který vás optimalizací webů provede: GTmetrix. Pojďme si ho rozebrat.

GTmetrix jako měřicí nástroj

Než se pustíte do optimalizace webu, musíte nejprve umět přesně změřit jeho výkon. Měření je pak potřeba opakovat po celou dobu optimalizace, abyste ověřili účinnost jednotlivých provedených vylepšení.

Web https://gtmetrix.com/ je k tomu ideálním nástrojem. Měří výkon webů z pohledu návštěvníků a poskytne vám přesné informace o tom, co lze optimalizovat.

Doporučujeme založit si bezplatný účet: umožní vám nastavit preference (umístění testovacího serveru a prohlížeč), vracet se k předchozím výsledkům a především budete mít přednost ve frontě testů. Ušetříte tak drahocenné minuty při četných testech, které jsou ke správné optimalizaci webu potřeba.

Pozn.: Obecně platí, že byste měli přednostně kontrolovat výkon nejnavštěvovanějších stránek. První test se proto obvykle týká domovské stránky, která je u většiny webů hlavním vstupním bodem.

Váš první test v GTmetrix

Přejděte na domovskou stránku GTmetrix, zadejte URL svého webu a klikněte na „Analyze“.

Pak už stačí chvíli počkat na výsledek.

V tomto příkladu netrpí náš web na WordPressu žádnými vážnými problémy s optimalizací. Hodnocení „B“ je obvykle přijatelné. Přesto chceme dosáhnout hodnocení „A“ a v některém z dalších článků vám ukážeme jak. Prozatím se zaměříme na pochopení GTmetrixu, protože to je pro efektivní optimalizaci webu naprosto nezbytné.

První pohled na GTmetrix

Web GTmetrix je výborně promyšlený a na první pohled vám poskytne přesnou představu o optimalizaci testovaného webu. Projděme si jednotlivé části tohoto přehledu.

Performance Scores

Tato hodnocení jsou výsledkem kombinace mnoha testů, které si podrobně popíšeme dále.

• PageSpeed Score vychází z testů Googlu. Jeho podrobnosti se zobrazují na stránce ve výchozím nastavení. Tento test se přímo týká obsahu webu odesílaného návštěvníkům, ať už jde o obrázky, nebo skripty a jejich metainformace. Minimální doporučené hodnocení je „B“. Pod touto hranicí je třeba optimalizaci webu důkladně prověřit. Toto hodnocení je zásadní, protože pochází od Googlu, a může tedy ovlivnit vaše umístění ve vyhledávačích, což je pro jakoukoli online činnost zcela klíčové.
• YSlow Score ukazuje techničtější optimalizace, například počet provedených požadavků, hlavičky odesílaných souborů – tedy metainformace o souborech, které odesílá webový server –, nevhodné postupy u používaných skriptů atd. Stejně jako u PageSpeed Score je minimální doporučené hodnocení „B“. Pod touto hranicí je třeba optimalizaci webu důkladně prověřit.

Page Details

• Fully Loaded Time udává, jak dlouho trvalo serveru GTmetrix načíst stránku celou. Abyste získali hodnotu, která lépe odpovídá tomu, co uvidí vaši návštěvníci, zvolte server GTmetrix co nejblíže vašim návštěvníkům. K tomu potřebujete bezplatný účet GTmetrix. Ideálně by načtení mělo trvat méně než 3 s. Mějte na paměti, že server GTmetrix může stránku načítat pomaleji než skutečný návštěvník s výborným připojením v blízkosti vašeho serveru; v průměru však budou mít vaši návštěvníci připojení poměrně podobné tomu, které má GTmetrix. U webu na WordPressu se všemi myslitelnými optimalizacemi byl nejlepší výsledek, který jsme naměřili, zhruba 0,9 s. Počítejte s tím, že tento výsledek může ovlivnit řada faktorů, zejména crony WordPressu (plánované úlohy spouštěné jednou za minutu), zatížení serveru atd. Pro spolehlivější hodnotu proto klidně spusťte 2 nebo 3 testy po sobě. A konečně je dobré mít na paměti, že tato doba je součtem času, který server potřebuje k vygenerování stránky (ten závisí na optimalizaci skriptů na vašem webu), a času potřebného k odeslání souborů. Abyste zjistili, na čem zapracovat, budete muset prozkoumat zejména „TTFB“ (time to first byte), o kterém se zmíníme na konci článku.
• Total Page Size je velikost vaší stránky v kB nebo MB. U většiny webů doporučujeme zůstat pod 1 MB a u graficky bohatších webů počítat maximálně se 2 MB. I když pomineme všechna ostatní zpoždění, k nimž dochází před odesláním souborů webu návštěvníkovi, 2 MB na připojení ADSL s rychlostí 8 Mbit/s znamenají v nejlepším případě už 2 sekundy načítání. 2 sekundy na stránku mohou být hodně, pokud procházení vašeho webu vyžaduje mnoho kliknutí. Weby s fotografiemi nebo jiným multimediálním obsahem mohou být z tohoto limitu výjimkou a použít objem dat potřebný pro kvalitní zobrazení; přesto je lepší volit obrázky, které se zvětší jen v případě potřeby.
• Requests udává počet požadavků neboli souborů potřebných k zobrazení webu. Tento faktor může mít na rychlost vašeho webu velmi výrazný vliv. Ideálně by tato hodnota měla být pod 20 požadavků. Tolerovat lze maximálně 40. Pokud překročíte 50 požadavků, může se váš web znatelně zpomalit, zejména na pomalejším internetovém připojení. Od 200 požadavků obvykle ztrácíte několik dlouhých sekund (5 až 10 s) načítání v závislosti na tom, odkud se vaše soubory načítají – některé skripty, písma nebo styly se totiž mohou načítat i z jiných zdrojů než z vašeho webu, čemuž je ideálně lepší se vyhnout.

Testy PageSpeed a YSlow podrobně

Ukážeme si zde nejčastější problémy s optimalizací. Získáte tak solidní základ pro pochopení hlavních potíží s optimalizací webů. Tento seznam však není vyčerpávající a pokud se váš problém týká jiného testu, GTmetrix po rozbalení příslušného řádku nabízí stručné vysvětlení (v angličtině) ke každému testu. Poměrně snadno také najdete zdroje (často fóra), které podrobně popisují další, vzácnější chyby, na které můžete narazit.

PageSpeed podrobně

Zde jsou body, které se objevují nejčastěji, a způsob, jak je vyřešit.

• Serve scaled images: Znamená to, že odesíláte obrázky ve větší velikosti, než v jaké se zobrazují. Obrázky na webu bude potřeba zmenšit nebo vygenerovat náhledy v různých velikostech, aby se zobrazovaly ve správném měřítku bez ohledu na velikost obrazovky návštěvníka.
• Optimize images: Znamená to, že komprese obrázků není podle PageSpeed dostatečně silná.
• Defer parsing of JavaScript: Znamená to, že skripty JS během svého načítání blokují zobrazení webu. Je proto potřeba je načítat až na konec. Tento problém obvykle pochází z použité šablony, motivu nebo builderu. Některé CMS nebo skripty jsou také velmi objemné a špatně optimalizované. Je proto nutné volit skripty (CMS, motivy, buildery), které jsou v tomto ohledu správně optimalizované. Problém lze někdy vyřešit pomocí některých cachovacích pluginů (zejména W3 Total Cache pro WordPress).
• Leverage browser caching: Toto hlášení se objeví, když se soubory načítají, aniž by server určil dobu jejich platnosti (známé hlavičky Expires v Apache). Doporučená hodnota je 15 dní. Lze ji nastavit v souboru .htaccess na webu. Na virtuálním nebo dedikovaném serveru umožňuje Plesk změnit výchozí hodnotu v „Nastavení Apache a nginx“ a poté „Expires“, kde nastavíte vlastní hodnotu 15 dní. Na sdíleném serveru můžete o zvýšení této hodnoty požádat podporu HaiSoft prostřednictvím tiketu. U WordPressu to umí zohlednit i některé cachovací pluginy. Pozor! Má to jedno omezení: pokud váš web (nebo motiv/builder) využívá externí zdroje, nemáte nad hlavičkami Expires těchto souborů kontrolu (týká se to například písem Google, která tuto chybu vyvolají); to někdy stačí k výraznému snížení hodnocení v GTmetrix. V takovém případě je potřeba zvolit motiv, který je v tomto ohledu dobře optimalizovaný, a externí zdroje tedy využívá co nejméně.
• Minify JavaScript/CSS/HTML: Jde o kompresi souborů se skripty. Pokud nejsou zkomprimované už v základu, je třeba použít cachovací plugin, který tuto možnost nabízí.

YSlow podrobně

Tento test je obvykle srozumitelnější. Zde je většina hlášení, se kterými se setkáte:

• Add Expire headers: Je obdobou hlášení Leverage browser caching v PageSpeed.
• Make fewer HTTP requests: Objeví se, když váš web volá příliš mnoho zdrojů. Může to být způsobeno počtem obrázků, ale častěji za tím stojí použitý motiv nebo builder. Proto dávejte přednost nativnímu motivu před builderem a vybírejte ho pečlivě – ujistěte se, že nevolá zdroje roztroušené po mnoha místech.
• Use a Content Delivery Network (CDN): Zde se doporučuje použít CDN, například Cloudflare. Ulehčí serveru a zrychlí odesílání souborů, pokud se návštěvníci nacházejí daleko od serveru (více než 2 000 km). Vyplatí se to zvážit zejména u webů s velmi vysokou návštěvností. HaiSoft vám v případě potřeby může CDN nasadit a spravovat.
• Reduce the number of DOM elements : Znamená, že máte na stránce příliš mnoho prvků, což může prohlížeč při vykreslování zpomalit, když interpretuje skripty, které se na stránku uplatňují.

Waterfall

Zobrazení „Waterfall“ vám umožní sledovat dobu načítání všech souborů a také využití prostředků prohlížeče, který stránku načítá. Tento nástroj umožňuje vizualizovat dopad souborů a skriptů na serveru a případně najít nejhůře optimalizované skripty, které je potřeba přepracovat nebo nahradit.

Timings

A konečně časy (timings) ukazují jednotlivé fáze načítání stránky.

• TTFB, neboli „Time To First Byte“, udává dobu, kterou server potřebuje k odeslání první odpovědi na požadavek klienta na načtení stránky. Nepřímo tak vypovídá o tom, jak dlouho serveru trvá stránku vygenerovat. Tato doba závisí na výkonu serveru. Pokud je výkon serveru špičkový (jako u HaiSoft!), závisí především na optimalizaci vašeho webu: na kvalitě a množství použitých skriptů, kompatibilitě s novějšími skripty atd. Dedikovaný nebo virtuální server dimenzovaný přesně podle vašich potřeb zajistí co nejnižší a nejstabilnější TTFB. U webů, jako je WordPress, které každou minutu spouštějí cron, se může TTFB výrazně lišit, pokud test GTmetrix na tento cron narazí.
• DOM int. udává dobu potřebnou ke stažení HTML stránky k návštěvníkovi.
• DOM loaded udává dobu potřebnou ke zpracování HTML kódu, který neblokují skripty JS a podobně.
• First paint udává okamžik, kdy se stránka v prohlížeči návštěvníka skutečně začne zobrazovat.
• Onload udává okamžik, kdy je stránka včetně všech skriptů zcela načtena a provedena.

Doporučuje se celkem maximálně 3 s. Ideálně by se tato hodnota měla pohybovat spíše kolem 1 sekundy.

Závěr

Viděli jsme, že GTmetrix je výkonný nástroj, bez kterého se diagnostika optimalizace webu neobejde.

Také jsme si vysvětlili, že optimalizace spočívá v co největším zkrácení doby načítání pro návštěvníky. Lze jí dosáhnout ve dvou hlavních rovinách: jednak optimalizací doby, kterou server potřebuje ke generování stránek webu (k tomu je třeba optimalizovat skripty, nehromadit pluginy apod.), jednak optimalizací zdrojů odesílaných návštěvníkům, tedy obrázků, skriptů a písem.

Vede k tomu řada kroků, které jsou někdy v rozporu s intuicí, například volba motivu webu a instalovaných pluginů, s čímž souvisí další důležité kritérium – počet souborů odesílaných návštěvníkům. Dále jsou tu metainformace souborů, rozměry a komprese obrázků atd. U všech těchto prvků je důležité pochopit jejich příčiny a důsledky, a právě k tomu má tento článek sloužit.

Už z něj sice můžete odvodit, jak svůj web optimalizovat, ale tím nekončíme: velmi brzy vás provedeme konkrétní optimalizací vašeho webu na WordPressu pomocí GTmetrixu!

Abyste nepřišli o pokračování, sledujte nás na sociálních sítích!