NÁVOD: Ako som dostal rýchlosť WordPress webu pod 2 sekundy

Nedávno som počúval podcast Pata Flynna Smart Passive Income, v ktorom sa so svojím hosťom rozprávali o rôznych vychytávkach pre WordPress stránky. Jednou z tém bola práve rýchlosť webu postavenom na tomto redakčnom systéme.  Opakovalo sa to, čo počúvam úplne všade – rýchlosť bude stále viac a viac dôležitým faktorom úspešnosti Vašej webstránky.

Či už z hľadiska SEO, konverzného pomeru alebo UX (User Experience, užívateľská prívetivosť), rýchlosť webu bude hrať veľkú rolu.

Tak som sa v poslednej dobe o túto tématiku začal celkom intenzívne zaujímať. V tomto príspevku Vám ukážem praktický návod ako zvýšiť rýchlosť Vášho webu postaveného na WordPresse. Ako príklad použijem môj vlastný magazín www.pozicka.sr, pri ktorom sa mi podarilo znížiť dobu načítania na menej ako dve sekundy. Poďme na to.

Iba pár štatistík, aby ste pochopili, že rýchlosť webu TREBA riešiť (zdroj: Kissmetrics.com a Radware.com):

  • 47% návštevníkov očakáva, že Váš web sa načíta za menej ako 2 sekundy
  • 40% návštevníkov opustí webstránku, ktorá sa načítava viac ako 3 sekundy
  • zvýšenie rýchlosti o 1 sekundu dokáže zvýšiť konverzný pomer o 7%
  • 46% návštevníkov e-shopov sa podľa rýchlosti webu rozhodne, či sa na stránku vrátia alebo nie

Aký rýchly je môj web?

Ako prvú vec som potreboval zistiť aký rýchly vlastne môj web je. Na zistenie rýchlosti som použil nástroj tools.pingdom.com, ktorý mi ukázal, že môj web sa načíta za takmer 5 sekúnd. Áno, čítate správne, 5 sekúnd musí návštevník čakať, kým sa mu načíta webstránka. To je príliš veľa, čo iste uznáte aj vy.

5 krokov k zvýšeniu rýchlosti, ktoré som podnikol:

1. Hosting

Hosting je pravdepodobne ten najdôležitejší faktor, ktorý ovplyvňuje rýchlosť Vášho webu. Ak je pre Vás rýchlosť dôležitá, mali by ste začať práve s Vašim hostingom. Je to ako dom – ťažko budete staviať krásny domček, ak nemáte v poriadku základy. A hosting je základ!

Môj prvý hosting bol Webhostingpad.com. Je super lacný, môžete na ňom hosťovať X domén a keď som začínal podnikať tak mi plne vyhovoval. Keď som však začal riešiť také veci ako je rýchlosť webu, zálohovanie webu, bezpečnosť atď., zistil som, že tento hosting je vlastne nepoužiteľný. Začal som sa preto pozerať po inom riešení.

Pred pár mesiacmi som preto prešiel na český hosting OneBit.cz, ktorý môžem odporúčiť každému. O hostingu sa tu rozpisovať nebudem, ale môžem Vám s radosťou povedať, že doba načítania webu po nahodení na nový hosting klesla asi o tretinu. A to už za tých pár tisíc korún navyše ročne skutočne stojí.

2. Obrázky

Veľké obrázky dokážu výrazne spomaliť Váš web, to je jasné asi každému. Nie každý však vie ako sa dá veľkosť obrázkov zmenšiť tak, aby ste zachovali ich kvalitu. Obecne sa držím pravidla, že každý obrázok, ktorý uverejňujem na web, má menej ako 100kb. Je to samozrejme dosť všeobecné takto tvrdiť, ale je to skôr zo skúseností a experimentovania s rôznými veľkosťami obrázkov.

Pre zníženie veľkosti obrázku používam buď Photoshop (keď ukladáte obrázok, tak dáte “Save for Web”) alebo službu, ktorú som objavil iba pred nedávnom, ale začal som ju dosť využívať – PicResize.  Táto služba dokáže komprimovať akýkoľvek obrázok z webu alebo zo súboru Vášho počítača v priebehu pár sekúnd.

PicResize

Plugin WP Smush.it automaticky optimalizuje Vaše obrázky na webe

Čo však ak si tento príspevok čítate a na webe máte stovky obrovských obrázkov? Čo s tým? Pretože presne to sa stalo mne, nikdy som rýchlosť webu neriešil a keď som ju začal riešiť, bolo neskoro. Meniť veľkosť všetkých obrázkov na webe www.pozicka.sr by mi trvalo večnosť.

Našťastie som našiel riešenie, na ktoré ma upozornil kamarát Lukáš Dubina a tým je WP.Smush.it. Tento plugin nielenže automaticky optimalizuje obrázky, ktoré vkladáte na web, ale dokáže optimalizovať všetky obrázky, ktoré na webe momentálne máte. A to v priebehu pár minút.

Plugin na optimalizáciu obrázkov

WP Smush.it automaticky optimalizuje Vaše obrázky na webe

3. Pluginy

Pluginy vedia do veľkej miery zakývať s rýchlosťou Vášho webu. Čím viac pluginov na webe máte, tým viac kódu Váš web obsahuje a tým sa dlhšie načíta. Nie je to však iba o počte – niekedy vie jeden plugin urobiť viac škody ako 10 iných. Obecne sa však držím pravidla, čím menej pluginov tým lepšie, pričom sa snažím nemať na webe viac ako 20 aktívnych pluginov. Pár rád:

  • nemajte na webe neaktívne pluginy. Ak plugin nepoužívajte, vymažte ho.
  • nepoužívajte pluginy na veci, ktoré sa dajú jednoducho vložiť do kódu. Príkladom môže byť plugin pre Google Analytics, ktorý jednoducho nahradíte vnorením kódu z GA do webu
  • pluginy vždy aktualizujte
  • snažte sa mať na webe iba spoľahlivé pluginy – prečítajte si napríklad recenzie ostatných uživateľov pluginu a uprednostňujte pluginy od veľkých spoločností
  • minimalizujte pluginy, ktoré potrebujú načítať dáta z externých serverov ako napríklad zdieľacie tlačítka
  • zmažte všetky pluginy, ktoré máte “na okrasu” a nezvyšujú efektivitu Vášho webu
  • zbavte sa všetkých pluginov, ktoré spomalujú Váš web. Ktoré to sú? To zistíte pomocou výborného pluginu P3 (Plugin Performance Profiler).

Web www.pozicka.sr mal 34 aktívnych pluginov. Tento počet som zredukoval na 24, čo opäť znamená vyššiu rýchlosť webu pre návštevníkov.

4. Cachovací plugin

Cachovacie pluginy cachujú statický výstup webu. To znamená, že vytvoria HTML verziu Vášho webu, tú uložia na server a návštevníkom poskytnú túto verziu, keď navštívia Váš web. Ak nerozumiete ako presne to funguje, buď si pozrite prednášku Jakuba Klapku na YouTube alebo prednášku Davida Biňovca na Slideshare.

Ak Vás zaujíma ako dokáže cachovací plugin zrýchliť Váš web, vložte si URL webu do nástroja tools.pingdom.com a pozrite sa na report analýzy. Hneď prvý riadok Vám ukáže ako dlho návštevník webu musí čakať, kým sa mu začne načítať Váš web:

Cachovací plugin a rýchlosť webu

Takmer 1,2 sekundy trvá, kým sa návštevníkovi webu začne načítať web

Webstránke www.pozicka.sr trvá až 1,2 sekundy, kým sa návštevníkovi niečo z webu načíta. To je, samozrejme, neuveriteľne dlhá doba. Tento čas minimalizujeme práve cachovacím pluginom.

Poznáme 2 najznámejšie WordPress pluginy pre cachovanie stránok – WP Super Cache a W3 Total Cache. Ja som si vybral WP Super Cache, ale každý plugin má svoje výhody a nevýhody.

Ihneď po nasadení pluginu a správnom nastavení mi čas, za ktorý sa návštevníkovi začne načítať web, klesol na menej ako 0,1 sekundy, čím znížil celkovú dobu načítania webu o 1,1 sekundy. Výsledky si môžete pozrieť tu:

Rýchlosť načítania kódu po nasadení cache pluginu

Rýchlosť načítania kódu po nasadení cache pluginu

5. Kompresia CSS a JS súborov

Toto je technika, ktorá by sa mala používať opatrne a tým je zoskupenie CSS a JavaScriptových súborov dohromady. Využitie tejto techniky mi poradil priamo Google nástrojom PageSpeed Insights. Pre kompresiu CSS a JS súborov použíjeme plugin Better WordPress Minify:

Better WordPress Minify

Zoskupenie CSS a JS súborov spravíme pomocou pluginu BWP Minify

 

Výsledky

Výsledky z tools.pingdom.com netreba brať na 100% vážne, pretože občas nie sú úplne presné, ale jedna vec je jasná – za menej ako 3 hodiny som dokázal zredukovať dobu načítania webu www.pozicka.sr o niekoľko sekúnd. A to je už niečo, čo dokáže výrazne zvýšiť Vaše zisky.

Rýchlosť webu pod 2 sekundy

Web sa po niekoľkých úpravach načítal za menej ako dve sekundy

Záver

Dal som Vám presný postup ako zvýšiť rýchlosť webu a je už iba na Vás, či to tento návod použijete alebo nie. Takisto budem rád ak sa mi v komentároch vyjadríte, či Vám tento článok pomohol alebo nie. Písal som ho asi 2 dni, takže sa ani neskúšajte sťažovať 😀

NÁVOD: Ako som dostal rýchlosť WordPress webu pod 2 sekundy
5 (100%) 12 hlas[ov]
Zaujal Ťa tento článok?
V tom prípade sa prihlás k viac ako 700 odberateľom, ktorým pomáham s podnikaním na internete. Píšem praktické návody, ktoré je možné obratom aplikovať do praxe.
The following two tabs change content below.
Prevádzkujem e-shopy a budujem webové projekty, ktoré následne monetizujem pomocou affiliate marketingu. Online podnikanie mi dáva neuveriteľnú voľnosť, za posledný rok som viac ako 5 mesiacov strávil mimo kancelárie a precestoval som polovicu Európy.

Comments

  1. megatronsk says:

    Este si tam dopis, ze je lepsie pouzivat externe jquery napr. od google. Kedze ludia to uz maju nacitane z inych stranok a tak nemusia u teba opat stahovat.

    Mozno tento plugin: https://wordpress.org/plugins/use-google-libraries/

  2. Má plugin Wp Smush it nějaký progress bar, že se opravdu zmenšují/komprimují fotky? Nasadil jsem na web, mám 799 velkých fotek, dal jsem Bulk Smush a koukám na to jak sůva z nudlí, protože mám stále 1 z xxx a nic se neděje:)

    Ale skvělý článek – pomalost u WP řeším poměrně často, tak si s pluginy pohraju.

  3. Ahoj, jen k tomu, že onebit nemá partnerský program – má ho – viz : http://www.onebit.cz/cz/partnersky-program/ 😉

  4. Čau čau, tento článok by sa mi suprovo hodil pred mesiacom 🙂 (ale aj teraz som si v ňom čo-to našiel na vyskúšanie, spomínaný 5. bod). U mňa podstatnú časť zrýchlenia spôsobilo migrovanie webu na rýchlejší server, ale v rámci jednej firmy.., ale uvažujem, že pri ďalšom projekte skúsim inú spoločnosť…ináč k Tebou spomenutým bodom, ja som využil aj cachovanie súborov v prehliadači ..teším sa na ďalší článok 😉

  5. Díky za tipy. To minify určitě vyzkouším, zatím jsem nenašel nástroj, který by to perfektně zvládl 🙂

  6. Petře, na to jak je web pozicky.sr jednoduchý, je stále tragicky pomalý. Těch věcí, které tam můžeš ještě zlepšit s ohledem na rychlost je hodně. Mimochodem, ani při opakovaných testech mi to neukázalo rychlost tvého webu v http://tools.pingdom.com/ pod 3 s, spíše to ukazuje ještě více. Aby to nevypadalo, že jen blbě kritizuji, tak ti zkusím dát pár tipů.
    1) Mnohem lepší nástroj na vyhodnocení rychlosti a nalezení slabých míst je http://www.webpagetest.org/.
    2) Pro mnoho obrázků na tvém webu se více hodí formát png než jpg. Platí to např. pro některá loga, potom bude datová velikost nižší a bude to bez ztráty kvality.
    3) Photoshop není ideální nástroj na snížení datové velikosti obrázků. Jiné nástroje dosáhnou nižší datové velikosti obrázků při stejné kvalitě.
    4) Zkus se podívat sem http://www.webpagetest.org/result/150122_9F_13FR/1/details/ o kolik tě zpomaluje jen obyčejný toplist. Skutečně potřebuješ tři nástroje na měření návštěvnosti? Pokud ano, určitě nepotřebuješ načítat obrázky s jejich logem.
    5) Nepoužíváš minifikaci CSS a JS
    6) Používáš CSS sprite?Používáš asynchroní kódy pro FB a analytics? Skutečně potřebuješ mít tak velké množství věcí v kódu hlavičky webu? Nemůžeš něco méně důležitého přesunout níže?
    7) U obrázků nemáš nastavenou dobu platnosti cache pro prohlížeč.
    8) Nepoužíváš kompresi CSS stylu přestože o tom píšeš.
    9) Snížení počtu pluginů na 24 je fajn, teď ještě odstraň ty další nepotřebné. Já třeba nemám na žádném WP webu více než 5 pluginů.

    Nejsem ale specialista na optimalizaci rychlosti webu, ber to spíše jako podměty k přemýšlení. Pokud se toho chceš dozvědět více a chceš mít přesnější informace tak doporučuji kurz http://www.naucmese.cz/kurz/zaklady-zrychlovani-webu za 500 Kč se bude věnovat jen tobě a probere s tebou přímo tvůj web 😉

    • Ahoj Marek 🙂

      Ďakujem za komentár, celkom si ma prinútil o celej problematike ešte viac uvažovať a zisťovať potrebné, to som rád 🙂

      1. Spravil som 10 testov a pri všetkých mi ukázalo rýchlosť pod 2 sekundy. Používal som na to tools.pingdom.com s nastavením testu z Amsterdamu. Nepotrebujem, aby sa web načítal rýchlo návštevníkom z USA, keď tam žiadna taká návštevnosť nie je.
      2. Png vs. jpg – súhlasím, aj keď si myslím, že už tých pár kb na rýchlosť veľký dopad nebude mať. Bohužiaľ sa mi ale teraz nechce meniť všetky obrázky, nevidím v tom ten efekt.
      3. Napríklad? Photoshop používa dosť veľa ľudí na redukciu obrázkov, v tom teda problém fakt nevidím. Ak nejaké poznáš, tak poraď 🙂
      4. Kompresia a minifikace CSS a JS by tam mala byť. Pochop, že ja nie som programátor, neviem si to overiť aj keď by som rád. Naveď ma 🙂
      5. Znovu to isté, ja sa proste v tom kóde hrabať nebudem. Na takej úrovni nie som a ani tento článok nie je cielený na také publikum.
      6. 5 pluginov je pre mňa nereálnych. Ak mi plugin zvyšuje efektivitu webu (napr. Hello Bar, iThemes Security alebo kk Star Ratings), tak ho tam nechám aj v prípade, že mi ten web spomalí. Je to proste o kompromise, nemôžeš všetko staviť iba na rýchlosť.

      Na ten kurz sa prihlásim ešte dnes, vyzerá fakt super.

      Každopádne ďakujem za nové poznatky o rýchlosti webu 🙂

      • Ano po nastavení na Amsterodam ukazuje tools.pingdom.com lepší výsledky. Webpagetest.org ukazuje o něco horší výsledky i při nastavení Prahy. Nevím co je reálně přesnější, u webpagetest je ale hodně důležitý i ukázaný čas při druhém načtení webu stejnému uživateli.

        Když změníš nějaký jednoduchý obrázek z jpg na png, nastavíš správný počet barev a použiješ správný nástroj na kompresi tak se zmenší datová velikost souboru třeba o 80 % a to když se udělá u všech pro které je png vhodný formát, tak už se to celkově nějak projeví. Důležité taky je že ten obrázek bude vypadat lépe, ostřeji.

        Taky nejsem programátor. Na tomto odkazu http://www.webpagetest.org/performance_optimization.php?test=150123_51_VTT&run=1&cached=0 máš tabulku, ve které vidíš jaké soubory používají a nebo nepoužívají kompresi.

        Google PageSpeed Insights, který jsi v článku uvedl ti přesně ukazuje, které soubory nejsou minifikovány. Minifikace spočívá v odstranění přebytečných znaků – např. přebytečné mezery apod. Poznáš to i když se nějakého css nebo js souboru podíváš. Můžeš např. porovnat tvůj styl, který není minifikovaný http://www.pozicka.sr/wp-content/themes/greenchilli/style.css a můj, který je minifikovaný http://www.swmag.cz/min/serve/g/default_css/1386052231/ – poznáš to vizuálně na první pohled.

        Mimochodem nástroj na minifikaci od Google by měl být už obsažen např. v pluginu W3 Total Cache (ale i v jiných) https://code.google.com/p/minify/ nemám to ale vyzkoušené.

        Bohužel si teď nepamatuji, který nástroj je nejlepší na kompresi obrázků. Mám to v poznámkách, které mám doma a nemám k nim teď přístup. Každopádně se to na kurzu dozvíš. 🙂

      • Ad 3. na kompresi jpeg a png obrázků se mi výborně osvědčily služby https://tinyjpg.com/ a https://tinypng.com, případně http://www.jpegmini.com/ 🙂

  7. Peter Olvecký says:

    Dobrý článok, dík Peter. Možno len malý tip k zrýchlovaniu WP webov – osobne používam plugin WordFence (http://goo.gl/CeFYy4). Je to primárne bezpečnostný plugin, no má aj sekciu Performance Setup, kde sa dá skutočne extrémne jednoducho zapnúť cache (robí to pomocou .htaccess príkazov).

    Na jednom z klientskych webov som takto zrýchlil načítavanie webu o 500 %.

  8. Ahoj ja s presunom webu na nejaký rýchly slovenský hosting stále váham, počul som fámy že niekedy pri presunutí na nový hosting môže Google web penalizovať a spadneš z prvých miest vyhľadávača až dole.

    Inak dobrý článok.

  9. Přidám také jednu radu, kterou moc lidí nezná (asi protože jsem jí sám vymyslel a používám na svém webu http://www.androidtip.cz). Je trošku vyšší dívčí a pomůže vám to v případě, kdy potřebujete používat větší množství pluginů (tzn. osekávání pluginů již není vhodným řešením a jejich větší množství vám web razantně zpomaluje). Nainstalujte si free WP Plugin Organizer (https://wordpress.org/plugins/plugin-organizer/). Pak si nastavte natvrdo filtry pro určitá URL a nechte na nich zapnuté jen pluginy, které na dané stránce využíváte. Výhodné je to, že Plugin Organizer umí pracovat i z child URL, takže když si nastavíte třeba že pro URL http://www.ukazkovyweb.cz/katalog a všechny jeho podstránky se má zapnout plugin KATALOG, bude se tento plugin používat i na všech podstránkách (např. http://www.ukazkovyweb.cz/katalog/produkt1). Pak můžete tento KATALOG plugin nechat vypnutý pro všechna ostatní URL webu včetně hlavní stránky. Věřím že princip všichni chápete. Tímto způsobem lze vyladit komplexnější weby jako je můj androidtip.cz k dobré rychlosti i při větším množství používaných pluginů. Já jich na svém webu používám cca 50 a to už jsem pomocí P3 profileru osekal vše co žralo hodně zdrojů a vyloženě jsem to nepotřeboval. Také doporučuji dávat si velký pozor na BuddyPress a WP JetPack pluginy – to jsou velcí žrouti prostředků.

    • Takže přátelé, identifikoval jsem ještě jeden toxický plugin (věděl jsem o něm dříve, ale nebylo snadné ho vypárat). Nakonec jsem našel náhradu a předělal mnoho stránek, abych se zbavil původní brzdy. Androidtip.cz nyní švihá v časech do 1 vteřiny (předtím kolem 2 vteřin, spíš přes) a to nemám dořešenu minifikaci javascriptů a CSS… Stále mám aktivních několik desítek pluginů. Mé doporučení je: “nebojte se pluginů, ale s každým přídavkem si web otestujte profilerem a pokud nový plugin zpomaluje pageload tak ho hned vyhoďte”.

    • Jinak ještě k tomu plugin organizeru… velmi doporučuji na frontendu povypínat všechny backendové pluginy. Jen tímto krokem se dá dosáhnout dobrého zrychlení. Záleží ale na konkrétní konfiguraco webu – zejména jaké pluginy používáte.

  10. Největší brzdy, musím říct, jsou skripty sociálních sítí, Google AdSense, a další externí knihovny. S tím ale člověk bohužel nic neudělá 🙂

    • Scripty sociálních sítí… doporučuji najít si nějaký plugin, který využívá asynchronní volání přes AJAX. Třeba jako mám já na svém webu. To nebrzdí zobrazování… nejdříve se natáhne web a zobrazí se ihned tlačítka pro soc. sítě. Až pak se do nich dotáhnou asynchronně počty sdílení. Kdo hledá, ten najde 🙂

  11. Ahoj Petře. Díky za návod.
    Právě se snažím zprovoznit eshop na Woocommerce (svůj první) a mám velký problém s načítáním webu. Nevím, jestli je to nějakým nastavením, o kterém nevím, nebo je to samotnou šablonou (šablona Kalista z themeforest), ale pokaždé když zadám do prohlížeče adresu webu, trvá její načtení strašně dlouho. Vždy se mi totiž načítají úplně všechny obrázky, které jsou na webu nahrány. Přitom na úvodní stránce je nemám.
    Zkusil jsem obrázky zmenšit pomocí pluginu WP Smus.it, používám plugin jQuery Lazy Load, ale je to téměř beze změny. Při otevření úvodní stránky se mi načítá přes 100 MB obrázků.
    Nevíš, jak se s tímto vypořádat?
    Zde jsou výsledky testů – http://www.webpagetest.org/result/160320_5X_VBZ/ , http://tools.pingdom.com/fpt/#!/etxwCe/http://bimbac.cz

    • Ahoj, akých 100 MB obrázkov? Ja tam nič také nevidím.. Inak pozerám na výsledky a vyzerá to na nejaký plugin. Teraz rieším rýchlosť s http://wp-admin.cz/, sú celkom lacní. Možno by som o tom porozmýšlal..pretože ja až tak technicky do toho nevidím. Niečo to tam brzí. Skús deaktivovať všetky pluginy a jeden po druhom aktivovať, uvidíš, ktorý plugin to najviac spomaľuje.

      • Ahoj. Včera jsem odhalil první příčinu. Šablona měla na homepage posuvný slider, ve kterém se zobrazovali nejnovější produkty. Akorát že ten slider byl “nekonečný” a byly v něm úplně všechny produkty z celého eshopu, takže se všechny načítali při otevření homepage.
        Tento slider už je pryč a je to o dost rychlejší. Teď ještě odhalit ten zbytek. Vypadá to na nějaké dlouhé načítání scriptů.

  12. Co si myslite o hostingu na websupporte? Tiez riesim zrychlenie konkretne: http://www.blog.zuzy.info vdaka za tip 😉
    Zuzy 😉

  13. Díky za rady 🙂 Idem do ihneď dať do praxe. Môj web už snáď ani pomalší byť nemôže.. 🙁

Trackbacks

  1. […] šikovný nástroj na analýzu rýchlosti a výkonnosti Vášho webu. Zaujímavý je hlavne “waterfall view”, ktorý Vám presne ukáže, aké časti […]

  2. […] je cacheovací plugin pre Vaše weby dôležitý som vysvetlil v článku o rýchlosti WordPressu. V článku sa tiež dočítate, že som vtedy používal plugin WP Super Cache. Aj keď sa jedná […]

  3. […] sme rýchlosť webu a vyhodnotili ju ako vyhovujúcu (super sú 2 sekundy, 3 sekundy sú v poriadku, čokoľvek nad je […]

  4. […] Znamená to, že Váš web nemôže mať atribút “nofollow”, web musí byť rýchly, responzívny, mal by obsahovať sitemapu, nemal by mať veľa 404-iek, mal by byť umiestnený na […]

  5. […] si, že rozšírením WordPressu veľa ľudí stratilo potrebu učiť sa kódovať pomocou HTML a CSS. Samozrejme to chápem, keby […]

Pridaj komentár