K Vánocům napsal Michal článek Jak zrychlit WordPress web z 9 % na 93 % dle Google Page Speed Insights. Rozhodli jsme se, že zrychlíme i web Marketing Makers. Ačkoliv píšeme hlavně o WordPressu, stejný postup půjde využít i u jiných systémů nebo webu na míru.
Náš web se načetl na pomalém mobilním připojení do prvního smysluplného vykreslení za 7,1 sekund a první obsah se zobrazil za 4,4 sekundy. S tímto skóre upřímně žasneme, že si někdo kdy objednal naše SEO služby.
Na naši obranu, náš web vznikl přes víkend. Stejně jako mnoho našich klientů jsme si před 3mi roky pořídili náhodnou WordPress šablonu, která se nám líbila a tu nasadili. Prioritou byla rychlost zprovoznění, nikoliv kvalita.
Již na začátku nám bylo jasné, že nejefektivnějším řešením by bylo změnit celou šablonu, ale to by nebyla taková legrace.
Eliminace pluginů, skriptů a stylů
V prvním kroku jsme odstranili všechny pluginy, které je možné snadno nahradit. Mezi nimi byl například plugin zajišťující kontrolu HTTP obsahu na HTTPS webu. Stačilo pomocí plugin Better Search and Replace najít všechny http:// odkazy v databázi a nahradit zabezpečenou verzí. Odstranili jsme také plugin pro přidávání tlačítek na sociální sítě, jelikož dle našich dat byl náš obsah sdílen velmi zřídka pomocí tlačítka. Kdybychom jej nahrazovali, tak pluginem, který si netahá skripty sociálních sítí.
Zároveň jsme odstranili WordPress widgety, které naše šablona měla pro sociální sítě – byly to vcelku cvalíci a WP je musel vždy načítat. To zároveň pomohlo rychlosti administrace. Nechali jsme jen to, co používáme.
Skripty – pokud to jde, tak odstranit, když ne tak vložit skript/styl do patičky
Následně jsme našli soubor, který přidává skripty a styly do šablony a zakomentovali ty, co nepotřebujeme. Naše šablona má spoustu možností a využíváme jich minimum. Například všechny možné scrolly, slidery atd., jejichž skripty se automaticky nahrávaly do šablony jsme zakomentovali.
WordPress má výborně vyřešené přidávání skriptů do patičky. Pokud při registraci skriptů jako poslední hodnotu funkce dáte true, tak tím říkáte, že má být skript v patičce (viz dokumentace funkce). V hlavičce by měl být jen ten skript nebo styl, bez něhož se web načte špatně nebo ošklivě problikne.
Experimentálně jsme zkusili i odstranit Google Tag Manager a jakoukoliv analytiku. To nepřidalo nic k rychlosti webu, ale zlepšilo skóre o 10 %, jelikož ubyl zdroj. Žádné zlé sledovací skripty jsme na webu neměli, ale pokud budete kontrolovat zdrojový kód, koukněte se, jestli nemáte v hlavičce Hotjar, Facebook SDK, LinkedIn Insight tag a další velké skripty z kterých uživatel nic nemá. Pokud máte GTM, zkontrolujte si, že měřící skripty pouštíte až tehdy, kdy je načten obsah (DOM.ready, GTM.load).
I CSS styly je možné dát do patičky. Velkým problémem šablon je, že automaticky načítají několik fontů s ikony. V našem případě 3, ale na webu máme 6 ikonek. Ikonky by bylo ideální udělat přímo v SVG, ale to není kompatibilní s pluginem Visual Composer, který používáme. Takže jsme aspoň dali ikony do patičky. Tam to nejde udělat přímo true/false, ale je na to snadný workaround, jak vložit do patičky.
Cachování, PHP a hosting
Naše šablona zpracovává velké množství operací na serveru než vůbec zobrazí logo. Je to způsobeno komplikovaností šablony. Abychom urychlili zpracování, přešli jsme na nejnovější verzi PHP 7.3. Jelikož jsme měli 7.0, tak jsme rozdíl nepoznali. Následně jsme zkusili přejít na Wedos hosting NoLimit Extra. Ten má více operační paměti a zvládá více PHP operací najednou. To způsobilo zlepšení o 5 %. Kdybychom byli na jiném hostingu, ještě bychom řešili, zda umí HTTP/2, ale to v případě Wedosu není problém.
Největším pokrokem byla aktivace cachování pomocí W3 Total Cache. Hlavně objektová cache a databázová cache způsobila největší skok. Následně minifikace JavaScriptu CSS stylů byla již jen třešnička na dortu.
Jak to dopadlo?
Zrychlení bylo nakonec o 3 sekundy do prvního smysluplného vykreslení. Toto připomínáme je na 3G připojení. Pokud máte 4G nebo jste na počítači, bude to výrazně rychlejší. Ale vezmeme-li v úvahu, že rychlost webu je hodnotícím faktorem vyhledávačů, mělo by nás to i tak zajímat.
Efekt v podobě zlepšení pozice byl vcelku rychlý, cca do týdne – zde je ovšem diskutabilní, jestli opravdu pomohly tyto úpravy (viz screen z Collabim – zelená ukazuje 1. – 3. místo).
Vyzkoušíme-li jiný test, který má jiné parametry, například WebPageTest.org, dopadneme mnohem lépe. Bohužel nemáme screen před aktivitami pro porovnání.
Vliv na počet konverzí ani míru okamžitého opuštění na webu zatím nepozorujeme. Ale naše návštěvnost je velmi nízká, takže vyhodnocení bude chtít delší čas.
Další kroky – aneb o čem bude další díl seriálu
Předělat ikony do SVG, aby nebylo nutné načítat fonty
Obrázky ve WEBP – nový formát webp, který doporučuje Google dokáže obrázky výrazně zmenšit, ale bohužel nemá podporu u všech prohlížečů a ani u pluginů, které používáme. Ale zkusíme využít plugin jako je WebP Express, který pokud detekuje podporovaný prohlížeč, vloží WebP obrázek.
Experimentálně uvažujeme o přesunutí webu do cloudu, jako třeba AWS, Azure, Google Cloud Platform.
Zkusíme ještě více ořezat skripty. Nyní jsme tam nechali relativně velké skripty, jejichž jediným úkolem je animovat menu a horní lištu. Kdyby se toto napsalo na míru, určitě by to ušetřilo hodně času.
