Zrýchlenie webových stránok vo WordPress vďaka optimalizácií JavaScriptu a CSS

Zrýchlenie webových stránok vo WordPress vďaka optimalizácií JavaScriptu a CSS

JavaScript a CSS spomaľujú načítavanie stránky, pretože sa musia donačítať a spustiť. Navyše, veľa JavaScriptu môže mať veľmi negatívny dopad na výkon, reakčnosť a responzívnosť webu. Prečítajte si, ako optimalizujeme CSS a JavaScript vo WordPress a tým prispievame k zrýchleniu webových stránok. 

Načítajte menej JavaScriptu a CSS

Zvážte výber pluginov a tém

Niektoré pluginy a témy vo WordPress používajú veľmi veľaJavaScriptu a načítavajú objemné CSS, preto zvážte ich použitie a skúste nájsť vhodné alternatívy. Mnohé načítavajú Javascript a CSS aj na stránkach, na ktoré daný plugin/téma nemajú vôbec vplyv, a teda predlžujú načítavanie aj tam, kde to nie je vôbec nutné.

Zamyslite sa nad potrebnou funkcionalitou

Pri práci s WordPressom si vždy dávame pozor, aby sa načítalo len to, čo je potrebné (CSS štýly, JavaScript) a tak pripravíme stránku na rýchlejšie načítanie. Napríklad odstránime nepotrebné CSS a JS súbory.

Pre interaktívne funkcie využite CSS namiesto JS

Pokiaľ programujete obsah pre WordPress, je dobré sa zamyslieť, či na všetko, na čo používate JavaScript je naozaj JavaScript nutný. Veľa funkcionalít, na ktoré bolo nutné použiť JavaScript v minulosti, je dnes možné docieliť pomocou moderného CSS z oveľa menším dopadom na výkon. Toto sme využili napríklad pri tvorbe stránky pre i4comfort alebo pri tvorbe Menu na mieru pre Engeto bez JavaScriptu. Webová stránka obsahuje veľa vizuálnych efektov, ktoré sme zakomponovali tak, aby stránku nespomaľovali. Viac sa môžete dočítať v článku Tvorba webovej stránky pre i4comfort

Kód manažujúci JS a CSS

Vždy sa treba zamyslieť nad tým, kde je vaše CSS a JavaScript potrebné. Je dobré rozbiť veľké CSS súbory na niekoľko menších a načítať ich podľa potreby. Rovnako môžeme pristupovať aj k JavaScript kódu.

Na tvorbu tém najčastejšie používame Sage, ktorý takýto manažment ulahčuje a počíta s jeho nutnosťou. 

Prečítajte si viac o tom Prečo je dobré mať stránku vytvorenú na Sage?

Optimalizujte CSS a JavaScript pomocou minifikovania

Minifikovaním sa zo súborov odstráni všetko nepotrebné (riadky, medzery, skrátia sa názvy premenných atď…). Textové súbory s CSS, JS sa upravia tak, aby zaberali menej miesta, čím sa šetrí veľkosť súborov a rýchlejšie sa načítavajú.

Rozdiel medzi originálnym a minifikovaným kódom
Rozdiel medzi originálnym a minifikovaným kódom

Existuje mnoho dobrých WordPress pluginov a tém, ktoré minifikujú kód. V našich pluginoch a témach kód minifikujeme a zároveň si uchovávame pôvodné súbory, ktoré sa dajú jednoduchšie modifikovať

Ako na to?

Váš JavaScript a CSS je možné minifikovať pomocou online nástrojov,  ako napríklad Closure Compiler, či Minify Code. Takýmto spôsobom je možné minifikovať aj JavaScript a CSS, ktoré vkladáte pomocou pluginov či customizera.

Lepšou alternatívou na tento účel je nastaviť build vašeho pluginu/témy. Je možné použiť a nastaviť Webpack alebo nástroje ako node-minify. Takýto prístup vám umožní automatické minifikovanie vašich súborov, no vyžaduje pomerne veľa času a nervov, hlavne ak si zvolíte Webpack. Preto je lepšie siahnuť po predpripravenom riešení pre váš plugin alebo tému v podobe starter projektu, ako napríklad Roots Sage pre tému. Pre veľké projekty, na ktorých už pracujete a nie je jednoduché ich zmigrovať, je však nutné si dopomôcť spomínanými nástrojmi.

Ako použiť minifikáciu bez vývojárskych skúseností?

K optimalizovaniu všetkých CSS a JS súborov, ktoré vaša stránka používa, je možné si dopomôcť využitím pluginu Fast Velocity Minify. Tento plugin funguje tak, že pri prvom nenacachovanom načítaní stránky vygeneruje minifikované CSS a JS súbory, ktoré sa potom načítavajú namiesto pôvodných súborov. Môžete takto značne zrýchliť načítavanie CSS a JavaScriptu u pluginov a tém, ktoré nemajú minifikovaný JavaScript a CSS.

Menej je viac

Pre zrýchlenie vašej webovej stránky a tým aj zvýšenie počtu návštevníkov si treba uvedomiť, že menej je v tomto prípade naozaj viac. Ak bude vaša stránka zahltená množstvom nepotrebných funkcionalít, je jasné, že to odrazí aj na výkone. 

Spôsobov, akými zrýchlite vaše webové stránky, a tým zvýšite ich návštevnosť, je veľmi veľa. Môžete dlhšie stránky rozdeliť na menšie, obmedziť množstvo nepotrebných obrázkov alebo sa snažiť o jednoduchší kód. O tomto sme písali aj podrobnejší článok 6 spôsobov, akými zlepšíte rýchlosť a výkon vášho webu vo WordPress

Pokiaľ máte nejaké otázky alebo potrebujete pomôcť so zrýchlením či optimalizovaním webu, sme tu pre vás, neváhajte sa nám ozvať

Zdieľajte na:

Ďalšie články:

Nenechajte si nič uniknúť!

Prihláste sa k odoberaniu Newsletteru, v ktorom zasielame najzaujímavejšie tipy pre úspešné webové stránky.