/ /
Удаление отложенной загрузки

Уроки

Удаление отложенной загрузки

Отложенная загрузка — это отличная технология. Её задача — ускорить сайт. Это происходит за счёт загрузки изображений по мере того, как они становятся видны пользователю.

Воздержитесь от неё в следующих случаях:

  • При загрузке изображений, расположенных на первом экране. Если изображение видно на первом экране, то лучше загрузить его как можно раньше. Так, страница визуально загрузится быстрее и пользователь раньше начнёт изучать содержимое, даже если загрузка оставшихся файлов находится в процессе.
  • При загрузке мелких изображений. Такие картинки используются как иконки в интерфейсе. Лучше разместить их прямо в CSS или HTML коде в виде base64 строки.

Пример, как включение отложенной загрузки откладывает показ картинок, расположенных на первом экране.

Демонстрация
PHP код
HTML код
Открыть демонстрациюСкачать код примера
<?php
$mode = $_GET['mode'] ?? '';
?><!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            .product img {
                max-width:100%;
            }
            .product {
                position: relative;
            }
            .product .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 <?=$mode === '' ? 'active' : ''?>" href="./lazyload_remove.php">Отключённая отложенная загрузка</a> <a class="btn <?=$mode === 'enable' ? 'active' : ''?>" href="./lazyload_remove.php?mode=enable">Включённая отложенная загрузка</a>
        <br />
        <p>Обратите внимание на разницу во времени загрузки изображения.</p>
        <div class="product">
            <img src="./photo.jpg?t=<?=microtime(true)?>" <?=$mode === 'enable' ? 'loading="lazy"' : ''?> onload="endLoading(this)" />
        </div>
        <?php for($i = 0; $i < 100;++$i) { ?>
        <script src="./10-kb-js.js?t=<?=microtime(true).'.'.$i?>"/></script>
        <?php } ?>
    </body>
</html>

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <style>
            .product img {
                max-width:100%;
            }
            .product {
                position: relative;
            }
            .product .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 active" href="./lazyload_remove.php">Отключённая отложенная загрузка</a> <a class="btn " href="./lazyload_remove.php?mode=enable">Включённая отложенная загрузка</a>
        <br />
        <p>Обратите внимание на разницу во времени загрузки изображения.</p>
        <div class="product">
            <img src="./photo.jpg?t=1772864022.7024"  onload="endLoading(this)" />
        </div>
                <script src="./10-kb-js.js?t=1772864022.7024.0"/></script>
                <script src="./10-kb-js.js?t=1772864022.7024.1"/></script>
                <script src="./10-kb-js.js?t=1772864022.7024.2"/></script>
                <script src="./10-kb-js.js?t=1772864022.7024.3"/></script>
                <script src="./10-kb-js.js?t=1772864022.7024.4"/></script>
                <script src="./10-kb-js.js?t=1772864022.7024.5"/></script>
                <script src="./10-kb-js.js?t=1772864022.7024.6"/></script>
                <script src="./10-kb-js.js?t=1772864022.7024.7"/></script>
                <script src="./10-kb-js.js?t=1772864022.7024.8"/></script>
                <script src="./10-kb-js.js?t=1772864022.7024.9"/></script>
                <script src="./10-kb-js.js?t=1772864022.7024.10"/></script>
                <script src="./10-kb-js.js?t=1772864022.7024.11"/></script>
                <script src="./10-kb-js.js?t=1772864022.7024.12"/></script>
                <script src="./10-kb-js.js?t=1772864022.7024.13"/></script>
                <script src="./10-kb-js.js?t=1772864022.7024.14"/></script>
                <script src="./10-kb-js.js?t=1772864022.7024.15"/></script>
                <script src="./10-kb-js.js?t=1772864022.7024.16"/></script>
                <script src="./10-kb-js.js?t=1772864022.7024.17"/></script>
                <script src="./10-kb-js.js?t=1772864022.7024.18"/></script>
                <script src="./10-kb-js.js?t=1772864022.7024.19"/></script>
                <script src="./10-kb-js.js?t=1772864022.7024.20"/></script>
                <script src="./10-kb-js.js?t=1772864022.7024.21"/></script>
                <script src="./10-kb-js.js?t=1772864022.7024.22"/></script>
                <script src="./10-kb-js.js?t=1772864022.7024.23"/></script>
                <script src="./10-kb-js.js?t=1772864022.7024.24"/></script>
                <script src="./10-kb-js.js?t=1772864022.7024.25"/></script>
                <script src="./10-kb-js.js?t=1772864022.7024.26"/></script>
                <script src="./10-kb-js.js?t=1772864022.7024.27"/></script>
                <script src="./10-kb-js.js?t=1772864022.7024.28"/></script>
                <script src="./10-kb-js.js?t=1772864022.7024.29"/></script>
                <script src="./10-kb-js.js?t=1772864022.7024.30"/></script>
                <script src="./10-kb-js.js?t=1772864022.7024.31"/></script>
                <script src="./10-kb-js.js?t=1772864022.7024.32"/></script>
                <script src="./10-kb-js.js?t=1772864022.7024.33"/></script>
                <script src="./10-kb-js.js?t=1772864022.7024.34"/></script>
                <script src="./10-kb-js.js?t=1772864022.7024.35"/></script>
                <script src="./10-kb-js.js?t=1772864022.7024.36"/></script>
                <script src="./10-kb-js.js?t=1772864022.7024.37"/></script>
                <script src="./10-kb-js.js?t=1772864022.7024.38"/></script>
                <script src="./10-kb-js.js?t=1772864022.7024.39"/></script>
                <script src="./10-kb-js.js?t=1772864022.7024.40"/></script>
                <script src="./10-kb-js.js?t=1772864022.7024.41"/></script>
                <script src="./10-kb-js.js?t=1772864022.7024.42"/></script>
                <script src="./10-kb-js.js?t=1772864022.7024.43"/></script>
                <script src="./10-kb-js.js?t=1772864022.7024.44"/></script>
                <script src="./10-kb-js.js?t=1772864022.7024.45"/></script>
                <script src="./10-kb-js.js?t=1772864022.7024.46"/></script>
                <script src="./10-kb-js.js?t=1772864022.7024.47"/></script>
                <script src="./10-kb-js.js?t=1772864022.7024.48"/></script>
                <script src="./10-kb-js.js?t=1772864022.7024.49"/></script>
                <script src="./10-kb-js.js?t=1772864022.7024.50"/></script>
                <script src="./10-kb-js.js?t=1772864022.7024.51"/></script>
                <script src="./10-kb-js.js?t=1772864022.7024.52"/></script>
                <script src="./10-kb-js.js?t=1772864022.7024.53"/></script>
                <script src="./10-kb-js.js?t=1772864022.7024.54"/></script>
                <script src="./10-kb-js.js?t=1772864022.7024.55"/></script>
                <script src="./10-kb-js.js?t=1772864022.7024.56"/></script>
                <script src="./10-kb-js.js?t=1772864022.7024.57"/></script>
                <script src="./10-kb-js.js?t=1772864022.7024.58"/></script>
                <script src="./10-kb-js.js?t=1772864022.7024.59"/></script>
                <script src="./10-kb-js.js?t=1772864022.7024.60"/></script>
                <script src="./10-kb-js.js?t=1772864022.7024.61"/></script>
                <script src="./10-kb-js.js?t=1772864022.7024.62"/></script>
                <script src="./10-kb-js.js?t=1772864022.7024.63"/></script>
                <script src="./10-kb-js.js?t=1772864022.7024.64"/></script>
                <script src="./10-kb-js.js?t=1772864022.7024.65"/></script>
                <script src="./10-kb-js.js?t=1772864022.7024.66"/></script>
                <script src="./10-kb-js.js?t=1772864022.7024.67"/></script>
                <script src="./10-kb-js.js?t=1772864022.7024.68"/></script>
                <script src="./10-kb-js.js?t=1772864022.7024.69"/></script>
                <script src="./10-kb-js.js?t=1772864022.7024.70"/></script>
                <script src="./10-kb-js.js?t=1772864022.7024.71"/></script>
                <script src="./10-kb-js.js?t=1772864022.7024.72"/></script>
                <script src="./10-kb-js.js?t=1772864022.7024.73"/></script>
                <script src="./10-kb-js.js?t=1772864022.7024.74"/></script>
                <script src="./10-kb-js.js?t=1772864022.7024.75"/></script>
                <script src="./10-kb-js.js?t=1772864022.7024.76"/></script>
                <script src="./10-kb-js.js?t=1772864022.7024.77"/></script>
                <script src="./10-kb-js.js?t=1772864022.7024.78"/></script>
                <script src="./10-kb-js.js?t=1772864022.7024.79"/></script>
                <script src="./10-kb-js.js?t=1772864022.7024.80"/></script>
                <script src="./10-kb-js.js?t=1772864022.7024.81"/></script>
                <script src="./10-kb-js.js?t=1772864022.7025.82"/></script>
                <script src="./10-kb-js.js?t=1772864022.7025.83"/></script>
                <script src="./10-kb-js.js?t=1772864022.7025.84"/></script>
                <script src="./10-kb-js.js?t=1772864022.7025.85"/></script>
                <script src="./10-kb-js.js?t=1772864022.7025.86"/></script>
                <script src="./10-kb-js.js?t=1772864022.7025.87"/></script>
                <script src="./10-kb-js.js?t=1772864022.7025.88"/></script>
                <script src="./10-kb-js.js?t=1772864022.7025.89"/></script>
                <script src="./10-kb-js.js?t=1772864022.7025.90"/></script>
                <script src="./10-kb-js.js?t=1772864022.7025.91"/></script>
                <script src="./10-kb-js.js?t=1772864022.7025.92"/></script>
                <script src="./10-kb-js.js?t=1772864022.7025.93"/></script>
                <script src="./10-kb-js.js?t=1772864022.7025.94"/></script>
                <script src="./10-kb-js.js?t=1772864022.7025.95"/></script>
                <script src="./10-kb-js.js?t=1772864022.7025.96"/></script>
                <script src="./10-kb-js.js?t=1772864022.7025.97"/></script>
                <script src="./10-kb-js.js?t=1772864022.7025.98"/></script>
                <script src="./10-kb-js.js?t=1772864022.7025.99"/></script>
            </body>
</html>

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

Промо
Проверка 50 страниц в инструменте «Проверка страницы»
190 ₽
Подписка активируется на 10 дней и привязана к определённому сайту.
ПРО подписка
3500 страниц в неделю в инструментах «Проверка страницы» и «Полное сканирование сайта».
1 580 ₽
Подписка активируется на 30 дней и можно сканировать любой сайт.
Кошелёк
Дополнительные страницы, зачисляющиеся на отдельный баланс. Для проверки крупных сайтов.
200 ₽
Количество страниц
Требуется активная ПРО подписка.
Подробнее о тарифах
x

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