Embed Size (px)
DESCRIPTION
Citation preview
Speed Up Your WebsiteDmitriy Yakubovskiy
Время загрузки страницы
Что можно оптимизировать?
Скорость работы интерфейсов
Взаимодействия с DOMJS сценарии...
Уменьшение размера данныхУменьшение числа запросов...
Стр 2 из 376
Фокус оптимизации
Уменьшение размера данных
Уменьшение размера данных
CSSJS
IMAGES
Два варианта:- статическое архивирование- сжатие "на лету"
Сжатие GZIP / DEFLATE
Accept-Encoding: gzip, deflate
Content-Encoding: gzip
Оптимизация изображений
JPEG:
- формат с потерей качества
- уменьшаем цвета
- чистим мусор (шум)
- В Photoshop сохраняем в качестве от 51 до 95
Прогрессивный <img> JPEG (Firefox, Chrome, Opera, IE9+)
Оптимизация изображений
Последовательный JPEG (baseline) Прогрессивный JPEG (progressive)
baseline - 520Kb
progressive - 497Kb
Оптимизация изображений
Такие разные PNG:
1. PNG-24- доступна вся цветовая палитра- возможен любой уровень прозрачности2. PNG-8- палитра 256 цветов- прозрачность или 0% или 100%
3. PNG-8 с альфа-прозрачностью- палитра 256 цветов- возможен любой уровень прозрачности
Оптимизация изображений
611Kb 551KbPNG-24
Оптимизация изображений
Original
113Kb
FileOptimizer
44Kb
TinyPNG
12Kb
Оптимизация изображений
www.tinypng.org
Оптимизация CSS
1. Все внешние таблицы стилей в head (в идеале 1 css)
2. Минимизация css (CSSMin, Minify, YUI-compressor, CSS Minifier,
CSS Tidy)
3. Gzip cжатие css ( ~ 70-80% )
Оптимизация JavaScript
1. Все внешние js скрипты перед </body>, а лучше в постзагрузку
(в идеале 1 js файл)
2. Минимизация js (JSMin, JavaScript Minifier, Dojo ShrinkSafe aka
Rhino, YUI Compressor, Closure Compiler)
3. Gzip cжатие JavaScript ( ~ 60-70% )
Время загрузки = Время скачивания + Время исполнения
Оптимизация JavaScript
Если включен gzip лучше не использовать Dean Edwards Packer
SIZE (KB)
jq.uncompressed.js 277.9
jq.compressed.js 92.6
jq.closure-compiler-whitespace.js 142.2
jq.closure-compiler-simple.js 93.5
jq.packer.js 75.5
GZIP(KB)
92.6
32.7
41.0
33.7
36.3
Уменьшение числа запросов
При первом посещении сайта ресурсы еще не в кэше
Небольшой размер кэша у мобильных браузеров:- iOS Safari не имеет дискового кэша- у Android кэш ограничен 20Мб
Фоновая предзагрузка в кэш
Кэширование
Простое кэширование:
Etag: "d8432-1851f-4d83418c05700" (Server->Browser)If-None-Match: "d8432-1851f-4d83418c05700" (Browser->Server)
Last-Modified: Mon, 18 Mar 2013 14:49:32 GMT (Server->Browser)If-Modified-Since: Mon, 18 Mar 2013 14:49:32 GMT (Browser->Server)
Ответ: 200 OK или 304 Not Modified
Кэширование
Жесткое кэширование + версионность:
<FilesMatch \.( js | css | png | jpg | jpeg | gif )$># убираем версиюRewriteRule ^(.+)\.v(.*)\.(js|css|png|jpg|jpeg|gif)$ $1.$3 [QSA,L]# жестко кешируем версионные файлыHeader append Cache-Control "public max-age=31536000"ExpiresActive On
ExpiresDefault "access plus 1 year"</FilesMatch>
Кэширование
Форсированное обновление кэша:1. <script src="js/script123.js"></script>2. <script src="js/script.js?v=123"></script>(некоторые прокси-серверы не кэшируют файлы со строкой запроса)
3. <script src="js/script.v123.js"></script>
Как выбрать version:- хэш (crc32, md5)- номер релиза- время сборки
Кэширование
CDN
- Увеличение скорости доставки данных- Уменьшение нагрузки на сервер / кэширование
Комбинирование:- по цветам - по размеру (иконки) - по назначению
Отдельно картинки для:- repeat - repeat-x- repeat-y
CSS спрайты
<img src="data:image/png;base64,iVBORw0KU...rkJggg==" />
.block {background-image: url('data:image/png;base64,iVBORw0KU...
rkJggg==');}
+ Экономит запросы, подойдет для промо страницы- Не кэшируется в html, трудно поддерживать, IE8+- Размер кода больше размера файла (gzip!)
data:URI
Параллельные загрузки
Потоки по браузерам *
Firefox 3+ 6 потоков
Chrome 6 потоков
Safari 3-4 4 потока
Safari 56 потоков
Opera 12 6 потоков
IE 6-7 2 потока
IE 8-96 потоков
IE 108 потоков
* - число параллельных соединений к одному хосту
Параллельные загрузки
Решение с поддоменом:
<img src="http://images1.site.com/img1.png" /><img src="http://images1.site.com/img2.png" /><img src="http://images2.site.com/img3.png" /><img src="http://images2.site.com/img4.png" />
Cookie free
Параллельные загрузки
Организация загрузки
Этап 1: Основная загрузка (html, css, images, js)1. доставка контента и оформления2. загрузка только необходимого функционала- порядок загрузки элементов
Этап 2: Постзагрузка / Загрузка по запросу1. дополнительный функционал, доп. изображения2. сторонние виджеты3. кэширование дополнительных ресурсов
Организация загрузки
Постзагрузка виджетов
Постзагрузка виджетов
● WebPageTest Online (www.webpagetest.org)
● Webkit Developer Toolbar (Timeline Tab)
● Firebug for FF (YSlow add-on, Net Tab)
● Fiddler (Web Debugging Proxy)
● DynaTrace Ajax Edition
● Sloppy (proxy server)
Инструменты
Вопросы
Задавайте умные вопросы. Получайте умные ответы.
