Návod a tipy na nastavenie pluginu WP Rocket, pomocou ktorého dokážete viditeľne zrýchliť vašu WordPress stránku.
Obsah
Čo je to cache
Cache je v poslednej dobre tak často omieľané slovo, že o ňom hovorí už pomaly aj moja babka. Cache je pomenovanie pre dočasnú, resp. vyrovnávaciu pamäť počítača, aj servera.
Namiesto toho, aby sa celá webová stránka musela znova načítavať (teda prakticky sťahovať zo servera), určité časti, ktoré sa nemenia, sa načítajú z tejto pamäte.
Dochádza teda k úbytku dátového toku medzi klientom a serverom, s čím je spojený menší obnos prenesených dát a najmä vyššia rýchlosť načítania stránky.
Cache na strane servera
Každý aspoň priemerný server má vlastný cache systém. Server si väčšinou pamätá uložené obrázky, CSS aj JS súbory, ktoré sú spoločné pre celú stránku.
Namiesto toho, aby uložené logo stále posielal na klienta, pošle len informáciu, že klient už má u seba logo uložené a môže ho teda použiť.
To platí pre väčšinu obrázkov na stránke. Možno ste sa niekedy stretli s problémom, že sa vám stále zobrazoval starý obrázok, aj keď ste ho už nahradili novým. Tak za to môže cache.
Počas vývoja webovej stránky, si, samozrejme, potrebujeme cache vypnúť, pretože vykonané zmeny potrebujeme vidieť hneď. Dá sa to urobiť na strane servera, v ovládacom paneli od vášho hostingu.
Cache na strane stránky
Aj na strane WordPressu vieme nastaviť cache. Ono sa tomu síce hovorí cache, ale v skutočnosti sa robí len optimalizácia použitých kódov a ďalších súborov.
Na tento účel môžeme použiť niekoľko pluginov. Niektoré z nich sú zadarmo a väčšinou pokrývajú len základnú funkcionalitu. Mnohé majú platené verzie, alebo sú platené od základu.
V tomto článku sa budeme venovať pluginu WP Rocket, ktorý je platený, ale určite ho s pokojným svedomím môžem zaradiť medzi jeden z najlepších pluginov na optimalizáciu rýchlosti.
Ako získať WP Rocket? Aká je jeho cena?
WP Rocket získame výlučne z ich oficiálnej webovej stránky. Cenovo máme na výber tri plány – SINGLE za 49$ ročne, použijeme pri jednej webovej stránke. Plán PLUS za 99$ použijeme na tri stránky a plán INFINITE za 249$ ročne použijeme na nekonečno webových stránok (vynikajúce pre vývojárov, ktorí robia kvantum stránok).
Po vyplnení fakturačných údajov a zaplatení dostaneme na stiahnutie súbor .zip, ktorý obsahuje náš plugin a licenciu. Plugin nahrajeme cez wp-admin do našej stránky (Pluginy-> pridať nový-> nahrať plugin). Po úspešnej inštalácií nezabudneme plugin aktivovať.
Návod na nastavenie pluginu WP Rocket
V praxi som sa už niekoľkokrát stretol s tým, že človek si nainštaloval cache plugin a nezaznamenal žiadnu zmenu. Isteže. MAŤ cache plugin je síce pekné, ale je to ako mať vodičák (ale nejazdiť). Aby sme dosiahli zlepšenie výkonu a optimalizáciu rýchlosti, budeme musieť WP Rocket nakonfigurovať.
K nastaveniam WP Rocketu sa dostaneme vo wp-admine cez hlavný ľavý stĺpec v sekcií Nastavenia -> WP Rocket. Klikneme. Ukáže sa nám nástenka a veľa rozličných, na prvý pohľad strašidelných, možnosti. Poďme si ich teraz rad-radom prejsť.
Dashboard
Nástenka. Tu sa zobrazujú základné informácie o vašom účte, licencií a pod. Máme možnosť tu zapnúť „Rocket Analytics“, čo znamená, že sa budú odosielať nejaké dáta do centrály WP Rocketu. Vývojárom pluginu to tak môže pomôcť.
Cache
Základné nastavenia pre cache.
Môžeme zapnúť/vypnúť cachovanie pre mobily, odporúčam nechať zapnuté. Môžeme tiež oddeliť cache súbory zvlášť pre veľké PC a zvlášť pre mobily. Osobne to nikdy nerobím, keďže nevidím dôvod.
Enable caching for logged-in WordPress users zapne cache pre prihlásených užívateľov. Pre jednoduchšie a prezentačné stránky nepotrebné, ak však máte nejakú stránku, kde sa užívatelia prihlasujú (napr. e-shop), môže byť táto funkcia užitočná. V základe prihlásený užívateľ nepoužíva cache (počíta sa s tým, že prihlásený užívateľ je správca webovej stránky, ktorý by mal vidieť stránku bez cache, aby vedel odkontrolovať okamžite zmeny). Keď zaškrtnete toto políčko, budú cache používať aj prihlásení užívatelia.
Cache Lifespan – tu nastavíme časový úsek, po ktorom sa má cache automaticky premazať. Po kliku na „Minutes“ dostatene na výber hodiny a dni. Vždy nechávam nastavenú základnú hodnotu, ale je to samozrejme na vás. Čiže ak niekedy urobíte zmenu, nezačne sa prejavovať hneď, je treba cache manuálne „flushnuť“, teda resetovať. Ak zabudnete, automaticky sa resetuje po tu zadanom čase.
Manuálne sa cache dá premazať prostredníctvom Admin panela (ten čierny pásik hore), v ňom nájdeme položku WP Rocket a kliknutím na Clear cache flushneme celú cache. Tým sa začnú zmeny prejavovať všade, aj neprihláseným užívateľom.
File optimization
Asi najzaujímavejšia časť. Tu nastavíme ako má WP Rocket spracovať súbory, ktoré tvoria webovú stránku.
Basic settings
Minify HTML – zminifikuje zdrojový kód HTML stránky tak, že poodstraňuje riadkovanie, či zbytočné medzery. Málo účinné, ale prakticky sa tu nemá čo pokaziť. Zapínam vždy.
Optimize Google Fonts – toto určite nechajte zapnuté, zlepší sa tak načítanie Google Fontov, ktoré takmer určite používate.
Pozn.: V novších verziách WP Rocketu už nie sú Basic settings dostupné (už nemajú význam).
CSS Files
CSS je jazyk, pomocou ktorého sa, zjednodušene povedané, nastavuje výzor stránky. V ideálnom vesmíre obsahuje každá stránka jeden .css súbor, v ktorom sú všetky vizuálne veci ponastavované. To ale určite neplatí vo WordPresse. Nakoľko WordPress je zložitá platforma a pozostáva z tém a pluginov, takmer každý plugin má svoje vlastné CSS súbory (a málokedy len jeden). Vo výsledku teda načítavate niekoľko desiatok CSS súborov pri každom načítaní stránky.
Minify CSS files – zminifikuje .css súbory tak, že poodstraňuje riadkovanie a medzery. Podobne ako v prípade HTML minifikácie. Tým, že CSSkových súborov je viac, je toto nastavenie takmer nutnosťou.
Combine CSS files – toto nastavenie urobí to, že preletí všetky .css súbory, ktoré stránka používa a vytvorí z nich jeden veľký súbor (jeden jediný). Priblížime sa teda k stavu ideálneho vesmíru – načítate len jeden .css súbor, hoci väčší. Určite je potrebné túto možnosť zapnúť.
Optimize CSS delivery – Toto nastavenie zapínam tiež. Spôsobí, že CSS sa bude načítavať „asynchrónne“, teda nezávisle od ostatného obsahu webovej stránky.
Samozrejme, aby to nebolo také jednoduché, nastavenie kombinovania CSS súborov môže spôsobiť vizuálne chyby na stránke (tzv. bugy). V takom prípade treba zistiť, čo daný problém spôsobuje a konkrétny .css súbor zaradiť do „Excluded CSS Files“.
Javascript files
Rovnako ako v prípade CSS máme možnosť zoptimalizovať aj Javascriptové súbory.
Minify a Combine sa správa na vlas rovnako ako v prípade CSS
Remove jQuery Migrate – jQuery Migrate je pomocná jQuery funkcia, ktorá upozorňuje na nekompatibilitu medzi verziami jQuery a pluginmi, či témami tretej strany. Od WordPressu 5.5 sa už nepoužíva a teda ju môžete vypnúť.
Load JavaScript deferred – v podstate urobí to isté ako Optimize CSS delivery – javascript sa bude načítavať nezávisle od zbytku súborov na stránke.
Pozn.: Pokiaľ používate http2 protokol, nie je potrebné kombinovať CSS, ani JS súbory.
Media
V tejto sekcií nastavíme obrázky, videá a iný multimediálny obsah.
Lazy Load
Lazy Load je funkcionalita, ktorá zabrzdí zbytočné načítavanie obrázkov, ktoré nie sú hneď viditeľné na stránke. To spôsobí značný nárast rýchlosti, lebo obrázky sa začnú načítavať až vtedy, keď sa priblížite k ich miestu. Zadám si www.wp.sk a celkom dole vo footri je wp.sk logo, čo je vlastne obrázok.
Lazy load spôsobí to, že stránka sa načíta bez tohto obrázka. Až keď sa krútením kolieskom myši dostaneme do blízkosti footru, vtedy sa obrázok načíta na pozadí a zobrazí. Dovtedy ho nie je treba. Bez lazy loadu sa načítava celá stránka hneď na začiatku.
Enable for images – povolí Lazy load pre obrázky.
Enable for iframes / videos – povolí lazy load pre videá a iframy. Iframe sa často používa napr. v prípade facebook feedu, alebo pri vložení youtube videa, či obsahu z inej stránky.
Replace YouTube iframe with preview image – nahradí nenačítané video náhľadovým obrázkom (napr. ak by sme rýchlo skrútili na miesto, kde má byť video a ešte by sa nestihlo načítať na pozadí).
Emoji
Emoji sú dosť zbytočná časť WordPressu, ale na nejakých blogoch môžu nájsť svoje uplatnenie. Vlastne sú to smajlíky (emotikony), ktoré WordPress prevádza automaticky do grafickej podoby. Pokiaľ to nepotrebujete, môžete ich pokojne vypnúť.
Embeds
Disable WordPress embeds – zabráni iným „ťahať“ časť vašej stránky na externé stránky. Odporúčam nechať zapnuté.
WebP compatibility
Nastaví cachovanie pre WebP obrázky. WebP je relatívne nový formát obrázkov, ktorý je určený predovšetkým na zobrazovanie na internete. Obrázok má menšiu veľkosť, ale porovnateľnú kvalitu s jpg. Každé jpg aj png je možné konvertovať na WebP, prostredníctvom nejakého konvertora a až tak nahrať na stránku. Pokiaľ však WebP nepoužívate, nie je nutné toto nastavenie zapínať.
Preload
Ako som uviedol vyššie, WP Rocket funguje štýlom vytvorenia vlastných súborov (najmä .css a .js), ktoré sa potom používajú v ostrej prevádzke webovej stránky, namiesto pôvodných. Preload je funkcia, ktorá spúšťa toto generovanie súborov. Rovnako tak aj pregenerovávanie už vytvorených súborov, ak na stránke nastane nejaká zmena (napr. pridanie nového článku a pod.).
Tu odporúčam nechať zapnuté „Activate Preloading“, rovnako tak „Activate sitemap-based cache preloading“, „Yoast SEO XML sitemap“ (ak používate Yoast SEO plugin) a tiež „Enable link preloading“. To pre 99% webových stránok úplne stačí.
Advanced rules
Tu nastavíme pokročilé pravidlá pre WP Rocket. Vieme tu napríklad špecifikovať podstránky, súbory a pod. ktoré sa nemajú nikdy cachovať. Vieme nastaviť výnimku pri cachovaní cookies, alebo na základe použitého prehliadača.
V rámci WP Rocketu je možnosť používať tzv. wildcards, čiže zástupný znak hviezdičku *. Ak potrebujeme napr. z cachovania vyradiť celý plugin, povedzme Contact form 7, je nezmysel pod seba vypísať 10 .css súborov, ktoré sa nachádzajú v zložke contact-form-7. Namiesto toho použijeme wildcard, asi takto:
Wp-content/plugins/contact-form-7/* čím zabezpečíme, aby celá zložka (a teda celý plugin) ostal nezacachovaný.
Databáza
V tejto sekcii vieme stránku v niektorých prípadoch pekne zrýchliť, ale má to svoju daň. Môžeme tu vykonať tzv. vyčistenie databázy od na prvý pohľad nepotrebných dát. WP Rocket odporúča pred takýmito operáciami s databázou vykonať zálohu databázy.
Môžeme tu vymazať revízie, automatické koncepty, príspevky z koša, neschválené komentáre, transienty, optimalizovať tabuľky a nastaviť automatický cleanup.
Pri tvorbe každej podstránky, alebo článku vo WordPresse sa uloží toľko revízií, koľkokrát klikneme na tlačidlo AKTUALIZOVAŤ. Pri veľkých weboch, ktoré obsahujú najmä články, to môže byť dosť problém, vzhľadom na to, že revízií môže byť aj niekoľko miliónov. Zmazaním týchto revízií značne uľahčíme život databáze, avšak prídeme o možnosť vrátiť sa k predošlej verzií článku, či podstránky.
CDN
CDN znamená Content Delivery Network. Používate to a možno o tom ani neviete. Na kódovej úrovni webovej stránky, existujú rozličné knižnice, ktoré sa všeobecne používajú pri tvorbe webovej stránky.
Typickým príkladom môže byť jQuery, alebo Google fonty. Výhodou je, že návštevník Vašej webovej stránky už pravdepodobne bude mať jQuery na svojom PC stiahnuté z inej stránky a tak jeho prehliadač pri vykresľovaní stránky nemusí ťahať znova súbor jQuery zo servera, ale zo svojej medzipamäte.
To sa prejaví na zrýchlení webu. V skutočnosti však ide len o niekoľko kilobajtové súbory, ktoré extrémny vplyv na rýchlosť mať nebudú, pokiaľ ide o klasickú webovú stránku.
Heartbeat
Heartbeat je vstavaná funkcionalita wordpressu. Ide o nejaký pravidelný „impulz“, na základe ktorého sa posielajú na server ajax requesty v pravidelných intervaloch (raz za minútu).
Využíva sa to pri notifikáciách, ktoré sa zobrazujú v administrátorskom prostredí, pri automatickom ukladaní článkov a podstránok, pri zamknutí obsahu pri editácií iným užívateľom (vyskočí povestná tabuľka „Užívateľ #meno upravuje tento článok“).
Osobne som nikdy s týmto nemal problém, a ani som to nikdy neriešil. Heartbeat tu viete teoreticky aj úplne vypnúť, avšak určite to neodporúčam, nakoľko ide o zásah do vstavanej funkcionality WordPressu, nehovoriac o použitých pluginoch, ktoré sa môžu stať nepoužiteľnými. Takže obmedziť toto nastavenie má význam len pri nejakých slabých pluginoch.
Add-ons
Možnosť nainštalovať iné pluginy, ktoré spolupracujú s WP Rocketom a zaistia ešte lepšiu rýchlosť.
Image optimization
Na optimalizáciu obrázkov by ste mali myslieť už pri tvorbe webovej stránky, resp. pri nahrávaní obsahu. Slušnosť káže na stránku nedávať obrázok väčší ako 300kB. Rozmer FullHD (čiže 1920×1080) je pre väčšinu webových stránok úplne dostačujúci. Určite neodporúčam nahrávať na web gigantické obrázky zo zrkadlovky (napr. 6000×4000).
WordPress si ich síce aj tak oreže na rozmer 4K, ale dôležitejšie, ako rozmery, je dátová veľkosť obrázka. Existuje naozaj len niekoľko výnimiek, kedy je nutné použiť dátovo veľký obrázok.
Pri takých obrázkoch však vždy používame jeho miniatúru a plný obrázok až pri kliknutí na neho (napr. otvorením v Lightboxe). V každom prípade, WP Rocket neobsahuje možnosť optimalizácie obrázkov, ale veľmi pekne spolupracuje s pluginom Imagify.
Ďalší známy plugin, na optimalizáciu obrázkov je EWWWW Image optimizer (po použití odporúčam odinštalovať).
Tools
Nástroje pluginu. Import, export, vrátenie staršej verzie. Veci, ktoré sú nám známe.
Tutorials
No a na záver, v sekcii Tutorials pluginu WP Rocket nájdete videonávody na použitie v angličtine.
Tip na záver: pozrite si tento návod na zrýchlenie WordPress stránky.
