Zrychlení webu pod 1 sekundu

Web rozbiteprasatko.cz vás naučí pracovat s penězi, zacházet s nimi úsporně a správně investovat. Autor Jakub Dvořák napsal o tomto tématu knihu, píše blog a natáčí podcast. Trochu ho na webu ale trápily technické problémy a nedokonalosti. Třeba rychlost webu. Tak jsme se na ně podívali.

Nebylo úplně v pořádku nastavené zpracování cookies podle metodiky GDPR (tady máme více informací o GDPR), web potřeboval zlepšit zabezpečení a také zrychlit. Některé stránky se totiž načítaly příliš pomalu, i když bylo jasné proč – obsahovaly hodně členitého obsahu.

Revize pluginů a GDPR

• Doplnění dalších náležitostí podle požadavků GDPR – dokumenty se seznamem cookies.
• Revize pluginů (odstranění nepotřebných, kontrola, zda plní, co mají), aktualizace komponent (WordPressu, pluginů apod.).
• Kontrola platnosti licencí a případně jejich obnova.
• Nastavení pluginu pro správu cookies, používáme Complianz.
• Převod měřicích funkcí do Google Tag Manageru a jeho nastavení, napojení na Search Console.
• Testování, oprava nalezených chyb včetně neplatných odkazů.

Web je aktualizovaný, splňuje požadavky metodiky GDPR, cookies jsou spravovány pluginem Complianz a všechny skripty se spouštějí prostřednictvím správce značek GTM. Web je připojený do Search Console, kde je možné sledovat jeho výkon a případné chyby.

Přečtěte si naše články na webu Co umí WordPress: Jak nasdílet přístup do GTM a Jak nasdílet přístup do Search Console.

Zvýšení bezpečnosti

Podobné problémy má každý druhý web – trápí jej útočící spam. Klasická obrana je tedy nasazení nástroje proti spamu. Nejlépe se nám osvědčuje služba reCaptcha verze 3. Pro vytvoření firewallu používáme nástroj Wordfence a samozřejmě provádíme i změnu hesel a pro jejich vyšší zabezpečení silnější algoritmus, než nabízí jádro WordPressu.

Web je tedy zabezpečený pluginem Wordfence, který je nastavený jako firewall. Hesla jsou nyní ukládána bezpečnějším způsobem. Na webu je aktivní ochrana formulářů proti spamu prostřednictvím služby reCaptcha.

Zrychlení webu

Na začátku vždy provedeme podrobnou analýzu načítání stránek a hledáme skutečné příčiny pomalého načítání. Nikdy nestačí jen nastavit cachovací plugin. A i ten je potřebné nastavit správně a s vědomým plánem, nikoliv náhodně. Některé volby mohou působit proti sobě nebo nemusí přinášet očekávaný efekt.

Součástí je také optimalizace obrázků, což stručně řečeno znamená:

• úprava vhodných rozměrů, zejména ve výpisech článků – přepracování klíčových stránek
• optimalizace obrázků pluginem ShortPixel, tedy snížení jejich datové velikosti,
• převedení obrázků do formátu WebP,
• správné použití obrázků ve formátu WebP,
• opožděné načítání obrázků (lazy loading),
• nastavení všech komponent (cachovací plugin, Elementor atd.),
• pečlivé otestování v různých konfiguracích,
• odstranění červených hodnot z výsledků měření (ty nikdo vidět nechce).

Analýza rychlosti načítání

Pomocí nástrojů WebPageTest, Google PageSpeed Insights a dalších jsme analyzovali načítání různých stránek webu a dospěli jsme k závěru, že největší problém činí následující faktory:

• stránky zobrazující aktuální stav košíku a to navzdory tomu, že se košík na stránkách nepoužívá, existuje pouze jedna produktová stránka,
• nesprávně nastavená cache Cloudflare,
• nesourodá směr cachovacích pluginů, které nebyly správně nastavené a jeden druhého ovlivňovaly,
• neefektivní práce s obrázky – zbytečně velké rozměry (čili datově velké soubory), používání overlay (část obrázků byla kvůli efektu překrytá jiným prvkem), nesprávné používání rozměrů (velké rozměry na místě, kde mají být náhledové obrázky),
• chybějící favicon, což načítání také brzdí,
• některé stránky obsahují v Elementoru skryté (neviditelné) části, které se ovšem načítají,
• v databázi je množství dat, které se načítá při každém dotazu – to je negativní vlastnost WordPressu, který to pluginům umožní,
• používají se ikonové fonty (celé sady ikon), ovšem počet reálně použitých ikon je v jednotkách, takže se velká část načítá zbytečně,
• Elementor generuje kód, který je složitý, i když je vzhled na první pohled jednoduchý, technicky je velmi členitý a prohlížeči trvá dlouho, než ho zpracuje.

Optimalizace načítání

Na základě těch dat jsme provedli následující kroky:

• zakázali jsme aktualizaci košíku při každém dotazu na jakoukoliv stránku, protože na jediné produktové stránce není potřeba a samotný košík se (v hlavní nabídce) nezobrazuje, kód je tedy zbytečný,
• upravili jsme nastavení Cloudflare, aby webu pomáhal, nicméně i tak jej považujeme z hlediska cachování za zbytečný,
• nainstalovali jsme a správně nastavili plugin
  • Autoptimize, který minifikuje skripty a styly,
  • WP Fastest Cache, jehož hlavním přínosem je funkce cache preloading, tedy vygenerování celého webu do statických stránek v noci (po půlnoci),
• nastavili jsme správně rozměry obrázků a
  • všechny obrázky jsme v těchto rozměrech přegenerovali,
  • na klíčových stránkách jsme zbytečně rozměrné obrázky zaměnili za jejich menší varianty, aby se rychleji načítaly,
  • obrázky jsme optimalizovali a následně převedli do úsporného formátu WebP,
• doplnili jsme favicon.ico, tedy ikonu webu,
• vymazali jsme skryté sekce některých klíčových stránek, je možné je najít v historických revizích stránek, ale už se nenačítají jen proto, aby se skryly,
• v databázi jsme provedli nastavení, aby se při každém dotazu nenačítala nenačítala data s parametrem autoload, tím se dotazy výrazně zrychlily.

Poslední dva body vyžadují změnu obsahu, tedy vybrat jednotlivé ikony a nenačítat celé sady, případně zjednodušit strukturu stránky. Tyto kroky jsme neprovedli, protože by výrazně ovlivnily chod a obsah webu a nebyly předmětem prací.

Výsledek zrychlení

Web se podařilo zrychlit na úrovni dotazů do databáze a na straně hostingu. Pro mobilní zařízení je ke zrychlení stále prostor, ale zde narážíme na komplikovaný design, jehož zpracování mobilní klient nezvládá dostatečně rychle. Data jsou ze serveru k dispozici rychle. Web splňuje požadavky core web vitals pro desktop, částečně pro mobil.

Web je rychlejší a zabezpečený