Premature file upload

When the page loads, 2 events are executed: DOMContentLoaded and load'. The first event is triggered when HTML and JavaScript files are loaded (except for asynchronous ones). It is theDOMContentLoadedevent that the jQuery function$( handler )responds to. The 'load event is called when all images and CSS files are loaded in addition to HTML and JavaScript.

All files in the pages are loaded in the order in which they are listed on the page. But it is possible to load JavaScript out of turn, in parallel. This is called asynchronous loading. Most external services, such as analytics systems, online consultants, captchas, maps, and various advertising counters are loaded asynchronously so as not to delay the loading of visual content and JavaScript files of the site itself. This speeds up the download a little, but still this asynchronous JavaScipt loads the Internet channel and the computing power of the device. That is, even asynchronous scripts slow down the loading of visual content.

Therefore, it is better to download all auxiliary external services as late as possible. We recommend that you divide the page loading into the following stages:

Loading via an ad in the HTML code of the page

Fonts.
Pictures and any other content on the first screen. For example, if there is a map on the first screen, then we load map services immediately.
CSS styles responsible for the visual of the page.
JavaScript files responsible for the functionality of the page.

Loading in the DOMContentLoaded event

Delayed loading of images. Most deferred loading plugins hang their handlers precisely on the ‘DOMContentLoaded` event.
The whole logic of the page. For example, form validation handlers, button clicks, etc. When you specify the $( handler)' event handler in jQuery in order to hang onhover or onclick events on the buttons, this code is executed exactly during ‘DOMContentLoaded’.

Load event

Counters, online consultants, maps, third-party authorization systems (VK ID, Yandex ID, etc.) need to be loaded at this stage so that they do not slow down the page loading in any way. To do this better using the construct javascript window.addEventListener("load", (event) => { setTimeout(function() { // Here is a call to the loading code }, 50); }); or jQuery version javascript $(window).on("load", function(event) { setTimeout(function() { // Here is a call to the loading code }, 50); })
Captchas need to be uploaded when the form starts filling out. That is, by the focus event of the form field.
All kinds of analytics systems, except the main one, should also be downloaded through this event. For example, if you use Yandex.metrica and Google Analytics, then you can download Yandex.Metrica immediately, and Google analytics through the construction shown in the first paragraph.

◀ Long JavaScript Matching language and hosting ▶

Any comments or additions? Send us an email admin@site-alarm.com .

Check your website