Отсутствие запросов в другую страну, вызывающих блокировку загрузки страницы

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

Если вы используйте зарубежные сервисы как счётчики, API карт, системы авторизации, платёжные системы, CDN сервисы, каптчи и т.д., то позаботьтесь о том, чтобы подключение этих скриптов было неблокирующим. Иначе такие сервисы замедляют загрузку страницы из-за высокой задержки (пинге) при загрузке.

Подключайте сервис в JavaScript функции в событии ready.

Пример на jQuery:

$(document).ready(function () {
    var script = document.createElement("script");
    script.src = "https://example.com/script.js"; // путь до вашего файла
    document.head.appendChild(script);
});

Пример на нативном JavaScript:

window.addEventListener('load', function() {
    var script = document.createElement("script");
    script.src = "https://example.com/script.js"; // путь до вашего файла
    document.head.appendChild(script);
});

Демонстрация разницы во времени загрузки файла, находящегося в разных странах:

Демонстрация

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>');
            }
        </script>
    </head>
    <body style="font-family: sans-serif;">
        <a class="btn" href="./external_block_request.php">Обновить страницу</a><br /><br />
        <div class="product-grid">
            <div class="product">
                <img src="./external_block_request.php?location=default" onload="endLoading(this)" /><br />
                Обычный пинг
            </div>
            <div class="product">
                <img src="./external_block_request.php?location=ger" onload="endLoading(this)" /><br />
                Германия
            </div>
            <div class="product">
                <img src="./external_block_request.php?location=us" onload="endLoading(this)" /><br />
                США
            </div>
            <div class="product">
                <img src="./external_block_request.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;
                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="./external_block_request.php">Обновить страницу</a><br /><br />
        <div class="product-grid">
            <div class="product">
                <img src="./external_block_request.php?location=default" onload="endLoading(this)" /><br />
                Обычный пинг
            </div>
            <div class="product">
                <img src="./external_block_request.php?location=ger" onload="endLoading(this)" /><br />
                Германия
            </div>
            <div class="product">
                <img src="./external_block_request.php?location=us" onload="endLoading(this)" /><br />
                США
            </div>
            <div class="product">
                <img src="./external_block_request.php?location=sing" onload="endLoading(this)" /><br />
                Сингапур
            </div>
        </div>
    </body>
</html>

ПРО подписка для работы с сервисом

Подробнее о тарифах