Jak používat GTmetrix Speed ​​Test Tool + Vylepšete své GTmetrix PageSpeed ​​skóre na WordPress

Pokud chcete zlepšit výkon svého webu WordPress, musíte vědět, kde se právě nacházíte. S tím vám pomáhá nástroj pro testování rychlosti GTmetrix.


S GTmetrix připojíte URL svého webu a GTmetrix vyplivne vaše aktuální metriky výkonu, skóre, doporučení a analytické nástroje, které vám pomohou optimalizovat výkon vašeho webu.

V těchto přehledech je však spousta informací, takže jak z nich vytěžíte maximum, aby se váš web urychlil?

To je to, co se chystáme pokrýt v našem kurzu GTmetrix pro rychlostní testy. V tomto příspěvku:

  • ✅ Provezte si vše, co výkonový nástroj GTmetrix nabízí
  • ✅ Řekněte, jak zlepšit skóre GTmetrix (a jak velký důraz je třeba k těmto skóre přikládat)
  • ✅ Ukážeme vám některé pokročilé analytické nástroje, například analýzu vodopádu

Jak používat GTmetrix Speed ​​Test Tool

Základní informace a nejčastější dotazy GTmetrix

Než se dostaneme do drsného drzosti, projdeme si několik základních informací a otázek ohledně toho, co GTmetrix nabízí a jak to funguje.

Co nabízí test rychlosti GTmetrix?

Rychlostní test GTmetrix vám pomůže vyhodnotit výkon vašeho webu několika různými způsoby.

Na vysoké úrovni vám umožní zjistit, jak dlouho se váš web načítá.

Pak vám to také pomůže analyzovat, proč se váš web načítá tímto způsobem a jak ho můžete vylepšit. Za tímto účelem:

  • Hodnocení webu podle dvou různých metrik – Google PageSpeed ​​a YSlow.
  • Poskytuje graf vodopádu a analýzu časování abyste viděli, jak se každý jednotlivý požadavek načítá a kde jsou potenciální úzká místa.
  • Pořizuje videozáznamy abyste viděli, jak se váš web načítá návštěvníkům.
  • Zaznamenávají se vaše historické výsledky testů za posledních 30 dní, abyste mohli analyzovat, jak se v průběhu času mění výkon vašeho webu.

Odkud pocházejí skóre GTmetrix?

GTmetrix nemá svůj vlastní bodovací mechanismus. Místo toho generuje svá skóre pomocí dvou metod třetích stran:

  • Google PageSpeed – jedná se o soubor 26 různých pravidel. Každé pravidlo dostane své vlastní skóre a je váženo jinak. Souhrnné skóre je místo, odkud pochází vaše celkové skóre PageSpeed.
  • YSlow – YSlow je projekt s otevřeným zdrojovým kódem od společnosti Yahoo (pamatujte na Yahoo?), Který hodnotí váš web podle 19 různých pravidel. Stejně jako PageSpeed ​​i vaše celkové skóre pochází z váženého výsledku všech těchto jednotlivých pravidel.

Jsou skóre GTmetrix důležité?

Ano i ne.

Tady je "Ano" část:

Měli byste věnovat pozornost skóre GTmetrix, protože nízké skóre pravděpodobně znamená, že jste nezavedli některé důležité osvědčené postupy front-end výkonu.

Ale tady je "Ne" část:

Vaši návštěvníci se nestarají o vaše skóre GTmetrix – starají se o to, jak dlouho trvá načítání a interaktivita vašeho webu.

Mít web WordPress, který se načte za méně než dvě sekundy a má skóre GTmetrix v 70. letech, je mnohem lepší než mít web WordPress, který trvá čtyři sekundy, ale načte perfektních 100.

V zásadě věnujte pozornost skóre, protože vám poskytnou rychlý odhad toho, jak optimalizovaný je váš web, ale nevšímejte si jich, protože na konci dne je důležité pouze to, jak rychle se váš web načítá..

Může se web s nízkým skóre GTmetrix stále načítat rychle?

Ano absolutně.

Zde je jeden z hlavních důvodů, proč:

Skóre GTmetrix (PageSpeed ​​a YSlow) se většinou zabývají optimalizací front-end výkonu, například tím, jak optimalizované jsou vaše obrázky a jak vypadá váš kód..

Optimalizace výkonu typu back-end je však stejně důležitá, ne-li více. To zahrnuje věci, jako je váš poskytovatel hostingu a architektura vašeho serveru (např. Pomocí Nginx vs Apache).

Pokud je váš back-end výkon hrozný, váš web se může stále načítat pomalu, i když máte perfektní skóre GTmetrix. Podobně, pokud si vyberete vynikající hosting WordPress, vaše stránky se mohou stále načítat docela rychle, i když máte nízké skóre GTmetrix.

Abyste dosáhli nejlepších výsledků, musíte optimalizovat výkon front-end i back-end.

Mohu spustit mobilní rychlostní test GTmetrix?

Ano! Důrazně se doporučuje testovat výkon počítače i mobilních zařízení, protože většina lidí v těchto dnech prochází web na mobilních zařízeních.

V podstatě je pochopení toho, jak se váš web načítá pro návštěvníky stolních počítačů, jen poloviční bitva – chcete také vyzkoušet, jaké to je pro mobilní zařízení..

Mobilní zařízení mohou mít různé vzorce. Například vykreslení JavaScriptu bude trvat déle, než mobilní telefon s nízkým výkonem, a dokonce i levnější plochy. Pokud je tedy váš web těžký v jazyce JavaScript, může to mít větší vliv na dobu načítání mobilní stránky než na dobu načítání z počítače.

Nebudete to vědět, pokud nebudete konkrétně testovat mobilní výkon.

Abyste mohli provádět mobilní testy rychlosti GTmetrix, musíte se zaregistrovat k bezplatnému účtu – více o této vteřině.

Jak spustit test rychlosti GTmetrix

Nejjednodušší způsob, jak spustit test na GTmetrix, je spravedlivý přejděte na domovskou stránku GTmetrix, připojte adresu URL svého webu a klikněte na Otestujte své stránky:

Anonymní test GTmetrix

Doporučil bych však, abyste se místo toho zaregistrovali do volný, uvolnit Účet GTmetrix před spuštěním testu.

U veřejné verze testu bude váš test rychlosti vždy používat následující konfiguraci:

  • Test z Vancouveru v Kanadě
  • Prohlížeč Chrome na ploše
  • Neupravené připojení

Ale pokud se zaregistrujete pro volný, uvolnit účet, můžete změnit všechny tyto podmínky, aby vyhovovaly vašim potřebám.

Pokud je například většina vašich návštěvníků z jihozápadního USA, můžete změnit testovací místo na Dallas v Texasu, abyste získali lepší představu o výkonu cílové skupiny.

Kromě změny testovacích míst máte také možnost použít mobilní testovací zařízení nebo změnit rychlost připojení (například simulovat pomalejší připojení 3G oproti rychlému kabelovému připojení).

Jakmile se zaregistrujete pro svůj bezplatný účet, budete moci rozšířit Možnosti analýzy nakonfigurovat více o tom, jak vaše testovací funkce:

Pokročilé možnosti konfigurace testu

Jakmile GTmetrix provede test podle vašich podmínek, vyplivne zpět stránku s výsledky:

  • Rychlé shrnutí v horní části, které obsahuje vaše skóre výkonu a základní podrobnosti o stránce
  • Podrobné výsledky, rozděleny do šesti karet

Souhrnné výsledky

Podívejme se na šest karet …

1. Karta PageSpeed

PageSpeed karta je výchozí aktivní karta při spuštění testu GTmetrix. Váš web hodnotí podle pravidel Google PageSpeed.

Za každé z 26 pravidel získá váš web skóre od 0 do 100. Poté GTmetrix sčítá tato skóre a vygeneruje vaše celkové skóre PageSpeed.

26 pravidel není rovnoměrně zváženo, takže některá budou mít větší dopad na vaše celkové skóre než ostatní.

Pokud klepnutím na šipku rozbalíte jedno z pravidel, zobrazí se další podrobnosti o konkrétních prvcích na vašem webu, které způsobují problémy:

Karta Rychlostní test GTmetrix PageSpeed

Zde jsou některé z nejčastějších problémů PageSpeed ​​a jak je opravit, aby se zlepšilo skóre …

Optimalizujte obrázky

Komprese obrázků umožňuje zmenšit velikost souborů s nulovou nebo minimální ztrátou kvality v závislosti na kompresním algoritmu.

Chcete-li automaticky optimalizovat a komprimovat všechny obrázky na svém webu WordPress, můžete použít plugin Optimole:


Optimalizace obrazu & Lazy Load by Optimole Optimalizace obrazu & Líné zatížení Optimole

Autor: Optimole

Aktuální verze: 2.3.1

Poslední aktualizace: 21. dubna 2020

optimole-wp.zip


Hodnocení 96%


50 000 + instalace


WP 4,7 + vyžaduje

využití mezipaměti prohlížeče

Ukládání do mezipaměti prohlížeče urychluje načítání tím, že ukládá určité statické prvky do místních prohlížečů návštěvníků. To znamená, že prohlížeče návštěvníků mohou při následných návštěvách tyto prostředky obsluhovat z místních počítačů návštěvníků, než je stahovat při každé návštěvě..

Mnoho pluginů pro ukládání do mezipaměti WordPress již nabízí ukládání do mezipaměti prohlížeče, včetně WP Super Cache, WP Rocket a WP Fastest Cache.

Obsluhujte zmenšené obrázky

Obrázek v měřítku je obrázek, který je dokonale dimenzován pro rozměry, pro které jej používáte – máme celý příspěvek na koncepci zmenšených obrázků na ThemeIsle.

Jeden snadný způsob, jak zobrazovat zmenšené obrázky na WordPress, je opět s plugin Optimole – dokáže automaticky pracovat za vás, takže vaše obrázky jsou vždy dokonale upraveny bez ohledu na to, jaké zařízení návštěvník používá.

Určete rozměry obrázku

Toto zahrnuje HTML – chcete-li při vložení zadat skutečnou šířku a výšku obrázku.

Například…

Není optimální:

Optimální:

WordPress to ve výchozím nastavení provede, když vkládáte obrázky do editoru, ale budete chtít určit obrázky, které používáte jinde (jako v zásuvném modulu).

Minifikujte HTML, CSS a JavaScript

Jsou to technicky tři samostatná pravidla, ale spojuji je dohromady, protože základní koncept je stejný.

Minifikace zahrnuje odstranění zbytečných znaků v kódu vašeho webu beze změny jeho funkce. Například odstranění mezer a zalomení čáry.

Některé pluginy výkonu WordPress, jako je WP Rocket, včetně minifikace. Nebo můžete použít zdarma Autoptimize plugin kód vašeho webu minifikujte.


Automatická aktualizace Automatická aktualizace

Autor: Frank Goossens (futtta)

Aktuální verze: 2.7.2

Poslední aktualizace: 21. května 2020

autoptimize.2.7.2.zip


Hodnocení 94%


1 000 000 + instalace


WP 4.9 + Vyžaduje

Vyhněte se přesměrování vstupní stránky

Přesměrování URL je užitečné pro řízení provozu. Chcete se však vyhnout jejich použití, pokud je to možné, protože zpomalí váš web.

Chcete-li to vyřešit, ujistěte se, že všechny vaše interní odkazy směřují přímo na aktuální adresu URL – při opravě věcí se nespoléhejte na přesměrování. Pokud například automaticky přesměrujete adresu http://yoursite.com na https://yoursite.com, abyste vynutili používání protokolu SSL, ujistěte se, že vždy odkazujete na verzi svého webu HTTPS, abyste se vyhnuli zbytečnému přesměrování..

Odložit analýzu jazyka JavaScript

Když mluvíte o době načítání stránky, je rychlost, jak se váš web zviditelňuje, stejně důležitá, ne-li důležitější, než jak dlouho trvá načítání celého webu..

JavaScript to může zpomalit tím, že přinutí prohlížeče návštěvníků pozastavit vykreslování stránky a stáhnout a analyzovat JavaScript. To je důvod, proč se často zobrazuje jako JavaScript blokující vykreslování.

Chcete-li tento problém vyřešit, měli byste se pokusit odložit analýzu kódu JavaScript tak, aby váš web začal načítat / analyzovat tento JavaScript, jakmile se již načte viditelná část vašeho webu..

WP Rocket obsahuje vestavěný nástroj, který vám to pomůže. Nebo můžete použít zdarma async JavaScript plugin, který pochází od stejného vývojáře pluginu Autoptimize.


Async JavaScript

Autor: Frank Goossens (futtta)

Aktuální verze: 2.20.03.01

Poslední aktualizace: 1. března 2020

async-javascript.2.20.03.01.zip


Hodnocení 92%


100 000 instalací


WP 4.6 + Vyžaduje

Kombinujte obrázky pomocí skřítků CSS

Toto je pokročilá technika, která umožňuje kombinovat více obrazových souborů do jednoho souboru pomocí CSS. To vám umožní snížit počet požadavků HTTP potřebných k načtení stránky.

Neměli byste používat skřítky CSS pro všechny své obrázky, protože to má negativní dopad na SEO a přístupnost (protože již nemůžete přidat text textu alt). Místo toho byste měli používat skřítky CSS pouze pro dekorativní obrázky, jako jsou loga vašich klientů nebo ikony sociálních podílů.

Bohužel neexistuje žádný plugin pro automatické nastavení CSS spritů – musíte to udělat ručně. Zde je návod.

Povolit kompresi

O kompresi obrazu jsme už mluvili dříve, ale toto "komprese" odkazuje na komprimaci všech vašich webových souborů na úrovni serveru pomocí tzv. komprese Gzip.

Komprese Gzip může v průměru zmenšit velikost souborů na vašem webu asi o 70%.

Mnoho pluginů pro výkon WordPress vám může pomoci povolit kompresi Gzip, včetně WP Rocket, WP Super Cache a WP Fastest Cache. Nebo můžete použít jednoduché a bezplatné Povolit plugin Gzip Compression pro specializované řešení.


Povolte kompresi gzip

Autor: Moki-Moki Ios

Aktuální verze: 1.0.3

Poslední aktualizace: 8. května 2020

enable-gzip-compression.1.0.3.zip


86% Hodnocení


20 000 instalací


3.0.1 Požadavky

2. Karta YSlow

Vaše skóre YSlow se řídí podobným přístupem k vašemu skóre PageSpeed, pouze se používá jiná sada pravidel, která můžete testovat. Seznam je o něco menší – karta YSlow na GTmetrix obsahuje pouze 19 pravidel.

Stejně jako vaše skóre PageSpeed ​​získává každé pravidlo své vlastní skóre a vaše celkové skóre je založeno na váženém průměru těchto skóre.

Záložka YSlow test rychlosti GTmetrix

Zde jsou některé z nejčastějších doporučení, se kterými se setkáte …

Použít síť pro doručování obsahu (CDN)

CDN urychluje doby načítání stránek tím, že dodává statický obsah webu ze sítě serverů po celém světě. Další informace v tomto příspěvku.

Chcete-li zobrazovat své obrázky prostřednictvím CDN, můžete použít bezplatný modul Optimole. Chcete-li použít CDN pro všechny statické soubory vašeho webu, Zataženo je také dobrá volba.

Porovnání nejlepších služeb CDN ��

Minifikujte JavaScript a CSS

Už jsem to zahrnul v sekci PageSpeed. Svůj CSS a JavaScript můžete minifikovat pomocí vyhrazeného pluginu, jako je Autoptimize. Nebo mnoho zásuvných modulů WordPress obsahuje také vlastní funkce minifikace.

Komprimujte komponenty

To je stejné jako "Povolit kompresi" doporučení na kartě PageSpeed. Můžete to opravit povolením komprese Gzip.

Mnoho pluginů pro ukládání do mezipaměti WordPress obsahuje funkci komprese Gzip. Nebo můžete použít vyhrazené Povolit plugin Gzip Compression.

Vyhněte se přesměrování URL

To je stejné jako "Vyhněte se přesměrování vstupní stránky" v PageSpeed.

Pokuste se vždy odkazovat na aktuální adresu URL stránky, místo toho, abyste se spoléhali na přesměrování a přesunuli lidi na správné místo.

Omezte vyhledávání DNS

Prohlížeče návštěvníků musí provést vyhledávání DNS pro každou doménu, z níž váš web obsahuje obsah.

Vždy budete mít alespoň jedno vyhledávání DNS pro svůj vlastní web. Pokud ale na svém webu používáte externí služby (například Google Fonts nebo sledovací skript Google Analytics), tyto výsledky povedou k dalším vyhledáváním DNS..

Dvě řešení jsou:

  • Pokud to není nutné, odeberte externí službu
  • Pokud je to možné, zkuste obsah hostit sami, například hostujte písma Google na svém vlastním serveru místo toho, abyste se spoléhali na CDN Google Fonts.. Tento plugin vám může pomoci.

Proveďte méně požadavků HTTP

Podrobnější požadavky HTTP uvidíte v Vodopád sekce karet (další).

3. Karta Vodopád

Vodopád karta je trochu pokročilá, ale je to velmi užitečný nástroj k pochopení toho, jak různé části načítání vašeho webu a kde mohou být malá úzká místa, která zpomalují celý váš web.

Když otevřete Vodopád Na kartě se zobrazí seznam všech požadavků HTTP pro tuto stránku (jedná se o "Žádosti" ze souhrnu výsledků GTmetrix).

Každý objekt na vaší stránce je samostatným požadavkem HTTP. Například:

  • Každý obrázek je jeden HTTP požadavek (pokud nepoužíváte CSS sprites!)
  • Každý soubor CSS nebo JavaScript je jeden požadavek HTTP
  • Všechny externí skripty, které načítáte (jako je Google Analytics), budou také alespoň jedním požadavkem HTTP
  • Atd.

Všechny věci jsou stejné, méně požadavků HTTP obecně znamená rychlejší načítání webových stránek.

Navíc, jak uvidíte, když se podíváte na seznam, každý požadavek HTTP trvá načtení a načtení v jiném pořadí různým způsobem (některé dokonce zablokují jiné) – takže pokud můžete najít a odstranit pomalé načítání Požadavky protokolu HTTP, můžete výrazně změnit dobu načítání stránky na vašem webu.

Podrobnosti zobrazíte u každého požadavku HTTP, když na něj umístíte kurzor. Například, tento obrázek marocké cizrny trvalo načítání 102,4 ms:

Analýza vodopádové rychlosti GTmetrix

Můžete také použít možnosti filtrování a vyhledávání v horní části a vyhledat konkrétní požadavky HTTP. Pokud například vyhledáváte obsah wp / pluginy, můžete najít požadavky HTTP, které přidají pluginy vašeho webu WordPress.

Můžete dokonce kopat další a hledat požadavky od konkrétních pluginů. Například prohledáváním obsahu wp / plugins / elementor se zobrazí všechny požadavky plugin pro tvorbu stránek Elementor:

Prohledávání analýzy vodopádu

Pokud zjistíte, že zásuvný modul přidává mnoho požadavků HTTP s pomalým načítáním a neposkytuje vám mnoho výhod, můžete zvážit jeho odstranění a nalezení lepší alternativy..

4. Karty Časování, Video a Historie

Chystám se seskupit poslední tři karty rychlostního testu GTmetrix dohromady, protože je pravděpodobně nebudete používat tak často, a nemyslím si, že vyžadují hluboký rozpis.

Načasování

Načasování karta vám poskytne více podrobností o tom, jak dlouho trvá dosažení různých metrik doby načítání. Tyto informace najdete také v grafu Vodopád – Načasování karta jen usnadňuje vizualizaci.

Pokud umístíte kurzor myši na jednu z metrik, zobrazí GTmetrix níže popis, který vám řekne, co to znamená:

Karta časování

Video

Pokud jste při spuštění testu povolili načítání videí na stránce, můžete si je prohlédnout na stránce Video tab.

Budete je také moci zpomalit na 1/4 původní rychlosti, abyste viděli věci podrobněji.

Videa jsou užitečná, protože umožňují zobrazit nejen, kdy se váš web načítá, ale také, jak se váš web načítá. Například které části vašeho webu jsou viditelné jako první? Existují při nakládání nějaké podivné závady jako "záblesk nepohyblivého obsahu"? Toto je užitečné vědět, jak optimalizujete výkon svých stránek.

Dějiny

A konečně, pokud testujete stránku vícekrát, Dějiny karta umožňuje zobrazit výsledky předchozích testů, takže můžete analyzovat, jak se věci v průběhu času měnily.

Uloží všechny testy pro tuto stránku za posledních 30 dní. Poté se odstraní historické výsledky testu.

Pokud například uděláte několik vylepšení, abyste vylepšili skóre testu rychlosti GTmetrix, můžete vidět, jak se tyto změny projeví ve skutečném zlepšení doby načítání stránky:

Historické výsledky testu rychlosti GTmetrix

Získejte více z testu rychlosti GTmetrix

Pokud chcete z testovacího nástroje GTmetrix co nejlépe využít, měli byste jít nad rámec souhrnu a kopat do podrobností níže.

Nechcete být příliš zavěšeni na skóre výkonu GTmetrix, ale návrhy, které se do skóre dostávají, poskytují několik užitečných pokynů v oblastech, kde může chybět optimalizace výkonu front-end vašeho webu..

Navíc, Vodopád karta je skvělý nástroj, který vám umožní nahlédnout do konkrétních aspektů výkonu vašeho webu, jako je vyhledávání obrázků, skriptů nebo pluginů, které mají nepřiměřený vliv na dobu načítání stránky..

Pokud se chcete podrobněji věnovat výkonu WordPress, podívejte se na naši sbírku 11 způsobů, jak urychlit WordPress.

Máte nějaké přetrvávající dotazy o tom, jak otestovat svůj web s GTmetrix? Zanechte komentář a my se pokusíme pomoci.

Nezapomeňte se připojit k našemu havarijnímu kurzu při urychlení vašeho webu WordPress. Pomocí několika jednoduchých oprav můžete zkrátit dobu načítání až o 50–80%:

Rozvržení a prezentace Karol K.

Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map