Вопрос! Увеличение скорости загрузки изображений

[th7]

Создаю сайт - Там средняя ширина фотки 1920px высота минимум 400px))) такой дизайн
Задался вопросом оптимизации изображений. Для уменьшения веса изображений на 10-40% есть куча сервисов, но все равно файлики весят не мало 400-700kb

Начитался что увеличить скорость загр. картинок и сайта можно такими способами:
1. Загрузить картинки на субдомен
2. Загрузить картинки на отдельный домен
3. Загрузить все фото на CDN Cloudinary
4. Просто использовать СloudFlare - как общую доставку контента

Вопрос.
Как лучше сделать?
- 1 или 2 пункт + СloudFlare?
- Cloudinary + СloudFlare?
- Или просто достаточно СloudFlare?
- Подключить кеширование nginx на статику
- Ваш совет

Заранее Благодарен

 

[Waki]

Я бы еще предложил асинхронную загрузку изображений, есть вот такой простой скрипт

<script type="text/javascript">
function aload(a){"use strict";a=a||window.document.querySelectorAll("[data-aload]"),void 0===a.length&&(a=[a]);var b,c=0,d=a.length;for(c;d>c;c+=1)b=a[c],b["LINK"!==b.tagName?"src":"href"]=b.getAttribute("data-aload"),b.removeAttribute("data-aload");return a}
window.onload = function () { aload(); };
</script>
Использовать к примеру так, <img data-aload='URL' alt='' />

+ почитай про mod_expires

 

[th7]

Я бы еще предложил асинхронную загрузку изображений, есть вот такой простой скрипт

<script type="text/javascript">
function aload(a){"use strict";a=a||window.document.querySelectorAll("[data-aload]"),void 0===a.length&&(a=[a]);var b,c=0,d=a.length;for(c;d>c;c+=1)b=a[c],b["LINK"!==b.tagName?"src":"href"]=b.getAttribute("data-aload"),b.removeAttribute("data-aload");return a}
window.onload = function () { aload(); };
</script>
Использовать к примеру так, <img data-aload='URL' alt='' />

+ почитай про mod_expires

Хорошо... добавляем в .htaccess

<IfModule mod_expires.c>
    ExpiresActive On
    ExpiresByType text/css A31536000
    ExpiresByType text/x-component A31536000
    ExpiresByType application/x-javascript A31536000
    ExpiresByType application/javascript A31536000
    ExpiresByType text/javascript A31536000
    ExpiresByType text/x-js A31536000
    ExpiresByType text/html A3600
    ExpiresByType text/richtext A3600
    ExpiresByType image/svg+xml A3600
    ExpiresByType text/plain A3600
    ExpiresByType text/xsd A3600
    ExpiresByType text/xsl A3600
    ExpiresByType text/xml A3600
    ExpiresByType video/asf A31536000
    ExpiresByType video/avi A31536000
    ExpiresByType image/bmp A31536000
    ExpiresByType application/java A31536000
    ExpiresByType video/divx A31536000
    ExpiresByType application/msword A31536000
    ExpiresByType application/vnd.ms-fontobject A31536000
    ExpiresByType application/x-msdownload A31536000
    ExpiresByType image/gif A31536000
    ExpiresByType application/x-gzip A31536000
    ExpiresByType image/x-icon A31536000
    ExpiresByType image/jpeg A31536000
    ExpiresByType application/json A31536000
    ExpiresByType application/vnd.ms-access A31536000
    ExpiresByType audio/midi A31536000
    ExpiresByType video/quicktime A31536000
    ExpiresByType audio/mpeg A31536000
    ExpiresByType video/mp4 A31536000
    ExpiresByType video/mpeg A31536000
    ExpiresByType application/vnd.ms-project A31536000
    ExpiresByType application/x-font-otf A31536000
    ExpiresByType application/vnd.ms-opentype A31536000
    ExpiresByType application/vnd.oasis.opendocument.database A31536000
    ExpiresByType application/vnd.oasis.opendocument.chart A31536000
    ExpiresByType application/vnd.oasis.opendocument.formula A31536000
    ExpiresByType application/vnd.oasis.opendocument.graphics A31536000
    ExpiresByType application/vnd.oasis.opendocument.presentation A31536000
    ExpiresByType application/vnd.oasis.opendocument.spreadsheet A31536000
    ExpiresByType application/vnd.oasis.opendocument.text A31536000
    ExpiresByType audio/ogg A31536000
    ExpiresByType application/pdf A31536000
    ExpiresByType image/png A31536000
    ExpiresByType application/vnd.ms-powerpoint A31536000
    ExpiresByType audio/x-realaudio A31536000
    ExpiresByType image/svg+xml A31536000
    ExpiresByType application/x-shockwave-flash A31536000
    ExpiresByType application/x-tar A31536000
    ExpiresByType image/tiff A31536000
    ExpiresByType application/x-font-ttf A31536000
    ExpiresByType application/vnd.ms-opentype A31536000
    ExpiresByType audio/wav A31536000
    ExpiresByType audio/wma A31536000
    ExpiresByType application/vnd.ms-write A31536000
    ExpiresByType application/font-woff A31536000
    ExpiresByType application/vnd.ms-excel A31536000
    ExpiresByType application/zip A31536000
</IfModule>

Используем кэш браузера

FileETag MTime Size
<ifmodule mod_expires.c>
<filesmatch "\.(jpg|gif|png|css|js)$">
ExpiresActive on
ExpiresDefault "access plus 1 year"
</filesmatch>
</ifmodule>

 

[xtmp]

советую глянуть Для просмотра ссылки Войди или Зарегистрируйся
Там есть демка. На таких размерах картинок можно нехило сэкономить.
Родной поддержки браузерами пока нет, но через небольшой js скрипт работает.

 

[adm.unix.]

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

 

[vgrey]

- Подключить кеширование nginx на статику

Это точно не эффективно, когда-то проверяли - отдача nginx-ом кешированного изображения медленне отдачи изображения без кеширования. В суть даже не вникали.