/ /
Using the modern HTTP2 protocol to speed up the site

Lessons

Using the modern HTTP2 protocol to speed up the site

The HTTP2 protocol was published in 2015 and today has full support by all modern browsers. Its use speeds up the download by an average of 23%.

However, web servers like nginx and apache use an outdated version of HTTP1 by default.1. To enable HTTP2, you need to make the appropriate settings.

Article on configuring Nginx and Apache.

Demonstration of the difference in page loading time with and without using the HTTP2 protocol:

Demonstration
PHP code
HTML code
Open a demoDownload the example code
<?php
$mode = $_GET['mode'] ?? '';
?><!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            .product-grid {
                display: grid;
                grid-template-columns: 1fr 1fr 1fr 1fr;
                font-size: 20px
            }
            .product-grid img {
                width: 100%;
            }
            .product-grid .product {
                position: relative;
            }
            .product-grid .time {
                position: absolute;
                left: 5px;
                top: 5px;
                background-color: #fff;
                padding: 1px 4px;
            }
            .btn {
                color: #000;
                text-decoration: none;
                padding: 5px 10px;
                border: 1px solid #000;
                border-radius: 5px;
            }
            .btn:hover {
                background-color: #ddd;
            }
            .btn.active {
                background-color: #000;
                color: #fff;
            }
        </style>
        <script>
            // Функция, которая добавляет на изображение время окончания загрузки
            function endLoading(el) {
                var time = performance.now()/1000;
                el.parentNode.insertAdjacentHTML("beforeend", '<div class="time">'+time+' с</div>');
            }
            window.addEventListener("load", (event) => {
                document.querySelector('#page-load').innerHTML = 'Страница загрузилась (событие window.onload) за <b>'+(performance.now()/1000)+'с</b>.';
            });
        </script>
    </head>
    <body style="font-family: sans-serif;">
        Режим: <a class="btn <?=$mode === '' ? 'active' : ''?>" href="./found.php">HTTP 2</a> <a class="btn <?=$mode === '1.1' ? 'active' : ''?>" href="./found.php?mode=1.1">HTTP 1.1</a>
        <p>На странице 5.41 МБ изображений. При отложенной событие window.load отрабатывает сразу.</p>
        <p id="page-load">Тут отобразится время загрузки страницы (вызова события window.onload)</p>
        <div class="product-grid">
<?php for($i = 0; $i < 100;++$i) { ?>
<div class="product">
    <img src="https://<?=isset($_GET['mode']) && $_GET['mode'] === '1.1' ? 'worker1.site-alarm.com/' : 'site-alarm.com/course-example/' ?>photo.jpg?t=<?=microtime(true)+$i?>" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<?php } ?>
        </div>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            .product-grid {
                display: grid;
                grid-template-columns: 1fr 1fr 1fr 1fr;
                font-size: 20px
            }
            .product-grid img {
                width: 100%;
            }
            .product-grid .product {
                position: relative;
            }
            .product-grid .time {
                position: absolute;
                left: 5px;
                top: 5px;
                background-color: #fff;
                padding: 1px 4px;
            }
            .btn {
                color: #000;
                text-decoration: none;
                padding: 5px 10px;
                border: 1px solid #000;
                border-radius: 5px;
            }
            .btn:hover {
                background-color: #ddd;
            }
            .btn.active {
                background-color: #000;
                color: #fff;
            }
        </style>
        <script>
            // Функция, которая добавляет на изображение время окончания загрузки
            function endLoading(el) {
                var time = performance.now()/1000;
                el.parentNode.insertAdjacentHTML("beforeend", '<div class="time">'+time+' с</div>');
            }
            window.addEventListener("load", (event) => {
                document.querySelector('#page-load').innerHTML = 'Страница загрузилась (событие window.onload) за <b>'+(performance.now()/1000)+'с</b>.';
            });
        </script>
    </head>
    <body style="font-family: sans-serif;">
        Режим: <a class="btn active" href="./found.php">HTTP 2</a> <a class="btn " href="./found.php?mode=1.1">HTTP 1.1</a>
        <p>На странице 5.41 МБ изображений. При отложенной событие window.load отрабатывает сразу.</p>
        <p id="page-load">Тут отобразится время загрузки страницы (вызова события window.onload)</p>
        <div class="product-grid">
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055133.571" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055134.571" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055135.571" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055136.571" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055137.571" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055138.571" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055139.571" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055140.571" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055141.571" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055142.571" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055143.571" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055144.571" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055145.571" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055146.571" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055147.571" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055148.571" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055149.571" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055150.571" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055151.571" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055152.571" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055153.571" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055154.571" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055155.571" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055156.571" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055157.571" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055158.571" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055159.571" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055160.571" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055161.571" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055162.571" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055163.571" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055164.571" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055165.571" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055166.571" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055167.571" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055168.571" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055169.571" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055170.571" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055171.571" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055172.571" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055173.571" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055174.571" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055175.571" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055176.571" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055177.571" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055178.571" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055179.571" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055180.571" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055181.571" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055182.571" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055183.571" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055184.571" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055185.571" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055186.571" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055187.571" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055188.571" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055189.571" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055190.571" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055191.571" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055192.571" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055193.571" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055194.571" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055195.571" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055196.571" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055197.571" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055198.571" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055199.571" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055200.571" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055201.571" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055202.571" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055203.571" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055204.571" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055205.571" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055206.571" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055207.571" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055208.571" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055209.571" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055210.5711" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055211.5711" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055212.5711" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055213.5711" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055214.5711" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055215.5711" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055216.5711" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055217.5711" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055218.5711" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055219.5711" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055220.5711" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055221.5711" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055222.5711" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055223.5711" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055224.5711" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055225.5711" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055226.5711" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055227.5711" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055228.5711" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055229.5711" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055230.5711" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055231.5711" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1770055232.5711" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
        </div>
    </body>
</html>

PRO subscription for working with the service

Promo
To prepare a commercial offer.
190 ₽
50 pages for 10 days
  • 1 page gives 1 tool launch Checking the page.
  • Purchased for a specific site
  • Restrictions on other tools remain the same
PRO subscription
For regular work on a site or a group of sites.
1 580 ₽
3,500 pages per week. The subscription period is 1 month.
Wallet
A separate page balance that complements the PRO subscription balance.
190 ₽
Number of pages
  • An active PRO subscription is required to use the wallet balance
x

We use cookies. By continuing to use the site, you agree to the processing of personal data in accordance with privacy policy. I agree