WP-CLI – Spravujte weby vo WordPress lepšie a rýchlejšie

WP-CLI – Spravujte weby vo WordPress lepšie a rýchlejšie

WP-CLI vám umožňuje spravovať webové stránky pomocou jednoduchých príkazov bez toho, aby ste museli prechádzať mnohými stránkami v administrácii WordPress. Či už ste vývojár alebo administrátor, WP-CLI vám môže ušetriť veľa času a dokonca vrátiť k životu aj nedostupné webové stránky.

Čo je WP-CLI?

WP-CLI je rozhranie príkazového riadka pre WordPress. To znamená, že definuje príkazy, ktoré môžete spúšťať na svojom serveri a môžete ich použiť na vykonávanie bežných akcií. Úlohy, ako je správa príspevkov, užívateľov, pluginov, tém a možností webových stránok, je možné vykonávať v príkazovom riadku. V tomto článku sa pozrieme na niektoré praktické prípady použitia.

Ako môžete používať WP-CLI?

WP-CLI nie je súčasťou východiskovej inštalácie WordPress. Našťastie mnoho poskytovateľov WordPress hostingu už tento nástroj zaviedlo a sprístupnilo svojim používateľom. Či máte túto funkciu zahrnutú, môžete zistiť v podrobnostiach vášho hostingového plánu alebo sa môžete obrátiť na vášho poskytovateľa hostingu. WP-CLI je tiež súčasťou Trellis, ktorý používame na správu serverov pre našich klientov v Zeni.

Ak zistíte, že nemáte prístup k WP-CLI na vašom serveri a za predpokladu, že máte SSH prístup na váš server alebo chcete pracovať s WP-CLI lokálne na vašom počítači, môžete ho spustiť pomocou niekoľkých príkazov. Na OS X a Linux vás môžu okamžite dostať k plne funkčnému WP-CLI tieto príkazy:

curl -O https://raw.githubusercontent.com/wp-cli/builds/gh-pages/phar/wp-cli.phar
chmod +x wp-cli.phar
sudo mv wp-cli.phar /usr/local/bin/wp

Ak používate Windows alebo vás zaujímajú iné spôsoby inštalácie, môžete sa pozrieť na dokumentáciu WordPress.

Urýchlite časovo náročné úlohy pomocou WP-CLI

Vo WordPresse existuje mnoho administratívnych úloh, ktoré si vyžadujú vykonať viac opakujúcich sa akcií, aby ste sa dostali k cieľu. To môže zahŕňať mnoho načítaní stránky a kliknutí, čo vám zaberie niekoľko minút, v niektorých prípadoch možno aj hodín. Vďaka WP-CLI môžete tieto úlohy vykonávať oveľa ľahšie. Urýchliť pomocou WP-CLI je možné najmä hromadné akcie, ako je napríklad správa viacerých pluginov alebo médií.

Nainštalujte viac pluginov naraz

Začínate s novým webom a chcete nainštalovať viac pluginov, ktoré pravidelne používate, alebo ste práve dostali požiadavku na inštaláciu niekoľkých nových pluginov? Pomocou WP-CLI budete musieť napísať iba jeden príkaz. Nasledujúci príkaz nainštaluje 2 pluginy a aktivuje ich pomocou activate flagu:

wp plugin install bbpress classic-editor --activate

Tento príkaz taktiež umožňuje inštaláciu pluginov z archívov zip. Podporované sú aj lokálne cesty:

wp plugin install https://example.com/plugin.zip

Pomocou príkazu wp plugin môžete dosiahnuť oveľa viac, napríklad aktualizovať všetky pluginy na vašom webe. Odporúčam sa podrobne pozrieť na dokumentáciu príkazu wp plugin.

Hromadný import médií

Pomocou jednoduchého príkazu môžete ľahko importovať viac médií. Tu budeme importovať všetky súbory JPG v priečinku užívateľa v adresári Pictures. Tým sa skopírujú súbory z pôvodného priečinka a automaticky sa zaregistrujú ako prílohy:

wp media import ~/Pictures/**\/*.jpg

Pokiaľ vás zaujímajú príkazy zamerané na médiá, môžete sa pozrieť na príkaz wp media.

Správa užívateľov

Príkaz wp user pomáha so všetkými úlohami súvisiacimi so správou užívateľov. Tu je príklad vytvorenia užívateľa daniel s e-mailovou adresou [email protected] a s rolou administrátor. Tento presný príkaz som použil nespočetnekrát, keď bol nový projekt, na ktorom som pracoval:

wp user create daniel [email protected] --role=administrator

Vďaka WP-CLI je správa užívateľských hesiel, rolí, oprávnení a ďalšieho veľmi pohodlná. Pokiaľ vás zaujíma správa užívateľov, tu nájdete viac o príkaze wp user.

WP-CLI a riešenie technických problémov

WP-CLI je skvelým pomocníkom, keď sa snažíte riešiť technické problémy, ako uvidíme v nasledujúcich riadkoch.

Debugovanie problémov tém a pluginov

Predstavte si, že ste práve aktivovali chybný plugin, kvôli ktorému je administrácia WordPressu neprístupná. WP-CLI vás môže v tejto situácii zachrániť pomocou jediného príkazu:

wp plugin deactivate faulty-plugin

Podobne pomocou WP-CLI môžete aktivovať rôzne témy, ak si myslíte, že aktuálna téma spôsobuje problémy. Nasledujúci príklad aktivuje zvolenú tému:

wp theme activate different-theme

Práca s nastaveniami

Potrebujete rýchlo zmeniť nastavenia? Toto sa môže hodiť, keď chcete zistiť, či má váš aktuálny problém niečo spoločné s aktuálnou konfiguráciou alebo ak zmena nejakých nastavení nie je priamo možná v administrácii. V tomto príklade zmeníme aktuálny administrátorský e-mail:

wp option update admin_email [email protected]

Viac o práci s nastaveniami nájdete v dokumentácii príkazu wp option.

Správa databázy

WP-CLI je tiež skvelé pre správu databázy. Pomocou nasledujúceho príkazu môžete jednoducho vytvoriť zálohu aktuálnej databázy a uložiť ju do aktuálneho užívateľského adresára:

wp db export ~/backup.sql

Toto je extrémne užitočné, keď chcete vytvoriť export databázy pre použitie na stagingu alebo lokálnom vývojovom prostredí alebo vytvoriť zálohu pred vykonaním nejakej riskantnej akcie, ako je aktualizácia štruktúry databázy kvôli nejakému pluginu. Pokiaľ sa niečo pokazí, môžeme to ľahko vrátiť pomocou tohto príkazu:

wp db import ~/backup.sql

Pokiaľ plánujete experimentovať, dôrazne odporúčame, aby ste to nerobili na produkčnom prostredí orientovanom na zákazníka. K tomu je možné použiť stagingový server. Čo je to stagingové prostredie sa dozviete v našom článku Sedem dôvodov prečo používať staging pre Váš projekt vo WordPress. Pokiaľ vás zaujíma tvorba staging prostredia, môžete sa o tom dozvedieť v našom článku Ako si vytvoriť staging prostredie?

Ďalšou užitočnou funkciou je schopnosť rýchlo vstúpiť do rozhrania príkazového riadka databázy k spusteniu SQL pomocou nasledujúceho príkazu:

wp db cli

Nahraďte všetky výskyty nejakej hodnoty

Predstavte si, že web bol presunutý na inú URL alebo chcete použiť svoju produkčnú databázu na stagingu. Po importe databázy na nový server rýchlo zistíte, že niektoré odkazy nefungujú a že mediálne súbory nie sú viditeľné. Je to preto, že WordPress bohužiaľ v mnohých prípadoch používa absolútnu adresu URL. Na vyriešenie tohto problému má WP-CLI veľmi užitočný príkaz známy ako `wp search-replace. Pomocou tohto príkazu môžete veľmi jednoducho nahradiť všetky staré adresy URL novými:

wp search-replace https://old-website.old https://new-website.new --dry-run

dry-run flug na konci je tu veľmi užitočný, pretože spustí celú operáciu hľadania/nahradenia so zobrazením reportu, ale do databázy sa neuložia žiadne zmeny. Rozhodne je dobré spustiť tento príkaz najprv spôsobom dry run a po kontrole správy ho spustiť bez dry-run.

Generujte fiktívny obsah pomocou WP-CLI

Toto je veľmi užitočné pre vývojárov, ktorí potrebujú nejaký simulovaný obsah na webe pre účely vývoja. Napríklad pomocou niekoľkých príkazov môžete generovať desiatky príspevkov, používateľov, kategórií a komentárov. Tu je niekoľko príkladov:

wp user generate --role=subscriber --count=50
wp post generate --count=200 --post_type=post
wp post generate --count=20 --post_type=page
wp term generate category --count=10
wp comment generate --count=10 --post_id=123

Získate tak web s 50 novými užívateľmi, 200 príspevkami, 20 stránkami, 10 kategóriami a náš vybraný príspevok má už 10 komentárov. To simuluje aktívne stránky, ktoré existujú už nejaký čas, a nemuseli sme nič robiť manuálne. Môžeme ľahšie začať pracovať na vývoji WordPress témy alebo pluginu.

Možno toho dosiahnuť veľa

V tomto článku sme predstavili mnoho prípadov použitia WP-CLI, ale to nie je ani zďaleka všetko, čo je možné pomocou tohto nástroja. Aby ste sa zoznámili so všetkými možnosťami, neexistuje lepší zdroj ako WordPress dokumentácia. Dúfam, že vám WP-CLI pomôže stať sa lepším vývojárom alebo administrátorom.

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.

Zlepšite vývoj WordPress tém a pluginov za použitia návrhových vzorov

Zlepšite vývoj WordPress tém a pluginov za použitia návrhových vzorov

Chcete vytvárať čistejší, lepšie udržiavateľný kód, ktorý sa dá v prostredí WordPressu oveľa ľahšie upravovať a rozvíjať? Obrovský rozdiel môže priniesť venovanie pozornosti konceptu návrhových vzorov. Ak použijete návrhové vzory počas vývoja správne, môže vám to ušetriť aj nejaký čas.

Čo sú návrhové vzory?

Návrhové vzory nám pomáhajú vytvárať softvér (samozrejme vrátane pluginov a tém WordPressu) na základe už získaných znalostí tých pred nami. Nemusíme znovu vynachádzať koleso na riešenie niektorých bežných problémov, ktoré sa stali už mnohým vývojárom, a môžeme sa zamerať na špecifiká našej problémovej oblasti a riešiť požiadavky zákazníkov.

Návrhový vzor je opakovateľné riešenie bežne sa opakujúceho problému v návrhu softvéru. Nie je možné ho použiť priamo, ale poskytuje nám šablónu na riešenie problému, ktorú je možné opakovane použiť v mnohých podobných situáciách.

Štúdium návrhových vzorov a ich použitie pri vytváraní nového kódu môže výrazne zlepšiť jeho štruktúru a celkovú funkčnosť a škálovateľnosť.

Po ich preštudovaní môžete tiež skúsiť refaktorovať svoj starší kód pomocou návrhových vzorov a uvidíte, že kód môže byť oveľa lepšie manažovateľný.

Vysvetlenie návrhových vzorov pomocou hookov

Začnime niečím už známym pre väčšinu vývojárov WordPressu, a to sú hooky, konkrétne akcie a filtre, ktoré sa vo WordPresse veľa používajú.

Ide o špecifickú implementáciu vzoru publisher-subscriber (pub-sub). V tomto vzore definujeme publisher (vydavateľa), subscriber (odberateľa) a message broker (sprostredkovateľa správ):

Vydavatelia (publisher) zverejnia nejakú konkrétnu udalosť, v našom prípade vykonaním do_action alebo apply_filters.

Odberatelia (subscriber) sa môžu prihlásiť k určitým udalostiam volaním add_action alebo add_filter a vykonať akciu, keď nastane udalosť, ku ktorej sa prihlásili.

Sprostredkovateľ (message broker), v našom prípade jadro WordPress, ktoré zaistí, aby boli všetci odberatelia informovaní o udalostiach vydavateľov, ku ktorým sú prihlásení.

Výhody vzoru publisher-subscriber (pub-sub)

To nám prináša mnoho výhod. Vydavateľ nemusí vedieť nič o svojom odberateľovi a ani odberatelia nemusia vedieť nič o vydavateľovi, pokiaľ vedia reagovať na vzniknutú udalosť. Aj keď deaktivujeme plugin, ktorý udalosti vytvára alebo odoberá, nespôsobí to žiadne chyby.

Myslím, že je veľmi užitočné nielen odoberať hooky z jadra WordPressu alebo pluginov, ale aj vytvárať hooky v kóde a stavať okolo nich svoj kód. Nielenže uľahčíte život ostatným vývojárom, pokiaľ sa rozhodnú stavať na funkčnosti vášho pluginu alebo témy, ale verte mi, že aj váš život bude oveľa jednoduchší pri implementácii novej funkčnosti do vášho pluginu alebo témy.

Vo WordPresse je možné použiť mnoho ďalších šikovných návrhových vzorov. Väčšinou vyžadujú trochu viac práce ako hooky, ale môžu znamenať obrovský rozdiel v dizajne vášho pluginu alebo témy. Skvelým príkladom návrhového vzoru, ktorý je možné použiť v kontexte WordPressu, je vzor singleton.

Vzor singleton

Tento vzor vyžaduje znalosť objektovo orientovaného programovania. Pokiaľ s ním nie ste oboznámení, najprv si ho preštudujte a potom sa môžete vrátiť k čítaniu.

Vzor singleton obmedzuje iniciáciu určitej triedy, takže je možné vytvoriť iba jednu inštanciu triedy. To sa dá dosiahnuť vytvorením súkromného konštruktora, statickej premennej pre uloženie inštancie a statickej funkcie getInstance(). Táto funkcia zodpovedá za vytvorenie inštancie objektu, pokiaľ už nie je vytvorený a uložený v premennej $instance. Príklad môžete vidieť nižšie

class SingletonClass
{
    private static $instance = null;

    private function __construct() {}

    public static function getInstance()
    {
        if (null === self::$instance) {
            self::$instance = new self();
        }
        return self::$instance;
    }
}

Zakaždým, keď sa nejaký kód pokúsi vytvoriť novú inštanciu tejto triedy, spustí sa chyba, pretože ide o súkromný konštruktor (toto je lepšie zdokumentovať, aby nedošlo k nedorozumeniu), takže jediný spôsob, ako získať inštanciu, je prostredníctvom našej funkcie getInstance().

Ako príklad použitia by bolo možné vytvoriť základnú triedu, ktorej zodpovednosťou je vytvoriť inštanciu všetkých našich funkcionalít pluginu. K tejto inštancii môžeme nadviazať napríklad konfiguračné dáta, takže sú prístupné odkiaľkoľvek v plugine a nie je nutné ich načítať z databázy alebo konfiguračného súboru viackrát, iba pri vytvorení jedinej inštancie tejto triedy.

Nepreháňajte to s používaním singleton vzoru

Myslím, že tento vzor je dobrým príkladom aj preto, že jeho prílišné používanie môže veľmi lákať, pretože v mnohých situáciách je ľahké vidieť výhody jeho použitia. Nehovorím, že by sa nemal používať, ale pred jeho použitím treba zvážiť aj jeho nevýhody.

Hlavnou nevýhodou tohto vzoru je podľa môjho názoru to, že zakaždým, keď tento vzor použijeme, viaže sa naša funkčnosť na priamu znalosť singletonovej triedy. To vytvára previazanosť kódu a môže spôsobiť, že ak sa rozhodneme niečo v singletone zmeniť, musíme urobiť mnoho zmien v celom projekte.

Pred použitím tohto vzoru alebo akéhokoľvek iného vzoru preto vždy všetko plánujte vopred, ale pokiaľ budete robiť dobrú prácu, bude to pre vás veľmi prínosné.

Ďalšie vzory

V tomto článku sme popísali dva návrhové vzory. Tieto vzory je možné použiť v mnohých situáciách pri vývoji WordPressu a môžu zlepšiť váš kód a myslenie.

Toto je však len veľmi malá ukážka toho, čo sa dá vďaka konceptu návrhových vzorov vytvoriť. Návrhových vzorov, ktoré je možné pri vývoji použiť, je oveľa viac. Ich štúdium a použitie by mohlo mať počas vývoja obrovský význam a mohlo by mať veľmi pozitívny vplyv na to, čo vyvíjate.

Pokiaľ vám nerobí problém angličtina, odporúčam vám použitie vzorov vyskúšať buď pomocou známej a kvalitnej literatúry, ako Design Patterns: Elements of Reusable Object-Oriented Software alebo Head First Design Patterns alebo na weboch ako je refactoring.guru, kde je mnoho vzorov dobre popísaných vrátane príkladov v PHP. V slovenskom jazyku vyšiel titul Návrhové vzory v PHP.

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.

Optimalizácia a kompresia obrázkov vo WordPress

Optimalizácia a kompresia obrázkov vo WordPress

Optimalizácia a kompresia obrázkov je veľmi dôležitá, nakoľko vám môže ušetriť čas pri načítavaní vašich stránok. Tým vám môže pomôcť zvýšiť návštevnosť stránky a váš web sa tak stáva úspešnejším. 

Veľkosť obrázkov

Používajte obrázky vždy v takej veľkosti, v akej ich zobrazujete. Je zbytočné načítavať obrázok v rozlíšení 1024×1024 px, pokiaľ ho na webe zobrazujete vo veľkosti 16×16 px. 

Nepreháňajte to s množstvom obrázkov. Čím viac obrázkov, tým viac dát sa načítava a tým je načítanie stránky pomalšie. Zamyslite sa, či má obrázok pre stránku pridanú hodnotu, napríklad pri písaní článkov. 

Vo WordPress sa každý obrázok pri jeho nahrávaní zmenší do 4 rôznych veľkostí a následne si môžeme načítať verziu obrázka, ktorá nám najviac pre danú stránku vyhovuje. Napríklad veľkosť miniatúry v blogu je iná ako veľkosť obrázka priamo v blogu. 

  • Miniatúra – 150 x 150 pixelov
  • Stredná veľkosť – maximálne 300 x 300 pixelov
  • Veľká veľkosť – maximálne 1024 x 1024 pixelov
  • Plná veľkosť – pôvodná veľkosť nahraného obrázka

Pre dodatočnú optimalizáciu webu je tiež možné si do WordPressu doplniť vlastné veľkosti obrázkov. 

Formát obrázkov

Bitmapové obrázky

  • Vhodné použiť pre veľmi detailné obrázky ako napríklad fotografie.
  • Bitmapové obrázky obsahujú mapu jednotlivých pixelov.
Bitmapový obrázok
Bitmapový obrázok
  • Formát JPEG podporuje veľké množstvo farieb, preto pôsobí živšie ako napríklad PNG, JPG je najvhodnejší pre zobrazenie fotografií.
  • Formát PNG podporuje menšie množstvo farieb ako JPEG, no rozdiel od JPEG podporuje priehľadnosť, taktiež lepšie zvláda text a ilustrácie.

Na tomto meme môžete vidieť rozdiel v zobrazení ilustrácií a textov medzi JPEG a PNG:

Rozdiel v zobrazení textov medzi JPEG a PNG
Rozdiel v zobrazení textov medzi JPEG a PNG
  • Formát WebP je možné využiť ako modernú náhradu za formáty JPG a PNG. Súbory v tomto formáte sú pri rovnakej kvalite značne menšie ako u konkurenčných formátov.
  • Zaujímavé je, že tento formát bol vyvinutý v Google.
  • WebP zatiaľ nie je pre WordPress natívne podporovaný, ale sú pluginy, ktoré pridávajú podporu. My používame WordPress plugin WebP Converter for Media

Vektorová grafika

  • Môže ušetriť obrovské množstvo dát, obsahuje inštrukcie v textovej podobe na vytvorenie obrázku a nie mapu pixelov, ako je to v prípade bitmapovej grafiky. Preto pre zobrazenie väčšieho obrázku nie je nutný väčší súbor.
  • Tam, kde je to aplikovateľné, je dobré ju preferovať pred bitmapovou (pixelovou).
  • Najčastejšie sa používa pre logá a rôzne ikony.
  • Veľkosť súborov narastá s množstvom detailov na obrázku.

Výhodný formát pre vektorovú grafiku na webe je SVG.

SVG obrázky nie je možné nahrať do knižníc médií vo WordPress. Tieto obrázky môžeme zobraziť pomocou kódu v plugine alebo v téme pri tvorbe HTML štruktúry, buď dodatočným načítaním alebo vnorením do HTML štruktúry.

Vo WordPress je práve možnosť použitia priamo v HTML užitočná aj v Gutenberg alebo Classic editore. SVG obrázky môžeme do editora vložiť ako vlastné HTML. Výhodou SVG obrázkov je tiež, že je možné upraviť ich zobrazenie pomocou CSS štýlovania, nakoľko sú bežná súčasť HTML.

Škálovateľnosť
Škálovateľnosť

Kompresia obrázkov

Obrázkové formáty podporujú zväčša viac úrovní kompresie, kde je pri silnejšej kompresii možné ušetriť viac dát, no na úkor kvality.

Pre každý obrázok, ktorý nahrávate na váš web, by mala byť aplikovaná kompresia. Viac skomprimované obrázky sú menšie a rýchlejšie sa načítajú používateľovi vášho webu. Netreba však zabúdať, že kompresiou sa stráca kvalita a preto treba zvoliť kompresiu, pri ktorej budú detaily obrázkov dostatočne zachované.

Príliš zkomprimovaný obrázok
Príliš zkomprimovaný obrázok

Tu môžete vidieť veľmi výhodný formát WebP, ktorý poskytuje najlepší pomer veľkosti súboru k jeho kvalite, v porovnaní s JPEG formátom.

Porovnanie zobrazenia formátu WebP a JPEG
Porovnanie zobrazenia formátu WebP a JPEG

WordPress pluginy pre kompresiu obrázkov

S kompresiou obrázkov vám môže pomôcť dobrý WordPress plugin. Pluginy existujú rôzne, no tu vám spomenieme len niektoré pluginy pre kompresiu obrázkov. 

  • EWWW Image Optimizer – Tento WordPress plugin je bezplatný a pri nahrávaní obrázkov ich automaticky komprimuje
  • Smush – okrem kompresie obrázkov obsahuje aj iné užitočné optimalizačné techniky.
  • WebP Converter for Media – Nahrádza súbory JPG a PNG formátom WebP, čím môžete bez straty kvality ušetriť viac ako polovicu zaťaženia. Po inštalácií pluginu sa obrázky automaticky prevedú do nového formátu. 

Optimalizácia a kompresia obrázkov je len jedným z mnohých aspektov, ktoré vám môžu dopomôcť so zrýchlením vašej stránky a so zvýšením jej návštevnosti. Ak sa chcete dozvedieť viac, prečítajte si článok 6 spôsobov, akými zlepšíte rýchlosť a výkon vašej webovej stránky vo WordPress alebo Zrýchlenie webových stránok vo WordPress vďaka optimalizácií JavaScriptu a CSS

Ak máte záujem o viac informácií a potrebujete poradiť či pomôcť so zrýchlením vašej webovej stránky, napíšte nám a my vám radi pomôžeme. 

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.

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.

6 spôsobov, akými zlepšíte rýchlosť a výkon vašej webovej stránky vo WordPress

6 spôsobov, akými zlepšíte rýchlosť a výkon vašej webovej stránky vo WordPress

Všetko sa zrýchľuje. Mnohí chcú mať najdôležitejšie informácie čo najrýchlejšie a získavať ich bez zbytočného čakania. Rýchlosť je v týchto dňoch očakávaná hlavne pri prehliadaní webových stránok. Nedostatočný výkon a pomalé načítavanie vedú k zvýšeniu miery opustenia vašej stránky. Ako dopomôcť k zrýchleniu webovej stránky vo WordPress sa dozviete v dnešnom článku. 

Prečo je rýchlosť webovej stránky dôležitá?

Google odporúča za najoptimálnejšiu rýchlosť načítania v prípade 3G pripojenia 5 a menej sekúnd. Ak čas načítania vašej stránky prejde z 1 sekundy na 3, pravdepodobnosť okamžitého odchodu sa zvyšuje o 32 %. V prípade načítania webu z 1 sekundy na 10 sa zvyšuje až o 123 %! Alarmujúce však je, že podľa Google analýzy (2018), sa mobilné weby načítavajú v priemere až 15 sekúndRýchlosť webovej stránky ovplyvňuje až takmer 70 % spotrebiteľov. Pravdepodobnosť ich nákupu s rýchlosťou webu stúpa. Pokiaľ je webová stránka pomalá, prichádzate o zákazníkov a znižujete mieru konverzieRýchlosť vašej webovej stránky je tiež veľmi výrazným SEO faktorom. Preto sa pri tvorbe webových stránok vo WordPress vždy snažíme dbať na rýchlosť a výkon webu a robíme všetko preto, aby sme ju správne optimalizovali bez použitia prílišného množstva pluginov.Objektívny prehľad o tom, či je váš web rýchly, si môžete spraviť pomocou rôznych nástrojov, odporúčame Google PageSpeed Insights, no existuje mnoho ďalších napríklad GTmetrix či WebPageTest. Poďme sa pozrieť na niektoré z možností, akými zlepšujeme výkon webových stránok a optimalizujeme ich.

1. Menej reklám

Veľké množstvo reklám môže uškodiť vášmu webu, nakoľko reklamy načítavajú JavaScript, CSS a média, čím môžu veľmi spomaliť stránku a tiež zhoršiť užívateľský zážitok. 

2. Rozdeľte dlhé stránky

Dlhé stránky spomaľujú načítavanie webu.

  • Pokiaľ má niektorá z vašich stránok na webe príliš veľa obsahu, možno by bolo vhodnejšie ju rozdeliť na niekoľko
  • Na dĺžku dbajte aj pri písaní článkov na váš blog. Niekedy je lepšie článok rozdeliť na viaceré články, čím tiež prispejete k zrýchleniu webu. 

3. Aktuálnosť WordPress, pluginov a PHP

Vo WordPress vývojári pluginov neustále pracujú na vylepšeniach a preto je dobré si ich pravidelne aktualizovať. Veľký vplyv na výkon WordPress stránky má aj verzia PHP. Cloudways zverejnili výsledky ich benchmarkingového testu, ktorý sledoval zlepšovanie výkonu stránok od verzie PHP 5.6 po 8.0. Nižšie uvedený graf ukazuje, že výkon sa neustále zlepšuje. Oproti súčasnému PHP 8.0 s najrýchlejším časom načítania 164 ms vyšiel PHP 5.6 takmer 3-krát pomalší.

Zeni team - priemerná doba odozvy
Zeni team – priemerná doba odozvy

4. Caching

Prednačíta a nachystá obsah stránky, aby sa minimalizovalo počítanie a načítavanie z databázy pri prístupe na stránku. Používateľ dostane pri načítavaní stránky predpripravenú verziu, čím sa môže až niekoľkonásobne zvýšiťnačítanie webu. Aby sa v budúcnosti mohli požiadavky na údaje vyriešiť rýchlejšie, caching si tieto údaje ukladá. Súčasťou každého produkčného webu by mal byť určite Caching plugin, vďaka ktorému získate obrovské množstvo výkonu webu. Pre našich WordPress klientov nastavujeme Redis Cache, ktoré umožňuje cachovanie pomocou in memory databázy.

5. CDN (Content Delivery Network)

  • Ide o skupinu serverov, ktoré sú geograficky bližšie k vašim návštevníkom, a tak znižujú odozvu pri načítavaní stránky. 
  • Po nastavení CDN sa váš obsah (obrázky, videá…) uloží do vyrovnávacej pamäte na proxy serveroch a načítava sa zo serverav blízkosti polohy vášho návštevníka, vďaka čomu sa zníži odozva a obsah sa načíta rýchlejšie
  • Pre našich klientov používame službu Cloudfare CDN, ktorý im nastavujeme a je štandartný pre všetky stránky, ktoré máme v správe.

6. Kvalitný hosting

Ak si myslíte, že ste pre zrýchlenie vášho webu skúšali už všetko, no stále nedosahujete želané výsledky, je vhodné sa zamyslieť nad zmenou poskytovateľa hostingu. My v Zeni vám vieme ponúknuť hosting, ktorý zrýchli váš web. Tiež dokážeme pomôcť so zrýchlením webu a zvýšením vašej návštevnosti. Ozvite sa nám a radi vám poradíme

ODKAZY

  1. Page Speed Report
  2. New Industry Benchmarsk
  3. Mobile site speed statistics
  4. Performance Benchmarks for WordPress

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.

Tvorba webovej stránky pre i4comfort

Tvorba webovej stránky pre i4comfort

Aplikácia i4comfort od spoločnosti A-technology prináša komplexné a jednoduché riešenia ovládania technológií vo vašom dome na diaľku. Myšlienka úspory v oblasti vykurovania, a tým aj zmenšenia CO2 stopy pomocou inteligentného ovládania technológií, nás zaujala a bolo nám potešením podieľať sa na tvorbe webovej stránky pre túto aplikáciu.

Prečo a ako vznikla stránka

Stránky pre i4comfort sme vytvárali v CMS WordPress pre existujúceho klienta, ktorému sme už tento rok spustili kompletne nový produkčný web. Spoločnosť A-TECHNOLOGY s.r.o. má svoje prezentačné stránky a-technology.cz, preto bolo dôležité nadesignovať webovú stránku i4comfort v podobnom duchu ako tú materskú a zároveň webovej stránke vytvoriť vlastnú identitu. 

Porovnanie starej a novej stránky

Stará webová stránka i4comfort mala viaceré nedostatky:

  • Nespĺňala kritériá zabezpečenia.
  • Chýbalo vývojové prostredie v podobe stagingu
  • Logo a vzhľad boli zastaralé.
  • Web nebol responzívny.
Stará webová stránka

Nová stránka:

  • Webová stránka je plne responzívna.
  • Má na viacerých miestach CTA tlačidlo, ktoré vyzýva k akcii, vďaka čomu je väčšia pravdepodobnosť získania si zákazníka. 
  • Vytvorili sme nové logo a nadizajnovali nový vzhľad stránky.
Hlavná stránka i4comfort

Grafika webovej stránky

  • Tvorba webovej stránky vo WordPress pre i4comfort graficky nadväzovala na spomínanú materskú stránku.
  • Stránka má unikátny a zapamätateľný design.
  • Vytvorením osobitej identity stránky je samozrejmé, že ide o samostatný web.
  • Zákazník a-technology zároveň získava familiárny pocit.
  • Informácie nie sú komunikované len textovo, ale sú znázornené na mnohých miestach graficky, vďaka čomu sú viac zapamätateľné a prehľadné.

Technické funkcie

Moderný zážitok

Webová stránka disponuje mnohými vizuálnymi efektami, ktoré sú zakomponované tak, že stránku nespomaľujú. Web je tiež responzívny na akomkoľvek zariadení. 

  • Mnohé animácie a interaktívne časti využívajú čisto moderné možnosti štýlovania (css).
  • Nie je nutné donačítavať JavaScript ani kvôli niektorým rozklikateľným interaktívnym sekciám ako to býva na mnohých iných stránkach.
  • Stránka je tak rýchlejšia, zároveň poskytuje rovnako kvalitný zážitok, ako napríklad tu:
Vizuálne efekty webovej stránky

Stránka na používateľa reaguje

Symboly jednotlivých technológií sa menia podľa toho o čom používateľ momentálne číta. Podľa pozícii na stránke sa mení aj CTA tlačidlo, ikony, či navigačné prvky (horné menu, bodky vpravo). Spomenuté si môžete prezrieť na stránke ,,Jak funguje i4comfort”.

Webová stránka reaguje na užívateľa

Na stránke ,,Možnosti využití” sa tiež interaktívne menia obrázky podľa toho o čom používateľ číta. Čitateľ si tak jednoduchšie predstaví jednotlivé prvky o ktorých číta a tiež si ich lepšie zapamätá. Toto všetko vytvára unikátnu, rýchlu a interaktívnu skúsenosť, ktorá zaujme používateľa.

Výhody novej webovej stránky

Téma na sage

Ľahká konfigurovateľnosť

  • Nami naprogramovaná téma pre WordPress umožňuje ľahkú konfigurovateľnosť.
  • Pre každú stránku je osobitne nastaviteľné správanie a štýl hlavičky stránky.
  • Všetek obsah je jednoducho editovateľný bez nutného zásahu vývojára.

Použiteľnosť z hľadiska mobil/desktop

Desktopové prostredie nie je ani zďaleka len zväčšeným mobilným prostredím. Myslíme na dobrú skúsenosť pre každého užívateľa.

  • Na desktope je využívaný všetok priestor, vďaka čomu je na obrazovke poskytnutých čo najviac informácií a ani na veľkej obrazovke web nepôsobí prázdny
  • Používateľská skúsenosť na mobile je zároveň prispôsobená používaniu pomocou prsta a menšej obrazovke. 
  • Na mobile je všetko jednoducho klikateľné, ľahko a rýchlo dostupné. 
  • Mnohé sekcie vyzerajú v porovnaní mobilu a desktopu výrazne odlišne
  • Pre lepší zážitok boli pre mobil mnohé časti zjednodušené, niektoré vizuálne aspekty používané pre desktop vynechané, nakoľko nemali pre mobilného používateľa pridanú hodnotu
Webová stránka je responzívna

Pre i4comfort sme vytvorili nový web s množstvom vychytávok, ktorý je zároveň rýchly a prehľadný. Pokiaľ potrebujete pomôcť s tvorbou webovej stránky a chcete poskytnúť svojim zákazníkom kvalitný zážitok, neváhajte sa na nás obrátiť, radi vám pomôžeme.

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.

Rýchlosť a spoľahlivosť webovej stránky pre A-technology

Rýchlosť a spoľahlivosť webovej stránky pre A-technology

Jedným z našich spokojných zákazníkov je aj A-technology. Realizovali sme pre nich kompletne nový návrh webovej stránky – od grafického návrhu, cez tému a plugin na mieru, až po plne funkčný web. Prečítajte si, ako sme postupovali pri tvorbe webovej stránky, aké funkcionality sme vytvorili a ako sme dosiahli rýchlosť a spoľahlivosť ich webovej stránky. 

A-technology 

Spoločnosť A-technology už od roku 2006 realizuje riešenie systémov vykurovania a chladenia pri výstavbe a prevádzke komerčných a obytných budov. Ponúkajú taktiež systémy technologického ohrevu a chladenia ako napríklad solárne systémy, klimatizácie, či podlahové vykurovanie. 

Pre A-technology sme vytvorili nový návrh webovej stránky a spolu s ním sme do webu zakomponovali rôzne zaujímavé funkcionality podľa želania klienta.

Ako sme postupovali pri tvorbe webovej stránky?

  1. Najdôležitejšia je komunikácia s klientom. V prvom rade sme si spoločne ujasnili predstavu a vydefinovali si, čo klient požaduje.
  2. Náš grafik Jarda vytvoril wireframy v ktorých definoval konkrétne prvky, ktoré bude webová stránka obsahovať. Následne dodal grafický návrh klientovi, ktorý sme spoločne prediskutovali.
  3. Nasledovala samotná tvorba témy a pluginu na mieru podľa požiadaviek klienta, o ktorú sa postarali developeri ja (Daniel) a Zbyněk.
  4. Po vytvorení stránky bola stará webová stránka nahradená novou – rýchlejšou a spoľahlivejšou
  5. Postupne sme pridávali ďalšie funkcionality a predávali nové zmeny klientovi. 

Aké funkcionality sme robili pre A-technology?

  • Komunikácia s externým servisom pre objednávku servisu

Zabezpečili sme okamžité riešenie požiadaviek klientov vďaka napojeniu formulára priamo na dodávateľa. Dodávateľ dostane vyplnený formulár priamo do jeho interného systému HELIOS cez API, vďaka čomu môže automaticky poskytnúť žiadaný servis klientovi, bez zbytočných prestrojov a zároveň si môže pracovník servisu naplánovať efektívne pracovný deň bez zbytočne najazdených kilomentrov.

  • Automatické vypĺňanie adresy 

Súčasťou formulára je aj automatické vyplnenie adresy na základe zvoleného miesta na mape vo formulároch, čo ušetrí čas.

  • Výpočet času čítania článku

Každá aktualita obsahuje informáciu o tom, koľko času zaberie čítanie článku. Vďaka tejto funkcionalite čitateľ môže očakávať, ako dlho bude na stránke a v konečnom dôsledku to môže prispieť k zníženiu miery opúšťania stránky čitateľom.

  • Prezentačné stránky

Ide o tradičnejšie, no veľmi dôležité funkcionality ako referencie, používané technológie, informačné stránky, či blog.

  • Kalkulačka

Vypočíta predbežnú cenu objednávky v € a CZK, na základe zadaných technológií, ktoré si zákazník želá aby služba obsahovala. Táto funkcionalita sa pre klienta momentálne pripravuje.

Rýchla a spoľahlivá webová stránka

Rýchlosť

  • Používame len nutné minimum javascriptu.
  • Štýlovanie (css) je v téme rozdelené tak, aby sa načítalo len to, čo je potrebné pre danú stránku.
  • Lazy load médií– načítavanie obrázkov atď. neblokuje prehliadač a postupne sa donačítavajú, aby bola webová stránka čo najskôr interaktívna.
  • Tvoríme kód s dôrazom na výkon stránky.
  • Využívame čo najmenej pluginov tretích strán, ktoré bežia pri načítavaní stránky.
  • Používame caching, ktorý výrazne urýchľuje načítavanie stránok.
Rýchla webová stránka

Spoľahlivosť

  • Pri tvorbe webových stránok používame len overené a otestované pluginy. O väčšinu funkcionalít sa starajú developeri, čím sa limituje závislosť na tretích stranách. Prípadné problémy preto môžeme riešiť priamo.
  • Všetky pluginy sú pravidelne updatované kvôli opravám chýb a bezpečnostným dieram.
  • Pred tým, ako čokoľvek pridáme na produkčný server, to otestujeme na stagingu.
  • Pravidelne monitorujeme stav serverov.

Možnosť pridania funkcií na základe požiadavky klienta

Na modifikovateľnosť a rozšíriteľnosť myslíme pri všetkých nových funkcionalitách. Vytvorili sme custom plugin a tému na Sage, ktoré majú prehľadnú štruktúru umožňujúcu pokračovať ďalej vo vývoji. Jednoducho môžeme pridávať nové funckie, pretože počítame s tým, že klient môže kedykoľvek požadovať akúkoľvek zmenu. 

Prístupnosť stránky

Aj pre A- Technology sme vytvorili webovú stránku tak, aby spĺňala všetky kritériá. Web sme spravili čo najviac prístupný, optimalizovaný pre mobily, ktorý je rýchly, bezpečný a spoľahlivý. Ak máte aj vy záujem o takúto webovú stránku, neváhajte sa na nás obrátiť.

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.