Заголовок «Expires» для работы кеширования

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

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

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

Если сервер не использует заголовки «cache-control» или «expires», отдавая файлы, то браузер будет отправлять запрос на загрузку файлов или сверку кеша по «etag» или «Last-Modified» при каждом посещении страницы. Это замедлит скорость загрузки страницы.

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

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

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

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="./cache_time_header.php">Обновить страницу</a><br /><br />
        <div class="example">
            <div class="element">
                Кеширование отключено<br />
                <div class="img">
                    <img src="./cache_time_header.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="./cache_time_header.php">Обновить страницу</a><br /><br />
        <div class="example">
            <div class="element">
                Кеширование отключено<br />
                <div class="img">
                    <img src="./cache_time_header.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>

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

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