[Решено?..] Оптимизация загрузки контента на сайте

[katok]

Всем доброго времени суток!
Есть интернет-магазин на OpenCart (1.5.6.4). Хотим ускорить загрузку картинок.

В общем, есть два варианта:
1.Вынести картинки и кеширование картинок на другой сервер.
2.Дать картинкам отдельный субдомен, но оставить их на том же сервере.

Подскажите, пожалуйста, кто уже стыкался с такими задачами: какой из этих вариантов лучше, или, возможно, их плюсы/минусы. Если у Вас есть какая-то третья идея, буду очень рада услышать.

[Snezhckas]

Можете попробовать подгружать картинки через Ajax, чтобы они показывались по мере просмотра страницы посетителем.

[rootman]

Что-то не совсем понятно, что Вы хотите ускорить. Опенкарт нарезает и кеширует изображения в папку(тут особо ничего не ускоришь) и потом отдаёт их оттуда. Делает он это (нарезку) только один раз. То есть куда бы Вы не перемещали эту папку на другой домен/сервер  - по сути ничего не изменится - нужно отдать эти файлы клиенту. Если на этапе отдачи изображения от сервера клиенту есть проблемы  - то необходима настройка сервера, который их отдаёт + включение сжатия и кеширования в HTTP ответе. В идеале иметь связку Apache + Nginx, где последний отдаёт статику (то есть картинки, js, css файлы). Вот его и нужно настроить (если его нет - то только Apache). Только после того, как Вы сделали всё возможное, чтобы Ваш сервер отдавал изображения как можно быстрее, можно думать о том, что ещё сделать (это в случае, если скорость Вас по-прежнему не устраивает) и внедрять, к примеру, lazy load загрузку изображений и т.д. 

[Rassol2]

можно еше просто прогнать всю базу фото через XnConvert что бы сжать фото без потери качества, так сказать удалить все метод данные с фото. 

очень хорошая веш для пользователей мобильных устройств с мобильным интернетом.

[katok]

rootman, Большое спасибо за Ваш совет!

 

Хотим ускорить работу всего сайта и одним из пунктов есть увеличение скорости загрузки изображений. Но с Вашего ответа я, кажется, поняла, что распределение серверов / создание поддомена для быстроты отдачи изображений большой роли не сыграет. Так?

[rootman]

Я не видел Ваш сайт, но в 90% случаев - да, не сыграет. Потому что распределение нагрузки горионтально (то есть на несколько серверов) - это шаг, когда ресурсов одного сервера недостаточно. Современные, даже самые простые - виртуальные, выделенные сервера (кстати, вот ещё Вам пункт "на подумать" - качество услуг Вашего хостера, тарифный план и возможные ограничения связанные с ним) справляются даже с серьёзными нагрузками при должной настройке. Ну и мне кажется, что всё же посетителей у Вас поменьше, чем на Facebook или Aliexpress, так что поработайте над Вашим сервером, а там посмотрите - скорее всего этого будет достаточно :)

[AlexDW]

для начала проверить - включено ли кеширование статики для клиентов (в .htaccess)

 

потом смотреть на сами изображения

бессмысленно использовать в интернет-магазине изображения размером 2000х3000 пискелей и весом под 3МБ каждое

 

выбирайте оптимальный размер изображений (вполне достаточно 600х600 - 800х800)

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

 

в шаблоне желательно прописать width и height для изображений - так страница начнет формироваться непосредственно при загрузке

 

проверьте библиотеку system/library/image.php:

 

в строке public function save($file, $quality = 90) {

цифра 90 указывает на степень сжатия кешируемых изображений и наиболее оптимальна для соотношения качество/размер, если отличается - измените

 

там же можно добавить преобразование в прогрессивный jpeg - так картинки начнут отрисовываться сразу при загрузке

для этого перед строкой

imagejpeg($this->image, $file, $quality);

 

вставьте строку

imageinterlace($this->image, true);

 

это основные моменты

 

из дополнительных

как уже подсказали - можно использовать постепенную подгрузку изображений по мере прокрутки страницы (lazy load)

так же, можно использовать распараллеливание подгрузки для статики в несколько потоков с 3-5 поддоменов/алиасов

[happyvadik]

imageinterlace($this->image, true);

одна строка, а сайт стал на 6% шустрее, по версии PageSpeed. 

СПАСИБО!

[sitecreator]

одна строка, а сайт стал на 6% шустрее, по версии PageSpeed.

 

 

Не стал он шустрее, не обманывайте себя.

 

Просто почитайте, что означает interlace.

Картинки быстрее от этого загружаться (время загрузки файла) не станут, т. к. сам файл становится несколько больше и время на загрузку, соответственно, тоже увеличивается.  Но вся прелесть состоит в том, что если канал не быстрый, то картинка начинает отображаться  по мере ее загрузки сначала в низком качестве, потом в хорошем.

 

К шустрости это не имеет никакого отношения. ну если только для вас важно загрузить поскорее картинку хоть в каком  качестве.

[halfhope]

@sitecreator прав, это относительно старый формат изображения для Web, сейчас этим мало кто пользуется, но 5-10 лет назад была популярна т.к. инет у большинства был медленный, технология позволяла загружать и показывать изображения постепенно, но существенно увеличивала размер файла. 

 

Если сервер выделенный, то можете установить jpegoptim и optipng они помогут уменьшить размеры изображений и гугл перестанет на них ругаться.

Змінено 14 січня 2016 користувачем halfhope

[LuckySrG]

Используйте cdn. У меня много видео, но и изображения тоже через них раздаю, для пользователя то, что нужно.

[Anatoli777]

Используйте cdn. У меня много видео, но и изображения тоже через них раздаю, для пользователя то, что нужно.

А какой именно cdn посоветуете?