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:
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
1MB JS sa stalo cca10KB, z1,5MB CSS sa stalo nejakých30KB atď. Web sa potom preberal rádovo medzi3,5až5sekundami na3Gpripojenie. U pôvodnej verzie to bolo pokojne15sekú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.
