Speed Up Your WebsiteDmitriy Yakubovskiy
Что можно оптимизировать?Время загрузки                 Скорость работыстраницы                       интерфейсовУменьшени...
Зачем оптимизировать?
Фокус оптимизации
Уменьшение размера данных
Уменьшение размера данных JS                    CSS         IMAGES
Сжатие GZIP / DEFLATEДва варианта:- статическое архивирование- сжатие "на лету"                  Accept-Encoding:         ...
Оптимизация изображенийJPEG:- формат с потерей качества- уменьшаем цвета- чистим мусор (шум)- В Photoshop сохраняем в каче...
Оптимизация изображенийПоследовательный JPEG (baseline)   Прогрессивный JPEG (progressive)baseline      - 520Kbprogressive...
Оптимизация изображенийТакие разные PNG:1. PNG-24- доступна вся цветовая палитра- возможен любой уровень прозрачности2. PN...
Оптимизация изображений  611Kb   PNG-24   551Kb
Оптимизация изображенийOriginal113KbFileOptimizer44KbTinyPNG12Kb
Оптимизация изображений         www.tinypng.org
Оптимизация CSS1. Все внешние таблицы стилей в head (в идеале 1 css)2. Минимизация css (CSSMin, Minify, YUI-compressor, CS...
Оптимизация JavaScript1. Все внешние js скрипты перед </body>, а лучше в постзагрузку(в идеале 1 js файл)2. Минимизация js...
Оптимизация JavaScriptЕсли включен gzip лучше не использовать Dean Edwards Packer                                         ...
Уменьшение числа запросов
КэшированиеПри первом посещении сайта ресурсы еще не в кэшеНебольшой размер кэша у мобильных браузеров:- iOS Safari не име...
КэшированиеПростое кэширование:Etag: "d8432-1851f-4d83418c05700" (Server->Browser)If-None-Match: "d8432-1851f-4d83418c0570...
КэшированиеЖесткое кэширование + версионность:<FilesMatch .( js | css | png | jpg | jpeg | gif )$>    # убираем версию    ...
КэшированиеФорсированное обновление кэша:1. <script src="js/script123.js"></script>2. <script src="js/script.js?v=123"></s...
CDN- Увеличение скорости доставки данных- Уменьшение нагрузки на сервер / кэширование
CSS спрайтыКомбинирование:- по цветам- по размеру (иконки)- по назначениюОтдельно картинки для:- repeat- repeat-x- repeat-y
data:URI<img src="data:image/png;base64,iVBORw0KU...rkJggg==" />.block {   background-image: url(data:image/png;base64,iVB...
Параллельные загрузки
Потоки по браузерам *Firefox 3+       Chrome          Opera 12          Safari 3-4   IE 6-76 потоков        6 потоков     ...
Параллельные загрузки
Параллельные загрузкиРешение с поддоменом:<img src="http://images1.site.com/img1.png" /><img src="http://images1.site.com/...
Организация загрузки
Организация загрузкиЭтап 1: Основная загрузка (html, css, images, js)   1. доставка контента и оформления   2. загрузка то...
Постзагрузка виджетов
Постзагрузка виджетов
Инструменты●   WebPageTest Online (www.webpagetest.org)●   Webkit Developer Toolbar (Timeline Tab)●   Firebug for FF (YSlo...
ВопросыЗадавайте умные вопросы. Получайте умные ответы.
Dmitriy Yakubovskiyd.iakubovskiy@sysiq.com
Upcoming SlideShare
Loading in...5
×

Speed Up Your Website

266

Published on

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
266
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Speed Up Your Website

  1. 1. Speed Up Your WebsiteDmitriy Yakubovskiy
  2. 2. Что можно оптимизировать?Время загрузки Скорость работыстраницы интерфейсовУменьшение размера Взаимодействия с DOMданных JS сценарииУменьшение числа ...запросов... Стр 2 из 376
  3. 3. Зачем оптимизировать?
  4. 4. Фокус оптимизации
  5. 5. Уменьшение размера данных
  6. 6. Уменьшение размера данных JS CSS IMAGES
  7. 7. Сжатие GZIP / DEFLATEДва варианта:- статическое архивирование- сжатие "на лету" Accept-Encoding: gzip, deflate Content- Encoding: gzip
  8. 8. Оптимизация изображенийJPEG:- формат с потерей качества- уменьшаем цвета- чистим мусор (шум)- В Photoshop сохраняем в качестве от 51 до 95Прогрессивный <img> JPEG (Firefox, Chrome, Opera, IE9+)
  9. 9. Оптимизация изображенийПоследовательный JPEG (baseline) Прогрессивный JPEG (progressive)baseline - 520Kbprogressive - 497Kb
  10. 10. Оптимизация изображенийТакие разные PNG:1. PNG-24- доступна вся цветовая палитра- возможен любой уровень прозрачности2. PNG-8- палитра 256 цветов- прозрачность или 0% или 100%3. PNG-8 с альфа-прозрачностью- палитра 256 цветов- возможен любой уровень прозрачности
  11. 11. Оптимизация изображений 611Kb PNG-24 551Kb
  12. 12. Оптимизация изображенийOriginal113KbFileOptimizer44KbTinyPNG12Kb
  13. 13. Оптимизация изображений www.tinypng.org
  14. 14. Оптимизация CSS1. Все внешние таблицы стилей в head (в идеале 1 css)2. Минимизация css (CSSMin, Minify, YUI-compressor, CSS Minifier,CSS Tidy)3. Gzip cжатие css ( ~ 70-80% )
  15. 15. Оптимизация JavaScript1. Все внешние js скрипты перед </body>, а лучше в постзагрузку(в идеале 1 js файл)2. Минимизация js (JSMin, JavaScript Minifier, Dojo ShrinkSafe akaRhino, YUI Compressor, Closure Compiler)3. Gzip cжатие JavaScript ( ~ 60-70% )Время загрузки = Время скачивания + Время исполнения
  16. 16. Оптимизация JavaScriptЕсли включен gzip лучше не использовать Dean Edwards Packer SIZE (KB) GZIP(KB)jq.uncompressed.js 277.9 92.6jq.compressed.js 92.6 32.7jq.closure-compiler-whitespace.js 142.2 41.0jq.closure-compiler-simple.js 93.5 33.7jq.packer.js 75.5 36.3
  17. 17. Уменьшение числа запросов
  18. 18. КэшированиеПри первом посещении сайта ресурсы еще не в кэшеНебольшой размер кэша у мобильных браузеров:- iOS Safari не имеет дискового кэша- у Android кэш ограничен 20МбФоновая предзагрузка в кэш
  19. 19. КэшированиеПростое кэширование: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
  20. 20. КэшированиеЖесткое кэширование + версионность:<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>
  21. 21. КэшированиеФорсированное обновление кэша: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)- номер релиза- время сборки
  22. 22. CDN- Увеличение скорости доставки данных- Уменьшение нагрузки на сервер / кэширование
  23. 23. CSS спрайтыКомбинирование:- по цветам- по размеру (иконки)- по назначениюОтдельно картинки для:- repeat- repeat-x- repeat-y
  24. 24. data:URI<img src="data:image/png;base64,iVBORw0KU...rkJggg==" />.block { background-image: url(data:image/png;base64,iVBORw0KU...rkJggg==);}+ Экономит запросы, подойдет для промо страницы- Не кэшируется в html, трудно поддерживать, IE8+- Размер кода больше размера файла (gzip!)
  25. 25. Параллельные загрузки
  26. 26. Потоки по браузерам *Firefox 3+ Chrome Opera 12 Safari 3-4 IE 6-76 потоков 6 потоков 6 потоков 4 потока 2 потока Safari 5 IE 8-9 6 потоков 6 потоков IE 10 8 потоков* - число параллельных соединений к одному хосту
  27. 27. Параллельные загрузки
  28. 28. Параллельные загрузкиРешение с поддоменом:<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
  29. 29. Организация загрузки
  30. 30. Организация загрузкиЭтап 1: Основная загрузка (html, css, images, js) 1. доставка контента и оформления 2. загрузка только необходимого функционала - порядок загрузки элементовЭтап 2: Постзагрузка / Загрузка по запросу 1. дополнительный функционал, доп. изображения 2. сторонние виджеты 3. кэширование дополнительных ресурсов
  31. 31. Постзагрузка виджетов
  32. 32. Постзагрузка виджетов
  33. 33. Инструменты● 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)
  34. 34. ВопросыЗадавайте умные вопросы. Получайте умные ответы.
  35. 35. Dmitriy Yakubovskiyd.iakubovskiy@sysiq.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×