>
Сервер размещён в той же стране, где проживают пользователи сайта

Уроки

Сервер размещён в той же стране, где проживают пользователи сайта

Чем больше расстояние между пользователем и сервером, тем больше времени нужно сетевому сигналу, чтобы пройти расстояние туда и обратно. Эта задержка называется ping и зависит от удалённости сервера и пользователя, количества хопов (количества роутеров между пользователем и сайтом), а также маршрута следования сетевых пакетов.

Чем меньше расстояние от пользователя до сервера, тем меньше ping и тем быстрее загружается страница.

Чем больше запросов делается к серверу в другой при загрузке сайта, тем сильнее ping сказывается на замедлении загрузки страницы. Например, при пинге 50 миллисекунд и 30 файлах, замедление загрузки страницы будет 200-500 миллисекунд. При 100 файлах, задержка будет 500-1500 мили секунд. Вы можете убедиться в этом исследуя пример ниже.

Демонстрация разницы во времени загрузки файла и страницы, с большим и маленьким пигном:

Демонстрация
PHP код
HTML код
Открыть демонстрациюСкачать код примера
<?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;
                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>');
            }
            window.addEventListener("load", (event) => {
                document.querySelector('#page-load').innerHTML = 'Страница загрузилась (событие window.onload) за <b>'+(performance.now()/1000)+'с</b>.';
            });
        </script>
    </head>
    <body style="font-family: sans-serif;">
        <a class="btn <?=$mode === '' ? 'active' : ''?>" href="./hosting.php">Файлы из разных стран</a>
        <a class="btn <?=$mode === 'ru' ? 'active' : ''?>" href="./hosting.php?mode=ru">30 файлов Россия</a>
        <a class="btn <?=$mode === 'ge' ? 'active' : ''?>" href="./hosting.php?mode=ge">30 файлов Германия</a>
        <a class="btn <?=$mode === 'ru-100' ? 'active' : ''?>" href="./hosting.php?mode=ru-100">100 файлов Россия</a>
        <a class="btn <?=$mode === 'ge-100' ? 'active' : ''?>" href="./hosting.php?mode=ge-100">100 файлов Германия</a><br />
        <?php if($mode === '') {?>
        <div class="product-grid">
            <div class="product">
                <img src="./hosting.php?location=default&t=<?=microtime(true)+$i?>" onload="endLoading(this)" /><br />
                Обычный пинг
            </div>
            <div class="product">
                <img src="./hosting.php?location=ger&t=<?=microtime(true)+$i?>" onload="endLoading(this)" /><br />
                Германия
            </div>
            <div class="product">
                <img src="./hosting.php?location=us&t=<?=microtime(true)+$i?>" onload="endLoading(this)" /><br />
                США
            </div>
            <div class="product">
                <img src="./hosting.php?location=sing&t=<?=microtime(true)+$i?>" onload="endLoading(this)" /><br />
                Сингапур
            </div>
        </div>
        <?php } elseif($mode === 'ru') {?>
            <p id="page-load">Тут отобразится время загрузки страницы (вызова события window.onload)</p>
            <div class="product-grid">
                <?php for($i = 0; $i < 30;++$i) { ?>
                    <div class="product">
                        <img src="./hosting.php?location=default&t=<?=microtime(true).'-'.$i?>" onload="endLoading(this)" /><br />
                    </div>
                <?php } ?>
            </div>
        <?php } elseif($mode === 'ru-100') {?>
            <p id="page-load">Тут отобразится время загрузки страницы (вызова события window.onload)</p>
            <div class="product-grid">
                <?php for($i = 0; $i < 100;++$i) { ?>
                    <div class="product">
                        <img src="./hosting.php?location=default&t=<?=microtime(true).'-'.$i?>" onload="endLoading(this)" /><br />
                    </div>
                <?php } ?>
            </div>
        <?php } elseif($mode === 'ge') {?>
            <p id="page-load">Тут отобразится время загрузки страницы (вызова события window.onload)</p>
            <div class="product-grid">
                <?php for($i = 0; $i < 30;++$i) { ?>
                    <div class="product">
                        <img src="./hosting.php?location=ger&t=<?=microtime(true).'-'.$i?>" onload="endLoading(this)" /><br />
                    </div>
                <?php } ?>
            </div>
        <?php } elseif($mode === 'ge-100') {?>
            <p id="page-load">Тут отобразится время загрузки страницы (вызова события window.onload)</p>
            <div class="product-grid">
                <?php for($i = 0; $i < 100;++$i) { ?>
                    <div class="product">
                        <img src="./hosting.php?location=ger&t=<?=microtime(true).'-'.$i?>" onload="endLoading(this)" /><br />
                    </div>
                <?php } ?>
            </div>
        <?php }?>
    </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;
                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>');
            }
            window.addEventListener("load", (event) => {
                document.querySelector('#page-load').innerHTML = 'Страница загрузилась (событие window.onload) за <b>'+(performance.now()/1000)+'с</b>.';
            });
        </script>
    </head>
    <body style="font-family: sans-serif;">
        <a class="btn active" href="./hosting.php">Файлы из разных стран</a>
        <a class="btn " href="./hosting.php?mode=ru">30 файлов Россия</a>
        <a class="btn " href="./hosting.php?mode=ge">30 файлов Германия</a>
        <a class="btn " href="./hosting.php?mode=ru-100">100 файлов Россия</a>
        <a class="btn " href="./hosting.php?mode=ge-100">100 файлов Германия</a><br />
                <div class="product-grid">
            <div class="product">
                <img src="./hosting.php?location=default&t=1788288473.0977" onload="endLoading(this)" /><br />
                Обычный пинг
            </div>
            <div class="product">
                <img src="./hosting.php?location=ger&t=1788288473.0977" onload="endLoading(this)" /><br />
                Германия
            </div>
            <div class="product">
                <img src="./hosting.php?location=us&t=1788288473.0977" onload="endLoading(this)" /><br />
                США
            </div>
            <div class="product">
                <img src="./hosting.php?location=sing&t=1788288473.0977" onload="endLoading(this)" /><br />
                Сингапур
            </div>
        </div>
            </body>
</html>

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

Выбрать
Выбрать

Доп. страницы

Для активной подписки
тратьте в течение года
Любой сайт
*0.3 - 3₽ / 1 страница

Дополнительные страницы для тарифа «Подписка».

Пополнение через личный кабинет.

*Цена зависит от активной подписки. Чем дороже тариф — тем дешевле дополнительные страницы.

x

Мы используем cookie. Продолжая пользоваться сайтом, вы соглашаетесь на обработку персональных данных в соответствии с политикой конфиденциальности. Соглашаюсь