Уменьшение файлов в размере

Содержание

Слайд 2

Содержание

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

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

2 / 23

webo.in

Слайд 3

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

webo.in

3 / 23

Архивирование HTML и нагрузка на сервер webo.in 3 / 23

Слайд 4

Изучаем сжатие

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

4 / 23

webo.in

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

Слайд 5

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

5 / 23

webo.in

График издержек на сжатие 5 / 23 webo.in

Слайд 6

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

6 / 23

webo.in

Издержки на сжатие и канал 6 / 23 webo.in

Слайд 7

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

7 / 23

webo.in

Эффективность сжатия 7 / 23 webo.in

Слайд 8

Gzip-сжатие на сервере

Уменьшение размера объектов до 88%
Простота применения
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType

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

8 / 23

webo.in

Слайд 9

Статическое архивирование

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

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

9 / 23

webo.in

Слайд 10

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

webo.in

10 / 23

Сжатие CSS- и JavaScript-файлов webo.in 10 / 23

Слайд 11

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

В обычных случаях достаточно регулярного выражения (-30% размера)
php / perl /

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

11 / 23

webo.in

Слайд 12

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

12 / 23

webo.in

Сжатие CSS-файлов 12 / 23 webo.in

Слайд 13

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

JSmin для простых случаев
Портирован на большинство языков
YUI Compressor для автоматизации
java
Dean Edwards

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

13 / 23

webo.in

Слайд 14

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

14 / 23

webo.in

Сжатие JavaScript-файлов 14 / 23 webo.in

Слайд 15

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

webo.in

15 / 23

Сжатие изображений webo.in 15 / 23

Слайд 16

PNG против GIF

PNG8 лучше справляется со сжатием изображений
PNG32 может содержать полноцветную палитру
Полупрозрачность

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

16 / 23

webo.in

Слайд 17

GIF против PNG

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

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

17 / 23

webo.in

Слайд 18

favicon.ico

Мешается в очереди на загрузку
Загружается с того же домена
Нельзя отвечать 404-ошибкой
Оптимальный размер

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

18 / 23

webo.in

Слайд 19

Полезные советы

Переводим bmp в png: bmp2png
Переводим gif в png: gif2png
Урезаем png: pngcrush,

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

19 / 23

webo.in

Слайд 20

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

webo.in

20 / 23

Уменьшаем заголовки webo.in 20 / 23

Слайд 21

Влияние на скорость доставки

До 80% от размера
Для небольших файлов (<1Кб)
Не стоит выставлять

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

21 / 23

webo.in

Слайд 22

Уменьшаем влияние cookie

Вынесение статики на отдельный хост
Куда не передаются cookie
Выставление cookie только

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

22 / 23

webo.in

Имя файла: Уменьшение-файлов-в-размере.pptx
Количество просмотров: 42
Количество скачиваний: 0