304 код ответа при проверке работы кеширования

Страница состоит из десятков файлов, причём 95% файлов могут быть общими для всех страниц сайта. Кеширование придумали, чтобы каждый раз не загружать эту информацию.

Есть 3 механизма кеширования:

Заголовки «cache-control» или «expires» сообщают о том, сколько времени контент будет актуальным. В течение этого времени, браузер пользователя используют сохранённую у себя копию файла и не делает никаких запросов на сервер.
Кеширование через «etag». Сервер генерирует уникальную строку на основе контента и браузер пользователя каждый раз переспрашивает, а не изменился ли файл и предоставляет эту строку.
Заголовок «Last-Modified». Сервер сообщает дату последнего изменения файла, а браузер каждый раз переспрашивает, не изменился ли файл с того времени.

Когда браузер отправляет к серверу запрос о том, а не изменился ли файл, сервер должен ответить 304 кодом. Если этого не происходит, значит кеширование не работает. Это замедляет загрузку страниц сайта.

Инструкция Как настроить кеширование.

Демонстрация скорости загрузки страницы при включённом и отключённом кешировании:

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

PHP код

HTML код

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

<?php
if(isset($_GET['img'])) {
    header('Content-Type: image/jpeg');
    echo file_get_contents('photo.jpg');
    die;
}
?><!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            .example {
                display: flex;
            }
            .img {
                position: relative;
            }
            img {
                width: 250px;
            }
            .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>');
            }
        </script>
    </head>
    <body style="font-family: sans-serif;">
        <a class="btn" href="./no_304_code_response_for_test_caching_request.php">Обновить страницу</a><br /><br />
        <div class="example">
            <div class="element">
                Кеширование отключено<br />
                <div class="img">
                    <img src="./no_304_code_response_for_test_caching_request.php?img=1" onload="endLoading(this)" />
                </div>
            </div>
            <div class="element">
                Кеширование работает<br />
                <div class="img">
                    <img src="./photo.jpg" onload="endLoading(this)" />
                </div>
            </div>
        </div>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            .example {
                display: flex;
            }
            .img {
                position: relative;
            }
            img {
                width: 250px;
            }
            .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>');
            }
        </script>
    </head>
    <body style="font-family: sans-serif;">
        <a class="btn" href="./no_304_code_response_for_test_caching_request.php">Обновить страницу</a><br /><br />
        <div class="example">
            <div class="element">
                Кеширование отключено<br />
                <div class="img">
                    <img src="./no_304_code_response_for_test_caching_request.php?img=1" onload="endLoading(this)" />
                </div>
            </div>
            <div class="element">
                Кеширование работает<br />
                <div class="img">
                    <img src="./photo.jpg" onload="endLoading(this)" />
                </div>
            </div>
        </div>
    </body>
</html>

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

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