Setting up a pre-connection

Often sites download files from external services. These can be maps or social media widgets. Those, in turn, download data from their sources.

For example, when the Yandex map is displayed on the site, a JavaScript file is loaded https://api-maps.yandex.ru/services/constructor/1.0/js /, and that in turn requests a photo of the cards from the address https://core-renderer-tiles.maps.yandex.net. Thus, after loading the script, he spends time connecting to the site that issues photo cards.

But you can speed up the work of maps by adding a special code to the page that will create a connection to the address https://core-renderer-tiles.maps.yandex.net in advance, even before downloading the JavaScript file itself.

<link rel="preconnect" href="https://core-renderer-tiles.maps.yandex.net" crossorigin />
<link rel="dns-prefetch" href="https://core-renderer-tiles.maps.yandex.net" />

This way, you will speed up the loading of the map from a few tens to hundreds of milliseconds.

But it only makes sense if the map or social media widget is on the first screen. In all other cases, postpone loading the map until the rest of the page loads, or until the user scrolls through the page and is about to see the map.

It is worth preloading font files in order to display the text content of the page as quickly as possible. Links to font files are located in the CSS file. Does it work? fonts will be loaded only after the CSS file is loaded. But if you preload the fonts, they will be displayed immediately after loading the CSS file.This way you will speed up the text display time by several tens of milliseconds. It is done this way:

<link rel="font" href="/path/to/file.woff2" />

Demonstration of the gain in file download speed when pre-connecting:

Demonstration

PHP code

Open a demo Download the example code

<?php
$time = microtime(true);
if(isset($_GET['css'])) {
    header('Content-Type: text/css');
    echo ".image {
    background-image: url(./photo.jpg?t=".$time.");
    width: 200px;
    height: 200px;
    background-size: cover;
    background-repeat: no-repeat;
}";
    die;
}
$mode = $_GET['mode'] ?? '';
?><!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="./error.php?css=<?=$time?>" />
        <?php if($mode === 'enable') { ?>
            <link rel="preload" href="photo.jpg?t=<?=$time?>" as="image" />
        <?php } ?>
        <style>
            .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>
            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="./error.php">Предзагрузка отключена</a> <a class="btn <?=$mode === 'enable' ? 'active' : ''?>" href="./error.php?mode=enable">Предзагрузка включена</a>
        <p id="page-load">Тут отобразится время загрузки страницы (вызова события window.onload)</p>
        <div class="image"></div>
    </body>
</html>

Lessons

Setting up a pre-connection

PRO subscription for working with the service