Title "Keep alive"

A web page consists of dozens of files. Before the download starts, there is a so-called connection setup process. This is a service operation, which is a mandatory action.

The “Keep alive” header tells the browser not to terminate the connection after downloading one file and wait for the rest of the files to download. If this is not done, the browser will waste extra time setting up a new connection for each file.

Demonstration of the difference in download speed when the “Keep alive” header is enabled and disabled:

Demonstration

PHP code

htaccess code

HTML code

Open a demo Download the example 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;
                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>

Lessons

Title "Keep alive"

PRO subscription for working with the service