Optimal time to download files from the server

The server response time is the period from sending the request to receiving the first bytes of information. The site page consists of dozens of files. A long server response to a request to download content slows down the site.

If the delay in processing the request is periodic, then the problem is high load. The current server resources are not enough to serve all users at peak load.

You can speed up the server’s return of files in the following ways:

Use HTTP2.
To prevent the server from compressing the file every time before giving it to the user, use pre-gzip compression or caching of compressed files. So, once compressed text files will not require repeated processing, which will greatly save computing resources.
Reduce the size of headlines. Cookies are sent at every request. By reducing them, you will reduce the size of the data transmitted over the network.
Use a faster Nginx web server.
Check that service procedures like “Keep-Alive”, SSL handshakes, caching headers are configured correctly. Make sure that the connection to the server is established 1 time and does not reset after downloading each file.

An example demonstrating the change in page load time depending on the delay in downloading files:

Demonstration

PHP code

HTML code

Open a demo Download the example code

<?php
if(isset($_GET['t'])) {
    switch($_GET['delay'] ?? '') {
        case 1:
            usleep(100000);
            break;
        case 2:
            usleep(200000);
            break;
        default:
            break;
    }
    header('Content-Type: image/jpeg');
    echo file_get_contents('photo.jpg');
    die;
}
$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="./over_time.php">Файлы загружаются без задержки</a> <a class="btn <?=$mode === '1' ? 'active' : ''?>" href="./over_time.php?mode=1">Задержка 0.1 секунды</a> <a class="btn <?=$mode === '2' ? 'active' : ''?>" href="./over_time.php?mode=2">Задержка 0.2 секунды</a>
        <p id="page-load">Тут отобразится время загрузки страницы (вызова события window.onload)</p>
        <div class="product-grid">
<?php for($i = 0; $i < 20;++$i) { ?>
<div class="product">
    <img src="./over_time.php?t=<?=microtime(true)+$i?>&delay=<?=$mode?>" 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;
                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="./over_time.php">Файлы загружаются без задержки</a> <a class="btn " href="./over_time.php?mode=1">Задержка 0.1 секунды</a> <a class="btn " href="./over_time.php?mode=2">Задержка 0.2 секунды</a>
        <p id="page-load">Тут отобразится время загрузки страницы (вызова события window.onload)</p>
        <div class="product-grid">
<div class="product">
    <img src="./over_time.php?t=1770055050.8156&delay=" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./over_time.php?t=1770055051.8156&delay=" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./over_time.php?t=1770055052.8156&delay=" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./over_time.php?t=1770055053.8156&delay=" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./over_time.php?t=1770055054.8156&delay=" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./over_time.php?t=1770055055.8156&delay=" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./over_time.php?t=1770055056.8156&delay=" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./over_time.php?t=1770055057.8156&delay=" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./over_time.php?t=1770055058.8156&delay=" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./over_time.php?t=1770055059.8156&delay=" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./over_time.php?t=1770055060.8156&delay=" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./over_time.php?t=1770055061.8156&delay=" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./over_time.php?t=1770055062.8156&delay=" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./over_time.php?t=1770055063.8156&delay=" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./over_time.php?t=1770055064.8156&delay=" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./over_time.php?t=1770055065.8156&delay=" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./over_time.php?t=1770055066.8156&delay=" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./over_time.php?t=1770055067.8156&delay=" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./over_time.php?t=1770055068.8156&delay=" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./over_time.php?t=1770055069.8156&delay=" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
        </div>
    </body>
</html>

Lessons

Optimal time to download files from the server

PRO subscription for working with the service