How to add analytics counters to the site without worsening the download speed?

Question

Search Engine Optimization

Good afternoon The
task is to set up retargeting in all social networks.
Accordingly, you need to set tracking pixels / counters, but they all slow down the site, given how many of them there are:
Yandex Metrica
Google Analytics
Pixel FB
Pixel VK
Pixel Maytarget

How best to install them without harming the speed of the site? In order not to harm SEOshke, and users

Answer 1

What about this option:

<script>
  setTimeout(function(){
      // Код счетчиков
    }, 5000); 
</script>

We give 5 seconds to load the page and only 5 seconds later we load all this junk.

Answer 2

1. The above advice to use the Tag Manager is correct, but the counters will still slow down the site.
2. Real Indians can do without all these counters. For all tasks, a bundle of three components is enough:
Yandex.Webmaster
SearcheConsole

goaccess your.domain.ru.access.log -o report.html --log-format=COMBINED

Answer 3

All counters are asynchronous and do not affect the site loading speed in any way

Answer 4

Good question from the author.
The correct answer is something like this:
It is important to work on optimizing external connections. There should be asynchrony by default, but it does not save you from overloading the main thread.
Our project has not only Yandex Metrika, Google Analytics, FB pixel, VK pixel, but also Hotjar and utmstat and they do not interfere with anything at all. Everything must be connected correctly, postponing in time and according to events. If an event has occurred, then the time counter is disabled. It is important to find the time for which to postpone the script. So that goals do not go in metrics or in GA. Watch out for download prioritization so that everything stays in working order, but does not affect the download speed.
In detail, how to properly connect an external device, we have shown from now on:https://youtu.be/_3c0aPSkNdc?t=1480 .
There is also an example handler script.
Alexey from loading.express

Answer 5

You just need to upload the scripts to your site, updating them by cron once a day, and not upload them from third-party servers

Answer 6

Regarding Yandex.metrics:
Do not turn on the web browser if it is not needed. TTI in Lighthouse sags significantly.
Regarding google analytics:
Connect via analytics.js , not via gtag.js No
need to setTimeout on connection - it won't help. An asynchronous connection is sufficient.
For the same lighthouse setTimeout can do harm. And if the value is set too high, then the analytics itself will already show distorted data, and the conclusion follows from this - why then do you need analytics at all if you connect it after 5 seconds, as advised here?
About placing scripts on your site:
Anton is quite right and this is not nonsense. By hosting scripts on your server, you can set your own caching headers, which allows you to keep scripts longer with the user. And a CDN can often take longer to respond than its properly configured server.
To update, it is enough to add the necessary script to the cron (download via wget or curl). No infrastructure needs to be deployed for this.
At the expense of the pixels of FB, VK and others - for me this is already superfluous, really.

Answer 7

Use lazy loading of counters by "scroll", "touchstart", "click" action.
Connection example:
Deferred loading of Yandex.Metrica code I
use it in my projects.
Monitored the control pool of requests for one project.
1. Made changes (a lot of things, not only analytics scripts), Google Page Speed ​​indicators were ~35/65 became 100/100.
2. In the Google search-console, in the "Basic Internet indicators" / "Mobile" section, I sent pages with low indicators for rechecking. Takes 28 days.
3. After a couple of months from the moment of editing, there was an increase in established positions on Google - they moved from the range of 5-7 to 3-5.
Without the lazy loading metric, Google Page Speed ​​was ~92/98. The main reason is that third-party code has blocked the main thread.

Answer 8

To begin with, determine for yourself what download speed is, if it’s kb / s, this is no answer, usually this is the time before interacting with the site at 3g speed, and for this, html and critical css are enough to load, everything else can be later and does not affect the concept of download speed site.

Answer 9

1) check the asynchrony of the script
2) disable webvisors - they are for pampering

Answer 10

The best way is to make sure that the metric script code starts loading after the page starts scrolling. This is how my site is https://aliprofi.ru , you can check the speed of my site in Google Speed ​​:)
This is what my metric code looks like:

<script type="text/javascript" >
var fired = false;

window.addEventListener('scroll', () => {
    if (fired === false) {
        fired = true;
        
        setTimeout(() => {

(function(m,e,t,r,i,k,a){m[i]=m[i]||function(){(m[i].a=m[i].a||[]).push(arguments)}; m[i].l=1*new Date();k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)}) (window, document, "script", "https://cdn.jsdelivr.net/npm/yandex-metrica-watch/tag.js", "ym"); ym(32194894, "init", { clickmap:true, trackLinks:true, accurateTrackBounce:true }); 

}, 1000)
    }
});
</script>