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

В настоящее время я занимаюсь разработкой веб-сайта с PHP + MySQL и jQuery. До сих пор я делал это на моей локальной машине. Я замечаю, что когда я вижу страницу, изображения на ней загружаются некоторое время (мало времени, но она видна). Все изображения маленькие (PNG размером менее 3 КБ). Теперь, когда я загружаю страницу, происходит несколько подключений к базе данных, чтобы получить данные, которые я буду отображать.

Я не уверен, связана ли эта проблема времени загрузки с количеством изображений или со временем, которое PHP-скрипт + соединения с БД потребуют для выполнения. (У меня очень мало данных в моей базе данных, поэтому я бы не стал принимать этот случай.)

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

13.10.2009 10:22:41
3 ОТВЕТА

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

Если вы используете множество небольших png-файлов, я предлагаю вам объединить их в одно изображение и манипулировать дисплеем с помощью свойства background css, поскольку они являются частью стиля, а не информации. В этом случае - вместо нескольких изображений только одно будет загружено и повторно использовано во всех элементах. В этом случае даже предварительная загрузка одного изображения действительно проста.

1
13.10.2009 10:28:06
Спасибо, я попробую этот подход!
user189002 13.10.2009 10:29:52

Рассматривали ли вы использование CSS Sprites для объединения всех ваших изображений в одну загрузку? В сети есть ряд инструментов, которые помогут вам сделать это, и это значительно сократит количество HTTP-запросов, требуемых вашей страницей.

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

Наконец, взгляните на YSlow, который может дать вам дополнительные советы по оптимизации.

1
13.10.2009 10:31:03

Если эти PNG хранятся в базе данных как BLOB - не ясно из вашего вопроса - не делайте этого. Обслуживание изображений из БД через PHP не так эффективно, как позволить веб-серверу обслуживать их прямо из файловой системы. Если изображения привязаны к определенным записям, просто назовите PNG после идентификатора строки, чтобы найти его в каталоге, предназначенном для хранения этих изображений. Затем код PHP просто генерирует URL, который указывает на файл PNG на диске, поэтому веб-сервер может отправлять их статически.

Я не думаю, что предварительная загрузка изображений в пределах одной и той же страницы ничего вам не даст. Во всяком случае, это может замедлить кажущееся общее время загрузки страницы, потому что браузер может одновременно получать только фиксированное количество ресурсов, обычно 2-4. Загрузка изображений в верхней части <body>означает, что в верхней части страницы «выше сгиба» находятся другие элементы, которые должны ждать освобождения некоторых слотов HTTP-соединения. Лучше позволить изображениям загружаться в их естественном порядке.

Предварительная загрузка имеет смысл в двух ситуациях:

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

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

В любом случае, сделать предварительный натяг в самом нижней части из <body>, так что все остальное загружает в первую очередь.

Решив эти две проблемы, запустите YSlow на своем сайте. Он начинался как плагин для Firebug , который, в свою очередь, является плагином для Firefox, но с тех пор был портирован на все основные браузеры, кроме IE.

Прелесть YSlow в том, что он автоматически обнаруживает общие замедления, просто загружая страницу, когда расширение активно. Затем он дает вам четкую оценку для страницы, чтобы вы могли судить, когда вы «сделали» оптимизацию. Если вы ниже А , вы еще не закончили. :) Нередко встречаются сайты с рейтингом D или хуже, потому что конфигурация по умолчанию для веб-серверов является консервативной, чтобы не вызывать проблем. Исправление предупреждений YSlow, как правило, довольно легко, но вы должны быть осторожны, чтобы избежать кеширования и других проблем, поэтому конфигурация сервера по умолчанию не делает этого.

Другой ответ рекомендовал предложение Google PageSpeed . Он доступен как плагин для Chrome и Firefox, как серверный модуль Apache и как сервис, размещенный в Google. Я понятия не имею, как он сравнивается с YSlow, но выглядит интересно.

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

  • В Firebug вы получаете это на вкладке Net.

  • В Safari вы попадаете в него через меню «Разработка», которое обычно отключено в настройках. Включите его, если необходимо, затем скажите «Разработка»> «Начать запись по временной шкале». Это помещает вас в инструмент сетевых запросов. Вы также можете получить к нему доступ через Develop> Show Web Inspector.

  • В Chrome выберите «Вид»> «Разработчик»> «Инструменты разработчика» и перейдите на вкладку «Сеть».

  • IE имеет очень слабую форму, через Инструменты> Инструменты разработчика> Профилировщик. Он просто дает таблицу чисел, а не график водопада, поэтому информация есть, но вы не можете просто визуально сканировать длинные бары, чтобы найти самые медленные ресурсы.

2
2.09.2012 23:42:58