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

Question

Мне известны некоторые методы оптимизации изображений (например, использование спрайтов или smushit.com).Однако что делать, если загружаемые изображения получены от пользователей (динамические)?Это означает, что мы не можем превратить его в спрайт или оптимизировать его заранее.

Например, на странице загружается около 20 пользовательских аватаров плюс некоторые другие загруженные пользователем миниатюры фотографий.Некоторые загружаемые пользователем аватары могут иметь размер от 20 до 150 КБ, что значительно замедляет загрузку страницы

Answer 1

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

Существует множество плагинов для автоматической отложенной загрузки изображений & mdash; вероятно, также для JS-фреймворка, который вы используете. Быстрый поиск должен помочь вам.

Answer 2

Вы можете использовать ! YSlow - инструмент, помогающий минимизировать время загрузки страницы.Вот правила, которые он использует:

• Минимизация HTTP-запросов
• Использование сети доставки контента
• Избегайте пустых src или href
• ДобавитьИстекает срок действия или заголовок элемента управления кэшем
• Компоненты Gzip
• Поместите таблицы стилей сверху
• Поместите скрипты снизу
• Избегайте выражений CSS
• Сделать JavaScript и CSS внешними
• Уменьшить поиск DNS
• Сократить JavaScript и CSS
• Избегать перенаправлений
• Удалить дублирующиеся сценарии
• НастроитьETags
• Сделать AJAX кэшируемым
• Использовать GET для запросов AJAX
• Уменьшить количество элементов DOM
• Нет 404s
• Уменьшить размер файла cookie
• Используйте домены без файлов cookie для компонентов
• Избегайте фильтров
• Не масштабируйте изображения в HTML
• Делайте favicon.ico маленьким и кэшируемым