Презентация на тему: Разгони свой сайт. Уменьшение файлов в размере

Разгони свой сайт. Уменьшение файлов в размере Мациевский Николай

Содержание Архивирование HTML и нагрузка на серверСжатие CSS- и JavaScript-файловСжатие изображенийУменьшение в размере заголовков

Архивирование HTML и нагрузка на сервер

Изучаем сжатие Формальная модельИздержки процессораФайловая системаПостоянные издержкиТестированиеИзменяем размер файлов

График издержек на сжатие

Издержки на сжатие и канал

Эффективность сжатия

Gzip-сжатие на сервере Уменьшение размера объектов до 88%Простота примененияAddOutputFilterByType DEFLATE text/htmlAddOutputFilterByType DEFLATE text/cssAddOutputFilterByType DEFLATE text/javascriptAddOutputFilterByType DEFLATE application/x-javascriptDeflateCompressionLevel 7Пропорциональное ускорение предзагрузки

Статическое архивирование Приемлемо для мало изменяющихся файловНа сервере размещается подготовленный .gz архивЕсть сложности с размещениемНужна поддержка для «старых» браузеров

Сжатие CSS- и JavaScript-файлов

Сжатие CSS-файлов В обычных случаях достаточно регулярного выражения (-30% размера)php / perl / shell / python / rubyYUI Compressor для автоматизации и максимального сжатияjavaCSS Tidy для всех остальных случаевphp

Сжатие CSS-файлов

Сжатие JavaScript-файлов JSmin для простых случаевПортирован на большинство языковYUI Compressor для автоматизацииjavaDean Edwards Packer, максимальное сжатие без gzipphp

Сжатие JavaScript-файлов

Сжатие изображений

PNG против GIF PNG8 лучше справляется со сжатием изображенийPNG32 может содержать полноцветную палитруПолупрозрачность для PNG в IE6/7 через фильтрыПроблемы совпадения цветов решаются удалением чанков

GIF против PNG Анимированные GIF не имеют кроссбраузерных PNG-аналоговНебольшие GIF-изображения обычно меньшеGIF не имеют проблемы с совпадением цветов

favicon.ico Мешается в очереди на загрузкуЗагружается с того же доменаНельзя отвечать 404-ошибкойОптимальный размер ~1КбЭффективно архивируетсяAddOutputFilterByType DEFLATE image/x-iconPNG не поддерживается в IE

Полезные советы Переводим bmp в png: bmp2pngПереводим gif в png: gif2pngУрезаем png: pngcrush, pngout, TweakPNGУрезаем JPEG: jpegtran

Уменьшаем заголовки

Влияние на скорость доставки До 80% от размераДля небольших файлов (<1Кб)Не стоит выставлять то, что не используетсяНапример, ETag для динамических файловСамый критичный компонент: cookieЖестко следим за размером cookie

Уменьшаем влияние cookie Вынесение статики на отдельный хостКуда не передаются cookieВыставление cookie только для отдельных директорийВыставление cookie на ограниченное времяУменьшение размера ключей и значений

В следующей лекцииКэширование Основы кэширования: Cache-ControlУсловное кэширование: ETagНастройка и сброс кэшированияКэширования для IE: post-check, pre-checkКэширование и архивирование для iPhone