Nyní vám povím o zajímavým způsobem, který vám pomůže zrychlit váš web WordPress paralelním načítáním skriptů.

K čemu to je?

Vše je velmi jednoduché. Moderní webové stránky jsou sbírkou široké škály skriptů, značek, úryvků, stylů, písem a všeho ostatního. Jak víte, čím více „dobrot“, tím déle trvá, než se váš web načte. Co se týče JavaScriptu, to je jiná věc. Všimli jste si někdy takového zaseknutí, když se zdá, že se stránka načetla, ale karta ukazuje, že se stránka stále načítá? K tomu dochází, když konkrétní skript nebyl načten do konce. Bylo by to v pořádku, někdy je stránka úplně nečinná, dokud se nenačte stejný, zdánlivě nepříliš důležitý skript. A vaši uživatelé prostě nemusí mít dostatek trpělivosti.

Tento koncept zcela opačný k synchronnímu načítání, což je běžný skript jako:

Asynchronní volání skriptu vypadá takto:

Nyní skripty nebudou nutit vaše uživatele čekat na své plně naložen, vše bude probíhat paralelně.

Jak proces automatizovat?

Je jasné, že pokud připojujete skripty ručně a není jich mnoho, můžete to udělat ručně, jednoduše přidáním příslušného atributu do kódu volání. Jak to ale zautomatizovat, když máte například WordPress s hromadou skriptů, které se navíc automaticky volají?

Najděte již známý soubor functions.php vašeho motivu a vložte tam následující kód (například na konec):

// asynchronní funkce javascriptu wcs_defer_javascripts ($url) ( if (FALSE === strpos($url, ".js")) return $url; if (strpos($url, "jquery.js")) return $url; return "$url" async="async"; ) add_filter("clean_url", "wcs_defer_javascripts", 11, 1);

Závěr

Co dodat závěrem? Tento skript nemusí být vhodný pro každého, protože kdo ví, jaké skripty máte připojené, tak si ho nainstalujte a experimentujte. Takový skript nemůže mít žádnou nevýhodu, snad kromě nekompatibility s konkrétním webem kvůli jeho specifikům. To byl další malý krůček k velké optimalizaci vašeho webu.

Poznámka: Níže je překlad článku od Steva Souderse (autora slavných tipů Yahoo! týkajících se výkonu klienta) „Coupling async scripts“. Steve analyzuje chování při načítání souborů JavaScript a navrhuje několik způsobů, jak obejít jejich vlastnosti blokování. Mé komentáře níže jsou psány kurzívou.

Většina mé práce je in Nedávno byl věnován asynchronnímu načítání externích skriptů. Pokud jsou skripty načteny v normálním pořadí (), blokují načítání všech ostatních součástí stránky ( PROTI nejnovější verze To není případ Firefoxu a Safari, ale mluvíme o tom v podstatě asi 70 % uživatelů s IE) a zablokuje vykreslování celé části stránky, která se nachází pod voláním skriptů v kódu HTML. To je vidět na testovací stránce, níže umístíme skripty například pomocí dynamická tvorba objektů po spuštění kombinované události window.onload) zabraňuje tomuto chování prohlížeče, což urychluje načítání stránky.

Jediným problémem s asynchronním načítáním skriptů je jejich interakce s interními ( v souladu) skripty stránek ( stejně jako s jinými externími skripty), které používají proměnné definované v externím skriptu. Pokud je externí skript načten asynchronně bez znalosti vnitřního kódu stránky HTML, je docela možné, že ( a ve většině případů k tomu dojde), kdy některé proměnné nebudou definovány v době jejich použití. Proto se musíte ujistit, že externí skripty načtené asynchronně a interní skripty stránky jsou propojeny: interní skripty se nespustí, dokud nebudou asynchronní skripty plně načteny.

Existuje několik ( Standard) způsoby, jak propojit asynchronně načtené skripty s jiným kódem JavaScript:

• načtení okna. Spuštění interního kódu JavaScript může být vázáno na událost onload okna. Používá se velmi snadno, ale některé skripty lze spustit dříve.
• onreadystatechange ve skriptu. Interní kód lze svázat s událostmi onreadystatechange a/nebo onload. (K pokrytí všeho bude nutné použít obě možnosti populární prohlížeče.) V tomto případě bude kódu více, bude složitější, ale bude zaručeno, že bude spuštěn okamžitě po načtení odpovídajících externích souborů.
• Vestavěné hovory. Externí skripty lze upravit tak, aby na samém konci obsahovaly volání malého kousku kódu, který zavolá odpovídající funkci z interního kódu. To vše je skvělé, pokud externí a interní skripty vyvíjí stejný tým. Ale v případě použití vývoje třetích stran to neposkytne veškerou nezbytnou flexibilitu pro propojení externích skriptů s interním kódem.

V tomto článku se současně (bez slovní hříčky!) zabývám dvěma problémy: jak asynchronní skripty zrychlují načítání stránky a jak můžete kombinovat asynchronní a interní skripty pomocí upravené verze zavaděče od Johna Resiga ( od jQuery) je šablona značky se dvěma skripty. Ilustrací toho je moje nedávná práce při třídění výsledků UA Profiler. Udělal jsem to pomocí třídícího skriptu od Stuarta Langridge. Asi za 5 minut jsem byl schopen přidat jeho skript na stránku, abych seřadil tabulku výsledků. S trochou více času se mi podařilo zajistit, aby se tento skript načítal asynchronně a urychlil načítání stránky o více než 30 % pomocí techniky asynchronního dokování skriptů.

Pravidelné volání skriptů

Původně jsem přidal třídicí skript Stuarta Langridge na stránku UA Profiler obvyklým způsobem(via ), to lze vidět ve variantě s běžným voláním skriptu. Diagram zatížení je na Obr. 1.

Rýže. 1. Schéma načítání skriptů v obvyklém případě.

I když řazení dat v tabulce fungovalo, větší radost mi neudělalo, protože se zpomalilo načítání stránky. Na Obr. 1 jasně ukazuje, jak moje verze skriptu (pojmenovaná sorttable-async.js) blokuje všechny ostatní HTTP požadavky na stránce (zejména arrow-right-20x9.gif), což zpomaluje načítání stránky. Všechny grafy načítání byly pořízeny pomocí Firebug 1.3 beta. V této verzi Firebugu zobrazuje červená čára událost onload. (A modrá čára odpovídá události domcontentloaded.) U verze s běžným voláním skriptu se událost onload spustí po 487 milisekundách.

Skript sorttable-async.js není nutný k počátečnímu vykreslení stránky: sloupce lze třídit až po vykreslení samotných sloupců. Tato situace (externí skripty, které se nepoužívají k počátečnímu vykreslení stránky) je kandidátem číslo 1 pro implementaci asynchronního načítání. Možnost načítání asynchronního skriptu připojí tento skript pomocí metod DOM k vytvoření nové značky skriptu:

var script = document.createElement("script"); script.src = "sorttable-async.js"; script.text = "sorttable.init()"; // to je vysvětleno v další části document.getElementsByTagName("head").appendChild(script);

Schéma načítání HTTP pro asynchronní načítání skriptů je na Obr. 2. Stojí za zmínku, jak asynchronní přístup zabraňuje blokovacímu chování: sorttable-async.js a arrow-right-20x9.gif se načítají paralelně. To snižuje celkovou dobu načítání na 429 ms.

Rýže. 2. Schéma načítání skriptů v asynchronním případě

Šablona pro duální skript od Johna Resiga

Umožňuje zrychlit načítání stránek, ale v tomto případě je stále co zlepšovat. Ve výchozím nastavení se třídicí skript sám zavolá připojením sorttable.init() k obsluze události onload skriptu. Některá vylepšení výkonu ( a redukce kódu) lze dosáhnout voláním sorttable.init() uvnitř značky skriptu a zavolat ji ihned po načtení externího skriptu ( připojeno přes src). V tomto případě používám jednu funkci jako "API", ale myslím, že tento případ ilustruje maximálně rozšiřitelný vzor, ​​který vám umožňuje používat externí modul bez jakýchkoliv předpokladů o tom další použití (klasická situace použití logiky JavaScriptu od externích vývojářů).

Již jsem popsal tři způsoby propojení interního kódu s asynchronním načítáním externích skriptů: onload okna, onreadystatechange pro skript a handler zabudovaný do skriptu. Místo toho jsem použil techniku ​​od Johna Resiga - vzor značky dvojitého skriptu. John popisuje, jak propojit interní skripty s načítáním externí soubor následujícím způsobem:

jQuery("p").addClass("hezká");

V tomto případě se kód uvnitř spustí až po načtení ( a inicializace) externí skript skončil. Tento přístup k propojení skriptů má několik zjevných výhod:

• jednodušší: jedna značka skriptu místo dvou
• transparentnější: spojení mezi interním a externím kódem je zjevnější
• bezpečnější: pokud se externí skript nenačte, interní kód se nespustí, což zabrání výskytu chyb souvisejících s nedefinovanými proměnnými

Toto je skvělý vzor pro asynchronní načítání externích skriptů. Abychom jej však mohli použít, budeme muset provést změny jak v interním kódu, tak v externím souboru. Pro interní kód jsem musel přidat třetí řádek již zmíněný výše, který odhaluje vlastnost script.text. Chcete-li dokončit proces dokování, musíte na konec přidat soubor sorttable-async.js:

var scripts = document.getElementsByTagName("script"); var cntr = scripts.length; while (cntr) ( var curScript = scripts; if (-1 != curScript.src.indexOf("sorttable-async.js")) ( eval(curScript.innerHTML); break; ) cntr--; )

Tento kód prochází všemi skripty na stránce, najde požadovaný blok, který by se měl načíst sám (v tomto případě se jedná o skript se src obsahující sorttable-async.js). Poté spustí kód, který je přidán do skriptu (v tomto případě sorttable.init()), a tím se zavolá. (Malá poznámka: ačkoli při načítání skriptu byl text v něm přidán pomocí vlastnosti textu, přistupuje se k němu pomocí vlastnosti innerHTML. To je nezbytné pro zajištění kompatibility mezi prohlížeči.) Pomocí této optimalizace můžeme načíst soubor externího skriptu bez blokování načítání jiných zdrojů a spustit interní kód spojený s tímto skriptem co nejrychleji.

Za zmínku také stojí, že popsaná technika může být pouze náhradou za přímou úpravu externího skriptu. Pokud taková úprava není možná, můžeme použít pouze instalaci zátěžové kontroly v intervalu:

var _on_ready_execution = setInterval(function() ( if (typeof urchinTracker === funkce) ( urchinTracker(); clearInterval(_on_ready_execution); ) ), 10);

Tento přístup již byl popsán v knize „Overclock your website“, nicméně vyžaduje dodatečné zatížení procesoru neustálá kontrola požadovaný skript je připraven a nefunguje, pokud je externí soubor nedostupný: kontrola pokračuje.

V případě kontroly podle intervalu však nemusíme externí soubor vůbec upravovat, ale v případě dvojí použití značka skriptu je naprosto nezbytná. Intervalovou kontrolu lze zlepšit, pokud po uplynutí určité doby (například 5–10 sekund) restartujete stahování externího souboru (změnou původní značky skriptu pomocí jedinečného parametru GET) a po několika neúspěšných restartech zastavíte stahování úplně (možná u některých pak chybová zpráva).

Líné načítání

Celková doba načítání může být ještě zkrácena líným načítáním skriptu (jeho načítání dynamicky jako součást obsluhy události onload). Příklad tohoto chování je umístěn na stránce s

S nárůstem rychlosti připojení k internetu a nárůstem výkonu nejen desktopu, ale i mobilní zařízení Webové stránky jsou stále těžší. Počet a velikost připojených souborů roste: soubory JavaScript, css soubory, obrázky, widgety webů třetích stran, prvky iframe. Na tento moment Specifika fungování prohlížečů jsou taková, že při načítání souboru js je vykreslování zablokováno, dokud se skript nespustí. Moderní prohlížeče v Pozadí analyzuje dokument a stáhne skripty a styly, ale vykreslování bude zablokováno. Srovnání parametry sítě Pro různé prohlížeče si můžete prohlédnout na browserscope.org. Blokování nemůžeme úplně odstranit, ale můžeme optimalizovat serverovou a klientskou část aplikace tak, aby blokování vykreslování trvalo co nejkratší dobu.

Řešení na straně serveru:
- Zmenšete velikost přenášených souborů
- Použijte CDN
- Přesunout statické soubory do samostatné domény nebo subdomény, čímž se počet zvýší simultánní spojení prohlížeč.
- Povolit kompresi přenesených souborů (gzip)

Řešení pro klientskou stranu:
- Snížit počet požadavků.
- Ukládání souborů do mezipaměti na straně klienta pomocí hlaviček Expires a Etags.
- Používejte veřejně dostupné CDN (Google CDN, Yandex CDN). Existuje tedy možnost, že soubor z veřejného CDN již bude uložen v mezipaměti prohlížeče.

Jedním ze způsobů, jak optimalizovat rychlost načítání stránek, je asynchronní načítání soubory, které neblokují vykreslování.

JavaScript asynchronní načítání skriptu:

(function() ( var s = document.createElement("script"); s.type = "text/javascript"; s.async = true; s.src = " URL souboru"; document.getElementsByTagName("head").appendChild(script); ))();

Pokud je třeba spustit JavaScript po načtení celé stránky, včetně obsahu, obrázků, soubory stylů a externí skripty, pak musíte do zavaděče přidat sledování události onload.

If (window.addEventListener) ( window.addEventListener("load", async_load, false); ) else if (window.attachEvent) ( window.attachEvent("onload", async_load); )

JavaScript asynchronní načítání skriptu zohledňující událost onload (function() ( function async_load())( var s = document.createElement("script"); s.type = "text/javascript"; s.async = true; s .src = "URL souboru"; document.getElementsByTagName("head").appendChild(script); ) if (window.addEventListener) ( window.addEventListener("load", async_load, false); ) else if (window.attachEvent ) ( window .attachEvent("onload", async_load); ) ))();

Toto je však ojedinělý případ, kdy je vyžadováno stažení jednoho souboru. V praxi je často spojeno mnoho souborů.

Skript pro asynchronní načítání více souborů JavaScriptu plug-in (function() ( function async_load())( [ "URL_file_1.js", "URL_file_2.js", "URL_file_3.js" ].forEach(function(src) ( var s = document.createElement ("script"); s.type = "text/javascript"; s.async = true; s.src = src; document.getElementsByTagName("head").appendChild(script); )); ) if (window. addEventListener) ( window.addEventListener("načíst", async_load, false); ) else if (window.attachEvent) ( window.attachEvent("onload", async_load); ) ))();

Ale v této implementaci je mínus - skripty budou načteny v náhodném pořadí a podle toho budou náhodně spouštěny v čase. Tento asynchronní načítací skript je ideální, pokud provádění souborů JavaScript nezávisí jeden na druhém a nezávisí na DOM. V opačném případě může jeho použití vést k chybám na stránce nebo neočekávaným výsledkům spuštění. Pro sekvenční spouštění, ale asynchronní stahování, musíte zadat async=false, pak se soubory stahují v náhodném pořadí, ale spouštějí se postupně.

HTML 5. Asynchronní načítání JavaScriptu

Standard HTML 5 podporuje asynchronní načítání JavaScriptu. To lze provést přidáním klíčové slovo asynchronní nebo odložené. Například:

Skript, který je spojen s atributem odložit, bude proveden bez narušení pořadí provádění ve vztahu k ostatním skriptům a jeho spuštění proběhne po úplném načtení a analýze stránky, ale před voláním DOMContentLoaded.

Skript, který je spojen s atributem async, bude proveden co nejdříve po jeho úplném načtení, ale nečeká na analýzu dokumentu před načtením objektu okna. Prohlížeče nezaručují, že skripty budou spouštěny ve stejném pořadí, v jakém jsou připojeny.

Knihovny pro asynchronní načítání JavaScriptu

RequireJS je modul načítání JavaScriptu. Optimalizováno pro prohlížeče, ale lze jej použít v jiných prostředích, jako je Node, Rhino.

Require(["script"], function(script) ( console.log("start after load script.js"); ));

extsrc.js je knihovna, která spouští skripty, které se mají spustit po načtení stránky a jejím zobrazení uživateli. Funguje správně s document.write.

yepnope.js – umožňuje asynchronní načítání souborů JavaScript a CSS.

Yepnope([ "script.js", "style.css" ]);

Snadný způsob stahování JavaScript skripty

Ukazuje se, že v praxi je dosažení optimálního načítání skriptů JavaScript mezi prohlížeči, které neblokují zobrazení, obtížné a někdy nemožné. Nejlepší způsob je přidat jej na konec dokumentu před uzávěrkou značka těla. Kvůli omezení různé prohlížeče a HTML samotné, takovou možnost načítání, která neblokuje zobrazení, lze považovat za nejjednodušší.

Způsob, jak urychlit načítání webových stránek pomocí optimalizace souborů skriptů Java a html kód stránky.

Javascript představuje určitý problém pro moderní zdroje. Jsou jimi jednoduše přetížené a to vede k pomalému načítání a tím i ke špatné kvalitě zobrazení.

Pokud je vaše síťové připojení pomalé, což je typické pro mobilní komunikace A vzdálení uživatelé, pak se načítání výrazně zpomalí, což způsobí oprávněné podráždění.

Když prohlížeč přečte html kód, zobrazí výsledek postupně. Tito. každý řádek následuje za sebou, ale v místě, kde je nainstalován javascript, dojde k zastavení - ti, kteří tento jazyk používají k zápisu zdrojů, se s tímto problémem jistě setkali.

Řešením problému je asynchronní načítání. Stačí umístit javascript na konec html kódu stránky. To povede k tomu, že načítání „javy“ bude zpožděno, což zajistí správné zobrazení stránky a rychlou vrstvu pro uživatele zdrojů. Většina seriózních zdrojů přechází na asynchronní načítání, snaží se udržet své publikum a zavádět užitečné inovace.

Podívejme se na několik způsobů, jak optimalizovat načítání javascriptu.

Tento javascriptový soubor se načte následovně:

< script src= type= "text/javascript" >

HTML5 se prozíravě postaralo o problém načítání stránky pomocí „javy“. Má možnost nastavit asynchronní načítání skriptu, což výrazně zvyšuje rychlost zobrazení zdroje. Chcete-li to provést, přidejte do html kódu parametry async nebo defer, jak je uvedeno níže:

< script async src= "//www.адрес_сайта/script.js" type= "text/javascript" >

< script defer src= "//www.адрес_сайта/script.js" type= "text/javascript" >

Jaký je rozdíl mezi asynchronními a odloženými atributy?

Obě možnosti pracují s asynchronním načítáním javascriptu. Rozdíl je v čase zobrazení a začátku provádění skriptu.

Atribut async spustí skript ihned po jeho úplném načtení, ale přeskočí okno načítání.

Když v kódu stránky nastavíte atribut defer, bude se javascript řadit mezi ostatní skripty, aniž by narušil jejich pořadí provádění. Začne fungovat až po úplném načtení stránky, ale vynechá událost DOMContentLoaded(objekt dokumentu).

V některých však tyto atributy nefungují moderní prohlížeče. Internet Explorer například nepodporuje atributy async a defer. A řádky document.write v souborech script.js ničemu nepomohou

Speciální skript od Google pro asynchronní načítání javascriptu

Google se stal lídrem ve vývoji technologií, které umožňují načítání webových stránek v rekordním čase. Navíc hodnocení vyhledávač Google degraduje stránky se slabým výkonem, takže věnujte pozornost zvláštním vrzání z webmasteři Google, navržený tak, aby načítal javascript asynchronně.

Chcete-li uplatnit tento skript, stačí vyměnit

na

Poté zahrneme soubor skriptu extsrc.js

Získáme následující kód:

< script src= "//extsrcjs.googlecode.com/svn/trunk/extsrc.js" > < script extsrc= "...." >

Bohužel tato metoda také nefunguje pro soubory s document.write

Tato metoda je vhodná pro všechny prohlížeče bez výjimky a funguje dokonce i s document.write

V html kódu stránky vytvoříme prázdný blok div:

A na konec html kódu, před , vložíme skript pro asynchronní načítání:

Zde je jakýkoli soubor nebo skript, který je třeba načíst. // přesuňte jej na skutečnou pozici zobrazení document.getElementById("script_block").appendChild(document.getElementById("script_ad")); // show document.getElementById("script_ad").style.display = "blok";

Upozorňujeme, že ve verzích IE nižších než 6 včetně toto stahování nefunguje. Nejsem si ale jistý, že takoví uživatelé zůstávají - je jich menšina. Používají jiné prohlížeče a služby tuto optimalizaci pro javascript, co se odráží tím nejlepším možným způsobem na rychlosti načítání zdrojů.

Moderní webové stránky jsou silně zatíženy javascriptovými soubory. To vede k pomalejšímu načítání a následnému zobrazení stránky. V nejhorších podmínkách musí návštěvník stránek čekat až 30 sekund.

Zrychlujeme načítání html stránky

Moderní využití JavaScriptu

Moderní webové stránky jsou silně zatížené javascriptovými soubory. To vede k pomalejšímu načítání a následnému zobrazení stránky. V nejhorších podmínkách (pomalé připojení k internetu, mnoho javascriptové soubory) návštěvník webu musí čekat až 30 sekund.

HTML je navrženo tak, aby se webová stránka načítala synchronním (řádek po řádku) načítáním všech prvků obsažených v kódu HTML.

Existuje řešení: vložte řetězce Java na konec html dokument(proto se načtou po vykreslení celé stránky) a teprve poté se obsah bloků zobrazí na správných místech. To se nazývá .

Všechny seriózní projekty se dnes snaží přejít nová technologie stahování. Navíc je to naprosto snadné.

Existuje několik přístupů. Začnu popořadě.

< script src= "//www.site.ru/script.js" type= "text/javascript" >

Standard HTML5 podporuje možnost asynchronního načítání skriptů, což může výrazně urychlit celkovou dobu načítání stránky. Stačí přidat asynchronní nebo odložit .

< script async src= "//www.site.ru/script.js" type= "text/javascript" >

< script defer src= "//www.site.ru/script.js" type= "text/javascript" >

Jaký je rozdíl mezi atributy async a defer?

V obou případech dostáváme asynchronní načítání skriptů. Jediným rozdílem je okamžik, kdy se skript začne provádět. Skript s atributem async bude proveden co nejdříve po jeho úplném načtení, ale před načtením objektu okna. Je-li použit atribut odložit, skript neporuší pořadí svého provádění ve vztahu k ostatním skriptům a k jeho spuštění dojde po úplném načtení a analýze stránky, ale před událostí DOMContentLoaded objektu dokumentu.

Bohužel tento mechanismus momentálně nefunguje ve všech prohlížečích (zejména IE). Také nebude fungovat, pokud jsou v souboru script.js řádky document.write.

Jak všichni odborníci vědí, Google platí Speciální pozornost rychlost načítání stránek a snižuje ty pomalé Výsledky vyhledávání. Na pomoc Google vyvinul speciální skript, pomocí kterého můžete provést asynchronní načítání javascriptu.

Pro použití stačí vyměnit

na

A připojte soubor skriptu extsrc.js

Dopadne to takto:

< script src= "//extsrcjs.googlecode.com/svn/trunk/extsrc.js" > < script extsrc= "...." >

Bohužel tato metoda také nefunguje pro soubory s document.write

Univerzální metoda pro všechny prohlížeče. Dokonce funguje i s document.write

V místě na stránce, kde potřebujeme náš prvek skutečně zobrazit, vytvořte prázdný blok div:

< div id= "script_block" class = "script_block" >

Na úplný konec stránky, než vložíme skript pro asynchronní načítání souborů:

< div id= "script_ad" class = "script_ad" style= "display:none;" >Zde je jakýkoli soubor nebo skript, který je třeba načíst.< script type= "text/javascript" >// přesunout jej do skutečného dokumentu pozice zobrazení. getElementById("blok_skriptu" ) . appendChild(document. getElementById("script_ad" ) ); // zobrazit dokument. getElementById("script_ad" ) . styl. display = "blok" ;

V nejstarších verzích IE (6 a níže) asynchronní načítání bohužel nefunguje, ale takoví uživatelé už prakticky nejsou. Všechny ostatní prohlížeče a služby úspěšně používají moderní zrychlené načítání webové stránky.