/ /
Оптимальное время загрузки файлов с сервера

Уроки

Оптимальное время загрузки файлов с сервера

Время ответа сервера — это период от отправки запроса до получения первых байт информации. Страница сайта состоит из десятков файлов. Долгий ответ сервера на запрос о загрузке контента замедляет работу сайта.

Если задержка в обработке запроса имеет периодический характер, то значит проблема в высокой нагрузке. Текущих ресурсов сервера не хватает, чтобы обслужить всех пользователей в пиковой нагрузке.

Вы можете ускорить отдачу файлов сервером следующими способами:

  • Используйте HTTP2.
  • Чтобы сервер не сжимал файл каждый раз перед его отдачей пользователю, используйте предварительное gzip сжатие или кеширование сжатых файлов. Так, единожды сжатые текстовые файлы не потребуют повторной обработки, что сильно сэкономит вычислительные ресурсы.
  • Сократите размер заголовков. Файлы cookies отправляются при каждом запросе. Сократив их, вы уменьшите размер передаваемых по сети данных.
  • Используйте более быстрый веб-сервер Nginx.
  • Проверьте, что служебные процедуры вроде «Keep-Alive», рукопожатия SSL, заголовки кеширования настроены корректно. Убедитесь, что соединение с сервером устанавливается 1 раз и не сбрасывается после загрузки каждого файла.

Пример, демонстрирующий изменение времени загрузки страницы в зависимости от задержки при загрузке файлов:

Демонстрация
PHP код
HTML код
Открыть демонстрациюСкачать код примера
<?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;
                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="./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;
                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="./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=1783198275.3722&delay=" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./over_time.php?t=1783198276.3722&delay=" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./over_time.php?t=1783198277.3722&delay=" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./over_time.php?t=1783198278.3722&delay=" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./over_time.php?t=1783198279.3722&delay=" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./over_time.php?t=1783198280.3722&delay=" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./over_time.php?t=1783198281.3722&delay=" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./over_time.php?t=1783198282.3722&delay=" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./over_time.php?t=1783198283.3722&delay=" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./over_time.php?t=1783198284.3722&delay=" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./over_time.php?t=1783198285.3722&delay=" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./over_time.php?t=1783198286.3722&delay=" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./over_time.php?t=1783198287.3722&delay=" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./over_time.php?t=1783198288.3722&delay=" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./over_time.php?t=1783198289.3722&delay=" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./over_time.php?t=1783198290.3722&delay=" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./over_time.php?t=1783198291.3722&delay=" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./over_time.php?t=1783198292.3722&delay=" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./over_time.php?t=1783198293.3722&delay=" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./over_time.php?t=1783198294.3722&delay=" onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
        </div>
    </body>
</html>

Тарифные планы для работы с сервисом

Подробнее о тарифах
x

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