Lessons

Redirects when uploading files

When you open a page, the server sends a Location header that redirects you to another page. This additional request increases the opening time of the page. And the longer the page opens, the lower the conversion.

Comparing the time frame for uploading an image file with and without redirection:

Demonstration
PHP code
HTML code
<?php

if(isset($_GET['redirect'])) {
    header("Location: ./redirect_detected.php?img=".microtime(true));
} elseif(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="./redirect_detected.php">Обновить страницу</a><br /><br />
        <div class="example">
            <div class="element">
                Перенаправление<br />
                <div class="img">
                    <img src="./redirect_detected.php?redirect=1" onload="endLoading(this)" />
                </div>
            </div>
            <div class="element">
                Без перенаправления<br />
                <div class="img">
                    <img src="./photo.jpg?t=<?=microtime(true)?>" 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="./redirect_detected.php">Обновить страницу</a><br /><br />
        <div class="example">
            <div class="element">
                Перенаправление<br />
                <div class="img">
                    <img src="./redirect_detected.php?redirect=1" onload="endLoading(this)" />
                </div>
            </div>
            <div class="element">
                Без перенаправления<br />
                <div class="img">
                    <img src="./photo.jpg?t=1776468152.5549" onload="endLoading(this)" />
                </div>
            </div>
        </div>
    </body>
</html>

Tariff plans for working with the service

We use cookies. By continuing to use the site, you agree to the processing of personal data in accordance with privacy policy. I agree