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:
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:
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.
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:
Po vložení funkce do souboru functions.php, se doba pro DOMContentLoaded sníží téměř o 40 procent.
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í
