uptade 24.04.2020

Dlouho očekávaný článek o optimalizaci rychlosti Divi je tady. Ve skupině jsem to několikrát naznačila, že se tento článek rýsuje, ale protože je mnoho práce, nestíhám vydávat články tak pravidelně, jak bych chtěla. Ale konečně je to venku a doufám, že pomůžu mnohým nejen začínajícím uživatelům Divi.

Pro nezasvěcené: Divi je super, jen se s ní musí umět

Divi vnímám ne jako šablonu, ale jako designérský framework. Protože ale nabízí mnoho nastavení a modulů, načítá si o to, co vy ve skutečnosti ani na webu nepoužijete. Nick Roah, CEO v Elegant Themes, který stojí za Divi, mi ovšem jednou odpověděl na komentář, který se týkal právě optimalizace rychlosti. Napsal něco ve smyslu, že pracuji na tom, aby Divi byla rychlejší a aby nenačítávala moduly a nastavení, které nejsou na webu použité.

Nejlepší, z mého pohledu, by bylo, kdyby všechny moduly a nastavení nebyly defaultně součástí Divi, ale byly by uložené někde na straně Elegant Themes a ten modul, který bych chtěla použít by se stáhl. Podle mě by to byl proveditelný a smysluplný krok.

Samozřejmě se nedá přehlédnout neustálé plivání „velkých odborníků“ na Divi, je pomalá, vhodná jenom pro malé prezentace, bla bla bla… : ).

Divi je nástroj. A každý nástroj je takový, jaký je jeho uživatel. Většinou nebývá chyba v Divi, ale mezi počítačem a židlí – tedy ve vás.

Samozřejmě já vnímám obrovské nedostatky Divi (například málo gridů, špatná práce s ACF ve výpisech, nefunguje mi z nějakého důvodu vlastní .page-template a mnoho dalšího). Takže to není tak, že bych Divi opěvovala kudy chodím, nedostatky vnímám velmi zřetelně. Jde ale o to, že Divi opravdu není špatný nástroj. Je jenom špatný uživatel.

Pokud vás Divi zajímá a chcete se s ní naučit, můžete si předplatit roční předplatné za 89 dolarů anebo rovnou lifetime licenci za 249 dolarů. Pro začátek doporučuji ale roční, pokud vás Divi nenadchne, nebude vás to bolet.

(všechny odkazy se otevřou v novém okně )

Ale konec tlachání. Jdeme k věci:


Hosting

Divi je těžká thema a proto potřebuje i solidní hosting. Je to tak. Takže žádný lowcost hosting typu Wedos, prosím. Já používám Onebit webhosting (balíček Business, Home stačí na malé prezentace o pár stránkách) a WP-Hosting.

Protože jsem pohodlný, až liný, člověk, ráda si vše zjednodušuji. Onebit má tak úžasnou podporu, minimalistickou administraci, že se v nastavení nebude ztrácet ani nováček. Vše je na klik (WordPress si ale instaluji „po staru“, ne přes instalaci „na kliknutí“), aktivace SSL zdarma (stačí kontaktovat podporu) i pro subdomény, zdarma vám vytáhnou a obnoví web ze zálohy, odpovídají zpravidla do 10-15 minut a dokonce mi jednou zavolali sami, aby zjistili více informací ohledně jednoho problému, co jsem řešila. Když převádím web z jiného hostingu (anebo doménu, většinou oboje), tak všechno zajistí – já jim jenom dodám informace a můžu si hodit nohy na stůl. Jednoduše je pro mě Onebit číslo jedna.

V minulém článku, který jsem věnovala právě výběru hostingu, jsem zmiňovala jaké parametry jsou nutné pro svižný chod Divi, tak znova si to zopakujeme a doplním to:

  • .php verze 7.2 a vyšší  – doporučuji vždy nejnovější verzi php verzi (kvůli bezpečnosti i rychlosti), pokud máte zastaralou verzi, udělejte si kopií webu a vyzkoušejte si, co vám změna provede s webem, nikdy to nezkoušejte na ostrém webu.
  • memory limit 128M – při nízkém limitu aplikace jednoduše selže, pokud máte limit nízký kontaktujte hosting. Tohle je jedna z nejdůležitějších metrik.
  • max execution time 120 – já používám sice 60, ale žádný problém jsem ještě nezaznamenala. Pokud ale tvoříte weby přes layouty, tak se může stát, že kvůli malému limitu se vám je nepovede stáhnout.
  • max input time 120 – i tady mám 60 a zatím bez problémů, pokud se vám ale nedaří načíst Visual Builder, problém bude nejspíše tady, takže opět – navyšte parametry.
  • upload max filesize 64M – metrika ukazující jak velké média můžete uploadnout. Když limit je nízký, můžete mít problém s velkými layouty. Ale já doufám, že nic tak velkého nenahráváte. U zkopírování webu na ostrou doménu si zakupte ulimited extension k WP All in one Migration, nebo kontaktujte hosting.
  • max input vars 1000 – když je limit malý, můžete mít problém s načtením Visual Builderu.

I když se pořád dokolečka omílá téma hostingu, někteří si nedají říct a kvůli pár „ušetřeným“ šušňům vstupují neustále do stejné řeky levných, nekvalitních a problémových hostingů (ano, Wedos).


Zálohy a child theme

Před tím, než začnete cokoliv z návodu zkoušet, ujestěte se, že:

Máte zálohy

Použijte k tomu například známý a oblíbený plugin Updraft Plus, který vám sezálohuje celý web včetně databáze.
Proveďte zálohu htaccess.

Mějte jistotu, že na hostingu máte také zálohu.

A pro jistotu si web vyexportujte přes WP All in one Migration.

Mějte tolik berliček, kolik jen můžete.

Máte child themu

O child theme napíšu jindy. Pokud nevíte, jak se tvoří, vygenerujte si ji na divicake. Vygenerovaná childka vám přijde na email. Naprosto rychlý a bezbolestný způsob.

Pozor ale, childku instalujte na nový web, nikoliv na již běžící web, protože všechny změny byste museli ručně převádět do childky.

Pracujete na testovacím webu

Zkopírujte si přes výše uvedený duplikátor web a nahoďte si jej na subdoménu, anebo si pro testovací účely udělejte nějaký jednoduchý webík. Pokud nejste ve WordPressu zběhlý, prosím, nikdy, NIKDY, nedělejte změny na ostrém webu. A už vůbec ne na webu, který vám nějakým způsobem generuje příjem.

Pokud se nevyznáte v kódech, raději vždy sáhněte po pluginech. Ale také to neznamená, že jsou naprosto bezpečné. Pokud změny chcete provést po testování i na ostrém webu, doporučuji vždy ten web zkopírovat i s pluginy a nastavením, který máte. Pokud se neobjeví chyba na jednoduché testovací stránce se žádným pluginem, neznamená, že vše bude fungovat i na webu s rozsáhlejšímu pluginy. Tak prosím, pozor na to. Nechci číst, že návod někomu odpálil web : D.


Vypněte zabudovanou Divi optimalizaci

Jako první krok, když nainstaluji Divi, vypnu CSS a Javacript minifikaci a generování statického souboru CSS.

Divi > Nastavení šablony > Všeobecné > zkrolujte dolů a zakažte „Zmenšit a kombinovat soubory Javascript“ a „Zmenšit a kombinovat soubory CSS“

Divi > Nastavení šablony > Nástroj na tvorbu > Pokročilé > zakažte „Generování statického souboru CSS“

Důvod? Protože budeme optimalizovat Divi jinak a když v jiném pluginu zapneme nastavení pro kompresi CSS a JS, udělá nám to zcela jistě velký bordel. Za další je defaultní komprese nízká a nedostatečná.


WP Optimize

Stáhněte si WP Optimize – nainstalujte a aktivujte na webu. Tento plugin je lehký a velmi účinný, používám jej úplně na všech webech, protože funguje opravdu bez problémů (vyměnila jsem jej za Autoptimize, který uměl nemálo pozlobit).

Tento plugin instaluji ihned na každém nové instalaci WordPressu (hned poté, co nastavím plugin Wordfence).

Jděte do nastavení pluginu > Cache > enable page caching.
Cache > preload používejte až když je něco na webu, takhle to jinak nemá smysl.
Cache > Gzip > Enable – gzip udělá s rychlostí webu divy.
Cache > Static file headers > Enable – většinou nastavuji expiration time na 15 dnů místo 28. Samozřejmě pokud neměníte tolik informace na webu, můžete ponechat 28 dnů.

Další nastavíme kompresi obrázků:

Images > Automatically compless newly-added images.
Nastavte si kompresi, jakou chcete (maximální komprese, upřednostnit detail nebo vlastní)
Škoda, že lazy-load je premium, ale na to budeme mít další lightweight plugin.

Výhoda pluginu je nejen to, že je lehký, ale i to, že má v sobě mnoho nastavení, které potřebujete. Další je čištění databáze.

Database > Optimization > run optimization u tabulek, můžete vyčistit revize (ne můžete, měli byste) a vše ostatní. Nečistím to, kde je vykřičník – nikdy ani nebyla potřeba.

Database > Tables – myslíte si, že když deaktivujete plugin a vymažete jej, že o stačí? Chyba, chyba. Tabulky pluginu vždy zůstávají (pokud nemají např. v nastavení, že se vymažou po smazání všechny tabulky, jako je to u dalšího pluginu A3 lazy load)


A3 lazy load

Další jednoduchý, rychlý a mocný plugin, který vám nastaví lazy loading obrázků. Prý to měla být součást WordPressu, počítalo se s ní teď, ale jaksi tato novinka nepřišla.

Stačí plugin aktivovat a jít do jeho nastavení

Plugin framework Global Setting > určitě aktivujte „House Keeping“ Clean up on deactivation.
Samotný lazyloading je už zaškrtnutý v dalším poli.
Další nastavení záleží na vás – některým obrázkům můžete přiřadit class a z lazyloadingu je vyjmout.
U Effect and Styles používám místo spinner nastavení Fade in. Ten spinner je škaredý.


Webcraftic Clearfy

Clearfy není moc známý, ale naprosto super plugin pro hloubkovou optimalizaci. Doporučuji jej aktivovat po ukončení prací na webu a ne na ostré verzi – vytvořte si kopií webu a na ní zkoušejte, protože se může stát, že některé věci se rozbijí. Takže co funguje mě, nemusí tak úplně fungovat vám.

Jděte do nastavení pluginu. První v menu je Quick start – doporučuji neklikat na Do It, ale raději si to vyklikat samostatně a sledovat změny na webu.

Druhá položka je ta nejdůležitější – Performance. Tady vám dávám screen s nastavením, jak to mám většinou já. Co se týče revizí, tak to můžete úplně vypnout, pokud chcete.

Divi: ultimátní návod na optimalizaci rychlosti

Zde by se vám nemělo nic pokazit, kdyžtak vyzkoušejte. Pokud například používáte FontAwesome, odškrtněte asynchronizaci, pokud to bude dělat nějaký border. Je to o tom každé nastavení pořádně vyzkoušet!

Další sloupeček je Minify (HTML/JS/CSS) tady se dostáváme k tomu hlavnímu.
HTML optimalizovat můžete, to se většinou nic nestane.

Dále zaškrtneme Optimize Javacript Code. Pokud je všechno v pořádku, zaškrtněte Aggregate JS-files. Agregování umí mnohdy pokazit web, pokud se tak stane, odškrtněte to.

Další nastavení mi nikdy nefungovalo a vše rozbilo.

To stejné udělejte s Optimize CSS Code.

Další nastavení v menu (SEO, Uptades (nedoporučuji automatické uptady!), Defence, atd) si projděte a nastavte si, co potřebujete. U Components můžete některé nastavení odinstalovat.

Dále bych vám chtěla ukázat Asset Manager – nastavení, kvůli kterému tento plugin mám ráda.
Jděte si na stránku (třeba úvodní) a v horní liště, kde si zapínáte Visual Builder máte i Clearfy > Asset Manager, to vás hodí do jeho administrace. Velmi přehledně vidíte, kolik máte requestů, kolik má stránka kB, kolik je optimalizováno.

Jako první v menu jsou Plugins, pokud nějaký plugin na te konkrétní stránce není použitý, nechceme, aby se načítal > dáme Dont load plugin. U pluginů, které používáme, můžeme odstranit CSS a JS, které nepoužíváme. Vyzkoušejte si to a zkontrolujte si web, kdyby něco nefungovalo, jednoduše to vrátíte nazpět.

Další nastavení jsou v menu „Misc“ a „Themes“. Opět si to proklikejte a odstraňte co se dá. U Divi je problém to, že například z divi.style nepoužívá 60 % a nejde vypnout jenom těch 60 %. Ale na to si ukážeme další způsob.

Je to časově náročné takto projít každou stránku na webu, ale co se dá dělat… : ).


Optimalizace bez pluginů

Někteří možná čekali, že se tady dozví něco převratného, nikdy neobjeveného (možná to bude další kapitola Optimalizace CSS?), ale zklamu vás. Jednoduše musíte mít zapnuté cache stránky i browseru, gzip kompresi, musíte si čistit databázi od bordelu…

Pokud nemáte zkušenosti s kódy, pokud nemáte child themu, nepoužívejte tento způsob a sáhněte po ,,bezpečnějším“ pluginu.

A abych teda přidala něco, co možná nevíte – celá optimalizace jde udělat i bez pluginů:

Gzip komprese: vložit do .htaccess pod #END WORDPRESS

<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml

  # Remove browser bugs (only needed for really old browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</IfModule>

Expires headers – vložit do .htaccess

# TN - START EXPIRES CACHING #
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css "access 1 month"
ExpiresByType text/html "access 1 month"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/x-icon "access 1 year"
ExpiresByType application/pdf "access 1 month"
ExpiresByType application/javascript "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresDefault "access 1 month"
</IfModule>
# TN - END EXPIRES CACHING #

Cache – vložit do .htaccess

# TN - BEGIN Cache-Control Headers
<ifModule mod_headers.c>
<filesMatch "\.(ico|jpe?g|png|gif|swf)$">
Header set Cache-Control "public"
</filesMatch>
<filesMatch "\.(css)$">
Header set Cache-Control "public"
</filesMatch>
<filesMatch "\.(js)$">
Header set Cache-Control "private"
</filesMatch>
<filesMatch "\.(x?html?|php)$">
Header set Cache-Control "private, must-revalidate"
</filesMatch>
</ifModule>
# TN - END Cache-Control Headers

Limit pro post revisions – vložit do wp-config.php

define( ‘WP_POST_REVISIONS’, 3);

anebo, pokud nechcete žádné revize:

define( ‘WP_POST_REVISIONS’, false);

Odstranění query strings (vyzkoušejte si prvně na staging webu!) – vložit do functions.php

function remove_cssjs_ver( $src ) {
if( strpos( $src, '?ver=' ) )
 $src = remove_query_arg( 'ver', $src );
return $src;
}
add_filter( 'style_loader_src', 'remove_cssjs_ver', 10, 2 );
add_filter( 'script_loader_src', 'remove_cssjs_ver', 10, 2 );

Odstranění RDS linků – když nepotřebujete pingbacky. Vložit do functions.php

remove_action( 'wp_head', 'rsd_link' ) ;

Odstranění emojis – functions.php

remove_action('wp_head', 'print_emoji_detection_script', 7);
remove_action('wp_print_styles', 'print_emoji_styles');
remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
remove_action( 'admin_print_styles', 'print_emoji_styles' );

Odstranění shortlinků (např doména.cz/?p=877), pokud nepoužíváte. Vložit do functions.php

remove_action('wp_head', 'wp_shortlink_wp_head', 10, 0);

Odstranění embed – pokud nepotřebujete vložit do příspěvků např příspěvek z jiného webu. Vložit do functions.php.

function disable_embed(){
wp_dequeue_script( 'wp-embed' );
}
add_action( 'wp_footer', 'disable_embed' );

Odstranění XML-RPC – pokud nepoužíváte wp API (některé pluginy to vyžadují!), Vložit do functions.php

add_filter('xmlrpc_enabled', '__return_false');

Schovat WordPress verzi – functions.php

remove_action( 'wp_head', 'wp_generator' ) ;

Odstranit WLManifest link (pokud používáte windows live writer – což je nepravděpodobné – tak nechat). Vložit do functions.php

remove_action( 'wp_head', 'wlwmanifest_link' ) ;

Odstranění jquery migrate, vložit do functions.php

function deregister_qjuery() { 
 if ( !is_admin() ) {
 wp_deregister_script('jquery');
 }
} 
add_action('wp_enqueue_scripts', 'deregister_qjuery');

Odstranění self-pingbacků (fakt hovadina) – vložit do functions.php

function disable_pingback( &$links ) {
 foreach ( $links as $l => $link )
 if ( 0 === strpos( $link, get_option( 'home' ) ) )
 unset($links[$l]);
}
add_action( 'pre_ping', 'disable_pingback' );

Odstranění heartbeatů – věděli jste, že hearbeat jede i když jste přihlášení v adminu a nic neděláte? Defaultně je to nastavené na 15 sekund, a to je fakt šílené – samozřejmě to zpomaluje stránku jak cip. Vložit do functions.php

add_action( 'init', 'stop_heartbeat', 1 );
function stop_heartbeat() {
wp_deregister_script('heartbeat');
}

Odstranění dashiconu pro uživatele – functions.php

function wpdocs_dequeue_dashicon() {
        if (current_user_can( 'update_core' )) {
            return;
        }
        wp_deregister_style('dashicons');
}
add_action( 'wp_enqueue_scripts', 'wpdocs_dequeue_dashicon' );

Optimalizace CSS

Přejděte na tuto stránku a vložte web do kolonky, následně vám vyjedou soubory CSS a k nim i statistika – kolik csska je nepotřebných. Když kliknete na „show clean css code“ můžete si zkopírovat čistý kód a vložit jej místo „zapraseného“ kódu.

Divi: ultimátní návod na optimalizaci rychlosti

Přihlaste se do FTP webu, a projděte si cestičku až k danému souboru, např:

wp-content/cache/wmac/css/wmac_single_78a694fb3376ec399efb4fef62d01ed6.css

Soubor si zkopírujte k sobě na plochu počítače a otevřte ho (poznámkový blok), zároveň si udělejte kopií, kdyby se něco nepovedlo. Smažte css a zkopírujte do něj upravený a čistý kód. Dejte uložit, smažte původní soubor co je ve FTP a vložte tam tento, upravený soubor.

Co se týče optimalizace JS, do toho jsem se nikdy nějak nepouštěla. Přes asset manager od Clearify jsem si odškrtla ty, které nepotřebuji.


Obrázky

Ano, pořád se to omílá. A pořád. A málokdo má obrázky na webu v pořádku co se týče správné velikosti, formátu a komprese. Upřimně tuto část nesnáším, protože jsem si našla fakt dobrý způsob na optimalizaci obrázků, ale bere to čas. Hodně času. Mnoho lidí si myslí, že stačí si nainstalovat plugin (např. Smush) a mají otázku optimalizace obrázků z krku. Mě komprimuje obrázky nastavení ve WP Optimize, které jsme si ukázali. Ale ještě před tím dělám následující:

Protože většinou mám hodně obrázků, udělám si v nich pořádek a pěkně si je vytřídím do složek v počítači.

Všechny PNG obrázky převedu do JPG
Pouze ty obrázky, které mají transparentní pozadí (vč. loga, faviconu) nechávám v png (jinak logicky ztratí transparentnost).
Používám tento nástroj: PNG2JPG

Formát svg používám pro logo, pokud je mi dodáno, jinak to nechám v png. Pro nahrávání svg do WordPressu nepoužívám pluginy, ale tento kód:

Videa dám na Youtube / převedu na WebM
Nenahrávejte videa do WordPressu. Pokud ale tak chcete učinit, převeďte jej do formátu webm na této stránce.
Převeďte i GIF soubory.

Problém je, že ne všechny browsery podporují tento formát.. A také musí vložit do wp-config.php toto:
define('ALLOW_UNFILTERED_UPLOADS',true);

Anebo tento kód:

Správná velikost obrázků
Na tom hodně záleží, takže nebuďte prosím líní a obrázky si nahrajte například do tohoto nástroje a nastavte správnou velikost. Tento nástroj je fajn, a můžete si tam ořezat obrázky a podobně.

Komprese obrázků
Před tím, než nahraju obrázek použiji nástroj ImageCompressor.

Komprese PDF
Pokud potřebujete na web vložit například ebook, použijte IlovePDF.

Nemám problém s obrázky, právě kvůli těmto činnostem. Obrázky samozřejmě velikostně upravujte i pro mobilní zařízení.


Těžké pluginy nepoužívejte

O pluginech jsem už něco málo napsala, ale určitě by si to zasloužilo ještě uptadnout. Každopádně, co nepoužívejte – těžké pluginy, snažit se můžete potom sebevíc. Mezi těžké pluginy řadím Jetpack (který fakt nepotřebujete), Woocommerce (který potřebujete pro prodej, ale používejte Asset Manager, aby se vám nenačítal na stránkách, kde obchod nemáte), a další. Samozřejmě zabezpečovací pluginy jako je Wordfence jsou také těžší, protože mají mnoho nastavení, ale protože je opravdu nutný, nic s tím nenaděláme.

Někdo má úchylku v tom, že si nastahuje milion pluginů a těší se z každé nové funkce, vyzkouší si několik z té kategorie a myslí si, že po deaktivaci a odstranění pluginu je všechno v pořádku. MUSÍTE si čistit tabulky v databázi.

Já používám co nejméně pluginů a opravdu mě rozčilují weby, které mají 20, 30, 60 pluginů. Je to zhovadilost a je mi úplně jedno, jestli někdo nebude se mnou souhlasit. Pod rukou se mi objevily takové hrůzné weby splácané přes pluginy (a od agentur!), které se rozpadaly už jen tím, že jsem se koukla do administrace, že mě opravdu nikdo nepřesvědčí, že na počtu pluginů nezáleží.

I to je důvod, proč doteď jsem nemusela řešit žádný mallware, nebo po aktualizaci, že nějaký plugin rozbil web. A pokud chcete mít optimalizovaný web – s pluginy tedy opatrně a čistěte tabulky po smazání.


Animace s mírou!

Každý Divi user je teď naprosto happy, protože vyšla nedávno aktualizace s novými scroll efects. Bohužel, většina webů, které používají tyto efekty jsou cirkusácké hrůzy. Co jsem zatím viděla, málokdo má cit pro jemné a nerušivé animace a efekty. Nepoužívejte je bez rozmyslu!

Efekty jsou sekavé (opravdu na to není dobrý pohled, a tak si říkám, že měli Eleganti ještě chvíli vyvíjet a nepouštět to do světa) a tudíž nepohodlné a pomalé pro uživatele.

A to se netýká pouze scroll effects, ale i běžných Divi animací. Pokud používáte jejich předpřipravené layouty, každá sekce je nějak zanimovaná. Vypněte to.

Já vypínám animace u upoutávek, nedávám animace u sekcí (a tyto animace mě neskutečně rozčilují na mobilech). Dávám je pouze tam, kde nenarušují procházení stránky.

Mám pocit, že mnoho lidí neví, že u animace ikonek u blurbs jde vypnout. Pokročilé > animace a tam máte defaultně „shora dolů“.


Musíte to s Divi umět

Na konec si nechám to nejhorší. Možná jste se v tomto článku nedověděli nic nového (to by mě mrzelo, tak snad aspoň i nějaké malé poznatky), ale tato část vám to zcela jistě vynahradí.

Jednoduše musíte s Divi umět a přemýšlet nad každým modulem a elementem.

Mám klientku z oblasti hotelnictví a můj úkol byl přetvořit web (protože se rozpadal – a opět agentura a opět milion zbytečných pluginů) a strata se o údržbu. Web jsem udělala 1:1.

Spolupráce je to super ale s jednou věcí neustále bojuji – pocitová rychlost je v pořádku, ale markeťákovi v Adwords pořád svítí mobilní zobrazení v červené (pokud se hosting dobře vyspí, tak v oranžové). I když oba víme, že jsem použila všechny moje zbraně a prostě ten Google Insight pořád neukazuje kýžené výsledky.

Aby bylo jasno – nejsem v té skupině webařů, kteří si zvyšují ego skrze zelené bodíky. Je to příjemný plus, ale pocitová rychlost a data bývají občas rozdílná!! Pokud ale web svítí červeně, je to špatně na každý pád a pokud někdo dělá kvalitní weby, nemělo by se to stávat.

Web jsem si převedla ještě k sobě a po nocích optimalizovala, přemýšlela, měla jsem bezesné noci a markeťák byl z mých keců už fakt unavený, protože o ničem jiném jsem nemluvila, jenom o rychlosti. Ale přežil to bez újmy.

Potom mě napadlo, že problém je někde úplně jinde a rozhodla jsem se udělat nový web pro můj pokus. Hotelový web nevypadá jako z mé dílny, protože já bych jej tak, jak je, neudělala, každopádně funguje a přiklonila jsem se k tomu, že lepší budou malé nenáročné a levnější změny, než to redesignovat úplně od znovu. A nejde přeci o mé ego a o to, abych já s tím byla spokojená. Důležití jsou návštěvníci a jejich názor.

Vrhla jsem se tedy na tajnou a novou tvorbu webu a udělala jsem to tak, jak bych chtěla, aby to vypadalo. Většinu věcí jsem odstranila / přesunula a výsledek byl takový, že jsem se objevila v zelených číslech a web svištěl jako drak.

Kde byl tedy největší problém – v samotné skladbě stránek. V použitých modulech, v chtíči nacpat všechno na jednu stranu.

A tohle se velmi špatně vysvětluje, protože musí být v tom určitý cit, praxe..

(jakmile dostanu svolení, dám sem i obrázky pro lepší pochopení o čem tady píšu)


Zabírá to čas? Je to ztráta času?!

Někteří mohou mít názor, že optimalizace Divi je ztráta času a proto jej nepoužívají. Raději si to nakódují od A do Z anebo použijí jiné řešení. Vám vám řeknu, že ne, není to ztráta času. Já optimalizací strávím cca 2 až 5 hodin a to mi opravdu nepřijde hodně. Největší část z toho mi ukousnou ty zatracené obrázky. Jinak vše ostatní dělám takřka automaticky.

Takové názory jsou jednoduše naprosto zcestné. Každý webař se učí a to celý život. Já si našla způsob, jak moje weby jsou obstojně optimalizované a beru to v rámci tvorby a nepočítám to na hodiny „tak, teď jsem strávila optimalizací X hodin“. Naprostá hloupost a blbost.

Možná ti „salámisti“, kteří dělají webíčky do jednoho týdne se nad tím stráveným časem zamýšlí, ale já ne, protože jeden web mi zabere minimálně měsíc (nějaká menší prezentace) až pár měsíců. Takže těch pár hodin optimalizace se ztratí.


Shrnutí

  • Divi je super, jen se s ní musí umět. Vyzkoušejte si ji.
  • Nešetřete na dobrém hostingu. Doporučuji Onebit a WP-Hosting.
  • Zálohujte web, mějte child theme a změny prvně provádějte na testovacím webu
  • Vypněte zapnutou Divi optimalizaci (CSS a JS optimalizace, generování statického souboru CSS)
  • Nainstalujte si WP Optimize, zapněte cache, gzip, browser cache, kompresujte obrázky při nahrávání, čistěte pravidelně databázi a tabulky.
  • Používejte lazy-loading – A3 Lazy Load a zaškrtněte si v nastavení, aby při smazání se smazaly všechny data a tabulky.
  • Nainstalujte si Clearify a kompresi CSS a JS si vyzkoušejte na nečisto. Využívejte i Asset Manager.
  • Optimalizujte CSS přes PurifyCSS a přes FTP si nahrajte čistý kód.
  • PNG obrázky komprimujte do JPG, myslete na správnou velikost, kompresi ještě před nahráním do WP, a kompresi si zaslouží i další soubory jako je PDF.
  • Nepoužívejte těžké pluginy.
  • Nepoužívejte bez rozmyslu a bez citu Scroll Effect. Animace s mírou a většinu vypněte.
  • Při tvorbě stránky s Divi nad tím i přemýšlejte.


Článek se bude postupně doplňovat

Při dalším uptadu doplním:

  • Video, kde si probereme celou cestu optimalizace.
  • Doplním více mých work cases.
  • Doplním věci, které mně nenapadly.
  • Doplním nápady od vás.

Další články

Získejte Divi s 20% letní slevou! Končí 1.9.2020

Získejte Divi s 20% letní slevou! Končí 1.9.2020

Máme tady další slevu na Divi. Získejte tuto šablonu s 20% slevou (anebo si počkáte na Black Friday?). Získáte: Šablonu Divi Plugin Divi builder (to moc nevyužijete, ale máte to také)Extra šablona (opuštěný synek vývojářů, ale dostačuje pro magazínové weby)100+...

Mioweb za 30 tis / ročně? Přejděte k levnějším alternativám!

Mioweb za 30 tis / ročně? Přejděte k levnějším alternativám!

Aktualizace: 23.06.2020, 28.06.2020, Kapitoly článku: Nová cenová politika Miowebu- nástroje, které si musíte nastavit sami- nástroje, které si musíte spravovat a rozvíjet samiAlternativy k emailinguAlternativy k FapiFakturační systémyAlternativy k MiowebuNejlepší...

Jak probíhá spolupráce a proč je poptávkový dotazník důležitý?

Jak probíhá spolupráce a proč je poptávkový dotazník důležitý?

Popis spolupráce v krocích Prvním krokem je vyplnění poptávky. Na jejím základě vám napíši cenovou kalkulaci a technické možnosti. V případě, že potřebuji více informací, nebo něco dovysvětlit, spojíme se telefonicky / e-mailem. Po odsouhlasení kalkulace (a zároveň...

Elegant Themes slaví 12 let a rozdává 20% slevy na nákup Divi theme

Elegant Themes slaví 12 let a rozdává 20% slevy na nákup Divi theme

Z malých vývojářů šablon, Elegant Themes, se za 12 let působnosti stali špičky a mohou se pochlubit s více než půl milionem zákazníků. Oproti jiným šablonám z Themeforest je to obrovské číslo. Kdo ještě neví, co je to Divi? Divi je tolik milovaný nebo nenáviděný...

Divi: Video návod na vlastní fullwidth menu

Divi: Video návod na vlastní fullwidth menu

Ve skupince jsem to slíbila již před pár týdny (?). Tak zde je slibovaný návod, jak si udělat vlastní menu na plnou šířku. Protože mi video nahrálo jenom jeden list a na konci videa jsem chtěla ukázat, jak to ve výsledku vypadá, mám ty videa dvě. Použila jsem video,...

Divi: Jak udělat Swipe kolonek na mobilu

Divi: Jak udělat Swipe kolonek na mobilu

Miluju swipe scrollbar. Pokud máte totiž více než 4 kolonky, ušetří to nemalé místo na mobilních zařízeních. Je to uživatelsky přívětivé a o to jde. Takže, prvně ukázka toho, co to je swipe: Na deskopu to vypadá běžně: A takhle to vypadá na mobilu: Jaký je postup?...

Divi: Jak na mobilu dát kolonky vedle sebe místo pod sebe

Divi: Jak na mobilu dát kolonky vedle sebe místo pod sebe

Divi nemá jednoduché nastavení ikonek, tlačítek, obrázků a dalších modulů pro pohodlné mobilní zobrazení. Ale nevadí, s kousíčkem CSS se to dá napravit. Nejen, že zobrazení například upoutávek pod sebe na mobilních zařízeních je UX anti-friendly, ale zbytečně...

6 + 12 pluginů pro WordPress, které používám a doporučuji

6 + 12 pluginů pro WordPress, které používám a doporučuji

Pluginy jsou malé programy, které doplňují funkcionalitu WordPressu. WordPress je open-source systém a ve spojení s jeho obrovskou popularitou vznikly a pořád vznikají nové pluginy od vývojářů z celého světa. V tomto příspěvku bych se ráda věnovala tomu, jaké pluginy...

Rychlý tip: Buďte vždy majiteli domény a hostingu!

Rychlý tip: Buďte vždy majiteli domény a hostingu!

Ač za pár měsíců tady máme rok 2020, přesto některé agentury pořád žijí v roce 2000 a nabízí služby, které se mi nezdají moc legitimní. O čem mluvím? Sama bych tomu nevěřila, kdyby za mnou nechodili klienti s dotazem, jak by tohle měli vyřešit. Agentura, která jim...

Knihovna kódů

link rel preload

<link rel="preload" href="ZADEJTE URL" as="font" type="font/ttf" crossorigin> type="font/XXX-doplňte dle koncovky" "URL" - zkopírujte odkaz (např z google page insight)