оптимизация скорости загрузки страницы

VETMANAGER TEAM 12.4.12 Стр. 1

Оптимизируемзагрузку страницы

Романичев В.В.

VETMANAGER TEAM 12.4.12 Стр. 2

План

1) Причины2) Способы3) Зачем нужна стадия компиляции4) Примеры оптимизации

VETMANAGER TEAM 12.4.12 Стр. 3

Причины

1. Все любят скорость2. Лимитирован трафик3. Ограничение по скорости4. Поисковая оптимизация

VETMANAGER TEAM 12.4.12 Стр. 4

1. Меньше запросов80 % времени - загрузка

компонентов2 потока на загрузку с

одного хоста

VETMANAGER TEAM 12.4.12 Стр. 5

CSS спрайты

.square1 { background-image: url(sprite.png); background-position: 3px 4px; width: 24px; height: 24px; }

VETMANAGER TEAM 12.4.12 Стр. 6

Inline картинкиdata:[<MIME-type>][;charset=<encoding>][;base64],<data>

Плюсы Меньше запросов Хорошо сжимаются Не нужны заголовки ответов Лучше кешируется

VETMANAGER TEAM 12.4.12 Стр. 7

КонкатенацияУ нас Some1.js Some2.js Some3.js

Нужно MegaSome.js

VETMANAGER TEAM 12.4.12 Стр. 8

2. CSS мне в HEADПомещая подключение к css файлам в хедере

страницы мы получаем постепенный рендеринг страницы

VETMANAGER TEAM 12.4.12 Стр. 9

3. JS мне в ... Помещая javascript-файлы вниз страницы мы

позволяем браузеру загрузить страницу с контентом в первую очередь, а уже потом начать загрузку javascript-файлов.

VETMANAGER TEAM 12.4.12 Стр. 10

4. Минификация1) Удаляем все не влияющие на поведение и

отображение символы.

2) Заменяем длинные выражения(none ->0)

3) Оптимизируем размер через анализ поведения.

VETMANAGER TEAM 12.4.12 Стр. 11

5. ПоддоменыОбходим ограничение хостов

VETMANAGER TEAM 12.4.12 Стр. 12

6. Кэш броузераНастроив apache мы экономим время и

трафик пользователя

VETMANAGER TEAM 12.4.12 Стр. 13

7. CDN для контентаCDN (Content Delivery Network) — это

множество веб-серверов, разнесенных географически для достижения максимальной скорости отдачи контента клиенту.

VETMANAGER TEAM 12.4.12 Стр. 14

8. Gzip - сжатие

Коэффициент сжатия приблизительно равен 5-ти но повышается нагрузка на сервер.

VETMANAGER TEAM 12.4.12 Стр. 15

9. Вынос inline скриптов

Плюсы Кешируемость Повторное использование Возможность убрать неиспользуемые

скрипты

VETMANAGER TEAM 12.4.12 Стр. 16

10. Лишний контент

Мертвый CSS, JS CSS, JS с других страниц Комментарии Постраничная навигация

VETMANAGER TEAM 12.4.12 Стр. 17

11. Размер компонентКомпоненты большого размера не

кешируются некоторыми браузерами.

Для iPhone оптимальный размер компонента до 25 килобайт.

VETMANAGER TEAM 12.4.12 Стр. 18

Компиляция

VETMANAGER TEAM 12.4.12 Стр. 19

Блочная структураПлюсы Декомпозиция и re-use Понятная архитектура Возможность легко убрать неиспользуемый

контент

Минусы Стадия компиляции

VETMANAGER TEAM 12.4.12 Стр. 20

Конфиги

VETMANAGER TEAM 12.4.12 Стр. 21

pagespages: index: doctype_html: blocks: html: blocks: head: body: blocks: page: blocks: content:

mod: «red»

VETMANAGER TEAM 12.4.12 Стр. 22

Конфиг блокаtag: 'div'attr: - 'data-i': «some» html: - agile_board.htmlimg: - bug.png - feature.pngcss: - agile_board.css - columns.cssjs: - agile_board.js

CSS/* css from agile_board.css *//* css from colums.css *//* css for sprite */

HTML<div class=b-name data-i=some> .... контент agile_board.html</div>

Sprite

bug.png Feature.png

VETMANAGER TEAM 12.4.12 Стр. 23

ИнструментыПолучение статистикиFirebug, Page Speed, Yslow, siege ...

КомпиляцияMake, GNUMake, ant, phing, rake, pake

ОперацииYUICompressor.jar, CSSO, htmlcompressor.jar, Closure Compiler, html-compressor.php, spritify.php

VETMANAGER TEAM 12.4.12 Стр. 24

Конкатенацияpake_task('html_build_pages');function run_html_build_pages(){ ... $pages = $settings['pages']; foreach ($pages as $pageName => $pageSettings) { $сontent = getContent($pageSettings, 'html'); pake_write_file($htmlPath, $сontent, true); } }

file_get_contents спасет отца русской демократии

VETMANAGER TEAM 12.4.12 Стр. 25

CSS спрайты$spritify = new spritify();... $spritify->add_image($filepath, $cssSelector);....$spritify->safe_image($imgPath);pake_write_file($cssPath

, $spritify->generate_css($imgPath));

.agile_board-img-feature { background-image: url(../img/index.png); background-position: 0px -24px; width: 24px; height: 24px; }

VETMANAGER TEAM 12.4.12 Стр. 26

Оптимизация

VETMANAGER TEAM 12.4.12 Стр. 27

Минификация HTML

function HTMLCompress($fileBig, $fileCompress) { $cmd = "php html-compressor.php -x

$fileBig >> $fileCompress"; pake_sh($cmd);}

2032 1816

11%

VETMANAGER TEAM 12.4.12 Стр. 28

Минификация CSS

function YUICompress($fileBig, $fileCompress) { $cmd = "java -jar yuicompressor.jar

$fileBig -o $fileCompress"; pake_sh($cmd);}

1785 1193

33%

VETMANAGER TEAM 12.4.12 Стр. 29

Минификация CSS

function YUICompress($fileBig, $fileCompress) { $cmd = "java -jar yuicompressor.jar

$fileBig -o $fileCompress"; pake_sh($cmd);}

1785 1193

33%

VETMANAGER TEAM 12.4.12 Стр. 30

Минификация JS

function YUICompress($fileBig, $fileCompress) { $cmd = "java -jar yuicompressor.jar

$fileBig -o $fileCompress"; pake_sh($cmd);}

148801 129457

13%

VETMANAGER TEAM 12.4.12 Стр. 31

a2enmod deflat(gzip)<ifmodule mod_deflate.c>

AddOutputFilterByType DEFLATE text/text... application/javascript

</ifmodule>

134.5 KB 49.6 KB

63%

VETMANAGER TEAM 12.4.12 Стр. 32

a2enmod expires

49.6 KB 3,5 KB

92%

<IfModule mod_expires.c> Header append Cache-Control "public" FileETag MTime Size ExpiresActive On ExpiresDefault "access plus 0 minutes" ExpiresByType text/html "access plus 1 years"</IfModule>

VETMANAGER TEAM 12.4.12 Стр. 33

Итог

Правильная методологияСтадия компиляцииНастройка сервера

-98% веса

страницы

VETMANAGER TEAM 12.4.12 Стр. 34

Спасибо за внимание!