No requests to another country that cause page loading to be blocked

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.

If you use foreign services such as counters, card APIs, authorization systems, payment systems, CDN services, captchas, etc., then make sure that the connection of these scripts is non-blocking. Otherwise, such services slow down page loading due to high latency (ping) during loading.

Enable the service in the JavaScript function in the ready event.

An example in jQuery:

$(document).ready(function () {
    var script = document.createElement("script");
    script.src = "https://example.com/script.js"; // path to your file
    document.head.appendChild(script);
});

Example in native JavaScript:

window.addEventListener('load', function() {
    var script = document.createElement("script");
    script.src = "https://example.com/script.js"; // path to your file
    document.head.appendChild(script);
});

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;
                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>

PRO subscription for working with the service

Learn more about pricing plans