Как управлять изображениями, чтобы уменьшить нагрузку на страницу?

Я запрашиваю более 30 изображений на моей странице.

Время загрузки страницы составляет почти 25 секунд.

Как уменьшить время загрузки.

Есть ли способ минимизировать размер изображения и ускорить загрузку.

каждое изображение составляет 25 КБ, и каждое изображение занимает почти 5,5 с.

Я должен показать все изображения на моей странице.


image asp.net pagespeed
person user1926138    schedule 05.12.2013    source источник
comment
его время блокировки составляет 4,77 с, как уменьшить это   -  person user1926138    schedule 05.12.2013
comment
что вы имеете в виду, блокируя время?   -  person Majid    schedule 05.12.2013
comment
tinypic.com/view.php?pic=2nl8fax&s=5 можно увидеть на этом изображении показано время блокировки   -  person user1926138    schedule 05.12.2013

Ответы (3)


arrow_upward
4
arrow_downward

В дополнение к тому, что сказали другие ребята, вы можете попробовать использовать спрайты изображений CSS. Это уменьшит количество запросов к серверу и, следовательно, время загрузки страницы.

Просто убедитесь, что вы не совершаете распространенную ошибку, используя спрайт изображения CSS,

Неправильный путь

.element1 { background:url('img.jpg') 10px 10px no-repeat; }
.element2 { background:url('img.jpg') 20px 20px no-repeat; }

<div class="element1"></div>
<div class="element2"></div>

Это по-прежнему будет делать 2 разных запроса сервера для одного и того же изображения.

Правильный путь

.cssSprite {
    background:url('img.jpg');
    background-repeat: no-repeat;
}
.element1 { background-position: 10px 10px; }
.element2 { background-position: 20px 20px; }

<div class="cssSprite element1"></div>
<div class="cssSprite element2"></div>

Это создаст только 1 запрос к серверу.

person Community    schedule 05.12.2013
comment
Думаю этот способ не сэкономит и 1 секунды! так как большая часть времени загрузки приходится на размер изображения, а не на время запроса сервера! - person Majid; 05.12.2013
comment
Так? css-спрайты уменьшат количество запросов к серверу. Хотя существует вероятность того, что неправильное использование этого метода может привести к обратному эффекту, это отличный способ попробовать в дополнение к сжатию изображений. - person ; 05.12.2013
comment
Вопреки тому, что сказал @majidgeek, я думаю, что это совершенно хороший ответ и может быть действительно хорошим решением. Ему придется немного проанализировать общение, чтобы с уверенностью сказать, что большая часть времени загрузки приходится на размер изображения, а не на время запроса к серверу. Я думаю, что он просто делает неверные предположения. - person vinczemarton; 05.12.2013
comment
@SoonDead предполагает, что у нас есть 10 * 500 КБ изображений с DSL 2 Мбит / с, если вы предполагаете, что время отклика каждого сервера составляет 200 мс, тогда время загрузки составляет 5000/256 = ~ 20 с, но 10 * 200 = 2 с. если мое предположение неверно, пожалуйста, покажите правильное предположение! - person Majid; 05.12.2013

arrow_upward
3
arrow_downward

Помимо уменьшения размера изображения, есть несколько методов, которые помогут вам быстрее загружать веб-страницы. Пожалуйста, посмотрите на это:

10 быстрых советов по ускорению загрузки крупной графики

И если это возможно, вы можете использовать отдельный сервер для своих ресурсов, таких как изображения, анимация, сценарии и таблицы стилей.

person Serjik    schedule 05.12.2013

arrow_upward
0
arrow_downward

Чтобы уменьшить размер изображений и время загрузки страницы, вы можете сжимать изображения с помощью программного обеспечения, такого как JPEGCompressor, или программного обеспечения с открытым исходным кодом, такого как Gimp.

person Majid    schedule 05.12.2013