8. diel - Optimalizácie a cache

V minulej lekcii, Bezpečnosť vo WordPress , sme sa zaoberali bezpečnosťou.

V dnešnej lekcii sa zameriame na optimalizácia a cache.

WordPress ako taký nie je pomalý, ale väčšina ľudí sa o neho nestará a preto ho v štatistikách vidíte často nízko. A pritom máte pár jednoduchých metód hneď pri ruke. Dnešný článok si rozdelíme na jednoduchú variantu a zložitú.

Jednoduchá varianta

Najprv sa pozrime na to jednoduchšie riešenie. Máte kúpenú / stiahnutú šablónu, čistý WordPress a pár pluginov - dajme tomu pokojne aj builder typu Elementor. Čo teraz k optimalizácii potrebujete urobiť je to, že povypínáte čo najviac funkcií, ktoré nepotrebujete. A to ako v šablóne, tak pluginoch. Samozrejme veľká časť nepôjde vypnúť alebo tú možnosť mať nebudete, to ale nevadí. Dôležité je sa zbaviť toho, čoho môžete.

Nasledujúcim krokom potom bude inštalácia týchto pluginov:

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

Správa cache je nad sily väčšiny užívateľov a nemá vyznám je preto riešiť dopodrobna, navyše dnešný pluginy to zvládajú pomerne dobre samy. Dokážu nastaviť expirácii súborov alebo aktualizáciu verzií, čo nám bohato stačí. Autoptimize, alebo niektoré ďalšie cache pluginy, potom zariadi minifikaci JS a CSS súborov, poprípade je spojí dohromady - čo môže aj nemusí byť dobre. Záleží od prípadu k prípadu.

Dôležité je tiež zapnutie HTTPS - jednou z výhod je napríklad paralelný prenos súborov.

Ale to všetko nemusí znamenať nič, ak sa nezameriate na súbory, ktorých dátová náročnosť často znamená 80 % preberaných dát - obrázky. Opäť prikladám pár mne osvedčených nástrojov, pomocou ktorých je možné túto problematiku vyriešiť:

• TinyJPG
• ShortPixel
• WP Smush.it a ďalšie

TinyJPG osobne používam preto, že je veľmi jednoduchý na vloženie do webu ao všetko sa postará. Pri nahratie súborov ho zmenší a potom rozseká na požadovanej veľkosti. U niektorých webov som zaznamenal 30 - 50 % úsporu dát. U jedného to znamenalo viac ako 1 GB priestoru na disku.

Zložitejší variant

Tá zahŕňa na rozdiel od variantu jednoduchšie už znalosti programovania. Prečo? Pretože budeme vkladať kódy do child theme.

Poznámka: child theme je odvodená šablóna závislá na tej hlavnej. Dovoľuje tak pridať funkcie k tej existujúcej bez nutnosti úprav originálna verzia, ktorú tak môžete aktualizovať bez obáv o stratu nových funkcií.

WordPress ako taký má veľmi zaujímavé flow načítanie, ktoré vyzerá asi nejako takto: Najskôr sa načíta systém → pluginy → šablóna → child theme.

Tým pádom všetko, čo sa načítal, možno vďaka šablóne, ktorá sa načíta posledná, deaktivovať.

A čo je na tom super?

WordPress totiž dovoľuje registrovať CSS a JS súbory. Vám potom stačí tie špecifické súbory deregistrovat globálne (alebo ich nechať len niekde) a tým zmenšíte záťaž pri načítaní.

Ukážky kódu:

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

Ďalším variantom sú vlastné cache zápisy do .htaccess súboru, ale to je veľa špecifické a zaslúžilo by si to článok samo o sebe, preto sa tomu v dnešnej lekcii venovať nebudeme. A 100 % neodporúčam sa do takých úprav púšťať, ak neviete, čo robíte. Htaccess je komplexný vecí a bez znalosti fungovania zápisu si akurát behom sekundy rozhodíte web. A spravovať následky nie je až tak jednoduché, ako sa môže zdať.

Medzi ďalšie možnosti patrí vlastné šablóna - nakódovanie na mieru. Prečo? Pretože taká šablóna obsahuje len to potrebné.

Uvediem 2 príklady z praxe

• Prvá je extrémne náročný klient, ktorý testuje a skúša. Pri nasadení všeobecné šablóny s Builderom som sa márne 2 mesiace snažil optimalizovať web a zahučalo do toho niekoľko desiatok tisíc. Klient ma nakoniec poslúchol, urobil som vlastnú šablónu a web je oveľa náročnejšie, ďalej o 300 % rýchlejší (na niektorých podstránkach i viac) a predovšetkým nemáme limity nastavené všeobecnými nástrojmi pre správu webu.
• Druhý klient mal web na mieru bez CMS, všetko robili programátori. Web som prerobil az 1 MB JS sa stalo cca 10 KB, z 1,5 MB CSS sa stalo nejakých 30 KB atď. Web sa potom preberal rádovo medzi 3,5 až 5 sekundami na 3G pripojenie. U pôvodnej verzie to bolo pokojne 15 sekúnd a viac.

A u ani jedného z vyššie uvedených príkladov som nepoužil autoptimize alebo zložitejšie pluginy na cache. Iba základné nastavenie a všetko je rýchle.

TinyJPG na optimalizáciu obrázkov sa hodí vždy. Nikdy neviete, kto čo do systému nahrá.

SVG vo WordPress?

Ako dodatok si dovolím upozorniť, že existuje niečo ako SVG formát. Veľmi veľa ľudí exportuje do PNG / JPG obrázky typu ikonky a aby vyzerali dobre aj na retina, musí byť 2x až 3x väčšiu. Čiže namiesto 20 Kb na obrázok máte 40 Kb a viac. Vďaka SVG toto znížite na oveľa menej a šetríte tak prenos dát.

SVG môže obsahovať škodlivý kód, preto ho WordPress nedovoľuje v základe nahrávať. Stačí však nájsť plugin a do súborov pridať <?xml version="1.0" encoding=“utf-8”?>. Vďaka tomu ho WordPress dovolí nahrať.

To je pre dnešné lekciu opäť všetko.

Kto stojí za článkom?

Ahoj, volám sa Pavol Mareš a od roku 2012 pracujem v digitálnom prostredí. Prešiel som si kódovaním, vývojom webov, grafikou a v tejto chvíli pomáham svojim klientom tvoriť kvalitné stránky na mieru.

Ponúkam služby - UX, UI (grafika), kódovanie (Gulp, SASS, HTML5, CSS3, JS) a nasadenie webu na WordPress (vlastné šablóny). Môžete sa pozrieť na moje referencie.

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

Nabudúce, v lekcii E-shop na WordPress, viacero možností , sa pozrieme na e-shop.