Na navigaci | Klávesové zkratky

Translate to English… Ins Deutsche übersetzen…

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()
    };
  2. Aleš Roubíček http://www.rarous.net/ #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 rokem | odpovědět
  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 rokem | odpovědět | reagoval [4] David Grudl
  4. David Grudl http://davidgrudl.com #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 rokem | odpovědět | reagoval [12] Petr
  5. Petr Soukup https://www.souki.cz #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 rokem | odpovědět | reagoval [6] Aleš Roubíček
  6. Aleš Roubíček http://www.rarous.net/ #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 rokem | odpovědět | reagoval [7] Petr Soukup
  7. Petr Soukup https://www.souki.cz #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 rokem | odpovědět
  8. David Grudl http://davidgrudl.com #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 rokem | odpovědět
  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 rokem | odpovědět | reagoval [10] David Grudl
  10. David Grudl http://davidgrudl.com #10

    avatar

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

    před rokem | odpovědět | 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 rokem | odpovědět | 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 rokem | odpovědět
  13. Petr Soukup https://www.souki.cz #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 rokem | odpovědět | 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 rokem | odpovědět | 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 rokem | odpovědět
  16. Petr Soukup https://www.souki.cz #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 rokem | odpovědět
  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 rokem | odpovědět

Zanechat komentář

Text komentáře
Kontakt

(kvůli gravataru)



*kurzíva* **tučné** "odkaz":http://example.com /--php phpkod(); \--