Какой самый быстрый способ загрузки изображений на веб-страницу?

Question

Я создаю новый сайт, и на начальном этапе я пытаюсь оценить лучший способ загрузки изображений. Браузеры имеют ограничение в 2-6 элементов, которые он может загружать одновременно (images / css / js). Через виноградную лозу я слышал различные методы, но нет однозначного ответа, который на самом деле быстрее.

Относительные URL:

background-image: url(images/image.jpg);

Абсолютные URL:

background-image: url(http://site.com/images/image.jpg);

Абсолютные URL (с поддоменами):

background-image: url(http://fakecdn.site.com/images/image.jpg);

1. Будет ли браузер распознавать мой поддомен "fakecdn" как другой домен и одновременно загружать из него изображения в отдельном потоке?
2. Изображения, на которые есть ссылки в @import файле CSS, загружаются в отдельном потоке?

Answer 1

Спецификация HTTP 1.1 предполагает, что браузеры не открывают более двух подключений к данному домену.

Клиенты, использующие постоянные подключения, ДОЛЖНЫ ограничивать количество одновременных подключений, которые они поддерживают к данному серверу.Однопользовательскому клиенту НЕ СЛЕДУЕТ поддерживать более двух соединений с любым сервером или прокси.

Итак, если вы загружаете много изображений среднего размера, то может иметь смысл разместить их на отдельных полных доменных именах, чтобычто ограничение на 2 соединения не является узким местом.Для небольших изображений необходимость нового сокетного соединения с каждым полным доменным именем может перевесить преимущества.Аналогично, для больших изображений ограничивающим фактором может быть пропускная способность клиентской сети.

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

Однако, как всегда с оптимизацией производительности, сначала профиль!

См.

• Википедия -данные uri

Answer 2

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