Většina magazínů nebo blogů je postavena na redakčním systému WordPress. Jedná se o CMS (systém pro správu obsahu), tedy o redakční systém psaný přímo na míru těm, co hledají platformu pro svůj blog zdarma.
WordPress je svobodný open source redakční publikační systém napsaný v PHP a MySQL a vyvíjený pod licencí GNU GPL. Je oficiálním nástupcem systému b2/cafelog a má širokou uživatelskou a vývojářskou komunitu. Počet stažení předchozí verze 4.9 dosáhl od vydání téměř 174 milionů.
A jelikož je tak rozšířený, i tento magazín ho používá. Na FreeBit.cz je prakticky od startu v roce 2009. Předtím byl obsah pouze na jedné statické stránce a pořád se obměňoval. Chci se tedy rozepsat o tom, jak se za prakticky deset let web posunul v rychlosti načítání stránek. Google má rychlé weby rád!
První krok pro optimalizaci načítání webu
Soubor .htaccess je umístěný na FTP prostoru vašeho serveru. Tento soubor v adresáři dovoluje adminovi webu upravit chování složek. Doporučujeme aktivovat kompresi mezi serverem a zařízením, kam se data posílají. Aktivace webové komprese sníží datovou náročnost přenášených dat (data se na serveru zabalí, putují zabalená a díky výkonu koncové stanice se opět rozbalí). Na českých serverech se víceméně podporuje několik komprimačních formátů. Jedním z nich je GZIP a druhým Brotli.
Nejvyšší kompatibility se dočkáte u GZIPu (starší, ale přes to účinná komprese). Novější, často efektivnější je algoritmus Brotli z dílny společnosti Google. Jedná se o výkonnou komprimaci obsahu. Je efektivnější a můžete si vyzkoušet, jak servery na tyto komprimace budou reagovat. Na internetu najdete i stránky, kde si ověříte, zdali je komprimace dat zapnuta a funguje správně. Parametry .htaccess a .user.ini. spolu začnou fungovat po jednom kroku serveru, což je cirka 5 minut.
Aktivace je poměrně snadná. Stačí vložit kód do souboru .htaccess a .user.ini. Pokud soubor .user.ini na FTP serveru nemáte, stačí jej pomocí webového rozhraní vytvořit. Brotli je funkční pouze u zabezpečené komunikace přes protokol HTTPS v kombinaci s PHP 5.6 nebo vyšším. Pokud již nějaký z módů DEFLATE používáte, můžete jakýkoliv řádek z kódu odstranit. Kód je nutné vložit za generované řádky WordPressu. Redakční systém je občas maže. Pamatujte v zápisu na posloupnost.
Kód vložte do .htaccess:
<IfModule mod_deflate.c> AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/json AddOutputFilterByType DEFLATE application/vnd.ms-fontobject AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/font-sfnt AddOutputFilterByType DEFLATE font/otf AddOutputFilterByType DEFLATE font/ttf AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE image/vnd.microsoft.icon AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/html </IfModule>
Do souboru .user.ini pak zkopírujte zlib.output_compression = On
Kód vložte do .htaccess:
<IfModule mod_brotli.c> AddOutputFilterByType BROTLI_COMPRESS application/javascript AddOutputFilterByType BROTLI_COMPRESS application/json AddOutputFilterByType BROTLI_COMPRESS application/vnd.ms-fontobject AddOutputFilterByType BROTLI_COMPRESS application/xhtml+xml AddOutputFilterByType BROTLI_COMPRESS application/xml AddOutputFilterByType BROTLI_COMPRESS application/font-sfnt AddOutputFilterByType BROTLI_COMPRESS font/otf AddOutputFilterByType BROTLI_COMPRESS font/ttf AddOutputFilterByType BROTLI_COMPRESS image/svg+xml AddOutputFilterByType BROTLI_COMPRESS image/vnd.microsoft.icon AddOutputFilterByType BROTLI_COMPRESS text/plain AddOutputFilterByType BROTLI_COMPRESS text/css AddOutputFilterByType BROTLI_COMPRESS text/xml AddOutputFilterByType BROTLI_COMPRESS text/html </IfModule>
Do souboru .user.ini pak zkopírujte brotli.output_compression = On
Kámen úrazu jsou obrázky, jak na jejich komprimaci?
Velký díl mají na rychlosti webu obrázky. Webmaster nahraje na server obrázek, zjistí, že má přes 500 kB. A co s tím? Nejedná se pouze o obrázky samotné, ale i o jejich náhledy. Dobrým pomocníkem je plugin ShortPixel nebo Imagify. Jedná se o platformu na kompresi obrázků ve WordPressu. Umí toho poměrně hodně. Můžete si koupit kredity nebo zaplatit měsíční paušál. Mě osobně se líbili kredity na účet. Zaplatíte a spotřebujete to, co se začne komprimovat. Plugin je automatizovaný a komprimuje další soubory nahrané na FTP server.
Základem je vložit API klíč. Vyberete ztrátovou kompresi a nastavíte kompresi také pro náhledové obrázky. Plugin umí odstranit EXIF data z obrázku. V pokročilém nastavení umí také WebP. Ty mohou být až třikrát menší, než PNG a o 25 % menší, než JPG. WebP nebo JPEG 2000 doporučuje i Google. Obrázky zmenší na FTP serveru klidně i o 69 %. Mě plugin na FTP ušetřil skoro dva gigabajty místa. Jeden obrázek = jeden kredit. 15 000 kreditů vyjde na 9,99 USD. Velkým plusem a benefitem při rychlosti je i CDN ShortPixelu. On si totiž nahrává obrázky do mezipaměti k sobě a posílá je k návštěvníkovi ze své sítě.
Optimalizujte JS, CSS a HTML. Odstraňte mezery v načítání
Mezi další pluginy zrychlující WorpPress patří optimalizační pluginy CSS, JavaScriptu (JS) nebo HTML kódu. Redakční systém WordPress není vybaven dobrým kódem a tak mu musíme trochu pomoci. Je nutné agregovat všechny propojené soubory JavaScriptu tak, aby byly načteny bez blokování vykreslení. Načítat je tedy až v patičce. Musíme také shromáždit všechny propojené soubory CSS. Pozor na detailnější nastavení pluginů, mohou vám částečně poškodit kód a tím znefunkčnit web. Vše ale můžete vrátit zpět.
Pokud vše nastavíte pluginem Autoptimize na jednotku, dostanete o řád vyšší výkon načítání stránek na WordPressu. Pokud rychlost nebude stačit, můžete serveru pomocí cache (kešovacím) pluginem. To však strhnete grafické kolo na měření google.com/pagespeed/. Google má na svém testu rovných 100 bodů (desktopová verze), tak se můžete pochlapit. Je ale jasné, že se částečně bodové hodnocení odvíjí od toho, jak se server „vyspal“. Pokud hodnoty stále nejsou dostatečné, doporučoval bych kontaktovat podporu hostingu. Popřípadě přejít na vyšší tarif.
Závěr a další bonusové tipy na zvýšení rychlosti WordPressu
První vykreslení obsahu na stránce se vám musí povést za méně než 0,7 vteřiny. První smysluplné vykreslení také. Berte v potaz to, že některé úkony jsou vázány na další úlohy na serveru. Je tedy nutné počkat. Díky optimalizaci obrázků a optimalizaci kódu se dostanete na velice zajímavá čísla. Některé české weby jsou na tom s rychlostí načítání webových stránek opravdu žalostně. To může být právě výhoda ve fulltextu Googlu. Znáte to, každý SEO bod se počítá. Protože, pokud se stránka nenačte do 4 sekund, lidé nenávratně odcházejí.
Bonusový tip je funkce Lazy Load. Tedy pomalé načítání obsahu na webové stránce. Funkce umí vykreslovat pouze to, co uživatel aktuálně vidí. Pokud tedy napíšete článek, který má více obrázků a je dlouhý, načtou se pouze ty, které jsou aktuálně vidět. To zvýší rychlost načítání stránek, ale také uživatelský komfort. Zkuste Lazy Load na WordPressu a podělte se do komentářů, jak to na vás působí.
Pokud se nedaří optimalizovat mobilní verzi webu – nevadí. Pro tyto případy je zde AMP verze, tedy verze stránek, kterou má Google ve své mezipaměti. Odlehčený obsah se načítá z Google datacenter a věřte, že ten blesk u obsahu tam není nadarmo. Rychlost vám pomůže dohnat konkurenci. Protože to, co nemají oni, je vaše zbraň.
