/ /
Суммарный размер всех картинок на странице

Уроки

Суммарный размер всех картинок на странице

Большой суммарный размер картинок сигнализирует о нескольких возможных проблемах:

  • Не используется технология отложенной загрузки. Вам надо загрузить только те изображения, которые видны на первом экране. Загружать остальные изображения нужно в момент востребования, когда пользователь прокручивает страницу и они становятся видны.
  • Отсутствует минификация. Не использована возможность уменьшить размер изображений, без потери качества с помощью современных алгоритмов.
  • Вы используете избыточно крупные изображения. Если исходный файл имеет размер 1000 пикселей, а отображается он в блоке размером 150 пикселей, то стоит уменьшить размер исходного файла.

В примере ниже вы можете сравнить, как добавление атрибута loading=”lazy” влияет на скорость загрузки.

Демонстрация
PHP код
HTML код
Открыть демонстрациюСкачать код примера
<?php
if(isset($_GET['t'])) {
    // Симулируем задержку загрузки изображения, как для интернета 4G.
    usleep(100000);
    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>');
            }
            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="./images_total_weight.php">Обычный режим</a> <a class="btn <?=$mode === 'lazy' ? 'active' : ''?>" href="./images_total_weight.php?mode=lazy">Режим отложенной загрузки</a>
        <br />
        <p>На странице 5.41 МБ изображений. При отложенной событие window.load отрабатывает сразу.</p>
        <p id="page-load">Тут отобразится время загрузки страницы (вызова события window.onload)</p>
        <div class="product-grid">
<?php for($i = 0; $i < 100;++$i) { ?>
<div class="product">
    <img src="./images_total_weight.php?t=<?=microtime(true)+$i?>" <?=isset($_GET['mode']) && $_GET['mode'] === 'lazy' ? 'loading="lazy"' : ''?> onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<?php } ?>
        </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>');
            }
            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 active" href="./images_total_weight.php">Обычный режим</a> <a class="btn " href="./images_total_weight.php?mode=lazy">Режим отложенной загрузки</a>
        <br />
        <p>На странице 5.41 МБ изображений. При отложенной событие window.load отрабатывает сразу.</p>
        <p id="page-load">Тут отобразится время загрузки страницы (вызова события window.onload)</p>
        <div class="product-grid">
<div class="product">
    <img src="./images_total_weight.php?t=1783187000.0724"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187001.0724"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187002.0724"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187003.0724"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187004.0724"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187005.0724"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187006.0724"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187007.0724"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187008.0724"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187009.0724"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187010.0724"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187011.0724"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187012.0724"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187013.0724"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187014.0724"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187015.0724"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187016.0724"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187017.0724"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187018.0724"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187019.0724"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187020.0724"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187021.0724"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187022.0724"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187023.0724"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187024.0724"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187025.0724"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187026.0724"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187027.0724"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187028.0724"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187029.0724"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187030.0724"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187031.0724"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187032.0724"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187033.0724"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187034.0724"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187035.0724"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187036.0724"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187037.0724"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187038.0724"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187039.0724"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187040.0724"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187041.0724"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187042.0724"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187043.0724"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187044.0724"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187045.0724"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187046.0724"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187047.0724"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187048.0724"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187049.0724"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187050.0724"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187051.0725"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187052.0725"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187053.0725"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187054.0725"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187055.0725"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187056.0725"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187057.0725"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187058.0725"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187059.0725"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187060.0725"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187061.0725"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187062.0725"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187063.0725"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187064.0725"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187065.0725"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187066.0725"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187067.0725"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187068.0725"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187069.0725"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187070.0725"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187071.0725"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187072.0725"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187073.0725"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187074.0725"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187075.0725"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187076.0725"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187077.0725"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187078.0725"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187079.0725"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187080.0725"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187081.0725"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187082.0725"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187083.0725"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187084.0725"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187085.0725"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187086.0725"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187087.0725"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187088.0725"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187089.0725"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187090.0725"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187091.0725"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187092.0725"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187093.0725"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187094.0725"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187095.0725"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187096.0725"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187097.0725"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187098.0725"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1783187099.0725"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
        </div>
    </body>
</html>

Тарифные планы для работы с сервисом

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

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