Průvodce WPO pro optimalizaci rychlosti webu

Co je WPO?

Web Performance Optimization, kterou nazýváme WPO, je jednoduše optimalizace různých procesů, které ovlivňují, jak se web načítá.

Jak měřit rychlost načítání webu?

Existuje mnoho nástrojů pro měření rychlosti načítání. Nejpopulárnější jsou:

• ›

  Google Page Speed

• ›

  Lighthouse

• ›

  GTMetrix

Před zahájením auditu je důležité mít na paměti, že rychlost načítání se liší pro každého uživatele. Různé proměnné mohou ovlivnit, jak rychlost působí na uživatele v Cuence versus uživatele v Ottawě.

Proto, místo práce na časech načítání v sekundách, doporučujeme zaměřit se na optimalizaci:

• ›

  Váhy webu (MB)

• ›

  Požadavků

• ›

  Doby odezvy serveru

Pokud zlepšíme tyto 3 oblasti, rychlost načítání se zlepší bez ohledu na to, kde se uživatel nachází.

Ponoříme se do každé oblasti a prostřednictvím různých nástrojů uvidíme, jak na nich pracovat ke zlepšení výkonu každé URL. Proč říkám každé URL? Protože, ač to může vypadat samozřejmě, narazil jsem na mnoho případů, kdy byla hodnocena pouze data z homepage, a samozřejmě každá stránka webu nenačítá stejné zdroje.

Vývojářské nástroje Googlu

Než začneme, chci vysvětlit některé možnosti, které Google nabízí prostřednictvím svých vývojářských nástrojů. Tento nástroj je jedním z nejdůležitějších pro analýzu, jak web funguje. Klikněte pravým tlačítkem na stránku, kterou má prohlížeč otevřenou, a objeví se panel s různými možnostmi. Půjdeme do Inspect (Ctrl + Shift + I).

Jakmile je tento nástroj otevřený, půjdeme na možnost NETWORK, kterou najdete nahoře. Pokud znovu stiskneme ENTER v prohlížeči, nástroj zobrazí načítání různých zdrojů.

Ve spodní části obrázku můžeme vidět data, která nás zajímají pro obecný pohled na to, jak se web načítá.

Ponořme se hlouběji do tohoto panelu shora a podívejme se na strukturu sloupců, máme:

• ›

  Name: název zdroje.

• ›

  Status: kód odezvy zdroje (200, 301, 404…)

• ›

  Type: typ zdroje (script, font, png, jpg, stylesheet…)

• ›

  Initiator: který zdroj spouští požadavek.

• ›

  Time: jak dlouho požadavek trval.

• ›

  Waterfall: grafické znázornění časů načítání zdroje.

Pokud klikneme pravým tlačítkem nahoře, můžeme přidat a odstranit sloupce s těmito informacemi.

Povolení dalších informačních prvků jako Domain, Scheme nebo Cookies může pomoct ve specifických případech k lokalizaci zdrojů, které by nám mohly způsobit nějaký problém, ale v tomto bodě se budeme držet těch, které přicházejí předdefinované.

Existuje jeden aspekt, který, ač velmi zajímavý, jen lehce zmíním, abychom ho měli na paměti. Rychlost připojení, zejména na mobilu, je klíčovým prvkem toho, jak se web načítá. Z tohoto nástroje můžeme simulovat pomalejší rychlosti jako 3G na mobilu.

Jak zjistit váhu URL a jak ji snížit?

Váha, ať už v megabajtech nebo kilobajtech, je jedním z hlavních důvodů, proč URL trvá načítání. Proto začínáme tím, že se ponoříme do tohoto aspektu, protože nám nastaví cestu k dosažení dobré optimalizace webu.

Následující data pochází z výše zmíněného nástroje GTMETRIX a odpovídají webu, který se chystám začít optimalizovat.

Zaměříme se na data v pravém sloupci, ten, který se odkazuje na (Page Details), konkrétně na Total Page Size.

Na první pohled je váha tohoto webu hodně nad průměrem, ale mějte na paměti, že nezáleží na celkové váze webu, ale jak dlouho ta váha trvá, než se načte, protože existuje něco, co se nazývá Lazy Load, funkce, která odkládá načítání, dokud uživatel zdroj nepotřebuje. Budeme o tom mluvit později.

Tuto informaci můžeme také najít ve vývojářských nástrojích, v panelu, na který jsme se dívali výše, který vám připomenu znovu.

Pokud se podíváte dolů, jak 7,5 MB, tak 215 požadavků se velmi blíží číslům udávaným GTMETRIXem. Je důležité, abyste věděli, odkud GTMETRIX bere své informace, pro případ, že byste chtěli použít jiný nástroj.

Nyní se podívejme, co tolik váží a jak to můžeme opravit.

Možnost Waterfall nabízí vizuální pohled na to, jak se zdroje načítají, zobrazení URL zdroje, status, doménu a sloupec Size. Pokud klikneme na ten poslední sloupec, seřadí váhy od největší po nejmenší a od nejmenší po největší.

Při pohledu na váhy vidíme, jak se to děje ve většině případů, že obrázky jsou z velké části zodpovědné za nadměrnou váhu URL.

Neexistuje formální specifikace pro maximální váhu, kterou by obrázek měl mít, ale doporučujeme ne víc než 100 kB a, pokud máte možnost (pokud používáte Photoshop, máte ji), nastavit obrázky, aby se načítaly progresivně jako JPG, a vyhněte se PNG, kdykoli nepotřebujete Alpha kanál (průhlednost).

Snížením váhy obrázků významně zlepšíme načítání webu, a existuje několik nástrojů, které můžete použít. Osobně optimalizuji s Photoshopem, ale jsou tu zajímavé online možnosti:

• ›

  https://imagecompressor.io/compress

• ›

  https://kraken.io/web-interface

Jak GTMetrix, tak nástroj Googlu nám umožňují prohlížet zdroje podle typu, tedy pouze obrázky, skripty, CSS…

To je užitečné pro širší perspektivu, kde pracovat. Na této URL představují obrázky 4 MB ze 7,2 MB, takže velká část problému s váhou je tam. I tak existují další zdroje, které vyčnívají jako extrémně těžké pro svůj typ, jako CSS soubor přes 700 kB a skript přes 300 kB.

V tomto bodě bych chtěl objasnit, že když provádíme optimalizaci rychlosti načítání (WPO), musíme čelit určitým problémům, které, ačkoli mají řešení, nejsou v našich silách jednat.

V tomto případě vidíme velmi velký CSS soubor. Pokud designér vytvořil CSS přes 700 kB, optimalizace toho konkrétního souboru bude obtížná.

Co můžeme udělat ke snížení váhy těchto souborů?

Minify (CSS, JS a HTML)

Minifikace je proces, který se snaží snížit váhu souboru odstraněním zbytečných dat jako komentáře, mezery, opakovaný kód a nepoužívaný kód. Existuje mnoho nástrojů pro provedení tohoto procesu, kromě části nepoužívaného kódu, který je obtížnější optimalizovat a vyžadoval by manuální vstup do souboru (něco, co nedoporučuji).

Nástroje pro minifikaci souborů

• ›

  HTML Minifier http://kangax.github.io/html-minifier/

• ›

  CSS Nano https://cssnano.co/

• ›

  Uglify http://lisperator.net/uglifyjs/

Naštěstí mluvíme o WordPressu, a jak všichni víme, ve WordPressu je vzácné nenajít plugin, který tuto operaci zvládne.

Osobně rád používám zcela bezplatný Autoptimize a placený WP Rocket.

V tomto článku nechci tolik vysvětlovat, jak tyto pluginy fungují, jako spíš jak provádět optimalizační úkoly. Protože pokud používáme jiné pluginy, mají také tyto možnosti, a nejlepší je rozumět tomu, co děláme.

Minifikace s WP Rocketem

Tato část není složitá. Stačí přejít na záložku optimalizace souborů a zaškrtnout políčko minify HTML. Ve WP Rocketu se tato možnost opakuje níže pro CSS a JS soubory. I tak doporučuji povolit toto políčko a otestovat. Opakujte tuto možnost jednu po druhé, protože pokud něco selže, bude snazší problém určit.

Před kontrolou efektu minifikace musíme vymazat cache, jinak neuvidíme výsledek aktualizovaného HTML.

Jak vymazat cache prohlížeče?

Tyto typy pluginů přicházejí s možnostmi vymazání cache, které vidíme nahoře.

Další způsob je prostřednictvím prohlížeče, jakmile jsou povoleny vývojářské nástroje Googlu (Ctrl + Shift + I).

Klikněte pravým tlačítkem na šipku „obnovit stránku" a vyberte „empty cache and hard reload".

Minifikace s Autoptimize

S Autoptimize akce optimize provádí minifikaci, se zvláštností nabízení možnosti zachovat HTML komentáře. Tyto komentáře obvykle přidávají vývojáři, aby zachovali informace, které mohou být v budoucnu užitečné.

Pro ověření, že tato optimalizace nabyla účinnosti, bychom šli do zdrojového kódu URL a měli bychom vidět něco jako toto:

Kód se stává nečitelným, ale jeho funkčnost je stejná.

Tyto možnosti se opakují stejným způsobem ve WP Rocketu a Autoptimize pro CSS a JS soubory. Jak jsem zmínil dříve, nedoporučuji optimalizovat vše najednou, ale 1 po 1. Tyto pluginy uchovávají kopie minifikovaných souborů, takže návrat k originálu je možný odškrtnutím odpovídajícího políčka.

Pro pokračování ve snižování váhy stránky máme 2 další možnosti:

• ›

  Odstranit nebo snížit pluginy, které přidávají CSS nebo JS k načítání.

• ›

  Odstranit nebo zkrátit nepoužívaný kód z CSS souboru.

Tyto 2 možnosti jsou složitější a vyžadují více znalostí, protože musíte být opatrní a ujistit se, že neexistují volání z jiných stránek na část, kterou odstraňujete.

I když odstraňování pluginů není vždy možné kvůli zdroji, který poskytují, existují pluginy lépe optimalizované než jiné, což znamená méně požadavků a lehčí JS. Takže ve skvělém WordPress ekosystému téměř vždy existuje alternativa.

Doba načítání vs. doba odezvy

Nyní je čas mluvit o požadavcích, době odezvy a době načítání. V tomto bodě musíme zmínit zásadní část procesu: server. Optimalizace serveru je obvykle mimo naše ruce, takže je důležité vybrat efektivní řešení.

Ale postupně.

Co je požadavek?

Požadavek nebo HTTP Request je volání vytvořené z klienta na server pro získání daného zdroje. Požadavky mohou jít na různé servery.

Požadavky mohou být buď HTTP nebo HTTPS. Pokud se podíváme na strukturu požadavku, můžeme analyzovat, kde se zpoždění v čase děje.

Analýza času HTTP požadavku

Pojďme rozebrat, co vidíme v tomto časovém grafu.

• ›

  Požadavek je zahájen, ale zablokován nebo ve frontě: Pokud blok trvá dlouho, může to být z několika důvodů: požadavky s vyšší prioritou nebo mnoho požadavků na tento původ.

• ›

  DNS Lookup: prohlížeč rozluští IP adresu požadavku.

• ›

  Connecting: čas potřebný k připojení k serveru pro vyřešení požadavku. Pokud je tento čas vysoký, může to znamenat problémy se sítí, chyby připojení nebo přetížený server.

• ›

  Sending: požadavek na zdroj je odeslán.

• ›

  Waiting: to je čas, který server potřebuje k vyřešení požadavku a odeslání odpovědi; pokud je dlouhý, je problém na serveru.

• ›

  Receiving: přijetí zdroje.

HTTPS požadavek přidává jeden krok navíc, zde zobrazený.

Tyto dva screenshoty patří dvěma různým webům, jeden neoptimalizovaný (HTTP Request) a druhý optimalizovaný (HTTPS Request).

Pokud se podíváte zblízka a porovnáte, největší rozdíl je v čekací době. V těchto případech byste museli analyzovat server podrobněji.

Požadavky na server: jak je můžeme snížit?

Jak jsme viděli, počet požadavků je úzce spjat s časem načítání, takže snížení počtu požadavků by zlepšilo časy načítání URL. Zdravý rozum hraje roli v procesu optimalizace a vědět, zda je zdroj skutečně užitečný pro uživatele nebo náš byznys. Toto je okamžik, kdy se rozloučíme s určitými zdroji, které nic nepřidávají, ale nejsem ten, kdo by o tom rozhodoval.

I tak máme možnosti pro zlepšení požadavků, i když tyto akce nepřinášejí obrovskou změnu v načítání webu. Budu se opakovat: nejlepší je odstranit zdroje, které nic nepřidávají.

Kombinování CSS a JS

Další populární akcí při optimalizaci webové stránky je kombinování CSS a JS zdrojů, ale co to znamená?

Cílem kombinování je snížit požadavky za cenu zvýšení váhy souboru. Kombinování znamená sjednocení různých CSS nebo JS zdrojů do jednoho.

Pokud jsou doby odezvy dlouhé, kombinování může být přínosné. Pokud jsou doby odesílání velmi pomalé, možná je lepší jiná technika.

Ideální je kombinovat se s dobrým serverem, takže vyhráváme na obou stranách.

Kombinování zdrojů s WP Rocketem a Autoptimize

Operace combine s těmito pluginy je tak jednoduchá jako dříve. Stačí zaškrtnout odpovídající políčko.

Ve WP Rocketu jsou možnosti kombinování CSS a JS stejné; panely jsou prakticky identické. Jak vidíme na obrázku, je tu pole pro přidání cesty souborů, které nechceme kombinovat.

Pod zaškrtávacím políčkem také vidíme poznámku o nepoužívání volby kombinování, pokud používáme HTTP/2. Tento článek vysvětluje více o HTTP/2.

Autoptimize nabízí více možností pro práci s CSS a snižování požadavků. V možnosti, kterou označuji, kombinuje a varuje vás o efektu, který by to mohlo mít, ale nakonec je to vždy relativní.

V této první části článku jsem chtěl vysvětlit, v čem spočívají určité základní akce, ty, které obvykle vidíme prakticky ve všech WPO optimalizačních pluginech, ale zbývá ještě hodně, co můžeme udělat pro zlepšení jak požadavků, tak časů načítání.

Konfigurace cache

Bez pochyby je optimalizace cache jednou z akcí, kde si všimneme největších zlepšení v tom, jak se web načítá. V tomto článku o SEO pro WordPress jsem vysvětlil, jak cache funguje. Doporučuji vám se podívat, abyste pochopili, jak to funguje.

Autoptimize a WP Rocket provádějí akce cachování, ale WP Rocket vám dává pár dalších možností. Stojí za zmínku, že pluginy učinily tuto optimalizaci jednodušší: máte sotva pár možností a proces je rychlý a bezbolestný.

Jak vidíte, WP Rocket vám umožňuje pracovat na 4 věcech:

• ›

  Povolit cachování pro mobilní zařízení.

• ›

  Uložit soubory zvlášť pro mobilní zařízení.

• ›

  Povolit cachování pro přihlášené uživatele.

• ›

  Specifikovat čas pro vymazání cache.

Záleží na každém projektu, kterou možnost vybrat, ale s tím vším na paměti je moje rada:

• ›

  Mobilní cache vždy, protože ačkoli většina webů je responzivní, je obsah, který můžete mít na mobilu, ale ne na desktopu.

• ›

  Soubory zvlášť.

• ›

  Žádný cache pro přihlášené uživatele, především proto, že pokud dělám úpravy, nechci cachování.

• ›

  Doba cache, která závisí na tom, kolik změn děláte na webu. Pokud je to denní zpravodajský web, krátká; pokud je to obsah, který se nečasto aktualizuje, delší.

Lazyload

Funkce lazyload pomáhá zobrazovat zdroje (obrázky a iframy), když je uživatel potřebuje; to znamená, že prohlížeč nenačítá tyto zdroje, dokud k nim uživatel nedoroluje. Tato funkce je implementována v mnoha pluginech a dokonce přichází předkonfigurovaná v některých WordPress šablonách. Od verze Chromu 76 přichází dokonce nativně v prohlížeči.

To znamená, že přidáním atributu loading="lazy" prohlížeč už interpretuje líné načítání obrázku, ale samozřejmě ne každý prohlížeč to bude interpretovat, takže doporučuji nadále používat plugin. Tady je video stažené z web.dev ukazující příklad toho, o čem je líné načítání obrázků.

Optimalizace iframe

Pokud používáme iframy k vkládání obsahu z jiných webů, máme dvě akce, které můžeme použít ke zlepšení načítání.

• ›

  Líné načítání prostřednictvím funkce lazyload.

• ›

  Nebo nahrazení iframe obrázkem, dokud na něj uživatel neklikne.

Jak první, tak druhou možnost lze povolit prostřednictvím, opět, našeho oblíbeného pluginu WP Rocket.

Autoptimize tuto část nemá, ale nabízí instalaci doplňkového pluginu k tomu https://wordpress.org/plugins/wp-youtube-lyte/

Odložené načítání JS souborů s Defer nebo Async

JS soubory jsou jedním z viníků toho, co audity rychlosti nazývají render blocking stránky. To se stane, když, zatímco se renderuje, prohlížeč se zastaví ke stažení JS souboru a jeho provedení. Cílem WPO optimalizace je doručit informace uživateli co nejdříve, proto je toto považováno za blokující, protože nic se nerenderuje, dokud se stažený JS neprovede.

Proto se tento typ akce obvykle označuje v auditu. Při použití pluginů třetích stran nebo šablon, které nejsou dobře optimalizované, můžeme mít JS, který blokuje renderování, protože je například v hlavičce.

V těchto případech bychom měli použít dva atributy, které se přidávají do volacího kódu JS, Defer a Async. Aby tyto atributy fungovaly, skripty musí být externí.

V SEOcrawl používáme plugin Pre Party Resource Hints, který umožňuje vybrat, které soubory a kterou metodu načítání chcete aplikovat. Zázrak!

Jaký je rozdíl mezi Defer a Async?

Ačkoli oba atributy mají podobný cíl, zabránit, aby interpretace DOM HTML byla zastavena JS, je mezi nimi pozoruhodný rozdíl.

S atributem Async je zdroj stažen bez zastavení načítání HTML, ale jakmile je stažen, načítání HTML je pozastaveno k provedení JS; s atributem defer je zdroj také stažen paralelně s načítáním HTML, ale běží, když načítání skončí, takže neexistuje blokování skriptem.

V tomto ohledu jsou rozdíly mezi WP Rocketem a Autoptimize. WP Rocket vám rozhodnutí výrazně usnadňuje a jedná polo-automatickým způsobem, aby JS neblokoval renderování; v Autoptimize naopak můžete přepnout pouze možnost Async.

V Autoptimize, pod záložkou extra, máme tuto možnost přidat JS soubory, které chceme načíst s Async, ale pro větší flexibilitu doporučují další doplňkový plugin „Async Javascript".

S tímto pluginem můžeme pracovat jak s Defer, tak s Async, a dokonce nabízí volby na jedno kliknutí pro usnadnění věcí. Dobrá věc na tomto pluginu je, že můžeme pracovat se skripty a vyloučit ty, které považujeme za nezbytné. Ve WP Rocketu naopak musíme důvěřovat tomu, co plugin dělá, ačkoli to dělá dobře.

Tato možnost je ve stejné záložce optimalizace souborů.

Co je CDN a jak nám může pomoct?

CDN je to, co je známo jako síť pro doručování obsahu. CDN má na starosti uložení části informací a zdrojů, aby ulevila zatížení serveru pro tyto zdroje a lépe reagovala na zatížení. CDN mají také funkci geografické kopie, aby udržely zdroj dostupný v různých bodech a doručily ho uživateli bez ohledu na to, odkud se připojuje. Obvykle se tento typ služby používá pro těžké soubory jako obrázky a videa.

Přihlášení k této službě je důležité, když máme weby s velkou návštěvností, ačkoli by neměla být vyloučena pro weby s nízkou návštěvností.

Další akce, které nám přinesou trochu víc zlepšení

K závěru článku máme 3 další zlepšení, která, ačkoli nepřinesou obrovské změny v časech načítání, nám pomohou snížit požadavky, a nakonec to je to, co chceme.

Optimalizace fontů

Optimalizace fontů lze provádět prostřednictvím pluginů nebo manuálně úpravou a optimalizací CSS. Ideální by bylo volat pouze font, který chcete použít, a ne, jak se to děje v mnoha případech, stáhnout soubor se všemi Google Fonty.

Autoptimize má možnost pracovat na fontech.

Je obtížné říct, kterou možnost vybrat bez vidění projektu, protože nevím, který font vaše šablona používá a kdy se načítá, takže nejlepší je testovat a uvidět výsledek.

Jak vidíte, hned za možnostmi Google Fonts máme „Remove Emoji", což nám ušetří požadavek na server. Jeho funkcí je jednoduše převést symboly reprezentující emoji na ikonu.

WP Rocket nám také umožňuje deaktivovat tyto emoji a také nabízí možnost zabránit vkládání obsahu na weby třetích stran.

Nakonec existuje mnoho akcí pro zlepšení rychlosti načítání webu. Není vždy možné pracovat hluboko na optimalizaci každého zdroje, protože záleží na typu byznysu a co potřebuje.

Doufám, že vám tento průvodce WPO optimalizací bude užitečný a že ho můžete aplikovat na své projekty nebo pro klienty.