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

Уроки

Заголовок «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;
                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="./no_keep_alive.php">Обычный режим</a> <a class="btn <?=$mode === 'disable' ? 'active' : ''?>" href="./no_keep_alive.php?mode=disable">Отключённый заголовок Keep Alive</a>
        <br />
        <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;
                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="./no_keep_alive.php">Обычный режим</a> <a class="btn " href="./no_keep_alive.php?mode=disable">Отключённый заголовок Keep Alive</a>
        <br />
        <p id="page-load">Тут отобразится время загрузки страницы (вызова события window.onload)</p>
        <div class="product-grid">
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1772883424.1766" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1772883425.1766" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1772883426.1766" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1772883427.1766" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1772883428.1766" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1772883429.1766" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1772883430.1766" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1772883431.1766" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1772883432.1766" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1772883433.1766" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1772883434.1766" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1772883435.1766" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1772883436.1766" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1772883437.1766" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1772883438.1766" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1772883439.1766" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1772883440.1766" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1772883441.1766" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1772883442.1766" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1772883443.1766" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1772883444.1766" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1772883445.1766" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1772883446.1766" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1772883447.1766" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1772883448.1766" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1772883449.1766" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1772883450.1766" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1772883451.1766" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1772883452.1766" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1772883453.1766" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1772883454.1766" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1772883455.1766" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1772883456.1766" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1772883457.1766" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1772883458.1766" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1772883459.1766" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1772883460.1766" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1772883461.1766" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1772883462.1766" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1772883463.1766" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1772883464.1767" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1772883465.1767" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1772883466.1767" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1772883467.1767" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1772883468.1767" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1772883469.1767" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1772883470.1767" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1772883471.1767" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1772883472.1767" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1772883473.1767" /><br />
    Товар 1<br />
    1000 руб.
</div>
        </div>
    </body>
</html>

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

Промо
Проверка 50 страниц в инструменте «Проверка страницы»
190 ₽
Подписка активируется на 10 дней и привязана к определённому сайту.
ПРО подписка
3500 страниц в неделю в инструментах «Проверка страницы» и «Полное сканирование сайта».
1 580 ₽
Подписка активируется на 30 дней и можно сканировать любой сайт.
Кошелёк
Дополнительные страницы, зачисляющиеся на отдельный баланс. Для проверки крупных сайтов.
200 ₽
Количество страниц
Требуется активная ПРО подписка.
Подробнее о тарифах
x

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