Разделы презентаций


Уменьшение файлов в размере презентация, доклад

Содержание

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

Слайды и текст этой презентации

Слайд 1Разгони свой сайт
Уменьшение файлов в размере
Мациевский Николай
1 / 23
webo.in

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

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

в размере заголовков

2 / 23
webo.in

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

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

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

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

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

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

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

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

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

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

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

Слайд 8Gzip-сжатие на сервере
Уменьшение размера объектов до 88%
Простота применения
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType

DEFLATE text/css
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE application/x-javascript
DeflateCompressionLevel 7
Пропорциональное ускорение предзагрузки
8 /

23

webo.in

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

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

архив
Есть сложности с размещением
Нужна поддержка для «старых» браузеров
9 / 23
webo.in

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

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

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

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

perl / shell / python / ruby
YUI Compressor для автоматизации

и максимального сжатия
java
CSS Tidy для всех остальных случаев
php

11 / 23

webo.in

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

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

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

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

автоматизации
java
Dean Edwards Packer, максимальное сжатие без gzip
php
13 / 23
webo.in

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

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

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

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

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

Слайд 16PNG против GIF
PNG8 лучше справляется со сжатием изображений
PNG32 может содержать

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

решаются удалением чанков

16 / 23

webo.in

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

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

меньше
GIF не имеют проблемы с совпадением цветов

17 / 23
webo.in

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

Слайд 18favicon.ico
Мешается в очереди на загрузку
Загружается с того же домена
Нельзя отвечать

404-ошибкой
Оптимальный размер ~1Кб
Эффективно архивируется
AddOutputFilterByType DEFLATE image/x-icon
PNG не поддерживается в IE
18

/ 23

webo.in

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

Слайд 19Полезные советы
Переводим bmp в png: bmp2png
Переводим gif в png: gif2png
Урезаем

png: pngcrush, pngout, TweakPNG
Урезаем JPEG: jpegtran
19 / 23
webo.in

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

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

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

Слайд 21Влияние на скорость доставки
До 80% от размера
Для небольших файлов (

стоит выставлять то, что не используется
Например, ETag для динамических файлов
Самый

критичный компонент: cookie
Жестко следим за размером cookie

21 / 23

webo.in

Влияние на скорость доставкиДо 80% от размераДля небольших файлов (

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

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

ключей и значений

22 / 23

webo.in

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

Слайд 23В следующей лекции Кэширование
Основы кэширования: Cache-Control
Условное кэширование: ETag
Настройка и сброс кэширования
Кэширования

для IE: post-check, pre-check
Кэширование и архивирование для iPhone
23 / 23
webo.in

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

Обратная связь

Если не удалось найти и скачать доклад-презентацию, Вы можете заказать его на нашем сайте. Мы постараемся найти нужный Вам материал и отправим по электронной почте. Не стесняйтесь обращаться к нам, если у вас возникли вопросы или пожелания:

Email: Нажмите что бы посмотреть 

Что такое TheSlide.ru?

Это сайт презентации, докладов, проектов в PowerPoint. Здесь удобно  хранить и делиться своими презентациями с другими пользователями.


Для правообладателей

Яндекс.Метрика