Как бы вы оптимизировали / симулировали «случайную» загрузку больших файлов изображений?

Question

Мы используем большие фоновые изображения (фотографии высокого разрешения, до 700 КБ) для дизайна нашей страницы. Это часть опыта сайта, когда вы просматриваете различные изображения.

В настоящий момент при каждом запросе страницы загружается другое (случайное) изображение из пула из ~ 15 изображений, которые могут со временем увеличиваться.

Я ищу разумный способ оптимизировать это:

1. Чтобы пользователь не загружал большой файл изображения при каждом просмотре страницы
2. Чтобы уменьшить нагрузку на сервер (это проблема, сервер будет хранить изображения в памяти?)

У меня есть следующие идеи:

• Таймер, который загружает другое изображение через заданные интервалы
• Постепенная загрузка других изображений в фоновом режиме с помощью ajax
• Связывание изображений с определенным содержимым (страницы, теги)

Вопрос в том, как сохранить его случайным, минимизируя время загрузки страницы и количество обращений к серверу?

Answer 1

В качестве первого шага вы должны убедиться, что изображения могут быть правильно кэшированы:

• использовать вменяемые URL (без идентификаторов сессии и т. Д.)
• установить соответствующие заголовки http ETag

Answer 2

Во-первых, меня удивляет слух, что только фоновые изображения составляют 700 КБ. В дополнение к содержимому на экране ... это довольно тяжелый сайт.

Для начала я бы попробовал использовать инструменты сжатия изображений. На ум приходят два инструмента Imagemagick и PNGCrush. PNGCrush отлично сокращает все посторонние метаданные, прикрепленные к фотографиям, без ущерба для качества фотографий.

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

Я бы также кэшировал изображения, так что, когда пользователь повторно посещает сайт, изображение уже кэшируется на его конце. Это сводит к минимуму запросы HTTP, которые делаются каждый раз, когда пользователь посещает ваш сайт. Примером использования этого метода на коммерческом сайте является www.reactive.com. Если вы посмотрите файл /js/headerImages.js, они используют кэширование изображений. Как ни странно, вы найдете тот же код SRC по адресу: http://javascript.internet.com/miscellaneous/random-image.html

Учитывая, что вы упоминали, что изображения загружаются случайным образом, я предполагаю, что вы используете библиотеку Javascript, такую ​​как jQuery, для создания эффекта. Если это так, вы можете минимизировать время загрузки страницы, используя CDN, а не ссылаться на локальную копию библиотеки jQuery, которая хранится на вашем сервере. Я провел тестирование производительности на сайте, который я сделал для клиента, и в среднем за 20 посещений сэкономил 1,6 секунды благодаря этой технике!

Надеюсь, что поможет сейчас:)

Answer 3

Я обычно избегаю сайтов с огромными изображениями, я очень нетерпелив. Я бы переосмыслил твой дизайн.