File upload delayed or on demand

First of all, you need to download the content that is located on the first screen. This way the user will start exploring the site faster, which will increase the conversion rate. The download of all other content needs to be postponed. To do this, call the loading of heavy scripts and services in the window.onload event or at the time of their demand.

Content

Delayed loading of analytics tags

Cartographic services, online consultants, third-party authorization systems (VK ID, Yandex ID, etc.)

Captchas

Delayed loading of analytics tags

Although companies that supply analytics systems recommend downloading their code as early as possible, they do not provide technical explanations why this should be done. Therefore, it is possible and necessary to load the counters postponed.

You can postpone the Yandex Metrica download like this:

window.addEventListener("load", function() {
    (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();
    for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
    k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
    (window, document, "script", "https://mc.yandex.ru/metrika/tag.js", "ym");

    ym(123123123, "init", {
         clickmap:true,
         trackLinks:true,
         accurateTrackBounce:true,
         webvisor:true
    });
});

Google Analytics like this:

window.addEventListener("load", function() {
    (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();
for (var j = 0; j < document.scripts.length; j++) {if (document.scripts[j].src === r) { return; }}
k=e.createElement(t),a=e.getElementsByTagName(t)[0],k.async=1,k.src=r,a.parentNode.insertBefore(k,a)})
(window, document, "script", "https://www.googletagmanager.com/gtag/js?id=G-123123123", "ga");
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());

    gtag('config', 'G-123123123');
});

In addition to the Yandex metric and Google Analytics in the event window.onload need to load all advertising and referral counters.

Cartographic services, online consultants, third-party authorization systems (VK ID, Yandex ID, etc.)

If the map is located on the first screen, then it needs to be loaded immediately, if below, then in the window.onload event.

It is done this way:

window.addEventListener("load", (event) => {
    setTimeout(function() {
// Here is a call to the loading code
    }, 50);
});
``
or jQuery version
```language-javascript
$(window).on("load", function(event) {
    setTimeout(function() {
// Here is a call to the loading code
    }, 50);
})

Captchas

The captcha script must be initiated when the form fields are filled in. That is, by the focus event on any of the form fields.

Here is the jQuery code that initiates the Yandex captcha for the form when the user starts filling it out:

“language-javascript /A function that connects a captcha to a form/ function initSmCaptcha(form) { // Check if a captcha was initiated earlier if(form.is(‘[sm-captcha-applied]’)) return; // Adding captcha initiation at the focus event form.find(‘[type=text], [type=tel], [type=email]’).focus(function() { form.attr(‘sm-captcha-applied’, ”); // Adding a block unique to the form for displaying captchas var containerId = ‘captcha-container-‘+(new Date).getTime(); form.append(‘

’); var renderCaptcha = function() { window.smartCaptcha.render(containerId, { sitekey: ‘SMARTCAPTCHA_CLIENT_KEY’, invisible: true }); }; if (!window.smartCaptcha) // Loading the captcha code $.getScript(‘https://captcha-api.yandex.ru/captcha.js’, renderCaptcha); else renderCaptcha(); }); } “`

Lessons

File upload delayed or on demand

Delayed loading of analytics tags

Cartographic services, online consultants, third-party authorization systems (VK ID, Yandex ID, etc.)

Captchas

PRO subscription for working with the service