/ /
Title "Keep alive"

Lessons

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 demoDownload 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;
                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=1783148705.4381" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1783148706.4381" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1783148707.4381" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1783148708.4381" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1783148709.4381" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1783148710.4381" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1783148711.4381" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1783148712.4381" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1783148713.4381" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1783148714.4381" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1783148715.4381" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1783148716.4381" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1783148717.4381" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1783148718.4381" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1783148719.4381" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1783148720.4381" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1783148721.4381" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1783148722.4381" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1783148723.4381" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1783148724.4381" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1783148725.4381" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1783148726.4381" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1783148727.4381" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1783148728.4381" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1783148729.4381" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1783148730.4381" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1783148731.4381" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1783148732.4381" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1783148733.4381" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1783148734.4381" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1783148735.4381" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1783148736.4381" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1783148737.4381" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1783148738.4381" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1783148739.4381" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1783148740.4381" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1783148741.4381" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1783148742.4381" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1783148743.4381" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1783148744.4381" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1783148745.4381" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1783148746.4381" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1783148747.4381" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1783148748.4381" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1783148749.4381" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1783148750.4381" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1783148751.4381" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1783148752.4381" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1783148753.4381" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="https://worker1.site-alarm.com/photo.jpg?t=1783148754.4381" /><br />
    Товар 1<br />
    1000 руб.
</div>
        </div>
    </body>
</html>

Tariff plans for working with the service

Learn more about pricing plans
x

We use cookies. By continuing to use the site, you agree to the processing of personal data in accordance with privacy policy. I agree