Jak jsem zrychlit web na WordPressu o více než 84%

Jak jsem zrychlil web na wordpress o vice nez 84 procent

V tomto článku bych vám chtěl popsat, jak jsem zrychlit web na WordPressu o více než 84%. Tedy konkrétně tento web, který si zrovna prohlížíte. Aplikace je možná na jakýkoli web na WordPressu. Ukáži vám, jaké hodnoty měření jsem pořídil na začátku, nežli jsem začal web optimalizovat a jaké hodnoty jsou nyní. Tedy po optimalizaci a zrychlení webu.

Původní hodnoty nebyly až tak špatné, ale když jsem na vlastní oči viděl, že se dá celkem robustní web zrychlit pod jednu vteřinu, byla to pro mě výzva. Začal jsem pročítat různé články a návody, zkoušel jsem různé programy a snažil se z nich vybrat to, co mi nejlépe zafungovalo.

Toto jsou původní hodnoty, které jsem naměřil pomocí nástroje Pingdom Website Speed Test:

Původní hodnoty webu v Pingdom Tools

Zde jsou kroky, které jsem postupně na webu udělal:

Optimalizace databáze

WordPress ukládá někdy spoustu zbytečností, jako jsou automaticky uložené koncepty článků, revize stránek nebo komentářový SPAM. Databáze tak zbytečně bobtná a je fajn ji čas od času pročistit.

Zkoušel jsem pluginy WP-Optimize, WP DBManager a WP Sweep. Jako nejlepší se mi jeví WP Sweep, který vyčistil databázi nejlépe. WP-Optimize a WP DBManager každý z nich vyčistil jen část toho, co bylo potřeba.

Optimalizace obrázků

Čím menší bude stránka, myslím tím velikost v kilobajtech, tím rychleji se bude zobrazovat. Tzn. čím menší obrázky budete na webu mít, tím bude stránka menší a bude se rychleji načítat. Existuje řada optimializačních pluginů, které obrázky zmenší už při samotném nahrávání na web. Případně i dodatečně, když už na webu jsou. Já osobně si obrázky zmenšuji u sebe v počítači před tím, nežli je na web nahrávám. Zde je pár pluginů, které jsem zkoušel nebo je doporučuji zákazníkům: EWWW Image OptimizerCW Image Optimizer a WP Smush.

Postupné načítání obrázků

Nastavením postupného načítání obrázků je další způsob, jak snížit počet http dotazů a tím zrychlit nečtení stránky. Při načítání stránky se nenačtou všechny obrázky hned, ale jen ty, které jsou vidět. Ostatní se načítají postupně, podle toho jak uživatel scroluje (posunuje) stránku dál. Použil jsem plugin BJ Lazy Load. Stačí plugin nainstalovat, zkontrolovat nastavení a o nic dalšího se nemusíte starat.

Kešovací (Cache) pluginy

Cache plugin je takový plugin, který uloží vygenerované stránky do mezipaměti a návštěvníkům webu je zobrazuje právě z této paměti. Tzn. Nemusí se pokaždé generovat znovu.

Zkoušel jsem WP Super Cache, W3 Total Cache a WP Fastest Cache. První dva jmenované mi přijdou pro začátečníka moc složité a navíc jsem u nich nedosáhl takových výsledků jako u WP Fastest Cache. Nastavení WP Fastest Cache je velice jednoduché. Plugin je ve verzi Free a Pro. Verze Pro umožňuje nastavit Cachování i pro mobilní zařízení. Nabízí Minifikaci Plus, což by měla být lepší komprese CSS, HTML i JavaScriptu. Dále Optimalizaci obrázků, logování a statistiky.

Cache .htaccess

Další Cache, tentokrát na straně klienta. Většího zrychlení se dá dosáhnout minimalizací počtu HTML požadavků při načítání stránky. V souboru .htaccess můžete povolit ukládání statického obsahu (obrázky, skripty a styly) do vyrovnávací paměti na straně klienta.

Zde je krátká ukázka:

Cache .htaccess

CDN – Content Delivery Network neboli sít pro doručování obsahu

CDN se skládá z většího počtu míst po celém světě, které redistribuují obsah vašeho serveru lokálně a nahrávají do paměti cache soubory, které nepotřebují být často aktualizovány. Tzn. soubory, které se na vašem webu moc často nemění se mohou načítat z jiných serverů a tím tak ulehčit tomu vašemu. V Evropě je 11 datacenter, odkud se mohou načítat vaše soubory.

Já jsem použil https://www.cdn77.com/, který mi přišel nejjednodušší a hlavně cenově nejdostupnější. Ano, toto už je placené řešení.

Odložené načítání JavaScriptu

Zpracování JavaScriptu na stránce je jedna z nejčastějších zpomalení vykreslování stránky. Funguje to tak, že prohlížeč zpracovává kód stránky od shora dolů. Když narazí na značku <script>, prohlížeč zastaví vykreslování, stáhne externí soubor (je-li definován atributem src) a JavaScript zpracuje.

Když na začátku stránky umístíte několik externích knihoven (nejlépe nějaké velké), prohlížeč začne jednu za druhou stahovat, zpracovávat a až po zpracování všech začne vykreslovat další obsah. Je vhodné umístit všechny externí JavaScripy před značku </body>.

Pro použití odloženého zpracování – atribut defer jsem našel několik pluginů. Zkoušel jsem jeden – WP Deffered JavaScript. Moc mi ale nevyhovoval a tak jsem použil funkci, kterou jsem vložil do souboru functions.php přímo v šabloně.

// Defer Javascripts
// Defer jQuery Parsing using the HTML5 defer property
if (!(is_admin() )) {
function defer_parsing_of_js ( $url ) {
if ( FALSE === strpos( $url, ‚.js‚ ) ) return $url;
if ( strpos( $url, ‚jquery.js‚ ) ) return $url;
// return „$url‘ defer „;
return „$urldefer onload='“;
}
add_filter( ‚clean_url‘, ‚defer_parsing_of_js‘, 11, 1 );
}

Po použití všech technik, které jsem vám tady ve zkratce popsal, jsem dosáhl výsledku, který je vidět na obrázku.

Hodnoty webu po optimalizaci v Pingdom Tools

V dalších článcích bych se chtěl věnovat jednotlivým částem více. Proto, pokud vás toto a další témata zajímají, zaregistrujte se k odběru novinek a nic vám neunikne.

Novinky na váš Email

Zadejte váš Email a budu vám posílat tipy a informace o nových článcích na Blogu

Komentáře
  1. Jakub Pavlík napsal:

    Skvělé! Moc mi to pomohlo. Díky 🙂

  2. jakub4027 napsal:

    To odložené načítáí java skriptu. Mám tedy vložit celý ten kód a kam ho v tom functions.php vložím?:) Díky!

  3. To je jedno. Jestli na začátek nebo na konec. Kamkoli 🙂

  4. Lucie Šestáková napsal:

    Skvělý návod,který jsem vyzkoušela na několika svých webech a skutečně funguje. Palec nahoru :-)..díky moc.

  5. Kristina Uhlířová napsal:

    Naprosto dokonalé rady! Pomohlo mi to moc!!!Děkuji!!!


Warning: file_get_contents(): SSL operation failed with code 1. OpenSSL Error messages: error:14077410:SSL routines:SSL23_GET_SERVER_HELLO:sslv3 alert handshake failure in /mnt/data/accounts/a/andrlikt1/data/www/andrliktomas.cz/wp-content/themes/mioweb/skin/comments.php on line 32

Warning: file_get_contents(): Failed to enable crypto in /mnt/data/accounts/a/andrlikt1/data/www/andrliktomas.cz/wp-content/themes/mioweb/skin/comments.php on line 32

Warning: file_get_contents(https://www.andrliktomas.cz/wp-content/themes/mioweb/modules/visualeditor//images/icons/left.svg): failed to open stream: operation failed in /mnt/data/accounts/a/andrlikt1/data/www/andrliktomas.cz/wp-content/themes/mioweb/skin/comments.php on line 32

Warning: file_get_contents(): SSL operation failed with code 1. OpenSSL Error messages: error:14077410:SSL routines:SSL23_GET_SERVER_HELLO:sslv3 alert handshake failure in /mnt/data/accounts/a/andrlikt1/data/www/andrliktomas.cz/wp-content/themes/mioweb/skin/comments.php on line 33

Warning: file_get_contents(): Failed to enable crypto in /mnt/data/accounts/a/andrlikt1/data/www/andrliktomas.cz/wp-content/themes/mioweb/skin/comments.php on line 33

Warning: file_get_contents(https://www.andrliktomas.cz/wp-content/themes/mioweb/modules/visualeditor//images/icons/right.svg): failed to open stream: operation failed in /mnt/data/accounts/a/andrlikt1/data/www/andrliktomas.cz/wp-content/themes/mioweb/skin/comments.php on line 33

Přidat komentář

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