V tomto článku bych vám chtěl popsat, jak jsem zrychlil 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: 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 Optimizer, CW 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 nač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: 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 propertyif (!(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 $url defer onload='; } add_filter( clean_url, defer_parsing_of_js, 11, 1 ); } POZOR: Ve WordPressu verze 5.0 a výše tento kód ve functions.php nefunguje. Zkuste raději plugin Async plugin 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. 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.
Sdílet1Sdílet0Sdílet0Sdílet0Sdílet0Hned několik studií se rozhodlo využít Black Friday (v USA připadá na 24. listopadu) a Cyber Monday (27. listopadu) k ohromným slevám svých produktů. Nenechte si ujít ani jednu, tento článek slouží jako rozcestník ke vše
Opravy webů, aktualizace a správa webových stránek Právě jste našli svého partnera na WordPress. A to nejen na tvorbu webových stránek, ale i na marketing, servis a vše, co bude nový web potřebovat. Mezi nejčastější opravy webů ve WordPressu, které provád
projít na článekVydání knihy Krev budoucnosti se posunulo blíže k finalizaci. Díky tomu, že jsem měl více práce jsem nabral pořádné zpoždění, ale před prázdninami jsem se do práce zakousl a o víkendu jsem ji odeslal k lektoraci. Víte co to lektorace je? V podstatě jde o
projít na článekVíce než 1 milion aktivních uživatelů využívá jeden z nejoblíbenějších kontaktních formulářů pro WordPress. Jde o plugin Contact form 7 a v tomto článku vám ukáži, jak stylovat Contact form 7 formuláře ve WordPressu. Jedna z nevýhod Contact form 7 je ta,
projít na článekVidíte ve WordPressu chybu Briefly unavailable for scheduled maintenance. Check back in a minute.? V češtině toto sdělení znamená: Krátkodobě nedostupné pro plánovanou údržbu. Vraťte se za minutu. Tato chyba se obvykle objevuje po aktualizaci jádra, plugi
projít na článek