[Dossier] Tajemství optimalizace webu

Rychlost webu má přímý vliv na pohodlí uživatelů. Je známo, že pomalý web výrazně zkracuje dobu, kterou na něm návštěvníci stráví. Má to prý vliv i na pozice ve vyhledávačích. Optimalizace rychlosti vašeho webu je proto zásadní věc, kterou rozhodně nesmíte podcenit.

Příčiny pomalosti

Navzdory rozšířeným představám není pomalost webu vždy způsobena pomalým serverem, na kterém běží. Přetížený nebo nekvalitní server samozřejmě může zpomalení způsobit, HaiSoft ale dělá vše pro to, aby tuto možnost vyloučil.

Děláme totiž maximum pro to, abyste měli neustále k dispozici rychlý a dostupný hosting: všechny servery sdíleného hostingu HaiSoft i všechny nové servery jsou vybaveny disky SSD pro maximální a stálý výkon. Servery jsou navíc aktivně monitorovány, takže vysoké zatížení je okamžitě zjištěno a problém velmi rychle vyřešen. Hosting HaiSoft je tedy výborným způsobem, jak za všech okolností využívat mimořádně dobrý výkon. Viz zejména:

SSD pro všechny: zvládli jsme to také!

Za těchto okolností zjišťujeme, že požadavky týkající se pomalých webů jsou v naprosté většině případů způsobeny nedostatečnou optimalizací samotných webů – a proto vznikl tento článek.

Co je optimalizace?

Doba zobrazení webu je dána dvěma hlavními faktory:

• Prostředky CPU (procesoru) využívané na serveru, obvykle skripty PHP a databází MySQL při načítání stránek webu.
• Data, která server odesílá návštěvníkům webu, tedy média, obrázky, skripty atd.

Optimalizace tedy spočívá v práci s oběma těmito faktory: na jedné straně generovat stránky na serveru rychle, na druhé straně zajistit, aby je uživatelé rychle obdrželi bez ohledu na rychlost svého internetového připojení.

Připadá vám tento blog rychlý? Vězte, že v současnosti běží na sdíleném serveru HaiSoft a že jsme na něj aplikovali optimalizace doporučené v tomto článku.

1) Optimalizace prostředků serveru

Pozn.: Budeme zde mluvit hlavně o optimalizaci redakčních systémů (CMS), i když některé rady lze zobecnit na všechny případy. V tomto článku nezaujímáme pohled vývojáře, který by měl běžně vědět, co je optimalizovaný kód.

Doba načítání stránky vašeho webu přímo souvisí s výpočetním výkonem potřebným k jejímu vygenerování. Je proto důležité zajistit, aby kód PHP generující stránky byl co nejlépe optimalizovaný a nabízel přijatelnou dobu načítání.

Neoptimalizovaný nebo špatně optimalizovaný web může navíc v některých extrémních případech zpomalit celý server. Pokud například každá stránka vyvolává velmi dlouhé dotazy MySQL (přes 20 sekund) a web má několik návštěv za sekundu, může vytížení CPU serveru rychle dosáhnout 100 % a výkon se dramaticky zhorší, případně server může přestat odpovídat, pokud jsou limity využití nastavené pro jednotlivé služby serveru příliš vysoké. Právě zde vstupují do hry některé limity nastavené na serverech MySQL a Apache, jejichž cílem je zachovat přístup k serveru tím, že zabrání jeho úplnému zahlcení.

Je také třeba si uvědomit, že PHP využívá pouze jedno jádro procesoru na proces (a tedy na každou načítanou stránku). To znamená, že se stránky vašeho webu nebudou při jediném návštěvníkovi načítat rychleji s 8 jádry než se 2 jádry (za předpokladu, že ostatní procesy nevyčerpávají zbývající prostředky); zato však budete moci obsloužit více návštěvníků současně bez zpomalení. Je třeba vzít v úvahu i využití CPU databází MySQL: pokud dotaz prochází miliony sloupců, bude jeho provedení trvat několik dlouhých sekund, což zatíží server a zpomalí váš web.

Chyby a slepé uličky, kterým je lepší se vyhnout

Abychom ušetřili čas, začněme tím, čemu se vyhnout.

• Neaktualizovaný web se zastaralou verzí PHP: kromě závažného bezpečnostního problému tím potenciálně snižujete výkon svého webu 1,5× až 3×. Připomínáme, že nejnovější verze PHP jsou u HaiSoft vždy k dispozici a na novější verzi můžete kdykoli přejít.
• Při sebemenším zpomalení hned instalovat pluginy pro cache (WPSupercache, WPRocket…). Při výrazném zpomalení je nejprve nutné jít problému ke kořenům a zjistit, odkud pomalost pochází, a ne rovnou sáhnout po náplasti, která je obvykle mnohem méně účinná než skutečná optimalizace. Optimalizaci je proto vhodné začít bez pluginu pro cache a tento krok si nechat na konec jako pomyslnou „třešničku na dortu“. Pluginy pro cache totiž nejen nedokážou uložit do mezipaměti úplně všechno (některé pomalé dotazy mohou zůstat), ale mohou také způsobit řadu problémů při vývoji – o důvod víc nechat si tento krok na konec.

Nyní se podívejme, jakými cestami se při optimalizaci webu vydat.

Aktualizace

Ujistěte se, že váš redakční systém je aktuální, stejně jako všechny jeho šablony, moduly, rozšíření atd.

Využijte zejména automatické aktualizace svého webu WordPress prostřednictvím ovládacího panelu Plesk, které jsou k dispozici s našimi tarify WordPress.

Verze PHP

Používejte nejnovější verzi PHP, kterou podporuje váš skript i váš poskytovatel hostingu. U HaiSoft je vaše verze PHP nastavitelná v ovládacím panelu Plesk a nové verze PHP podporujeme ihned po jejich vydání. Aktuální web podporuje nejnovější verze PHP, které jsou rychlejší a bezpečnější. Odhadujeme, že PHP 5.6 je 2× výkonnější než PHP 5.3 a PHP 7.1 je 2× výkonnější než PHP 5.6 – začněte tedy právě tímto!

Pluginy a rozšíření

Moduly nainstalované na vašem webu jsou příčinou pomalých webů číslo 1, proto jim věnujte velkou pozornost.

• Co nejvíce omezte počet nainstalovaných pluginů/rozšíření/modulů – každý modul je dalším zdrojem zpomalení. Nepotřebné nebo zastaralé pluginy pravidelně odstraňujte.
• Ověřte si, že nemáte pluginy nebo moduly, které jsou na výkon příliš náročné. Deaktivujte všechny moduly, změřte rychlost webu a pak je postupně znovu aktivujte, abyste našli plugin nebo pluginy, které web zpomalují. Pro WordPress vám plugin „Query Monitor“ pomůže přesně změřit dobu načítání stránek a odhalit některé prvky náročné na prostředky. Totéž udělejte i s optimalizačními pluginy – možná budete překvapeni, jak moc některé z nich dokážou váš web zpomalit.
• Stejné doporučení platí pro šablony: používejte optimalizovanou šablonu, která váš web nezpomaluje, a pro srovnání vyzkoušejte i jiné šablony.

Page buildery

Page buildery jsou moderní pastí, zejména u WordPressu. Buildery pro redakční systémy (nezaměňujte je s externími buildery, které generují statický kód HTML, a proto tento problém s optimalizací nemají) slibují rychlou a efektivní tvorbu webu na míru.

Problém: buildery spotřebovávají obrovské množství prostředků MySQL a PHP.

Generují zdlouhavé dotazy MySQL a výpočty stránek, které web výrazně zpomalují. Každý prvek je shortcode, který musí PHP převést na rozsáhlejší kód PHP a poté na HTML, což v některých případech vede k dramatické ztrátě rychlosti. Zdůrazňuji to, protože u většiny populárních builderů jsme naměřili rozdíl třikrát až čtyřikrát: web, který se s výchozí šablonou WordPressu načítá 0,3 s, se tak po zvolení šablony s builderem načítá déle než sekundu. U webu, jehož načtení už tak trvá 1 s, se dostanete na několik sekund čekání pro návštěvníka, nepočítaje dobu přenosu dat. V některých případech to může být velmi nepříjemné.

Buildery mohou také způsobovat řadu chyb a nelze je jednoduše vyměnit – je nutné předělat celý web, protože stránky nejsou uloženy způsobem nativním pro WordPress.

Výběr builderu si proto dobře rozmyslete a dávejte přednost nativním šablonám, které jsou mnohem jednodušší, stabilnější, univerzálnější a výkonnější.

Obsah vašich stránek

Je opravdu nutné načítat na domovské stránce náhledy 300 článků? Načítat úryvky článků? Načítat v widgetu 100 posledních komentářů? Žádný server nedokáže takovou stránku redakčního systému bez cache zobrazit rychle, protože načítání každé stránky je omezeno na jediné jádro procesoru.

U WordPressu jsme zaznamenali značné zrychlení už jen vypnutím úryvků článků na domovské stránce. Doporučujeme proto volit výstižné nadpisy a obrázky a úryvky z obsahu článků co nejvíce omezit (případně úplně odstranit), protože každý z nich znamená dotazy MySQL navíc. Doporučujeme také nepřidávat zbytečné widgety. Jednoduchý web je pro návštěvníky někdy atraktivnější a pro server je v každém případě rychlejší na zpracování.

Celkově je nejdůležitější věnovat zvláštní pozornost optimalizaci nejnavštěvovanějších stránek, zejména domovské stránky.

Databáze MySQL

Rychlost provádění dotazů MySQL vašeho webu přímo ovlivňuje jeho rychlost. S tím lze něco udělat i bez speciálních znalostí MySQL. Při práci s databází však vždy doporučujeme velkou opatrnost: exportujte dumpy a před každou změnou si vytvořte zálohu! V ovládacím panelu Plesk, který vám HaiSoft poskytuje, to zvládnete několika kliknutími.

• Zmenšete objem své databáze: čím menší je databáze MySQL, tím lepší bude výkon.
• Pokud vaše databáze obsahuje logy přihlášení apod., najděte způsob, jak ji pravidelně čistit (přes administraci, pomocí pluginu nebo ručně například přes PHPMyAdmin).
• Databáze redakčního systému by neměla přesáhnout maximálně 100 MB (s výjimkou případů, kdy je dat opravdu hodně, například u zpravodajského webu).
• Zkontrolujte obsah komentářů, které mohou obsahovat spam, a ověřte nastavení registrace a pravidla schvalování komentářů na webu.
• U webů jako WordPress zvažte smazání starých revizí článků a vyčištění „Transients“ pomocí pluginu.
• Pokud máte dedikovaný server nebo VM, zeptejte se svého týmu správy serverů HaiSoft, zda je možné zvýšit objem databáze uchovávaný v paměti RAM, pokud to kapacita vašeho serveru umožňuje; v některých případech to může přinést zrychlení.

2) Optimalizace dat na straně klienta

Velikost stránky, počet načítaných souborů, jejich původ, velikost obrázků a jejich komprese – to vše jsou parametry, které ovlivňují rychlost načítání webu.

Měření optimalizace pomocí GTMetrix

Doporučujeme přečíst si náš samostatný článek, díky kterému tento nástroj zvládnete:

Jak zvládnout GTmetrix: nezbytný nástroj pro optimalizaci vašeho webu

Web https://gtmetrix.com/ umožňuje podrobně analyzovat výkon vašeho webu z pohledu návštěvníků.

Před jakoukoli optimalizací doporučujeme tento test provést – získáte dobrou představu o tom, na čem je třeba zapracovat, a zároveň budete moci sledovat, jaký pokrok provedené optimalizace přinášejí.

V tomto článku podrobně rozebereme několik nejčastějších doporučení, seznam ale není vyčerpávající a v případě potřeby vám doporučujeme pokračovat v hledání.

Celková velikost stránky

Myslete na to, že ne každý má k prohlížení vašeho webu rychlé internetové připojení nebo výkonné zařízení (mobilní či jiné).

• Pokud je to možné, doporučujeme držet velikost stránky kolem 1 MB maximálně, aby se i při připojení o rychlosti pouhých 2 Mbit/s stránka načetla zhruba za 5 s.
• Pokud je váš web velmi „grafický“ a obsahuje velké obrázky, můžete se případně dostat až na velikost stránky 2 MB.
• Pokud máte fotografický web, pak už žádná pravidla v podstatě neplatí, ideální však je mít komprimované náhledy obrázků s možností zvětšit je ve vysoké kvalitě.
• Pokud vkládáte videa, je až na výjimky lepší použít externí službu (YouTube, Vimeo atd.), která umí skvěle nabízet různé kvality a video náležitě komprimovat.

Počet externích požadavků

Jde o požadavky prováděné při návštěvě vašeho webu, které načítají soubory pocházející odjinud než z vašeho webu. Externí zdroje obvykle návštěvníkovi výrazně prodlužují dobu načítání.

Pocházejí hlavně ze šablon a pluginů, které mění vzhled vašeho webu, a obsahují především fonty, skripty JS a CSS.

Externí zdroj znamená, že pro každý web, ze kterého se nějaký zdroj načítá, musí návštěvník provést další dotaz DNS. Tyto dotazy trvají několik milisekund, což ve součtu může představovat nezanedbatelnou dobu, přinejmenším při prvním načtení stránky.

Externí servery navíc mohou být umístěny daleko od země návštěvníka, což zvyšuje latenci a snižuje přenosovou rychlost.

Je proto třeba co nejvíce omezit načítané externí zdroje. GTMetrix je samozřejmě uvádí v sekci „YSlow“ a „Make fewer HTTP requests“ a také ve „Waterfall“.

Ideálně byste neměli načítat žádný externí zdroj, to je ale u moderního redakčního systému téměř nemožné. Hranicí, kterou byste neměli překročit, je tedy 30 externích zdrojů jako absolutní maximum, ideálně méně než 10 externích požadavků.

Někdy je k tomu nutné zvolit jiné šablony a pluginy, které tyto zdroje ukládají lokálně.

Celkový počet požadavků

Každý zdroj přináší drobnou latenci. Pokud je různých zdrojů příliš mnoho, web se zpomalí, zejména u připojení s vysokým pingem (latencí).

Tato hodnota je uvedena vpravo nahoře ve výsledku testu GTMetrix: „Requests“

Doporučujeme snažit se zůstat pod hranicí 100 požadavků jako absolutním maximem, ideálně pod 50 požadavky.

Spojování (konkatenace) skriptů je metoda, která umožňuje snížit počet odesílaných souborů se skripty, a tedy i počet požadavků. Je to cesta, kterou stojí za to prozkoumat, ale ne jediná: je třeba volit efektivní skripty, které ke svému fungování nepotřebují příliš mnoho souborů. Lze to zavést pomocí skriptů pro ukládání do mezipaměti. Spojování a kompresi skriptů pak obvykle zajistí pluginy pro cache.

Změna velikosti obrázků

Pokud je to možné, snažte se na web nahrávat pouze obrázky ve finální velikosti, v jaké se budou zobrazovat.

Je samozřejmé, že například použití obrázku ve vysokém rozlišení jako miniatury článku není optimální: proč načítat 8 MB obrázek ve vysokém rozlišení, když by možná stačil obrázek o velikosti několika kilobajtů v rozměru 128×128?

Naštěstí většina redakčních systémů, včetně WordPressu, který v tomto ohledu dlouho zaostával, pracuje s miniaturami a dokáže vygenerovat různé velikosti obrázků a podle kontextu použít tu správnou. Je však třeba ověřit, že šablona tyto miniatury následně správně využívá. Pokud ne, musíte obrázky zmenšit ručně.

Tuto úlohu nabízejí některé pluginy: doporučuji před touto operací zálohovat soubory i databázi, protože představuje riziko pro kvalitu obrázků na webu.

V GTMetrix tuto informaci najdete v části „PageSpeed“, sekce „Serve scaled images“.

Na VM a dedikovaných serverech může pomoci modul Google PageSpeed, který lze integrovat do Plesku. Modul dokáže obrázky webu převádět za běhu a podle velikosti obrazovky (pokud původní obrázky nejsou příliš velké). Nastavit ho může vaše podpora; k jeho fungování budete muset zajistit klíč Google API.

Optimalizace komprese obrázků

Doporučujeme používat dobrou úroveň komprese obrázků a moderní formáty.

Stejně jako u změny velikosti může s tímto bodem pomoci modul „PageSpeed“ (pouze VM a dedikované servery). Postarat se o to mohou i některé pluginy nebo skripty; v takovém případě doporučujeme web předem zálohovat, protože komprese může obrázky někdy znehodnotit.

Závěr

Těchto několik rad pokrývá nejčastější případy a mělo by vám pomoci výrazně zlepšit výkon vašeho webu a/nebo serveru, zlepšit uživatelský zážitek a maximalizovat tak udržení návštěvníků. Je to však jen začátek – existují tisíce dalších způsobů, jak web optimalizovat, specifických pro každou situaci. Proto vám doporučujeme nezůstat jen u tohoto úvodu a pátrat dál, zejména u webů s vysokou návštěvností, kde optimalizace může znamenat naprosto zásadní rozdíl.

Potřebujete větší výkon?

Ani po provedení kroků z tohoto průvodce nejste s výkonem svého webu spokojeni?

• Ještě nejste zákazníkem HaiSoft? Kontaktujte naše obchodní oddělení přes náš web
• Zákazníci HaiSoft: obraťte se na podporu HaiSoft prostřednictvím tiketu nebo telefonicky a společně najdeme řešení