ETag header for caching operation

The page consists of dozens of files, and 95% of the files can be shared by all pages of the site. Caching was invented so that each time you do not re-download the same files when switching from one page to another.

There are 3 caching mechanisms:

The “cache-control” or “expires” headers indicate how long the content will be relevant. During this time, the user’s browser uses the saved copy of the file and does not make any requests to the server.
Caching via “etag”. The server generates a unique string based on the contents of the file, and the user’s browser asks each time if the file has changed and provides this string.
The title is “Last-Modified”. The server reports the date of the last file change, and the browser asks each time if the file has changed since that time.

If the server does not provide the “etag” string, then the user’s browser will not be able to cache the file.

Instruction [How to set up caching] (/blog/apache_i_nginx_tyuning_bystrodeystviya).

Demonstration of the speed of operation between running caching and disabled:

Demonstration

PHP code

HTML code

Open a demo Download the example code

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

Tariff plans for working with the service

Service test

1 page per month

0₽ per page

For 1 site

Free of charge

Tools available:

One-time verification

pages by 10 day

6.6₽ per page

For 1 site

990₽ / one-time

Tools available:

Select

Subscription

pages by 30 day

₽ per page

Any website

/ month

Tools available:

Additional pages

For an active subscription

spend during the year

Any website

*0.3 - 3₽ / 1 page

Additional pages for the Subscription plan.

Adding funds via your merchant profile.

*The price depends on the active subscription. The more expensive the tariff, the cheaper the additional pages.