Использование современного HTTP2 протокола для ускорения сайта

Протокол HTTP2 опубликован в 2015 году и на сегодняшний день имеет полную поддержку всеми современными браузерами. Его использование ускоряет загрузку в среднем на 23%.

Однако веб серверы, как nginx и apache по умолчанию используют устаревшую версию HTTP1.1. Чтобы включить HTTP2, надо внести соответствующие настройки.

Статья по настройке Nginx и Apache.

Демонстрация разницы во времени загрузки страницы с и без использования HTTP2 протокола:

Демонстрация

PHP код

HTML код

Открыть демонстрацию Скачать код примера

<?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>

ПРО подписка для работы с сервисом

ПРО подписка

Для регулярной работы над сайтом или группой сайтов.

1 580 ₽

3500 страниц в неделю. Срок подписки — 1 месяц.

Баланс пополняется ежедневно на 500 страниц. Максимум баланса - 3 500.
1 страница даёт 1 запуск инструмента Проверка страницы или 1 внутренняя HTML страница вашего сайта в инструменте Проверка сайта
До 50 страниц в одной проверке в инструментах удаление неиспользуемого CSS/JS
Неограниченные проверки в инструментах пальцеприятность и отзывчивость интерфейса