Заголовок «Keep alive»

Веб страница состоит из десятков файлов. Перед началом загрузки идёт так называемый процесс установки соединения. Эта служебная операция, которая является обязательным действием.

Заголовок «Keep alive» сообщает браузеру не обрывать соединение по окончании загрузки одного файла и дождаться, пока остальные файлы загрузятся. Если этого не сделать, браузер будет тратить лишнее время на установку нового соединения для каждого файла.

Демонстрация разницы в скорости загрузки при включённом и отключённом заголовке «Keep alive»:

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

PHP код

Код htaccess

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="./no_keep_alive.php">Обычный режим</a> <a class="btn <?=$mode === 'disable' ? 'active' : ''?>" href="./no_keep_alive.php?mode=disable">Отключённый заголовок Keep Alive</a>
        <p id="page-load">Тут отобразится время загрузки страницы (вызова события window.onload)</p>
        <div class="product-grid">
<?php for($i = 0; $i < 50;++$i) { ?>
<div class="product">
    <img src="https://worker1.site-alarm.com/<?=$mode === 'disable' ? 'photo-http1-1.jpg?t='.(microtime(true)+$i).'&keep-alive=disable' : 'photo.jpg?t='.(microtime(true)+$i)?>" /><br />
    Товар 1<br />
    1000 руб.
</div>
<?php } ?>
        </div>
    </body>
</html>

<If "%{THE_REQUEST} =~ m#photo-http1-1\.jpg#">
    Header set Connection "close"
</If>

<!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="./no_keep_alive.php">Обычный режим</a> <a class="btn " href="./no_keep_alive.php?mode=disable">Отключённый заголовок Keep Alive</a>
        <p id="page-load">Тут отобразится время загрузки страницы (вызова события window.onload)</p>
        <div class="product-grid">
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1770050266.2114" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1770050267.2114" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1770050268.2114" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1770050269.2114" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1770050270.2114" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1770050271.2114" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1770050272.2114" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1770050273.2114" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1770050274.2114" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1770050275.2114" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1770050276.2114" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1770050277.2114" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1770050278.2114" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1770050279.2115" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1770050280.2115" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1770050281.2115" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1770050282.2115" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1770050283.2115" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1770050284.2115" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1770050285.2115" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1770050286.2115" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1770050287.2115" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1770050288.2115" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1770050289.2115" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1770050290.2115" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1770050291.2115" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1770050292.2115" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1770050293.2115" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1770050294.2115" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1770050295.2115" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1770050296.2115" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1770050297.2115" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1770050298.2115" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1770050299.2115" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1770050300.2115" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1770050301.2115" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1770050302.2115" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1770050303.2115" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1770050304.2115" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1770050305.2115" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1770050306.2115" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1770050307.2115" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1770050308.2115" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1770050309.2115" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1770050310.2115" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1770050311.2115" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1770050312.2115" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1770050313.2115" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1770050314.2115" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1770050315.2115" /><br />
    Товар 1<br />
    1000 руб.
</div>
        </div>
    </body>
</html>

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

ПРО подписка

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

1 580 ₽

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

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