HTML code generation time

The first file that the user receives when visiting the page is HTML code. Only after that the browser downloads the rest of the files.

It is considered the norm when HTML is loaded before 0.3 seconds.

Also, the faster the HTML code of the page is generated, the less computing resources are spent on its generation. Consequently, the load on the server decreases. So, it will be able to withstand a large peak load. For example, generating a page in 0.25 seconds, the server will be able to issue 4 pages per second. But if you speed up page generation to 0.1 seconds, then the server will already be able to serve 10 visitors per second.

The key tools to speed up the page are:

Caching. Moreover, it is best to use in-memory caching technology like memcache. It demonstrates impressive acceleration.
Page profiling and optimization of “bottlenecks”. This is when the programmer places timestamps throughout the code. If too much time passes between adjacent labels, it means that the code between them is not optimal and there is potential for optimization.

Finding and speeding up slow sections of code is a process that requires perseverance and high professionalism. A programmer can study the code for several days and fix only 1 line. The task of speeding up is much more difficult than writing new functionality.

Demonstration of the difference in page loading time with different HTML code loading times:

Demonstration

PHP code

HTML code

Open a demo Download the example code

<?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>

Lessons

HTML code generation time

PRO subscription for working with the service