Speed Up Your Website

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)

Инструменты

Вопросы

Задавайте умные вопросы. Получайте умные ответы.

Dmitriy Yakubovskiyd.iakubovskiy@sysiq.com