Время генерации 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;
                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;
                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>

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

ПРО подписка

Для регулярной работы над сайтом или группой сайтов.

1 580 ₽

3500 страниц в неделю. Срок подписки — 1 месяц.

Баланс пополняется ежедневно на 500 страниц. Максимум баланса - 3 500.
1 страница даёт 1 запуск инструмента Проверка страницы или 1 внутренняя HTML страница вашего сайта в инструменте Проверка сайта
До 50 страниц в одной проверке в инструментах удаление неиспользуемого CSS/JS
Неограниченные проверки в инструментах пальцеприятность и отзывчивость интерфейса