/ /
The total size of all images on the page

Lessons

The total size of all images on the page

The large total size of the images indicates several possible problems:

  • Delayed loading technology is not used. You need to download only those images that are visible on the first screen. You need to upload the rest of the images at the time of request, when the user scrolls the page and they become visible.
  • Missing minification. The opportunity to reduce the size of images without loss of quality using modern algorithms has not been used.
  • You are using excessively large images. If the source file has a size of 1000 pixels, and it is displayed in a block of 150 pixels, then you should reduce the size of the source file.

In the example below, you can compare how adding the loading=”lazy” attribute affects the loading speed.

Demonstration
PHP code
HTML code
Open a demoDownload the example code
<?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;
                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>
        <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;
                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>
        <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=1770055045.1417"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055046.1417"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055047.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055048.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055049.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055050.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055051.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055052.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055053.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055054.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055055.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055056.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055057.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055058.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055059.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055060.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055061.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055062.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055063.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055064.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055065.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055066.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055067.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055068.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055069.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055070.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055071.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055072.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055073.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055074.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055075.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055076.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055077.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055078.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055079.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055080.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055081.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055082.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055083.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055084.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055085.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055086.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055087.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055088.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055089.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055090.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055091.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055092.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055093.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055094.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055095.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055096.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055097.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055098.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055099.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055100.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055101.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055102.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055103.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055104.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055105.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055106.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055107.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055108.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055109.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055110.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055111.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055112.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055113.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055114.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055115.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055116.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055117.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055118.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055119.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055120.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055121.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055122.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055123.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055124.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055125.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055126.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055127.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055128.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055129.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055130.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055131.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055132.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055133.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055134.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055135.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055136.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055137.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055138.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055139.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055140.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055141.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055142.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055143.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
<div class="product">
    <img src="./images_total_weight.php?t=1770055144.1418"  onload="endLoading(this)" /><br />
    Товар 1<br />
    1000 руб.
</div>
        </div>
    </body>
</html>

PRO subscription for working with the service

Promo
To prepare a commercial offer.
190 ₽
50 pages for 10 days
  • 1 page gives 1 tool launch Checking the page.
  • Purchased for a specific site
  • Restrictions on other tools remain the same
PRO subscription
For regular work on a site or a group of sites.
1 580 ₽
3,500 pages per week. The subscription period is 1 month.
Wallet
A separate page balance that complements the PRO subscription balance.
190 ₽
Number of pages
  • An active PRO subscription is required to use the wallet balance
x

We use cookies. By continuing to use the site, you agree to the processing of personal data in accordance with privacy policy. I agree