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

Open a demo Download the example 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;
                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;
                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=1770055195.1965" onload="endLoading(this)" />
                </div>
            </div>
        </div>
    </body>
</html>

Lessons

Redirects when uploading files

PRO subscription for working with the service