Optimalizace rychlosti načítání webu na WordPress bez znalosti programování

Rychlost načítání stránek webu je základním kamenem úspěšnosti stránky. Můžete mít lepší obsah než vaše konkurenční stránky, ale pokud se bude váš web načítat pomalu a konkurenční naopak rychle, je dost možné, že budete mít menší návštěvnost. Google má raději rychlejší stránky.

Naštěstí existují techniky jak zlepšit rychlost načítání stránek.

K tomuto účelu existuje několik nástrojů, které nám pomohou s diagnostikou problémů. My budeme používat Page SpeedInsightsPingdom Website Speed Test.

Google PageSpeed Insights je vývojářský nástroj, který načte stránku a otestuje stránku. Test probíhá jak pro PC verzi stránek tak pro mobilní. Výsledná zpráva pak upozorní na nedostatky a navrhne jejich řešení.

Pingdom Website Speed Test je nástroj, který také načte vaši stránku. Avšak na rozdíl od PageSpeed Insights nezobrazí rady co s webem dělat, ale namísto toho zobrazí podrobnější statistiky o průběhu načítání.

U obou nástrojů je cílem získat co nejvíce bodu – 100.

Rovnou tady zmíním, že dosáhnout 100 bodů pomocí této základní optimalizace webu nejde, avšak měli by jste se dostat alespoň přes 85.

Nyní se však pusťme do samostatné optimalizace. Stejný typ optimalizace jsem použil i zde na webu WPlama.cz.

0. Základní statistiky

Výchozí stav optimalizace našeho webu byl:

Google PageSpeed Insights: 38 mobile / 44 desktop

Nástroj navrhl následující opravy:

  • Aktivujte kompresi
  • Optimalizujte obrázky
  • Využijte načítání do mezipaměti prohlížeče
  • Eliminujte v obsahu na okrajem kód JavaScript a CSS blokující vykreslení.
  • Minifikujte kód CSS
  • Minifikujte JavaScript
  • Minifikujte kód HTML

Pingdom Website Speed Test: rychlost načtení stránky 3,32s / 56 bodů / velikost stránky 2,4 MB

WPlama.cz bez optimalizace
WPlama.cz bez optimalizace

1. Odstranění nepotřebných pluginů

Prvním krokem optimalizace je zbavení se všeho nepotřebného. Projděte si všechny pluginy a skutečně se zamyslete nad tím, zda daný plugin potřebujete. Já jsem deaktivoval a smazal 8 pluginů.

Jen touto zdánlivě banální optimalizací se mi povedlo získat několik bodů.

Google PageSpeed Insights: 40 mobile / 46 desktop

Pingdom Website Speed Test: rychlost načtení stránky 2,96s / 60 bodů / velikost stránky 2,6 MB

2. Aktivujte kompresi

Prvním krokem na seznamu je aktivujte kompresi pomocí gzip nebo deflating. Cílem by pak mělo být snížení počtu bytů posílaných po síti. Nejvhodnějším pluginem pro tento úkol mi přišel WP Performance Score Booster.

O pluginu jsme psali v článku Zrychlete načítání stránky s WP Performance Score Booster.

WP Performance Score Booster
WP Performance Score Booster

Jedná se o plugin zdarma, který je navržen přesně pro toto. Plugin odstraní všechny řetězce dotazu z CSS a JavaScriptu, aktivuje GZIP kompresi a další…

Google PageSpeed Insights: 55 mobile / 62 desktop

Pingdom Website Speed Test: rychlost načtení stránky 2,90s / 70 bodů / velikost stránky 2,3 MB

3.Eliminujte v obsahu na okrajem kód JavaScript a CSS blokující vykreslení

Další věcí na seznamu bylo eliminovat obsah JavaScript nad okrajem a CSS blokující vykreslení. Zde jsem k tomu využil tyto pluginy.

Better WordPress Minify

Jedná se o plugin zdarma, který obsahuje dobré možnosti jak minifikovat JavaScript a CSS.

Better WordPress Minify
Better WordPress Minify

Autoptimize

Tento plugin provádí kompresi souborů (styly, skripty) a přesunuje je z header do footer. Zároveň minifikuje HTML.

O pluginu Autoptimize jsme detailněji psali v článku Autoptimize – skvělý plugin pro minifikaci CSS, JS a HTML ve WordPress.

Autoptimize
Autoptimize

Speed Booster Pack

Po aktivaci tohoto pluginu musíte jít ještě do jeho nastavení a aktivovat jeho funkce. Poté je nutné otestovat funkčnost na webu a případně zjistit, zda nedochází k problémům. Mě se například u jednoho webu stalo, že 2 funkce deaktivovaly Revolution slider.

Speed Booster Pack
Speed Booster Pack

A jak to tedy vše dopadlo?

Google PageSpeed Insights: 55 mobile / 72 desktop

Pingdom Website Speed Test: rychlost načtení stránky 3,04s / 75 bodů / velikost stránky 1,9 MB

4.Rychlost odpovědi serveru

Je vidět, že více pluginů si vybírá svou daň a zhoršuje se doba odpovědi serveru. Je třeba se tedy podívat na cache.

WP Super Cache

WP Super Cache je skvělý plugin od Automattic. Už jsme o něm psali podrobný návod Jak na WordPress cache s WP Super Cache.

WP Super Cache
WP Super Cache

Google PageSpeed Insights: 62 mobile / 72 desktop

Pingdom Website Speed Test: rychlost načtení stránky 1,27s / 75 bodů / velikost stránky 1,8 MB

5.Určete prioritu viditelného obsahu

Nástroj mi stále ukazuje chybu v procentech viditelného obsahu, které mám pouze 33%. Jeho návrhem bylo:

  • Minify
  • Použít CSS namísto obrázků
  • Použít kompresi

Všechny tyto věci jsem však už řešil a bude třeba to přeskočit.

6. Optimalizujte obrázky

Poměrně velký dopad na rychlost načítání stránek mají obrázky. Dost často je však můžeme upravit pomocí tzv. bezztrátové komprese a změnou velikosti.

WP Smush It – o pluginu jsme psali v článku Optimalizace obrázků pomocí WP Smush.it.

Tento plugin zdarma umí komprimovat nahrané a nahrávané obrázky. Plugin pracuje ve verzi zdarma s obrázky do velikosti 1MB, pokud by jste chtěli využít kompresi u větších obrázků je třeba zakoupit PRO verzi nebo je nejdříve zmenšit a až poté komprimovat. Obvykle stačí verze zdarma, ovšem je nutné pouštět kompresi po 50 obrázcích.

TIP: Určitě se podívejte i na plugin Imsanity, který automaticky hlídá maximální velikost nahrávaných obrázků a zároveň umí zpětně upravit již nahrané obrázky.

Na webu jsem měl celkem 1312 obrázků, které se zmenšili o 103 MB s průměrem 13% komprese velikosti na obrázek.

WP Smush
WP Smush

optimizilla.com

Někdy se stane, že potřebujete komprimovat obrázek co není nahrán do WordPressu, ale je třeba součástí šablony. Na to je dobré využít nějaký online nástroj, například optimizilla.com, který tuto práci odvede. U mě se jednalo o logo a banner.

Online Image Сompressor
Online Image Сompressor

Google PageSpeed Insights: 73 mobile / 89 desktop

Pingdom Website Speed Test: rychlost načtení stránky 1,13s / 75 bodů / velikost stránky 1,4 MB

7. Analýza pomocí “Waterfall”

Nyní se podívejte na Pingdom Website Speed Test a koukněte se, kde má ještě web problém a jestli tam není něco co načítání ještě zpomaluje.

V mém případě se zde nachází ještě 2 problémy:

  • chat Zopim se načítá 353ms
  • admin-ajax.php se načítá 931ms

V případě Zopim to bylo jednoduché, plugin není až tak moc potřebný a odstranil jsem ho. Nicméně u admin-ajax.php bylo jasné, že ho něco zatěžuje. Po drobném pátrání jsem zjistil, že je to plugin pro sociální sítě Monarch. Plugin jsem se však rozhodl ponechat.

Google PageSpeed Insights: 73 mobile / 89 desktop

Pingdom Website Speed Test: rychlost načtení stránky 0,62s / 88 bodů / velikost stránky 1,2 MB

Tip: Analýzu vodopádového grafu jsme detailněji rozebrali v článku Analýza rychlosti načítání stránky a vodopádový graf.

Shrnutí a výsledky

Jak je vidět i bez nutnosti sáhnout do kódu lze WordPress výrazně zrychlit. Nezapomínejte však vše kontrolovat. Může se stát, že pluginy sloužící k optimalizaci mohou rozbít některou z funkcí webu (viz komplikace s Revolution sliderem). Rozhodně však nezapomínat na optimalizaci obrázků, cache, komprimaci a minify.

Website speed test
Website speed test
PageSpeed Insights
PageSpeed Insights

Zajímají vás naše další tipy ohledně zrychlení WordPress stránky? Podívejte se na našeho kompletního průvodce optimalizace rychlosti a výkonu WordPress stránky.

Správa WordPress webu

Nemusíte na to být sami. Pomůžeme vám s pravidelnou údržbou i novými vylepšeními.

Více informací

19 názorů na “Optimalizace rychlosti načítání webu na WordPress bez znalosti programování”

  1. K tomu WP Smush It doporučuji program na Windows FileOptimizer. Je zdarma a zoptimalizuje jakýkoliv obrázek. Tak před nahráním na webhosting obrázky projet tímto a na ty náhledy atd už stačí ten Smush It, jelikož mají většinou pod 1MB.

  2. Tome jsi si jistý, že Pingdom Website Speed Test je spolehlivý, každé měření mi v poslední době hází jiný výsledek a jiné body.

  3. Děkuji za info, zdá se že to pomohlo. Jen jsem se chtěl zeptat u toho pluginu Better WordPress Minify je spousta dalšího nastavení, nechával jsi to výchozí nastavení nebo je třeba to nějak ještě změnit?

  4. Co se týče optimalizace obrázků, tak doporučuji také vyzkoušet modul Photon pro Jetpack: http://jetpack.me/support/photon/

    Ten sice obrázky přímo na serveru neupravuje, takže diskové místo za vás neuvolní, ale zato obrázky v těle příspěvků a stránek + náhledové obrázky, nahraje zdarma na CDN vytvořené pro WordPress.com a při zobrazení na webu si ze zmíněného CDN vyžádá obrázky jen a pouze v požadované velikosti (takže jinou velikost obrázku pro desktop, jinou pro mobil). Tím ušetříte cenné vteřinky při přenosu zbytečně velkých obrázků.

    Další výhodou, než přejdete na http/2, je, že obrázky z CDN může prohlížeč stahovat paralelně s dalším obsahem (jsou z jiné domény). Takže web se bude zase načítat o něco rychleji 🙂

    Jak jsem říkal – Photon nic přímo nemění, takže jej lze snadno zas vypnout, je-li to třeba. Tomáši, zajímalo by mě, jak by takový Photon dále (ne)pomohl s rychlostí načítání.

    1. U CDN která nejsou tu v CZ je otázka zda-li ta úspora je skutečná, protože to co se uspoří na velikosti obrázků se načte na vzdálenosti. Mě spíše že šetří výkon serveru než v rychlosti načtení.

  5. Ahj, nevěděl by jste někdo jak optimalizovat JS a CSS? Zkoušel jsem už mnoho pluginů, ale stále se mi nedaří. Buď nepomůžou nebo úplně rozhodí stránky. Tedy některé pluginy z tohoto článku pomohly, ale stále si myslím, že by to mohlo být i lepší. Děkuji.

  6. Ahoj, supr stránky děkuju za návody. Chtěl bych tě poprosit o radu…nevíš proč mi PageSpeed Insights furt hlásí ať optimalizuju obrázky? Přitom obrázky jsem zkoušel před nahráním na web komprimovat tady třeba https://tinypng.com/ a mám i plugin WP Smush a tím jsem všechny fotky taky upravil ale furt mi to píše Optimalizujte obrázky, Správným formátováním a komprimací obrázků lze ušetřit velké množství dat. Optimalizujte následující obrázky a jejich velikost se zmenší o 663,7 kB (zmenšení o 79 %). Mám skore 76 mobile a kvůli těm obrázkům jen 58 desktop. Počet úspěšně splněných pravidel: 7. Moc děkuju za jakoukoliv radu.

    1. Tomáš Cirkl

      Ahoj,

      Google Insight by měl napsat o jaké obrázky se jedná, nebo ti žádné neukazuje?

      1. No právě že mi je píše. Jde o 9 obrázků které mám na úvodní straně jako náhledy které se otevřou v lightboxu. Když je odstraním tak mám skore 90. Ale nevím jak je mám ještě optimalizovat jinak aby mi to přestalo hlásit ať je upravím. Už teď velikost dohromady těch devíti obrázků je 1 MB. Kde může být chyba…? Mám je do stránky vložit nějak jinak? Děkuju ti

        1. (Amatér, bez záruky – mám za to, že Goo porovnává místo pro obr. s jeho velikostí = pokud je větší, zdržuje načítání) Mě u jednoho webu pomohlo i jen to, že jsem si stáhl Googlem nabídnuté optimalizované obr. a vrazil jsem je tam zpět. A pomohlo.

          Chyba může být také v tom, že velikost boxu pro obrázek je třeba š. 350 px, ale šablona generuje ve functions.php různé rozměry pro různá místa pro jejich zobrazení, a v tom tvém boxu je obrázek fyzické šíře třeba 470 px, jen “na tvrdo” přizpůsobený tomu boxu.
          Jak ověřit rozměry? Ve Firefoxu (Chrome) F12 = prozkoumat prvek, najít jeho šířku v pixelech (příp. změřit si ji na stránce nějakým doplňkem prohlížeče pro měření, u mě ve FF doplněk Measure it). Pak buď pr. tlač. nad obrázek ve stránce, kontext menu Zobrazit obrázek a zjisti si u něj rozměr v px, připadně alternativně: ve FF pravým do stránky > kontext. menu > Zobrazit vlastnosti stránky > tam záložka Média > tam ho najdi, tam jsou jeho fyz. rozměry vidět.
          No a porovnej rozměry.

  7. Co se týče té optimalizace obrázků…. nezkazí se nějak jejich kvalita?

    Jinak jakou variantu byste mi doporučili? Jsem začátečník, takže asi něco snadného na ovládání. Blog mam teprve chvili, ani to ještě nikde nesdílím, chci právě nejdříve vyřešit všechny formality, viz. rychlost načítání =)

    Děkuji Vám moc

    Karolína P.

    1. Tomáš Cirkl

      Nekazí. Je to tzv. bezztrátová komprese, při které se odstraní například nepotřebné meta informace. Kvalita je zachována.

  8. Dobrý den, Tome,
    nevím, co jsem udělala špatně, nicméně po instalaci všech doporučených pluginů se web téměř nenačte, vymazaly se veškeré obrázky, nelze editovat stránky v adminu wordpressu atp. prostě se to celé úplně pokazilo 🙂 Nemohl byste mi prosím nějak pomoci? Díky moc, Helena

  9. Zdravím,
    dobrý návod pomohlo mi to dost k zrychlení, bodově jsem dosáhl 75/86. Jen asi jediné záležitost s čím si nevím rady, na obou dvou webech při testu mám problém s títmo (poze výnatěk z několika desítek řádků):

    Využijte načítání do mezipaměti prohlížeče
    /images/menu-icon.png (není určeno vypršení platnosti)
    uploads/2018/02/technology1.jpg (není určeno vypršení platnosti)
    wp-includes/css/dashicons.min.css (není určeno vypršení platnosti)
    wp-includes/js/jquery/jquery.js (není určeno vypršení platnosti)
    wp-content/cache/autoptimize/css/autoptimize_6b90a61042d1481eee095ba3a9b8cb4e.css (3 sekundy)

    Už mě nenapadá kde hledat, nevíte co s tím?

Diskuze

Vaše e-mailová adresa nebude zveřejněna. Vyžadované informace jsou označeny *

Nákupní košík

Neuteklo vám něco?

Pokrok a WordPress na nikoho nečekají, tak nám tu raději nechte e-mail, ať o nic nepřijdete!

Zkontrolujte svoji doručenou poštu nebo spam koš, abyste mohli svůj e-mail potvrdit.

Vylaďte WordPress stránky s naším tahákem

V e-booku najdete informace a rady pro WordPress od A do Z. Zadejte e-mail a my vám WordPress tahák pošleme.

Zkontrolujte svoji doručenou poštu nebo spam koš, abyste mohli svůj e-mail potvrdit.

Přejít nahoru