Jak zrychlit načítání svého dobrého webu

Google Page Speed Insights hodnotí webovou stránku na základě její rychlosti načítání a použitelnosti a na základě toho vypočítá webu určité skóre. Zatímco šablona má velice vysoké skóre za použitelnost, skóre za rychlost je však poměrně nízké 50 – 60/100. Vzhledem k tomu, že šablona je součástí instalace WordPressu, a ten má kolem sebe většinou ekosystém pluginů, které vkládají mnoho blokujících prvků do hlavičky (javascripty, css), je proto často považován za pomalý.

V průběhu toho článku se podíváme na to, jak lze rychlost načítání WordPressu zrychlit. Po celou dobu budeme pracovat s webem DSW Oddíl, kde je připraven základní obsah i s obrázky a dalšími prvky.

Jak je vidět z obrázku, tak skóre je poměrně nízké a je co dohánět. V tomto případě hlavně rychlost načítání. Page Speed Insights nám rovnou i doporučují i možné opravy, které bychom měli udělat a také jak je asi provést. Postupně se tedy budeme zabívat následujícími body:

  • Zkrácení doby odezvy serveru a komprese
  • Minifikace javascriptů a css a jejich kešování
  • Optimalizace obrázků

GZip a Cache-control

V první řadě je potřeba říci serveru, že veškerý obsah daného webu zasílat komprimovaný (GZip komprese) a také má určovat, jak dlouho je daný stažený obsah aktuální. K této konfiguraci využijeme konfuguračního souboru .htaccess pro server Apache, který na skautských webech běží a zajišťuje jejich servírování. Jako základ nastavíme platnost obsahu na 7 dní (604880 sekund). Většina skautských příliš často neaktualizuje svůj obsah a tak jeden týden se zdý býti ideální. Daná konfigurace pro .htaccess je na konci tohoto článku.

Toto nastavení v jednoduchosti říká to, že pokud jsem během posledních sedmi dní byl na daném webu, tak prohlížeč nemusí znovu stahovat většinu prvků webu, jako jsou styly, obrázky či javascripty, ale použije ty, co už má stažené (jsou-li k dispozici). Nebo pokud vyloženě nevynutíte stažení veškerého obsahu znovu (smazání keše prohlížeče).

Po aplikaci konfigurace se efekt projeví do několik málo minut. Ihned jsme poskočily o několik čísel nahoru.

 

Cachování obsahu

V rámci zrychlení webu je také vhodné uživatelům kešovat (cachovat) obsah. V jednoduchosti řečeno prostě stránku předgenerovat (nebo vygenerovat jednou při první návštěvě), někam si ji uložit a pak už ostatním uživatelům servírovat tuto vygenerovanou stránku. Vzhledem k tomu, že je stránka vygenerována, tak WordPress nemusí pro obsah znovu šahat do databáze a dělat spoustu dalších věcí k zobrazení webu, ale rovnou uživateli vrátí již předpřipravený obsah. Jasná úspora času. Tolik v jednoduchosti.

Pro takovéto kešování si vybereme jeden z mnoha WordPress pluginů. Pro tento případ W3 Total Cache.

Předpokládám, že plugin dokážete nainstalovat i aktivovat. Po instalaci a aktivaci se vám v menu administrace objeví záložka „Performance“. Vyberte ji a přejděte do „General Settings“. Na této stránce se věnujte pouze položkám „Page Cache“, „Minify“, „Browser Cache“. U všech zaškrtněte „Enable“ a volbu uložte. Nyní je váš web kešovaný. Toto nastavení můžete ideálně ověřit v jiném prohlížeči (kde nejste přihlášení do WordPressu) anebo v Incognito nastavení. Stránka se při druhém třetím pokusu načte pocitově rychleji.  A Page Speed Insights nám přiřadil další body

Po těchto úpravách by jste měli dostávat již jenom pár návrhů či varování. V této chvíli by se měli věnovat již jenom třeba obrázků (jak je vidět výše) anebo css či javascriptů. Ty by však už měly být ve stránce pouze jednou a to zkombinované a minifikované (toto zajišťuje ona volba „Minify“), jak je vidět na obrázku dále.

Jiná varování a doporučení už by se měla týkat pouze externího obsahu a prvků, které nemáte pod kontrolou (externí knihovny, fonty, embedy a další…).

Optimalizace obrázků

Z položek, které můžeme optimalizovat už nám zbývají pouze obrázky. V reálu se jedná pouze o komprimaci obrázků na co nejmenší velikost, která však nesnižuje uživatelský dojem z obrázku. Technikami a algoritmy se zde nebudu zabývat. Pouze tím, jak to pomocí nějaké WordPress pluginu provést. Pro tento účel jsem vybral Tiny Compress Images.

Opět je potřeba jej nainstalovat a aktivovat. Po aktivaci je potřeba v nastavení pluginu ještě přidat API klíč, který umožní onu komprimaci pomocí externího zdroje. Do administrace multimédií tak přibyde pouze tlačítko pro komprimaci jednotlivých obrázků. Tu lze provést jednotlivě anebo na ráz. Po komprimaci všech obrázků by zrychlení webu mělo být opět znatelné.

Při použití pluginů pro komprimaci však nejdříve prostudujte podmínky použití jednotlivých pluginů. Ne všechny poskytují své služby zdarma nebo jen v omezené míře. Zde prezentovaný plugin je třeba omezen na 500 obrázků měsíčně.

Po optimalizace obrázků by vás měl Page Speed Insights už informovat jenom o pár obrázcích, které se třeba nepodařilo optimálně zmenšit anebo jsou z externích zdrojů a nemáte nad nimi kontrolu.

Nic není dokonalé

Pomocí těchto několika bodů jsme se dostali ze skóre 50 – 60 na čísla okolo 80. Nic není dokonalé, ani pluginy, ani nástroj měření rychlosti, a tak dosáhnout maximálního skóre by vyžadovalo trochu jiný přístup a jiný typ webu i hostingu. Co je však důležité, že jsme objektivně i pocitově zrychlili web a umožnili tak jeho příjemnější užívání.

Na celý postup se můžete podívat a něco se přiučit i v následujícím videu (v angličtině):

Odkazy:

Cache

Optimalizace obrázků

.htaccess konfigurace:

# 1 Week
Header set Cache-Control "max-age=604800, public, must-revalidate"
<IfModule deflate_module>
  <IfModule filter_module>
    AddOutputFilterByType DEFLATE text/plain text/html
    AddOutputFilterByType DEFLATE text/xml application/xml application/xhtml+xml application/xml-dtd
    AddOutputFilterByType DEFLATE application/rdf+xml application/rss+xml application/atom+xml image/svg+xml
    AddOutputFilterByType DEFLATE text/css text/javascript application/javascript application/x-javascript
    AddOutputFilterByType DEFLATE font/otf font/opentype application/font-otf application/x-font-otf
    AddOutputFilterByType DEFLATE font/ttf font/truetype application/font-ttf application/x-font-ttf
  </IfModule>
</IfModule>