Použití asynchronního načítání javascriptu ve WordPressu

Rychlost načítání webu, kromě jiného, ovlivňuje načítání externích javascriptových souborů. Ty, které jsou vloženy do hlavičky webu, jsou označovány, jako DOM blockers.

To znamená, že pokud prohlížeč, narazí na takový soubor (což se mimo jiné týká i css souborů), nejprve jej načte, čímž se zastaví vykreslování html kódu (DOMu). Až po plném načtení js kódu, pokračuje prohlížeč v načítání.

Možným řešením a také často doporučovaným, je přesun všech js souborů do patičky webu.

Bohužel, toto může mít podobný výsledek:

Snímek obrazovky (35)

Důvodem je, že jQuery je voláno ve chvíli, kdy ještě není k dispozici.

Takže jQuery necháme v hlavičce. Což vám Google Insight vyčte.

Naštěstí je možné načítat javascript asynchronně a to pomocí atributů async a defer.

Jejich nevýhodou je, že async nefunguje v IE 9- a oba v Opeře Mini. Na druhou stranu je jejich využití spíše přínos.

Rozdíl mezi async a defer

Pokud atributy použijete při načítání scriptu:

<script src="scripts.js" async=""></script><script src="scripts.js" defer="defer"></script>

Odložíte načtení souboru scripts, do doby, než bude potřeba. Například u jQuery do té doby, než bude poprvé voláno.

Rozdíl je v tom, co se stane potom.

U defer se script začne stahovat a načítání DOMu bude pokračovat až do konce. Hned poté, před událostí DOMContentLoaded se provede stažený javascript.

Čtěte  Vypnutí standardních widgetů

Naproti tomu se u async, začne stahovat soubor a v tu chvíli, kdy je celý stažený, začne se provádět a načítání DOMu se zastaví. Pokračovat bude až po vykonání scriptu.

Osobně bych u WordPressu preferoval async.

Aby jsme mohli asynchronní načítání použít, potřebujeme do každého scriptu v hlavičce vložit atribut async.
Jak toho ale dosáhnout, když js souborů může být pomocí šablon a pluginů vkládáno neomezené množství?

Můžeme si pomoci filtrem clean_url, kde můžeme každou url končící js upravit.

add_filter( 'clean_url', 'wcs_defer_javascripts', 11, 1 );
function wcs_defer_javascripts ( $url ) {
    if ( false === strpos( $url, '.js' ) ) return $url;
    if ( strpos( $url, 'jquery.js' ) ) return $url;
    return "$url' async='async";
}

A k čemu nám to bylo?

Když si otevřeme consoli v Chrome, před tím, než použijeme funkci, načítání eshopu vypadá takto:

Snímek obrazovky (37)

Po vložení funkce do souboru functions.php, se doba pro DOMContentLoaded sníží téměř o 40 procent.

Snímek obrazovky (36)

Slušný výsledek na tak jednoduchou funkci, ne?

Pokud se chcete o optimalizaci WordPress webů, chcete dozvědět více, můžete přijít na některé ze školení

Online education flat horizontal banners with online lessons and webinar decorative icons vector illustration

About The Author

Zajímá mne Wordpress, responsivní šablony a zkrátka vše kolem tohoto skvělého redakčního systému.

Related posts

1 Comment

  1. Zbyněk

    Díky za tipy :) Přesouvat do patičky určitě ne, plno WP šablon a pluginů prasí funkce přes JS a pak se to při načítání rozbije. Druhá nemilá vlastnost je „skákání“ prvků, kdy se něco vykreslí blbě nebo se to dodatečně přidá z JS a některé prvky nebo celý design se posunou. Skvělá věc, když návštěvník zrovna někam kliká…

    A samozřejmě neškodí prevence, tzn. minimum pluginů a přeplácaných šablon. Jinak komediální je, když si InSights stěžuje na pomalé a nekomprimované položky jako Google Fonts, AdSense a podobně…

    Reply

Leave a Reply

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