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
<?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;
                display: inline-block;
                margin-bottom: 5px;
                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>
        <br />
        <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;
                display: inline-block;
                margin-bottom: 5px;
                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>
        <br />
        <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=1772852703.7068" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852704.7068" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852705.7068" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852706.7068" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852707.7068" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852708.7068" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852709.7068" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852710.7068" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852711.7068" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852712.7068" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852713.7068" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852714.7068" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852715.7068" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852716.7068" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852717.7068" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852718.7068" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852719.7068" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852720.7068" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852721.7068" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852722.7068" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852723.7068" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852724.7068" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852725.7068" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852726.7069" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852727.7069" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852728.7069" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852729.7069" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852730.7069" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852731.7069" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852732.7069" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852733.7069" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852734.7069" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852735.7069" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852736.7069" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852737.7069" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852738.7069" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852739.7069" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852740.7069" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852741.7069" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852742.7069" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852743.7069" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852744.7069" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852745.7069" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852746.7069" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852747.7069" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852748.7069" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852749.7069" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852750.7069" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852751.7069" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852752.7069" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852753.7069" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852754.7069" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852755.7069" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852756.7069" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852757.7069" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852758.7069" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852759.7069" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852760.7069" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852761.7069" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852762.7069" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852763.7069" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852764.7069" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852765.7069" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852766.7069" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852767.7069" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852768.7069" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852769.7069" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852770.7069" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852771.7069" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852772.7069" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852773.7069" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852774.7069" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852775.7069" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852776.7069" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852777.7069" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852778.7069" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852779.7069" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852780.7069" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852781.7069" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852782.7069" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852783.7069" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852784.7069" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852785.7069" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852786.7069" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852787.7069" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852788.7069" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852789.7069" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852790.7069" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852791.7069" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852792.7069" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852793.7069" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852794.7069" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852795.7069" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852796.7069" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852797.7069" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852798.7069" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852799.7069" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852800.7069" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852801.7069" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://site-alarm.com/course-example/photo.jpg?t=1772852802.7069" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
        </div>
    </body>
</html>

PRO subscription for working with the service

Promo
Checking 50 pages in the tool "Checking the page"
190 ₽
The subscription is activated for 10 days and is linked to a specific site.
PRO subscription
3,500 pages per week in tools "Checking the page" and "Full site scan".
1 580 ₽
The subscription is activated for 30 days and you can scan any site.
Wallet
Additional pages that are credited to a separate balance. For checking large sites.
200 ₽
Number of pages
An active PRO subscription is required.
We use cookies. By continuing to use the site, you agree to the processing of personal data in accordance with privacy policy. I agree