37
Основы клиентской оптимизации Interlabs 20 сентября 2013 1 / 37

Основы клиентской оптимизации

  • View
    1.385

  • Download
    0

Embed Size (px)

DESCRIPTION

Вводный семинар для разработчиков по основам клиентской оптимизации с точки зрения выполнения рекомендаций Google PageSpeed.

Citation preview

Page 1: Основы клиентской оптимизации

Основы клиентскойоптимизации

Interlabs

20 сентября 2013

1 / 37

Page 2: Основы клиентской оптимизации

О чем речь

80-90% времени загрузки страницы — компонентыкартинки, CSS, JavaScript

• как уменьшить общее время загрузки;• как улучшить результат Google PageSpeed;• как применять рекомендации для старых (чужих,незнакомых) проектов.

2 / 37

Page 3: Основы клиентской оптимизации

Основные инструменты

• оптимизация обработки статики на сервере• сжатие HTML, CSS, JavaScript• оптимизация изображений• объединение и оптимизация компонент• различные виды кеширования• асинхронная загрузка компонент• приоритетная загрузка компонент

3 / 37

Page 4: Основы клиентской оптимизации

Средства контроля

• Google Chrome Developer Tools• Firebug

• Google PageSpeed1• Curl

Важно: тестирование через прокси-сервер может существенносказаться на результатах.

1https://developers.google.com/speed/pagespeed/4 / 37

Page 5: Основы клиентской оптимизации

Немного о сервереОсновной паттерн — reverse proxy

nginx обработка статики + делегирование запросавеб-серверу

nginx распределение запросов между веб-серверамиvarnish обработка статики + кеширование результатов от

веб-сервера5 / 37

Page 6: Основы клиентской оптимизации

Загрузка компонент

Page 7: Основы клиентской оптимизации

Загрузка компонент

• использование Connection: keep-alive минимизируетколичество подключений

• браузеры выполняют параллельную загрузку в пределахотведенной квоты

• JavaScript — узкое место• различные браузеры могут отступать от общепринятоймодели, добавляя собственную оптимизацию

7 / 37

Page 8: Основы клиентской оптимизации

Загрузка JavaScript• загрузка скрипта блокирует загрузку остальных компонент,но не прерывает уже начавшиеся загрузки

• javascript-код в теле документа также блокируетпоследующую загрузку

• загрузка остальных компонент распараллеливается

• каждый отдельный js-ресурс — пауза в загрузке страницы• если сначала CSS, а потом скрипты, CSS загружаетсяпараллельно со скриптами

Общее правило — сначала CSS, потом JavaScript

8 / 37

Page 9: Основы клиентской оптимизации

Выполнение JavaScript

• выполнение JavaScript в коде документа блокируетзагрузку остальных компонент

• расположение inline-кода может повлиять напараллельность загрузки остальных ресурсов

• код в конце документа — хороший вариант, визуальноускоряет загрузку

• время выполнения скрипта непосредственно сказываетсяна времени отображения страницы→ максимальноиспользуем асинхронные скрипты.

9 / 37

Page 10: Основы клиентской оптимизации

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

Page 11: Основы клиентской оптимизации

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

Page 12: Основы клиентской оптимизации

Сжатие

Page 13: Основы клиентской оптимизации

Сжатие: общий принцип

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

Page 14: Основы клиентской оптимизации

Сжатие: 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

Page 15: Основы клиентской оптимизации

Сжатие: 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

Page 16: Основы клиентской оптимизации

Сжатие: тестирование

Используем Google PageSpeed или командную строку:

$ curl -I --compressed http://site.com/css/site.css

...Content-Type: text/cssVary: Accept-EncodingContent-Encoding: gzip...

16 / 37

Page 17: Основы клиентской оптимизации

Оптимизация изображений

Page 18: Основы клиентской оптимизации

Оптимизация изображенийдизайнер оптимальное сжатие с потерями

разработчик оптимизация без потерь, незаметная внешне

GIF

очень маленькиеизображений(10x10, 3 цвета),анимация

PNG

Лучшаяальтернатива GIF,помним проindexed vs RGB иальфа-канал

JPG

полноцветныеизображения-фотографии

Google Pagespeed Minimize paylod size→ Optimize images18 / 37

Page 19: Основы клиентской оптимизации

Оптимизация: GIF

Используем gifsicle2 Удаляем метаданные, оптимизируемсжатие:

$ gifsicle -b -O2 image.gif

$ gifsicle -b -O2 *.gif

2http://www.lcdf.org/gifsicle/19 / 37

Page 20: Основы клиентской оптимизации

Оптимизация: 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

Page 21: Основы клиентской оптимизации

Оптимизация: JPGИспользуем jpegoptim4. Удаляем лишние метаданные:

• комментарии• цветовые профайлы, для веба — только sRGB!• EXIF-данные• IPTC-данные

Save for web работает хорошо, но иногда можно улучшить.Клиентские изображения — проблема.

$ jpegoptim --strip-all image.jpg

4http://freecode.com/projects/jpegoptim21 / 37

Page 22: Основы клиентской оптимизации

Объединение иоптимизация компонент

Page 23: Основы клиентской оптимизации

Спрайты

Начинаем с покомпонентной группировки. Выгодно:

• комбинировать изображения схожих цветов• минимизировать пустые пространства• располагать элементы по горизонтали если возможно• ограничивать количество цветов 256 (PNG8)• сначала оптимизировать изображения, потом спрайт• избегать диагональных градиентов• избегать альфа-канала• менять цвета градиентов не каждый пиксел, а каждые 2–3

23 / 37

Page 24: Основы клиентской оптимизации

Оптимизация CSS• группировка CSS файлов• минификация CSS (лишние пробелы, переводы строк и т.д.)• оптимизация структуры CSS (избыточные правила, лишниеправила и т.д.)

CSS-препроцессор +голова верстальщика

Google Pagespeed Minimize paylod size→ Minify CSS

24 / 37

Page 25: Основы клиентской оптимизации

Оптимизация 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

Page 26: Основы клиентской оптимизации

Оптимизация JavaScript

• минификация• разделение на модули• подгрузка необходимых модулей

Require.js + r.js

Google Pagespeed Minimize paylod size→ Minify JavaScript

26 / 37

Page 27: Основы клиентской оптимизации

Старые проектыУлучшаем ситуацию, объединяя минимизированные скрипты.

uglifyjsЕсли проект в UTF–8:

$(JS_WWW)/main.js: \$(addsuffix .js,$(addprefix $(JS_WWW)/,jquery fancybox script)

uglifyjs $^ > $@

Если (вдруг) проект в CP1251: объединяем, конвертируем черезiconv, uglifyjs, обратный iconv.

27 / 37

Page 28: Основы клиентской оптимизации

Кеширование

Page 29: Основы клиентской оптимизации

Заголовки HTTPExpiresCache-Control: max-age

Определяют время, в течение которогоможно использовать закешированныйресурс, не проверяя, изменился ли он.

Браузер не выполняет дополнительных

GET-запросов, пока не истечет срок

(strong cache headers).

Last-ModifiedETag

Определяют, изменился ли ресурс, привыполнении дополнительных проверок(weak cache headers).

Позволяют эффективно загрузить новые

версии ресурсов когда пользователь явно

это запрашивает.

Необходимо использовать оба типа заголовков

Google Pagespeed Caching→ Leverage browsing caching

29 / 37

Page 30: Основы клиентской оптимизации

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

Page 31: Основы клиентской оптимизации

Last-Modified, ETag

• Last-Modified — дата последнего изменения• ETag — хеш содержимого файла• формат ETag произволен, главное, чтобы разные версииимели разные значения (+ strong и weak версии)

• для статики apache и nginx отдают оба заголовка• если ресурс формируется динамически, необходимоформировать хотя бы один заголовок

31 / 37

Page 32: Основы клиентской оптимизации

Доверяй но проверяй

Пример: masterhost позволяет выбрать обработку статикиnginx или apache. Казалось бы, nginx правильнее, но:

• нельзя контролировать заголовки черех .htaccess• nginx настроен плохо, заголовки кеширования неформируются или формируются неверно

• при небольшой посещаемости выгоднее использоватьapache с возможностью настройки заголовков

32 / 37

Page 33: Основы клиентской оптимизации

Прокси-кеширование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

Page 34: Основы клиентской оптимизации

Приоритетность контента

Page 35: Основы клиентской оптимизации

Приоритетность контентаAbove the fold content — видимая в окне браузера частьстраницы при загрузке.

• в идеале — сразу должны загружаться тольконеобходимые для above-the-fold ресурсы

• на практике практически для всех сайтов выводитсярекомендация:

Eliminate render-blocking JavaScript and CSS inabove-the-fold content

35 / 37

Page 36: Основы клиентской оптимизации

Приоритетность контентаCначала ресурсы, которые видны в браузере в моментзагрузки, потом остальное.

HTML сначала контент, потом дополнительные виджеты;сначала контент, потом дополнительные колонки;

CSS выносим часть стилей в inline-блоки.

Хорошая, но труднодостижимая цель, требует подготовкиуже на этапе дизайна.

Google Pagespeed→ Reduce the size of above-the-fold content

36 / 37

Page 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