Настройка предварительного соединения

Часто сайты загружают файлы из внешних сервисов. Это могут быть карты или виджеты соцсетей. Те, в свою очередь, загружают данные из своих источников.

Например, при отображении карты яндекса на сайте, подгружается JavaScript файл https://api-maps.yandex.ru/services/constructor/1.0/js/, а тот в свою очередь запрашивает фото карт с адреса https://core-renderer-tiles.maps.yandex.net. Таким образом, после загрузки скрипта он тратит время на подключение к сайту, выдающим фото карт.

Но можно ускорить работу карт, добавив на страницу специальный код, который создаст подключение к адресу https://core-renderer-tiles.maps.yandex.net заранее, ещё до загрузки самого JavaScript файла.

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

Таким образом, вы ускорите загрузку карты от несколько десятков до сотни миллисекунд.

Но это имеет смысл, только если карта или виджет соцсетей — находится на первом экране. Во всех остальных случаях отложите загрузку карты до тех пор покамест вся остальная страница не загрузится, либо до момента, когда пользователь, прокручивая страницу, вот-вот увидит карту.

Стоит предзагружать файлы шрифтов, чтобы как можно быстрее отобразить текстовое содержимое страницы. Ссылки на файлы шрифтов располагаются в CSS файле. Получается? загрузка шрифтов произойдёт только после загрузки CSS файла. Но если предзагрузить шрифты, то они отобразятся сразу с загрузкой CSS файла.Так вы ускорите время отображения текста на несколько десятков миллисекунд. Делается это так:

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

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

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

PHP код

Открыть демонстрацию Скачать код примера

<?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;
                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>
            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>
        <br />
        <p id="page-load">Тут отобразится время загрузки страницы (вызова события window.onload)</p>
        <div class="image"></div>
    </body>
</html>

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

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