Download - Speed Up Your Website
![Page 1: Speed Up Your Website](https://reader031.vdocument.in/reader031/viewer/2022020207/54c4a7624a79599a118b45cf/html5/thumbnails/1.jpg)
Speed Up Your WebsiteDmitriy Yakubovskiy
![Page 2: Speed Up Your Website](https://reader031.vdocument.in/reader031/viewer/2022020207/54c4a7624a79599a118b45cf/html5/thumbnails/2.jpg)
Время загрузки страницы
Что можно оптимизировать?
Скорость работы интерфейсов
Взаимодействия с DOMJS сценарии...
Уменьшение размера данныхУменьшение числа запросов...
Стр 2 из 376
![Page 4: Speed Up Your Website](https://reader031.vdocument.in/reader031/viewer/2022020207/54c4a7624a79599a118b45cf/html5/thumbnails/4.jpg)
Фокус оптимизации
![Page 5: Speed Up Your Website](https://reader031.vdocument.in/reader031/viewer/2022020207/54c4a7624a79599a118b45cf/html5/thumbnails/5.jpg)
Уменьшение размера данных
![Page 6: Speed Up Your Website](https://reader031.vdocument.in/reader031/viewer/2022020207/54c4a7624a79599a118b45cf/html5/thumbnails/6.jpg)
Уменьшение размера данных
CSSJS
IMAGES
![Page 7: Speed Up Your Website](https://reader031.vdocument.in/reader031/viewer/2022020207/54c4a7624a79599a118b45cf/html5/thumbnails/7.jpg)
Два варианта:- статическое архивирование- сжатие "на лету"
Сжатие GZIP / DEFLATE
Accept-Encoding: gzip, deflate
Content-Encoding: gzip
![Page 8: Speed Up Your Website](https://reader031.vdocument.in/reader031/viewer/2022020207/54c4a7624a79599a118b45cf/html5/thumbnails/8.jpg)
Оптимизация изображений
JPEG:
- формат с потерей качества
- уменьшаем цвета
- чистим мусор (шум)
- В Photoshop сохраняем в качестве от 51 до 95
Прогрессивный <img> JPEG (Firefox, Chrome, Opera, IE9+)
![Page 9: Speed Up Your Website](https://reader031.vdocument.in/reader031/viewer/2022020207/54c4a7624a79599a118b45cf/html5/thumbnails/9.jpg)
Оптимизация изображений
Последовательный JPEG (baseline) Прогрессивный JPEG (progressive)
baseline - 520Kb
progressive - 497Kb
![Page 10: Speed Up Your Website](https://reader031.vdocument.in/reader031/viewer/2022020207/54c4a7624a79599a118b45cf/html5/thumbnails/10.jpg)
Оптимизация изображений
Такие разные PNG:
1. PNG-24- доступна вся цветовая палитра- возможен любой уровень прозрачности2. PNG-8- палитра 256 цветов- прозрачность или 0% или 100%
3. PNG-8 с альфа-прозрачностью- палитра 256 цветов- возможен любой уровень прозрачности
![Page 11: Speed Up Your Website](https://reader031.vdocument.in/reader031/viewer/2022020207/54c4a7624a79599a118b45cf/html5/thumbnails/11.jpg)
Оптимизация изображений
611Kb 551KbPNG-24
![Page 12: Speed Up Your Website](https://reader031.vdocument.in/reader031/viewer/2022020207/54c4a7624a79599a118b45cf/html5/thumbnails/12.jpg)
Оптимизация изображений
Original
113Kb
FileOptimizer
44Kb
TinyPNG
12Kb
![Page 13: Speed Up Your Website](https://reader031.vdocument.in/reader031/viewer/2022020207/54c4a7624a79599a118b45cf/html5/thumbnails/13.jpg)
Оптимизация изображений
www.tinypng.org
![Page 14: Speed Up Your Website](https://reader031.vdocument.in/reader031/viewer/2022020207/54c4a7624a79599a118b45cf/html5/thumbnails/14.jpg)
Оптимизация CSS
1. Все внешние таблицы стилей в head (в идеале 1 css)
2. Минимизация css (CSSMin, Minify, YUI-compressor, CSS Minifier,
CSS Tidy)
3. Gzip cжатие css ( ~ 70-80% )
![Page 15: Speed Up Your Website](https://reader031.vdocument.in/reader031/viewer/2022020207/54c4a7624a79599a118b45cf/html5/thumbnails/15.jpg)
Оптимизация 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% )
Время загрузки = Время скачивания + Время исполнения
![Page 16: Speed Up Your Website](https://reader031.vdocument.in/reader031/viewer/2022020207/54c4a7624a79599a118b45cf/html5/thumbnails/16.jpg)
Оптимизация 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
![Page 17: Speed Up Your Website](https://reader031.vdocument.in/reader031/viewer/2022020207/54c4a7624a79599a118b45cf/html5/thumbnails/17.jpg)
Уменьшение числа запросов
![Page 18: Speed Up Your Website](https://reader031.vdocument.in/reader031/viewer/2022020207/54c4a7624a79599a118b45cf/html5/thumbnails/18.jpg)
При первом посещении сайта ресурсы еще не в кэше
Небольшой размер кэша у мобильных браузеров:- iOS Safari не имеет дискового кэша- у Android кэш ограничен 20Мб
Фоновая предзагрузка в кэш
Кэширование
![Page 19: Speed Up Your Website](https://reader031.vdocument.in/reader031/viewer/2022020207/54c4a7624a79599a118b45cf/html5/thumbnails/19.jpg)
Простое кэширование:
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
Кэширование
![Page 20: Speed Up Your Website](https://reader031.vdocument.in/reader031/viewer/2022020207/54c4a7624a79599a118b45cf/html5/thumbnails/20.jpg)
Жесткое кэширование + версионность:
<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>
Кэширование
![Page 21: Speed Up Your Website](https://reader031.vdocument.in/reader031/viewer/2022020207/54c4a7624a79599a118b45cf/html5/thumbnails/21.jpg)
Форсированное обновление кэша: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)- номер релиза- время сборки
Кэширование
![Page 22: Speed Up Your Website](https://reader031.vdocument.in/reader031/viewer/2022020207/54c4a7624a79599a118b45cf/html5/thumbnails/22.jpg)
CDN
- Увеличение скорости доставки данных- Уменьшение нагрузки на сервер / кэширование
![Page 23: Speed Up Your Website](https://reader031.vdocument.in/reader031/viewer/2022020207/54c4a7624a79599a118b45cf/html5/thumbnails/23.jpg)
Комбинирование:- по цветам - по размеру (иконки) - по назначению
Отдельно картинки для:- repeat - repeat-x- repeat-y
CSS спрайты
![Page 24: Speed Up Your Website](https://reader031.vdocument.in/reader031/viewer/2022020207/54c4a7624a79599a118b45cf/html5/thumbnails/24.jpg)
<img src="data:image/png;base64,iVBORw0KU...rkJggg==" />
.block {background-image: url('data:image/png;base64,iVBORw0KU...
rkJggg==');}
+ Экономит запросы, подойдет для промо страницы- Не кэшируется в html, трудно поддерживать, IE8+- Размер кода больше размера файла (gzip!)
data:URI
![Page 25: Speed Up Your Website](https://reader031.vdocument.in/reader031/viewer/2022020207/54c4a7624a79599a118b45cf/html5/thumbnails/25.jpg)
Параллельные загрузки
![Page 26: Speed Up Your Website](https://reader031.vdocument.in/reader031/viewer/2022020207/54c4a7624a79599a118b45cf/html5/thumbnails/26.jpg)
Потоки по браузерам *
Firefox 3+ 6 потоков
Chrome 6 потоков
Safari 3-4 4 потока
Safari 56 потоков
Opera 12 6 потоков
IE 6-7 2 потока
IE 8-96 потоков
IE 108 потоков
* - число параллельных соединений к одному хосту
![Page 27: Speed Up Your Website](https://reader031.vdocument.in/reader031/viewer/2022020207/54c4a7624a79599a118b45cf/html5/thumbnails/27.jpg)
Параллельные загрузки
![Page 28: Speed Up Your Website](https://reader031.vdocument.in/reader031/viewer/2022020207/54c4a7624a79599a118b45cf/html5/thumbnails/28.jpg)
Решение с поддоменом:
<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
Параллельные загрузки
![Page 29: Speed Up Your Website](https://reader031.vdocument.in/reader031/viewer/2022020207/54c4a7624a79599a118b45cf/html5/thumbnails/29.jpg)
Организация загрузки
![Page 30: Speed Up Your Website](https://reader031.vdocument.in/reader031/viewer/2022020207/54c4a7624a79599a118b45cf/html5/thumbnails/30.jpg)
Этап 1: Основная загрузка (html, css, images, js)1. доставка контента и оформления2. загрузка только необходимого функционала- порядок загрузки элементов
Этап 2: Постзагрузка / Загрузка по запросу1. дополнительный функционал, доп. изображения2. сторонние виджеты3. кэширование дополнительных ресурсов
Организация загрузки
![Page 31: Speed Up Your Website](https://reader031.vdocument.in/reader031/viewer/2022020207/54c4a7624a79599a118b45cf/html5/thumbnails/31.jpg)
Постзагрузка виджетов
![Page 32: Speed Up Your Website](https://reader031.vdocument.in/reader031/viewer/2022020207/54c4a7624a79599a118b45cf/html5/thumbnails/32.jpg)
Постзагрузка виджетов
![Page 33: Speed Up Your Website](https://reader031.vdocument.in/reader031/viewer/2022020207/54c4a7624a79599a118b45cf/html5/thumbnails/33.jpg)
● 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)
Инструменты
![Page 34: Speed Up Your Website](https://reader031.vdocument.in/reader031/viewer/2022020207/54c4a7624a79599a118b45cf/html5/thumbnails/34.jpg)
Вопросы
Задавайте умные вопросы. Получайте умные ответы.