WordPress návody

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

fast pc
Autor příspěvku Tomáš Cirkl

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 danný 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.

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ší…

ČTĚTE TAKÉ  Upravte stránku nebo příspěvek jednoduše pomocí Slash Edit

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.

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 deaktivovali 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

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.

ČTĚTE TAKÉ  Jak zvýšit maximální velikost nahrávaného souboru ve WordPressu

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 v „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

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

Školení pro pokročilé uživatele

Chcete se o rychlosti webů na WordPress dovědět více, přijďte na školení pro pokročilé uživatele.

O autorovi

Tomáš Cirkl

Baví mě Internet a zvláště pak redakční systém WordPress. Jsem pravidelným účastníkem a přednášejícím na WordCamp Praha a WordPress konferencích.

10 komentářů

  • 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.

  • 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.

  • 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?

  • 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í.

    • 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í.

  • 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.

Zanechat komentář

Share This
Nenechte si ujít žádný článek!

Nenechte si ujít žádný článek!

Připojte se do našeho emailového seznamu a získejte informace, novinky a návody ze světa WordPressu.

Úspěšně jste se zapsali do našeho newsletteru. Děkujeme!