The server is located in the same country where the users of the site live

The further away the servers are from the user, the more time it will take for the signal to travel the distance back and forth. This delay is called ping and depends on the distance, the number of hops (the number of routers between the user and the site), as well as the route of network packets.

The smaller the distance from the user to the server, the less ping and the faster the page loads.

Demonstration of the difference in the download time of a file located in different countries:

Demonstration

PHP code

HTML code

Open a demo Download the example code

<?php
if(isset($_GET['location'])) {
    switch($_GET['location']) {
        case 'ger':
            usleep(55000);
            break;
        case 'us':
            usleep(150000);
            break;
        case 'sing':
            usleep(190000);
            break;
        default:
            break;
    }
    header('Content-Type: image/jpeg');
    echo file_get_contents('photo.jpg');
    die;
}
$mode = $_GET['mode'] ?? '';
?><!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            .product-grid {
                display: grid;
                grid-template-columns: 1fr 1fr 1fr 1fr;
                font-size: 20px
            }
            .product-grid img {
                width: 100%;
            }
            .product-grid .product {
                position: relative;
            }
            .product-grid .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="./hosting.php">Обновить страницу</a><br /><br />
        <div class="product-grid">
            <div class="product">
                <img src="./hosting.php?location=default" onload="endLoading(this)" /><br />
                Обычный пинг
            </div>
            <div class="product">
                <img src="./hosting.php?location=ger" onload="endLoading(this)" /><br />
                Германия
            </div>
            <div class="product">
                <img src="./hosting.php?location=us" onload="endLoading(this)" /><br />
                США
            </div>
            <div class="product">
                <img src="./hosting.php?location=sing" onload="endLoading(this)" /><br />
                Сингапур
            </div>
        </div>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            .product-grid {
                display: grid;
                grid-template-columns: 1fr 1fr 1fr 1fr;
                font-size: 20px
            }
            .product-grid img {
                width: 100%;
            }
            .product-grid .product {
                position: relative;
            }
            .product-grid .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="./hosting.php">Обновить страницу</a><br /><br />
        <div class="product-grid">
            <div class="product">
                <img src="./hosting.php?location=default" onload="endLoading(this)" /><br />
                Обычный пинг
            </div>
            <div class="product">
                <img src="./hosting.php?location=ger" onload="endLoading(this)" /><br />
                Германия
            </div>
            <div class="product">
                <img src="./hosting.php?location=us" onload="endLoading(this)" /><br />
                США
            </div>
            <div class="product">
                <img src="./hosting.php?location=sing" onload="endLoading(this)" /><br />
                Сингапур
            </div>
        </div>
    </body>
</html>

Lessons

The server is located in the same country where the users of the site live

PRO subscription for working with the service