Divi šablona a Elegant Themes

Divi 4.10: Velká výkonnostní aktualizace

Divi výkon
Autor příspěvku Tomáš Cirkl

Nejnovější aktualizace Divi šablony přináší několikaměsíční výkonnostní vylepšení. Divi byla kompletně přepracována a optimalizována. Díky tomu se nyní vývojáři mohou soustředit na přidávání více obsahu (modulů, funkcí…). Z Divi se tak stává super rychlý framework pro tvorbu webových stránek.

Nejprve pár výsledků

Než si detailněji představíme na nové funkce, pojďme se podívat jak si Divi nyní vede v testech výkonu webu.

Na testovací stránce, která byla vytvořena za účelem testování nových funkcí, byla velikost CSS snížena o 94%! Všechny renderovací prvky byly odstraněny JavaScript byl zredukován na půlku. Je to z důvodu načítání pouze potřebných dat k zobrazení dané stránky.

Takřka perfektní skóre

Testovací stránka dosáhla v testu Google PageSpeed skóre 99 pro mobilní zařízení a 100 pro počítač. U GTmetrix bylo skóre 100%. Testovací stránka využívá standardní WordPress hosting a CDN. Na výkon nebyly použity žádné další optimalizační pluginy.

Pojďme si nyní představit nové funkce.

Divi odstraňuje nadměrná data

Divi odstraňuje nadměrná data

Divi odstraňuje nadměrná data

Nová verze Divi šablony eliminuje načítání nadměrných dat a díky tomu se stala velice výkoným page builderem s velkou rychlostí.

Dynamický PHP Framework

Nový dynamický PHP Framework pouze zpracovává ty data pro moduly a funkce, které jsou na dané stránce použité. Všechno ostatní se nenačítá. Pokud vaše stránka používá pouze 5 modulů z 50+ dostupných, Divi načte data potřebná k zobrazení pouze těchto 5 modulů a ostatní vynechá. Podobně to funguje u funkcí jako jsou Scroll Effects, Animace, Rámeček atd.

Dynamické CSS

Stejná logika je použitá pro CSS styly. Bývalý velký CSS soubor, který Divi obsahovala, byl rozdělen na stovky malých komponentů. Na každé stránce se tak vytvoří unikátní CSS soubor složený pouze z těch částí, které jsou potřebné na zobrazení té konkrétní stránky.

Chytré styly

Systém, který styly generuje byl také optimalizován, aby rozpoznal duplicitní styly a sloučil je do jednoho. Používání Divi Presets můžete tak vytvořit velmi rychlou webovou stránku.

Optimalizace JavaScriptu

JavaScript byl modularizován a díky tomu může Divi volat vždy jen ty potřebné části, které se na stránce používají. Z toho důvodu je opět objem načtených dat zredukovaný na potřebné minimum.

Kritické CSS v Divi

Kritické CSS v Divi

Kritické CSS v Divi

Nová funkce Kritické CSS je systém, který identifikuje ty CSS styly, které jsou potřebné pro načtení zobrazeného obsahu a ostatní odloží. Díky tomu, že se načtou pouze pro vykreslení potřebné styly, je první načtení velmi rychlé. Oddělení kritického a nekritického CSS je velká výhoda, kterou většina současných šablon a page builderů zatím nemá.

Nové nastavení pro optimalizaci rychlosti

Nové nastavení pro optimalizaci rychlosti

Nové nastavení pro optimalizaci rychlosti

Do nastavení Divi přibylo několik nových optimalizačních funkcí.

Cachování Google Fonts

Google písma jsou nově cachované a vložené inline do hlavičky. Tato funkce tak snižuje dotazy pro vykreslení obsahu a zrychluje načítání.

Odstranění WordPress Emoji

WordPress obsahuje vlastní systém ikonek, který ale moc webů vůbec nevyužívá z důvodu nativní podpory ve většině prohlížečů. Divi obsahuje funkci, která tuto nepotřebnou vlastnost WordPress vypíná.

Odložení načítání stylů Gutenbergu

Ve výchozím nastavení nyní Divi odloží načítání stylů Gutenbergu. Styly výchozího editoru tak nebudou blokovat vykreslení.

Dynamické ikony

Obrázkové písmo, které Divi používá se nyní načítá pouze v případě, že je použito. Díky tomu došlo k jeho zmenšení z 90kb na 6kb.

jQuery Deferral

Divi přesouvá nepotřebné jQuery z hlavičky do patičky a načítá ho asynchronně. Pokud je daný skript potřebný k načtení obsahu, tak jej Divi opět vrátí.

In-Line styly

V případě, že budete využívat Dynamické CSS, je soubor se styly velmi malý. Používání inline stylů snižuje počet vykreslovacích dotazů a vylepšuje skóre na Google PageSpeed. Jestliže budete mít zapnuté funkce Kritické CSS, Dynamické CSS a Inline styly, všechny dotazy na CSS budou odstraněny.

Divi vs konkurence

Divi vs konkurence

Divi vs konkurence

ElegantThemes se v této aktualizaci nesnažili udělat jen rychlou šablonu, oni chtěli udělat nejrychlejší. Z toho důvodu vytvořili identické weby za použití různých nástrojů pro tvorbu webu. Všechny weby byly vytvořeny na stejném hostingu s CDN a s péčí maximální dostupné optimalizace daného page builderu. Ověřit si to můžete sami, dema jsou volně přístupné:

Dle výsledků můžete vidět že Divi a nativní Gutenberg jsou nyní výrazně nad konkurencí.

Aktuální sleva

V současné době je sleva 10% na členství Elegant Themes (přístup ke všem jejich produktům, včetně Divi).

Přejít na slevovou nabídku

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.

5 komentářů

  • Mám Divi 4.10.4 a k tomu vaši Divi Child. Bohužel mi přestalo fungovat odesílání objednávek na Woocommerce. S tím, že je právě nějaký problém s tou Child.
    Setkali jste se s tím už někdo? Nevíte, kdo by mi pomohl ten problém vyřešit?

  • Vaše šablona (Divi Child od WPlama) obsahuje zastaralé kopie některých souborů WooCommerce. Tyto soubory mohou potřebovat aktualizaci, aby byly kompatibilní s aktuální verzí WooCommerce. Návrhy k vyřešení: Aktualizujte svoji šablonu na nejnovější verzi. Pokud není k dispozici žádná aktualizace, obraťte se na autora šablony, aby zajistil kompatibilitu s aktuální verzí WooCommerce.

    😀

    • Divi child šablona, kterou si můžete stáhnout z našich stránek, neobsahuje žádné soubory WooCommerce. Nejspíše je tam nahrál váš vývojář při nějaké úpravě. Bude potřeba se podívat do debug na danou chybu a opravit.

  • Dobrý den Tomáši, chtěl jsem se zeptat, zda jste v souvislosti s aktualizací šablony zaznamenal nějaké problémy, především s položkou nastavení Critical CSS nebo s cache pluginy? V promo videu oznamovali, že cache pluginy nejsou potřeba a šablona sama o sobě je rychlá. Co si o tom myslíte?

    • Zdravím, jelikož obvykle používám Diví v kombinaci s dalšími pluginy a nastavením, tak to vypínám a na optimalizaci rychlosti standardně používám WPRocket + Imagify.

Zanechat komentář

Získejte více informací o WordPress!

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

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

Tomáš Cirkl

Tomáš Cirkl

WordPress specialista

Blog WPlama.cz píši už více než 5 let. O WordPress přednáším a pořádám školení. Pro své klienty vytvářím a spravuji webové stránky.