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

Тема в разделе "Администрирование серверов", создана пользователем 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
    советую глянуть http://bellard.org/bpg/
    Там есть демка. На таких размерах картинок можно нехило сэкономить.
    Родной поддержки браузерами пока нет, но через небольшой js скрипт работает.
     
  5. adm.unix.

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

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

    vgrey Создатель

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