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

Уроки

Использование современного 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;
                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="/course-example/photo.jpg?t=1780832188.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832189.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832190.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832191.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832192.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832193.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832194.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832195.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832196.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832197.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832198.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832199.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832200.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832201.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832202.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832203.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832204.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832205.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832206.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832207.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832208.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832209.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832210.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832211.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832212.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832213.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832214.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832215.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832216.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832217.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832218.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832219.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832220.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832221.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832222.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832223.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832224.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832225.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832226.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832227.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832228.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832229.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832230.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832231.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832232.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832233.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832234.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832235.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832236.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832237.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832238.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832239.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832240.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832241.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832242.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832243.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832244.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832245.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832246.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832247.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832248.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832249.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832250.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832251.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832252.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832253.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832254.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832255.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832256.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832257.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832258.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832259.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832260.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832261.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832262.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832263.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832264.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832265.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832266.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832267.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832268.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832269.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832270.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832271.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832272.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832273.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832274.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832275.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832276.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832277.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832278.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832279.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832280.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832281.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832282.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832283.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832284.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832285.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832286.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="/course-example/photo.jpg?t=1780832287.78" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
        </div>
    </body>
</html>

Тарифные планы для работы с сервисом

Подробнее о тарифах
x

Мы используем cookie. Продолжая пользоваться сайтом, вы соглашаетесь на обработку персональных данных в соответствии с политикой конфиденциальности. Соглашаюсь