Na navigaci | Klávesové zkratky

Rychlejší stránky s Google Universal Analytics

Ukáži vám, jak zrychlit načítání Google Analytics nebo Web Loaderu a ještě zjednodušit měřící kód.

Tímto kódem vložíme do stránky měřící bod Google Analytics:

<script>
	(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
	(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
	m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
	})(window,document,'script','//www.google-analytics.com/analytics.js','ga');

	ga('create', 'UA-XXXXX-XX', 'auto');
	ga('send', 'pageview');
</script>

Když si ho odtemníme, vypadá takto:

<script>
	(function() {
		window['GoogleAnalyticsObject'] = 'ga';
		window['ga'] = window['ga'] || function() {
			(window['ga'].q = window['ga'].q || []).push(arguments)
		}, window['ga'].l = 1 * new Date();
		var script = document.createElement('script'),
			firstScript = document.getElementsByTagName('script')[0];
		script.async = 1;
		script.src = '//www.google-analytics.com/analytics.js';
		firstScript.parentNode.insertBefore(script, firstScript)
	})();

	ga('create', 'UA-XXXXX-XX', 'auto');
	ga('send', 'pageview');
</script>

Řádek window['GoogleAnalyticsObject'] = 'ga' říká, že objekt Google Analytics bude uložen v globální proměnné ga, nicméně je zbytečný, protože ga je výchozí hodnota.

Dále následuje vytvoření objektu v proměnné ga, který představuje jen dočasný zásobník, kam se ukládá sekvence volání jednotlivých příkazů, a po načtení skriptu bude nahrazen skutečným objektem Google Analytics. Uvedený kód se dá výrazně zjednodušit vypuštěním window a pokud na stránce není víc měřících kódu, můžeme zrušit i podmínky ga = ga || ... a dostáváme se k jednoduchému:

	ga = function() { ga.q.push(arguments) };
	ga.q = [];
	ga.l = +new Date;

Dále následuje vytvoření elementu <script> a jeho vložení do stránky. Nastavení script.async = 1 je zbytečné, protože podle HTML specifikace je každý skriptem vkládaný <script> asynchronní.

Nicméně – neexistuje žádný důvod, proč element <script> vytvářet JavaScriptem. Je mnohem výhodnější použít normální HTML. Stránka se díky tomu načte rychleji, nedochází k blokování a může se využít preload scanner v moderních prohlížečích. Tím se dostáváme k této podobě:

<script>
	ga = function() { ga.q.push(arguments) };
	ga.q = [];
	ga.l = +new Date;
	ga('create', 'UA-XXXXX-XX','auto');
	ga('send','pageview');
</script>
<script src="//www.google-analytics.com/analytics.js" async></script>

Aby se kód načítal asynchronně i v prohlížečích IE 5.5 – 9, je nutné kromě atributu async přidat ještě defer.

V dnešní době se relativní URL //www.google-analytics.com dá považovat za antipattern, vhodnější je vždy používat https.

Finální podoba

Konečná podoba včetně minifikace vypadá takto:

<script>
	ga=function(){ga.q.push(arguments)};ga.q=[];ga.l=+new Date;
	ga('create','UA-XXXXX-XX','auto');ga('send','pageview');
</script>
<script src="https://www.google-analytics.com/analytics.js" async defer></script>

Rychlejší, kratší a ještě navíc hezčí. Nechť slouží :-)

Web Font Loader

Podobným způsobem je vhodné načítat i Web Font Loader, tj. místo v dokumentaci uvedeného

<script>
   WebFontConfig = {
	  typekit: { id: 'xxxxxx' }
   };

   (function(d) {
	  var wf = d.createElement('script'), s = d.scripts[0];
	  wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js';
	  s.parentNode.insertBefore(wf, s);
   })(document);
</script>

používejte

<script>
   WebFontConfig = {
	  typekit: { id: 'xxxxxx' }
   };
</script>
<script src="https://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js" async defer></script>

Google Tag Manager

Protože adresa skriptu se v kódu Tag Manageru skládá, uvedenou optimalizaci nelze bohužel použít.

Komentáře

  1. Frantisek Svoboda #1

    avatar

    A proč ne rovnou

    var ga = {
    	q: [
    		['create', 'UA-XXXXX-XX', 'auto'],
    		['send', 'pageview']
    	],
    	l: new Date()
    };
    před 9 lety | reagoval [2] Aleš Roubíček [4] David Grudl
  2. Aleš Roubíček #2

    avatar

    #1 Frantisku Svobodo, Protože:

    Once the analytics.js library is loaded, each call in the queue is executed and the ga function is redefined so all subsequent calls execute immediately. Initializing the ga function as a queue gives developers a consistent API to use regardless of whether the analytics.js library has finished loading.

    před 9 lety
  3. Petr #3

    avatar

    Myslim, že vkládání toho „script“ pomocí JS má smysl a naopak zrychluje načítání stránky, protože odkládá parsování GA scriptu až když byla stránka vyrenderovaná. Google tomu tuším říká „deferred JS parsing“.

    před 9 lety | reagoval [4] David Grudl
  4. David Grudl #4

    avatar

    #1 Frantisku Svobodo, protože nad API se běžně volávají i další funkce, třeba při trackování kliknutí na odkaz ga('send', 'event', …) atd.

    #3 Petře, viz ten odkaz https://www.igvita.com/…red-harmful/. Zajímavá je i poznámka dole a čím se autor živí.

    před 9 lety | reagoval [12] Petr
  5. Petr Soukup #5

    avatar

    Super!

    Celkově nechápu, proč všechny podobné služby zaspaly v minulém století a nepoužívají vložení SCRIPT přímo do HTML. Nesmyslně se tím řeší rychlost prehistorických prohlížečů místo aktuálních.

    před 9 lety | reagoval [6] Aleš Roubíček
  6. Aleš Roubíček #6

    avatar

    #5 Petře Soukupe, asi to bude tím, že ty prehistorické prohlížeče mají a mnoho dalších výkonnostních problémů, zatím co ty moderní mají ty další věci pořešený a tak je lepší udělat menší trade-off.

    před 9 lety | reagoval [7] Petr Soukup
  7. Petr Soukup #7

    avatar

    #6 Aleši Roubíčku, Async nebo defer umí všechno kromě IE7, což je asi 98%. Naopak načítání scriptu dynamicky (viz Davidem odkazovaný článek) poškozuje brzdí těch 98%.

    Kvůli optimalizaci pro 1–2% lidí, kteří stejně mají šíleně pomalý prohlížeč se tak brzdí všichni ostatní.

    před 9 lety
  8. David Grudl #8

    avatar

    Atribut defer umí IE 5.5, ale async neuměly jedny z úplně prvních verzí Chrome a Firefoxu. V některých věcech býval IE vepředu.

    Btw Google přišel s asynchronním načítání teprve před pěti lety http://googlecode.blogspot.cz/…hronous.html. Rozlišoval přitom mezi http/https a pro každé měl jinou doménu.

    před 9 lety
  9. Marek Prokop #9

    avatar

    Asi je to hezké, ale problém je v tom, že nasazovat dnes Analytics jinak než přes GTM už prakticky nedává smysl.

    před 9 lety | reagoval [10] David Grudl
  10. David Grudl #10

    avatar

    #9 Marku Prokope, mezi marketéry určitě, ale jinde na GTM takřka nenarazíš.

    před 9 lety | reagoval [11] Marek Prokop
  11. Marek Prokop #11

    avatar

    #10 Davide Grudle, Ano, nenarazím a je to škoda. Když už se někdo rozhoupe, že kód Analytics změní, měl by ho vyměnit právě za GTM, a ne zase jen za kód Analytics, byť asi lepší. Nezapomeň, že minimální počet různých kódů v typických stránkách je nyní sedm – Anaytics + po dvou Adwords, Sklik a Facebook – a někdy ještě víc.

    před 9 lety | reagoval [13] Petr Soukup
  12. Petr #12

    avatar

    #4 Davide Grudle, Ah, ten odkaz mi unikl, četl jsem to na mobilu. Dík ?

    před 9 lety
  13. Petr Soukup #13

    avatar

    #11 Marku Prokope, Není pak ale důsledkem, že se načítá osm kódů (přestože to není v kódu vidět) a ještě navíc zpožděně kvůli GTM?

    před 9 lety | reagoval [14] Marek Prokop
  14. Marek Prokop #14

    avatar

    #13 Petře Soukupe, Ano, na načítání je možná GTM o fous pomalejší, ale na správu je mnohem efektivnější a méně chybový.

    před 9 lety | reagoval [16] Petr Soukup
  15. André Heller #15

    avatar

    Hlavně výhoda GTM je potom v event handlerech ne? Díky, GTM nám stačí mít na jednom obejktu jeden handler a na základě toho spustím celou řadu dalších kódů, bež GTM bychom museli každý z těchto kódů napojovat odděleně a vážně pochybuji o tom, že to někdo bude dělat do jednoho jediného handleru. Spíš to nabastlí paralelně vedle sebe.

    Nejsem javascriptový expert, tak mě případně opravte, ale není to tak?

    před 9 lety
  16. Petr Soukup #16

    avatar

    #14 Marku Prokope, Ano, tak to myslím. GTM přináší výhodu pouze pro správce, nikoliv pro návštěvníky. Navíc je většinou využíván hlavně protože konkrétní systém nemá lepší možnost, jak měřící kódy napojit.

    Řešíme to totiž denně v eshopech. S GTM si tam obvykle eshopy naprasí kódy v defaultní podobě, která je obvykle dost neoptimální. Raději proto máme jednotlivé služby implementované samostatně, ale se všemi vychytávkami – jako je popsáno třeba v tomto článku.

    Tím samozřejmě nechci říct, že je GTM špatný. Ale je často používaný úplně zbytečně nebo rovnou špatně.

    před 9 lety
  17. Pavel Francírek #17

    Jeden důvod vkládání přes JS vidím v tom, že původní verze vloží GA skript na první místo. Tím možná odpadá dost problémů s chybami v jiných JS apod. Takže ano, pokud ten kód použije někdo, kdo ví, co dělá. Pro běžné užití je původní verze asi „blbovzdornější“.

    před 8 lety
  18. Petr #18

    avatar

    Chci se zeptat jaký bude mít tvar kod když bych chtěl na stránky umístit dva měřící kody GA?
    Nebo mám kod jen vložit 2× ten stejny jen s jiným id? Díky za info.

    před 7 lety

Tento článek byl uzavřen. Už není možné k němu přidávat komentáře.


phpFashion © 2004, 2024 David Grudl | o blogu

Ukázky zdrojových kódů smíte používat s uvedením autora a URL tohoto webu bez dalších omezení.