Lessons
-
Introduction
-
Search engine optimization
- Broken links
- Site map
- Micro-markup
- Robots.txt
- References
- Text
- Duplicates
- Basic
- Pictures
-
Speed
-
Minification
-
CSS minification
Minification of JavaScript files
Minification of inline CSS code
Minification of images without loss of quality
Minification of JavaScript files
Unused CSS code
Data optimization:Image URLs
Format of animated images
Unused JavaScript code
Using WebP
Image compression is missing
Video bitrate
-
Reducing requests
-
An overabundance of small pictures
Ungrouped CSS files
Ungrouped JavaScript files
An overabundance of fonts
Availability of end-to-end CSS, JS files
The presence of a monochrome font
Uploading duplicate files
Using JS facades
Redirecting JavaScript code
Adding lazy loading
Redirect from/to www version
- Fonts
- Loading time
- Server Settings
- Pictures
- The first content
-
Minification
- Mobility
- Bugs
-
Convenience
- Social networks
- Web Application Manifest
- Favicons
- Basic
- Text readability
-
Security
- Encrypted connection
- Exploits
- Vulnerabilities
Long JavaScript
All browser JavaScript code is executed in a single execution thread. This means that all scripts, even asynchronous ones, are executed strictly sequentially. That is, JavaScript does not have parallel calculations in the browser.
If you connect the script of an online consultant, maps, captcha, analytics counters on the page, they will be executed immediately. This will delay the display of really important content.
The execution rate of a separately loaded JavaScript file is 0.05 seconds. And for all inline scripts in the HTML code of the page - 0.15 seconds.
To fix this, download third-party service scripts as follows:
- Counters, online consultants, maps (with the exception of the one located on the first screen), 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 make it better with the help of construction window.addEventListener("load", (event) => {
setTimeout(function() {
// Here is a call to the loading code
}, 50);
}); or jQuery version $(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.