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

Тема в разделе "Администрирование серверов", создана пользователем th7, 24 ноя 2014.

Модераторы: mefish, stooper
  1. th7

    th7 Создатель

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

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

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

    Заранее Благодарен
     
  2. Waki

    Waki Постоялец

    Регистр.:
    14 ноя 2012
    Сообщения:
    64
    Симпатии:
    21
    Я бы еще предложил асинхронную загрузку изображений, есть вот такой простой скрипт
    Код:
    <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
     
  3. th7

    th7 Создатель

    Регистр.:
    21 апр 2008
    Сообщения:
    115
    Симпатии:
    9
    Хорошо... добавляем в .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>
     
  4. xtmp

    xtmp Постоялец

    Регистр.:
    18 янв 2014
    Сообщения:
    71
    Симпатии:
    25
    советую глянуть Перейти по ссылке
    Там есть демка. На таких размерах картинок можно нехило сэкономить.
    Родной поддержки браузерами пока нет, но через небольшой js скрипт работает.
     
  5. adm.unix.

    adm.unix. Создатель

    Регистр.:
    23 сен 2013
    Сообщения:
    5
    Симпатии:
    0
    Я думаю CloudFare конечно же лучше остальных решений разгрузит сервер. Как вариант, можно комбинировать кеширование ну уровне веб сервера + CloudFare.
     
  6. vgrey

    vgrey Создатель

    Регистр.:
    27 июл 2012
    Сообщения:
    48
    Симпатии:
    15
    Это точно не эффективно, когда-то проверяли - отдача nginx-ом кешированного изображения медленне отдачи изображения без кеширования. В суть даже не вникали.