Самая ранняя предварительная загрузка изображения на HTML-странице. ⇐ CSS

[Anonymous]

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

Сайт, которым я занимаюсь, переходит на использование спрайтовых страниц. . Страница спрайтов потенциально очень велика, и общее время загрузки первой страницы значительно увеличивается за счет того, что этот запрос выдается браузером раньше. Страницы также сильно загружают CSS и JS, и было бы ужасно начинать загрузку страницы-спрайта только после их завершения.

Самое быстрое общее время загрузки, которое я обнаружил. Мы нашли способ создать ультракороткий CSS-файл, упомянутый в начале заголовка HTML, который ссылается на изображение в классе. Обычно это инициирует запрос изображения до того, как другие CSS и JS завершат загрузку (если позволяет количество соединений) в современных браузерах. Другие методы, по-видимому, задерживаются, по крайней мере, до тех пор, пока весь CSS не будет загружен, прежде чем инициировать запрос изображения.

Однако мне не нравится этот метод, поскольку он вводит еще один обход и на один файл больше, чем кажется необходимым, что может увеличить время загрузки на 50–100 мс или около того по сравнению с методом, который инициирует запрос изображения непосредственно из HTML. Однако обращение к изображению в теле HTML и т. д., по-видимому, приводит к ожиданию запроса до тех пор, пока не загрузится весь главный CSS. А более очевидные решения — не заморачиваться, ссылаясь на него естественным образом в основном CSS, в том числе как на изображение в теле — в этом (раздутом) приложении все значительно медленнее примерно на 200–300 мс.
Может быть, есть хороший способ ссылаться на изображение очень рано в заголовке HTML, что может привести к тому, что по крайней мере некоторые современные браузеры загрузят его очень рано? (Может быть, какой-то особый, странный тег ссылки?

Любое хорошее онлайн-объяснение современного порядка загрузки также будет полезно (но не ответ на вопрос) .

У нас есть хороший и надежный тест времени загрузки на основе автономных браузеров, который позволяет нам тестировать время загрузки с точностью до 10 мс с различными искусственными задержками и полосами пропускания на реалистичный профиль наших страниц, и эти различия статистически значимы, поэтому я с удовольствием принимаю непроверенные предложения в ответах и ​​помещаю их в рамки.

[Я' Я осознаю, что во многих случаях URL-адреса данных в CSS и значки в виде дингбатов в WOFF являются лучшими методами, чем страницы-спрайты, но это не так во всех случаях всех изображений (которые у нас есть данные для отображения), и такое использование спрайтов -pages — это часть пути миграции для сложного приложения].

Подробнее здесь: https://stackoverflow.com/questions/334 ... -html-page