Lekce 8 - Optimalizace a cache

V minulé lekci, Bezpečnost ve WordPressu, jsme se zabývali bezpečností.

V dnešní lekci se zaměříme na optimalizace a cache.

WordPress jako takový není pomalý, ale většina lidí se o něj nestará a proto jej ve statistikách vidíte často nízko. A přitom máte pár snadných metod hned při ruce. Dnešní článek si rozdělíme na jednoduchou variantu a složitou.

Jednoduchá varianta

Nejprve se podívejme na to jednodušší řešení. Máte koupenou/staženou šablonu, čistý WordPress a pár pluginů - dejme tomu klidně i builder typu Elementor. Co nyní k optimalizaci potřebujete udělat je to, že povypínáte co nejvíce funkcí, které nepotřebujete. A to jak v šabloně, tak pluginech. Samozřejmě velká část nepůjde vypnout nebo tu možnost mít nebudete, to ale nevadí. Důležité je se zbavit toho, čeho můžete.

Následujícím krokem pak bude instalace těchto pluginů:

• W3 Total Cache, WP Fastest Cache, WP Rocket apod.
• Autoptimize

Správa cache je nad síly většiny uživatelů a nemá vyznám je proto řešit dopodrobna, navíc dnešní pluginy to zvládají poměrně dobře samy. Dokáží nastavit expiraci souborů nebo aktualizaci verzí, což nám bohatě stačí. Autoptimize, nebo některé další cache pluginy, pak zařídí minifikaci JS a CSS souborů, popřípadě je spojí dohromady - což může i nemusí být dobře. Záleží případ od případu.

Důležité je též zapnutí HTTPS - jednou z výhod je například paralelní přenos souborů.

Ale to vše nemusí znamenat nic, pokud se nezaměříte na soubory, jejichž datová náročnost často znamená 80 % načítaných dat - obrázky. Opět přikládám pár mně osvědčených nástrojů, pomocí kterých lze tuto problematiku vyřešit:

• TinyJPG
• ShortPixel
• WP Smush.it a další

TinyJPG osobně používám proto, že je velmi snadný na vložení do webu a o vše se postará. Při nahrání souborů jej zmenší a pak rozseká na požadované velikosti. U některých webů jsem zaznamenal 30 - 50 % úsporu dat. U jednoho to znamenalo víc jak 1 GB prostoru na disku.

Složitější varianta

Ta zahrnuje na rozdíl od varianty jednodušší už znalosti programování. Proč? Protože budeme vkládat kódy do child theme.

Poznámka: child theme je odvozená šablona závislá na té hlavní. Dovoluje tak přidat funkce k té stávající bez nutnosti úprav originální verze, kterou tak můžete aktualizovat bez obav o ztrátu nových funkcí.

WordPress jako takový má velmi zajímavé flow načítání, které vypadá asi nějak takto: Nejdříve se načítá systém → pluginy → šablona → child theme.

Tím pádem vše, co se načetlo, lze díky šabloně, jež se načítá poslední, deaktivovat.

A co je na tom super?

WordPress totiž dovoluje registrovat CSS a JS soubory. Vám pak stačí ty specifické soubory deregistrovat globálně (nebo je nechat jen někde) a tím zmenšíte zátěž při načítání.

Ukázky kódu:

wp_dequeue_style( 'wp-block-library' );
wp_deregister_script( 'wp-embed' );

Další variantou jsou vlastní cache zápisy do .htaccess souboru, ale to je hodně specifické a zasloužilo by si to článek samo o sobě, proto se tomu v dnešní lekci věnovat nebudeme. A 100% nedoporučuji se do takových úprav pouštět, pokud nevíte, co děláte. Htaccess je komplexní věcí a bez znalosti fungování zápisu si akorát během vteřiny rozhodíte web. A spravovat následky není až tak snadné, jak se může zdát.

Mezi další možnosti patří vlastní šablona - nakódovaná na míru. Proč? Protože taková šablona obsahuje jen to potřebné.

Uvedu 2 příklady z praxe

• První je extrémně náročný klient, který testuje a zkouší. Při nasazení obecné šablony s builderem jsem se marně 2 měsíce snažil optimalizovat web a zahučelo do toho několik desítek tisíc. Klient mě nakonec poslechl, udělal jsem vlastní šablonu a web je mnohem náročnější, dále o 300 % rychlejší (na některých podstránkách i více) a především nemáme limity nastavené obecnými nástroji pro správu webu.
• Druhý klient měl web na míru bez CMS, všechno dělali programátoři. Web jsem předělal a z 1 MB JS se stalo cca 10 KB, z 1,5 MB CSS se stalo nějakých 30 KB atd. Web se pak načítal řádově mezi 3,5 až 5 vteřinami na 3G připojení. U původní verze to bylo klidně 15 vteřin a více.

A u ani jednoho z výše uvedených příkladů jsem nepoužil autoptimize nebo složitější pluginy na cache. Pouze základní nastavení a vše je rychlé.

TinyJPG na optimalizaci obrázků se hodí vždy. Nikdy nevíte, kdo co do systému nahraje.

SVG ve WordPressu?

Jako dodatek si dovolím upozornit, že existuje něco jako SVG formát. Velmi mnoho lidí exportuje do PNG/JPG obrázky typu ikonky a aby vypadaly dobře i na retina, musí být 2x až 3x větší. Čili místo 20 Kb na obrázek máte 40 Kb a více. Díky SVG toto snížíte na mnohem méně a šetříte tak přenos dat.

SVG může obsahovat škodlivý kód, proto jej WordPress nedovoluje v základu nahrávat. Stačí však najít plugin a do souborů přidat <?xml version="1.0" encoding=“utf-8”?>. Díky tomu jej WordPress dovolí nahrát.

To je pro dnešní lekci opět vše.

Kdo stojí za článkem?

Ahoj, jmenuji se Pavel Mareš a od roku 2012 pracuji v digitálním prostředí. Prošel jsem si kódováním, vývojem webů, grafikou a v tuto chvíli pomáhám svým klientům tvořit kvalitní stránky na míru.

Nabízím služby - UX, UI (grafika), kódování (Gulp, SASS, HTML5, CSS3, JS) a nasazení webu na WordPress (vlastní šablony). Můžete se podívat na mé reference.

Rychlý kontakt: +420 776 256 020 / info@mares-pavel.cz

Příště, v lekci E-shop na WordPressu, vícero možností, se podíváme na e-shop.