Основы клиентской оптимизации
Post on 16-Nov-2014
1.385 views
DESCRIPTION
Вводный семинар для разработчиков по основам клиентской оптимизации с точки зрения выполнения рекомендаций Google PageSpeed.TRANSCRIPT
Основы клиентскойоптимизации
Interlabs
20 сентября 2013
1 / 37
О чем речь
80-90% времени загрузки страницы — компонентыкартинки, CSS, JavaScript
• как уменьшить общее время загрузки;• как улучшить результат Google PageSpeed;• как применять рекомендации для старых (чужих,незнакомых) проектов.
2 / 37
Основные инструменты
• оптимизация обработки статики на сервере• сжатие HTML, CSS, JavaScript• оптимизация изображений• объединение и оптимизация компонент• различные виды кеширования• асинхронная загрузка компонент• приоритетная загрузка компонент
3 / 37
Средства контроля
• Google Chrome Developer Tools• Firebug
• Google PageSpeed1• Curl
Важно: тестирование через прокси-сервер может существенносказаться на результатах.
1https://developers.google.com/speed/pagespeed/4 / 37
Немного о сервереОсновной паттерн — reverse proxy
nginx обработка статики + делегирование запросавеб-серверу
nginx распределение запросов между веб-серверамиvarnish обработка статики + кеширование результатов от
веб-сервера5 / 37
Загрузка компонент
Загрузка компонент
• использование Connection: keep-alive минимизируетколичество подключений
• браузеры выполняют параллельную загрузку в пределахотведенной квоты
• JavaScript — узкое место• различные браузеры могут отступать от общепринятоймодели, добавляя собственную оптимизацию
7 / 37
Загрузка JavaScript• загрузка скрипта блокирует загрузку остальных компонент,но не прерывает уже начавшиеся загрузки
• javascript-код в теле документа также блокируетпоследующую загрузку
• загрузка остальных компонент распараллеливается
• каждый отдельный js-ресурс — пауза в загрузке страницы• если сначала CSS, а потом скрипты, CSS загружаетсяпараллельно со скриптами
Общее правило — сначала CSS, потом JavaScript
8 / 37
Выполнение JavaScript
• выполнение JavaScript в коде документа блокируетзагрузку остальных компонент
• расположение inline-кода может повлиять напараллельность загрузки остальных ресурсов
• код в конце документа — хороший вариант, визуальноускоряет загрузку
• время выполнения скрипта непосредственно сказываетсяна времени отображения страницы→ максимальноиспользуем асинхронные скрипты.
9 / 37
JavaScript — пример 1<link rel="stylesheet" type="text/css" href="site.css">
<script>var1=’some value’;
</script>
<script type="text/javascript" src="site.js"></script>
10 / 37
JavaScript — пример 2<script>
var1=’some value’;</script>
<link rel="stylesheet" type="text/css" href="site.css"><script type="text/javascript" src="site.js"></script>
11 / 37
Сжатие
Сжатие: общий принцип
HTML JavaScript CSS
клиент Accept-Encoding: gzip, deflate
сервер Content-Encoding: gzipтело отклика сжимается с помощью gzip или deflate
• реализация: модули gzip в nginx и mod_deflate в apache• собственный хостинг — всегда включено в nginx;• внешний хостинг — можно попробовать .htaccess
Google Pagespeed Minimize payload size→ Enable compression.
13 / 37
Сжатие: nginx
gzip on;gzip disable "msie6";gzip min_length 1100;gzip_buffers 64 8k;gzip_vary on;gzip_proxied any;gzip_types text/plain application/xml text/css
text/js text/xml application/x-javascripttext/javascript application/jsonapplication/xml+rss;
Внимательно проверяем точки с запятой, следим заgzip_buffers.
14 / 37
Сжатие: apache
<ifModule mod_deflate.c>AddOutputFilterByType DEFLATE text/html
text/plaintext/xmltext/cssapplication/javascript...
BrowserMatch ^Mozilla/4 gzip-only-text/htmlBrowserMatch ^Mozilla/4.0[678] no-gzipBrowserMatch bMSI[E] !no-gzip !gzip-only-text/html
Header append Vary User-Agent env=!dont-vary</ifModule>
15 / 37
Сжатие: тестирование
Используем Google PageSpeed или командную строку:
$ curl -I --compressed http://site.com/css/site.css
...Content-Type: text/cssVary: Accept-EncodingContent-Encoding: gzip...
16 / 37
Оптимизация изображений
Оптимизация изображенийдизайнер оптимальное сжатие с потерями
разработчик оптимизация без потерь, незаметная внешне
GIF
очень маленькиеизображений(10x10, 3 цвета),анимация
PNG
Лучшаяальтернатива GIF,помним проindexed vs RGB иальфа-канал
JPG
полноцветныеизображения-фотографии
Google Pagespeed Minimize paylod size→ Optimize images18 / 37
Оптимизация: GIF
Используем gifsicle2 Удаляем метаданные, оптимизируемсжатие:
$ gifsicle -b -O2 image.gif
$ gifsicle -b -O2 *.gif
2http://www.lcdf.org/gifsicle/19 / 37
Оптимизация: PNG
Используем optipng3. Удаляем лишние метаданные иподбираем оптимальный алгоритм сжатия.
$ optipng -o5 file.png
for f in *.png; dooptipng -o5 -quiet -keep -preserve
-dir optimized -log optipng.log "$f"done
3http://optipng.sourceforge.net/20 / 37
Оптимизация: JPGИспользуем jpegoptim4. Удаляем лишние метаданные:
• комментарии• цветовые профайлы, для веба — только sRGB!• EXIF-данные• IPTC-данные
Save for web работает хорошо, но иногда можно улучшить.Клиентские изображения — проблема.
$ jpegoptim --strip-all image.jpg
4http://freecode.com/projects/jpegoptim21 / 37
Объединение иоптимизация компонент
Спрайты
Начинаем с покомпонентной группировки. Выгодно:
• комбинировать изображения схожих цветов• минимизировать пустые пространства• располагать элементы по горизонтали если возможно• ограничивать количество цветов 256 (PNG8)• сначала оптимизировать изображения, потом спрайт• избегать диагональных градиентов• избегать альфа-канала• менять цвета градиентов не каждый пиксел, а каждые 2–3
23 / 37
Оптимизация CSS• группировка CSS файлов• минификация CSS (лишние пробелы, переводы строк и т.д.)• оптимизация структуры CSS (избыточные правила, лишниеправила и т.д.)
CSS-препроцессор +голова верстальщика
Google Pagespeed Minimize paylod size→ Minify CSS
24 / 37
Оптимизация CSS: less• используем lessc -x или lessc –yui-compress• помним, что @import css-файла не транслируется в less→часто дополнительный ненужный запрос
• less можно использовать в любом старом кривом проекте
CSS_SRC ?= src/lessCSS_WWW ?= www/css
$(CSS_WWW)/site.css: \$(addsuffix .less,$(addprefix $(CSS_SRC)/,null style cusel))
cat $^ | lessc -x - $@
В идеале — думаем как разумно сгруппировать классы,минимизируем количество классов и объем CSS-кода.
25 / 37
Оптимизация JavaScript
• минификация• разделение на модули• подгрузка необходимых модулей
Require.js + r.js
Google Pagespeed Minimize paylod size→ Minify JavaScript
26 / 37
Старые проектыУлучшаем ситуацию, объединяя минимизированные скрипты.
uglifyjsЕсли проект в UTF–8:
$(JS_WWW)/main.js: \$(addsuffix .js,$(addprefix $(JS_WWW)/,jquery fancybox script)
uglifyjs $^ > $@
Если (вдруг) проект в CP1251: объединяем, конвертируем черезiconv, uglifyjs, обратный iconv.
27 / 37
Кеширование
Заголовки HTTPExpiresCache-Control: max-age
Определяют время, в течение которогоможно использовать закешированныйресурс, не проверяя, изменился ли он.
Браузер не выполняет дополнительных
GET-запросов, пока не истечет срок
(strong cache headers).
Last-ModifiedETag
Определяют, изменился ли ресурс, привыполнении дополнительных проверок(weak cache headers).
Позволяют эффективно загрузить новые
версии ресурсов когда пользователь явно
это запрашивает.
Необходимо использовать оба типа заголовков
Google Pagespeed Caching→ Leverage browsing caching
29 / 37
Expires, Cache-Control: max-age
• Google PageTest рекомендует Expires• меньше недели — снижение балла в тесте• URL-fingerprinting, идентификатор — больше 8 символов• Last-Modified — время изменения ресурса• можно настраивать в .htaccess:
<FilesMatch ".(ico|pdf|flv|jpg|png|gif|js|css|swf><IfModule mod_expires.c>
ExpiresActive onExpiresByType image/gif A604800ExpiresByType text/javascript A604800...Header unset Cache-Control
</IfModule></FilesMatch>
30 / 37
Last-Modified, ETag
• Last-Modified — дата последнего изменения• ETag — хеш содержимого файла• формат ETag произволен, главное, чтобы разные версииимели разные значения (+ strong и weak версии)
• для статики apache и nginx отдают оба заголовка• если ресурс формируется динамически, необходимоформировать хотя бы один заголовок
31 / 37
Доверяй но проверяй
Пример: masterhost позволяет выбрать обработку статикиnginx или apache. Казалось бы, nginx правильнее, но:
• нельзя контролировать заголовки черех .htaccess• nginx настроен плохо, заголовки кеширования неформируются или формируются неверно
• при небольшой посещаемости выгоднее использоватьapache с возможностью настройки заголовков
32 / 37
Прокси-кешированиеCache-Control: public
кеширование не только браузером, но и прокси-сервером
• не работает с GET-параметрами→ URL-fingerprinting спомощью имен
• нельзя использовать для ресурсов, которые устанавливаюткуки (Cache-Control: private)
• для сжатых CSS и JS либо Cache-Control: private либоVary: Accept-Encoding для совместимости со старымибраузерами
Google Pagespeed Caching→ Leverage proxy caching
33 / 37
Приоритетность контента
Приоритетность контентаAbove the fold content — видимая в окне браузера частьстраницы при загрузке.
• в идеале — сразу должны загружаться тольконеобходимые для above-the-fold ресурсы
• на практике практически для всех сайтов выводитсярекомендация:
Eliminate render-blocking JavaScript and CSS inabove-the-fold content
35 / 37
Приоритетность контентаCначала ресурсы, которые видны в браузере в моментзагрузки, потом остальное.
HTML сначала контент, потом дополнительные виджеты;сначала контент, потом дополнительные колонки;
CSS выносим часть стилей в inline-блоки.
Хорошая, но труднодостижимая цель, требует подготовкиуже на этапе дизайна.
Google Pagespeed→ Reduce the size of above-the-fold content
36 / 37
Что читать
• High Performance Web Sites5 — основные принципыклиентской оптимизации
• Even Faster Web Sites6 — продолжение первой книги• PageSpeed Insights Rules7 — описание правил GooglePageSpeed
• PageSpeed Tutorials8 — различные статьи по клиентскойоптимизации от Google
5http://shop.oreilly.com/product/9780596529307.do6http://shop.oreilly.com/product/9780596522315.do7https://developers.google.com/speed/docs/insights/rules8https://developers.google.com/speed/articles/
37 / 37