Často za mnou chodí klienti, že “mají pomalý web”, “dlouho se načítá”, “všechno hrozně trvá” a už je to… štve. Nabízím 7 tipů na to, co s tím – některé se realizují celkem snadno a rychle, u jiných je to složitější.
Jak rychlost změřit?
Rychlostí stránky se myslí, za jak dlouho se stránka načte a je pro návštěvníka použitelná. A jaký je benefit, když se vaše stránka načte návštěvníkům rychle? Hlavně spokojenost uživatelů a vyhledávače ji raději přidají do svých indexů a nabídnou mezi jako odpověď na nějaký dotaz – což zvýší její návštěvnost. Pomalý web nikdo číst nechce.
Existuje několik online nástrojů, kde si můžete rychlost webu změřit. Tyto nástroje vám také řeknou, jaké parametry webu je třeba zlepšit. Jednou za čas se také vyplatí testy opakovat, abyste věděli, že se na vašem webu najednou nezměnilo něco zásadního.
Jak pomalý web zrychlit?
Hned dopředu je třeba říci, že na velké zrychlení webu je třeba jeho pořádná revize, aby se zjistila příčina, proč je tak pomalý. Nicméně jsou body, od kterých se můžete odrazit, abyste rychlosti webu zvýšili (někdy více, někdy méně):
1. Kvalitní hosting
Je pravda, že na některé weby je klasický sdílený hosting málo. Jednak kvůli sdíleným zdrojům a jednak kvůli tomu, že jeho zdroje prostě nestačí, hlavně v případně větších e-shopů a opravdu velkých webů. Ale na prezentační weby, menší e-shopy a nebo weby, kde jsou členské sekce, to stačí. Zda bude pomalý web záleží také na tom, jak je web postavený (tj. jaké technologie jsou k dispozici).
Záleží také na tom, jaké “železo” vám dal hosting k dispozici. Dobrý hosting má k dispozici různé serverové cache, případně i CDN a další.
HTTP/2
HTTP/2 (neplést si s HTTPS – SSL certifikátem) je protokol předávající data mezi návštěvníkem webu a serverem, na kterém je web umístěn (hosting, CDN a další). HTTP/2 totiž poskytuje znatelné zrychlení oproti HTTP/1.1, umí totiž stahovat zdroje paralelně.
A pokud máte dokonce HTTP/3, tak je to úplně skvělé.
Máte dotazy k testu rychlosti nebo výběru hostingu?
2. WP pluginy
Weby postavené na WordPress jsou super v tom, že jsou modulární. Tedy téměř jakoukoli věc vyřeší nějaký plugin. Což je zároveň jejich nevýhoda – je velice snadné a lákavé dát na web plugin, který řeší kdejakou drobnost, ale ve výsledku je pak z webu obrovský moloch pluginů zamotaných do sebe bez ladu a skladu. A bobtná… A zpo..malu..je se…
Počet pluginů
Pokud se bavíme o webu postaveném na WordPress, pak je třeba se podívat na skladbu pluginů a zhodnotit, zda musí na webu všechny být. Pokud nějaký plugin výkonnostně nevyhovuje, máme na výběr:
- Je možné plugin vyměnit za jiný, který je lépe napsaný, případně nějaký, který umí méně věcí (ale přesně ty, které potřebujete).
- Někdy, zejména u drobných úkonů, je možné plugin nahradit kouskem kódu v child theme/snippetu a plugin už není potřeba. Ale i tento kód musí být dobře napsaný, aby zapadl do celého webu.
Je důležité si uvědomit, že každý běh pluginu zabírá nějaký výpočetní čas už jen tím, že je aktivní, jeho funkce se spouští v různých okamžicích podle jeho potřeby. Např. builder se spustí, protože čeká na použití, i když v něm stránka napsaná není. Woocommerce běží na pozadí, i když zrovna nejste na stránce košíku nebo obchodu.
Na nedávném webináři na téma Ladění výkonu WP (jehož záznam si můžete koupit) jsme si ukazovali testovací web, kde byly pluginy jen instalované a aktivní. A bylo hrozivé, kolik zdrojů si zabraly už jen tím, že na webu byly (aniž by se v nich cokoli nastavilo). Ve výsledku to byl neskutečně pomalý web, jen administrace se načítala půl minuty.
Je třeba si také uvědomit jednu věc: kód pro výpočet stránky (tj. kód na serveru, který stránku “složily” do výsledné podoby) a kód pro její zobrazení uživateli v prohlížeči (javascripty, styly…) jsou dvě různé věci.
Nevhodné pluginy
Některé pluginy, pokud nejsou dobře napsané, mohou web hrozivě zpomalit. Před použitím každého pluginu je třeba zvážit, zda je opravdu potřeba a pokud po jeho použití dojde k výraznému zpomalení webu, zkusit najít nějakou alternativu.
Omezit WP-cron
Popřemýšlejte také o tom ulevit webu od kontrol WP-cronu. Detaily najdete v tomto článku.
Máte zájem o revizi webu nebo zhodnocení jeho výkonu?
3. Velikost a složitost stránky
Velikost a složitost stránky může hodně ovlivnit rychlost jejího načítání. Velikost tzv. DOMu (HTML struktury stránky) a její hloubka mohou dost citelně promluvit do načítání samotného i do zpracování dalšími skripty (např. javascript a další). Pokud máte načíst stránku, kde jsou 3 sekce s obsahem a kde jich je 15 (jak to někdy různé magnety a landing-page mají), hádejte, co se načte rychleji.
Další věcí jsou i různé grafické vychytávky jakou jsou popupy (zejména ty Ajaxové, které žádají o informace ze serveru bez nutnosti načtení stránky), složité slidery a další. Ty s sebou většinou nesou i sady dalších skriptů potřebných pro běh. Často vypadají efektně, ale vždy je to něco za něco.
4. Zdroje
Pokud jde o zdroje (obrázky, videa, skripty a další), které se načítají na straně uživatele, i tady můžete někdy udělat hezký progres a pomalý web tak vcelku zrychlit.
Obrázky
V případě obrázků tu mám hned několik doporučení, jak s nimi zacházet na webu (seřazeno podle priorit):
- Nejdůležitější bod – nahrávejte je ve velikosti, v jaké jsou potřeba. Ikona nemusí mít rozměr 1200 x 1200 px. Obrázek přes čtvrtinu stránky monitoru nemusí být 2500 px široký. Ořežte a upravte fotografii na míru místu, pro které je určena.
- Logo je ideální vkládat v SVG, aby bylo vždy ostré a hezké (ikony a další podobnou grafiku).
- Tam, kde je to možné, použijte Lazyload (odložené načítání). Díky tomu se obrázky načtou až v okamžiku, kdy jsou potřeba a nebrzdí načítání stránky. Např. obrázky v patičce se načtou, pokud uživatel začne stránkou scrolovat a k patičce se přiblíží.
- Pozor: nepoužívejte lazyload, pokud máte dlouhé stránky s kotvami. Kotva se pak netrefí na místo, kde je, kvůli posunům stránky.
- Komprimujte obrázky, ideálně automaticky nějakým pluginem. Komprese znamená, že obrázek je fyzicky (na kb) menší, i když jeho rozměr na px zůstal stejný. Prostě zabírá méně místa na disku.
- Používejte WebP nebo AVIF formát (případně jiné moderní formáty obrázků), ideálně se zachováním původního obrázku (jpg, png a další) pro starší prohlížeče.
Pozn: Jsou specifické weby (např. pro grafiky nebo fotografy), kde se tyto věci řeší maličko jinak, ale pro většinu webů to bohatě stačí.
Dárek pro vás: Vyzkoušejte můj open-source plugin pro automatickou kompresi a převod obrázků do WEBP okamžitě při nahrávání. Tento přístup má spoustu výhod (mnohem méně místa na disku, moderní formát obrázků, žádné duplikace a fallbacky…) – pouze WEBP hned na webu. Odpadne vám jedna velká starost. Stačí instalovat balíček jako klasický plugin (updaty vám budou chodit automaticky).
Videa
Videa na pozadí vypadají trendy, ale pokud je správně nepřipravíte, pomalý web je na světě celkem spolehlivě.
I videa umí Lazyload! Nebojte se ho použít. (Více o Lazyload najdete u obrázků výše).
Pokud to jde, nenahrávejte videa přímo do webu, ale dejte je do nějaké externí služby – YouTube, Vimeo a další. Webu se odlehčí a navíc tyto služby umí videa kvalitně zpracovat a zkomprimovat. A navíc máte statistiky o jejich sledování jako bonus (ale musíte poučítat se šmírovacími cookies).
Fonty
Ano, čtete správně, i fonty se počítají a někdy mohou mít vliv na rychlost webu. Doporučení:
- Nepoužívejte mnoho různých fontů, bohatě stačí 2 (max. 3). Navíc web působí sjednoceně a elegantně.
- Nepoužívejte spoustu řezů (tj. tučné, kurzívy a jejich kombinace). Opět je to věc designu, ale je třeba si uvědomit, že pokud fonty nejsou variabilní (tj. mají 1 soubor pro všechno), pro každý takový řez se stáhne nový soubor s fonty.
- Např. pokud máte na webu Roboto Condensed (nadpisy) a Roboto (text), tak to máme: 1 soubor pro nadpisy, 1 soubor pro klasický text, 1 soubor – tučný text, 1 soubor – text kurzívou,1 soubor – tučná kurzíva. To už je 5 souborů na minimalistickou sadu fontů.
- A pokud přidáte např. pro úrovně nadpisů různé tloušťky písma, pro každou je do extra soubor ke stažení navíc.
- A tak dále… :-)
- Ideálně je mít lokálně na webu (poděkuje vám i cookie lišta, protože v ní např. Google Fonts nemusíte řešit). Navíc nejste omezeni jen na Google fonty (protože ve většině builderů jsou integrované jen ty) – kdo říká, že se nemůžete podívat i na jiné? A v případě kupovaných fontů nemáte jinou možnost.
Jeden pomalý web, který jsem měla na revizi, jich načítal přes 20.
5. Skripty a styly
Pokud máte možnost (a nerozbije vám to web), použijte nějaký plugin na minifikace skriptů – javascript i CSS. A pokud to jde, odložte jejich načítání (JQuery budete nejspíš muset jako jediný skript vynechat). A v případně javascriptu máte většinou dvě možnosti odložení (a většinou je jedno, jaký si vyberete):
- Aync (asynchronní načtení) – skript se bude stahovat nezávisle na načítání stránky, aby nic neblokoval. Skripty se tak mohou se načítat paralelně, spustí se, jakmile jsou dostupné.
- Defer (odložené načtení) – skript se začne stahovat až po načtení celé HTML struktury. To se hodí, pokud máte skripty, které závisí na jiných. Spustí se až po načtení celé stránky.
Minifikace a sloučení
Minifikací můžete zmenšit velikosti jednotlivých skriptů a stylů, které se stahují se stránkou, a pomalý web tak zrychlit. Z těchto souborů se smažou nepotřebné mezery, odřádkování, komentáře a další – pro funkci nepotřebné – věci.
Pokud je k dispozici i sloučení, můžete toho využít také – tím sloučíte několik skriptů do jednoho. Pokud máte na hostingu nastavené HTTP/2, pak slučování není potřeba, naopak je možná lepší, když se skripty stahují paralelně – přesně to HTTP/2 totiž umí.
Cache
Cache vám může výrazně pomoci zrychlit načítání stránky. V principu jde o to, že při načítání se “nestaví” stránka ze kódu znovu, ale je připravená v paměti a čeká, jakmile o ni někdo požádá (navštíví URL). A načte se pak mnohem rychleji.
Pozn: někdy není možné použít cache na části webu, např. kvůli členským sekcím a podobně zamčenému obsahu. Tuto část pak musíte buď z cache vyloučit, nebo ji dát na jinou stránku, kterou cachovat můžete.
6. Služby 3. stran
Služby 3. stran jsou kapitola sama pro sebe. Různé reklamní bannery, Facebook/Instagram widgety a další věci, které stahují zdroje odjinud než z vašeho webu, mohou web citelně zpomalit. Platí to dokonce i fonty (z Google a dalších zdrojů), které je lepší mít lokálně (další výhodou je, že je pak nemusíte řešit v cookie liště).
7. CDN
CDN (content delivery network) je super hlavně pro mezinárodní weby. Díky ní totiž všechen provoz nechodí na hosting, kde je web umístěn, ale CDN si uloží “kopie” webu různě po světě, aby byla stránka fyzicky blíž uživateli, který ji chce zobrazit (ano, stále platí fyzikální zákony – kabel do Austrálie je hodně dlouhý a přenos dat bych chvíli trval).
CDN může být výhodná i pro lokální weby – slouží totiž jako cache, takže při zobrazení stránky nejde uživatel na sdílený hosting, ale zobrazí se mu stránka přímo z CDN. Část provozu se tak odstíní a webu se opět ulehčí.
