Время генерации HTML кода

Первый файл, который получает пользователь при посещении страницы — это HTML код. Только после этого браузер загружает остальные файлы.

Нормой считается, когда HTML загружается до 0.3 секунд.

Также, чем быстрее генерируется HTML код страницы, тем меньше тратится вычислительных ресурсов на его генерацию. Следовательно, нагрузка на сервер уменьшается. Так, он сможет выдержать большую пиковую нагрузку. Например, генерируя страницу за 0.25 секунды, сервер сможет выдать 4 страницы за секунду. Но если ускорить генерацию страницы до 0.1 секунды, то сервер уже сможет обслуживать 10 посетителей в секунду.

Ключевыми инструментами для ускорения страницы являются:

Кеширование. Причём лучше всего использовать технологию кеширования в оперативной памяти вроде memcache. Она демонстрирует впечатляющее ускорение.
Профилирование страницы и оптимизация «узких горлышек». Это когда программист расставляет по всему коду временные метки. Если между соседними метками проходит слишком много времени, значит, код между ними не оптимален и там есть потенциал для оптимизации.

Поиск и ускорение медленных участков кода — процесс, требующий упорства и высокого профессионализма. Программист может несколько дней изучать код, а исправить всего 1 строчку. Задача по ускорению значительно сложнее, чем написание нового функционала.

Демонстрация разницы во времени загрузки страницы при разном времени загрузки HTML кода:

Демонстрация

PHP код

HTML код

Открыть демонстрацию Скачать код примера

<?php
if(isset($_GET['delay'])) {
    switch($_GET['delay']) {
        case '0.1':
            usleep(100000);
            break;
        case '0.5':
            usleep(500000);
            break;
        case '1':
            usleep(1000000);
            break;
        default:
            break;
    }
}
$delay = $_GET['delay'] ?? '';
?><!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            .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>
    </head>
    <body style="font-family: sans-serif;">
        <a class="btn <?=$delay === '' ? 'active' : ''?>" href="./html_loading_too_long.php">Без задержки</a>
        <a class="btn <?=$delay === '0.1' ? 'active' : ''?>" href="./html_loading_too_long.php?delay=0.1">Задержка 0.1 секунда</a>
        <a class="btn <?=$delay === '0.5' ? 'active' : ''?>" href="./html_loading_too_long.php?delay=0.5">Задержка 0.5 секун</a>
        <a class="btn <?=$delay === '1' ? 'active' : ''?>" href="./html_loading_too_long.php?delay=1">Задержка 1 секунда</a>
        <h1>HTML загружен</h1>

        <script>
            var buttons = document.querySelectorAll('.btn');
            for(var i = 0; i < buttons.length; ++i)
                // Сигнализируем о начале загрузки страницы
                buttons[i].addEventListener("click", function() {
                    document.write('<h1>Загружаем страницу</h1>');
                });
        </script>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            .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>
    </head>
    <body style="font-family: sans-serif;">
        <a class="btn active" href="./html_loading_too_long.php">Без задержки</a>
        <a class="btn " href="./html_loading_too_long.php?delay=0.1">Задержка 0.1 секунда</a>
        <a class="btn " href="./html_loading_too_long.php?delay=0.5">Задержка 0.5 секун</a>
        <a class="btn " href="./html_loading_too_long.php?delay=1">Задержка 1 секунда</a>
        <h1>HTML загружен</h1>

        <script>
            var buttons = document.querySelectorAll('.btn');
            for(var i = 0; i < buttons.length; ++i)
                // Сигнализируем о начале загрузки страницы
                buttons[i].addEventListener("click", function() {
                    document.write('<h1>Загружаем страницу</h1>');
                });
        </script>
    </body>
</html>

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

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