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

1. Оптимизируем
загрузку страницы
Романичев В.В.
VETMANAGER TEAM 12.4.12 Стр. 1

2. План
• Причины
• Способы
• Зачем нужна стадия компиляции
• Примеры оптимизации
VETMANAGER TEAM 12.4.12 Стр. 2

3. Причины
• Все любят скорость
• Лимитирован трафик
• Ограничение по скорости
• Поисковая оптимизация
VETMANAGER TEAM 12.4.12 Стр. 3

4. 1. Меньше запросов
80 % времени - загрузка
компонентов
2 потока на загрузку с
одного хоста
VETMANAGER TEAM 12.4.12 Стр. 4

5. CSS спрайты
.square1 {
background-image: url(sprite.png);
background-position: 3px 4px;
width: 24px; height: 24px;
}
VETMANAGER TEAM 12.4.12 Стр. 5

6. Inline картинки
data:[<MIME-type>][;charset=<encoding>][;base64],<data>
Плюсы

Меньше запросов

Хорошо сжимаются

Не нужны заголовки ответов

Лучше кешируется
VETMANAGER TEAM 12.4.12 Стр. 6

7. Конкатенация
У нас

Some1.js

Some2.js

Some3.js
Нужно

MegaSome.js
VETMANAGER TEAM 12.4.12 Стр. 7

8. 2. CSS мне в HEAD
Помещая подключение к css файлам в хедере
страницы мы получаем постепенный
рендеринг страницы
VETMANAGER TEAM 12.4.12 Стр. 8

9. 3. JS мне в ...
Помещая javascript-файлы вниз страницы мы
позволяем браузеру загрузить страницу с
контентом в первую очередь, а уже потом
начать загрузку javascript-файлов.
VETMANAGER TEAM 12.4.12 Стр. 9

10. 4. Минификация
1) Удаляем все не влияющие на поведение и
отображение символы.
2) Заменяем длинные выражения(none ->0)
3) Оптимизируем размер через анализ
поведения.
VETMANAGER TEAM 12.4.12 Стр. 10

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

12. 6. Кэш броузера
Настроив apache мы экономим время и
трафик пользователя
VETMANAGER TEAM 12.4.12 Стр. 12

13. 7. CDN для контента
CDN (Content Delivery Network) — это
множество веб-серверов, разнесенных
географически для достижения
максимальной скорости отдачи контента
клиенту.
VETMANAGER TEAM 12.4.12 Стр. 13

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

15. 9. Вынос inline скриптов
Плюсы

Кешируемость

Повторное использование

Возможность убрать неиспользуемые
скрипты
VETMANAGER TEAM 12.4.12 Стр. 15

16. 10. Лишний контент

Мертвый CSS, JS

CSS, JS с других страниц

Комментарии

Постраничная навигация
VETMANAGER TEAM 12.4.12 Стр. 16

17. 11. Размер компонент
Компоненты большого размера не
кешируются некоторыми браузерами.
Для iPhone оптимальный размер компонента
до 25 килобайт.
VETMANAGER TEAM 12.4.12 Стр. 17

18. Компиляция
VETMANAGER TEAM 12.4.12 Стр. 18

19. Блочная структура
Плюсы

Декомпозиция и re-use

Понятная архитектура

Возможность легко убрать неиспользуемый
контент
Минусы

Стадия компиляции
VETMANAGER TEAM 12.4.12 Стр. 19

20. Конфиги
VETMANAGER TEAM 12.4.12 Стр. 20

21. pages
pages:
index:
doctype_html:
blocks:
html:
blocks:
head:
body:
blocks:
page:
blocks:
content:
mod: «red»
VETMANAGER TEAM 12.4.12 Стр. 21

22. Конфиг блока
tag: 'div' HTML
attr: <div class=b-name data-i=some>
- 'data-i': «some» .... контент agile_board.html
html: </div>
- agile_board.html
img: Sprite
- bug.png
- feature.png bug.png Feature.png
css:
- agile_board.css
CSS
- columns.css
/* css from agile_board.css */
js:
/* css from colums.css */
- agile_board.js
/* css for sprite */
VETMANAGER TEAM 12.4.12 Стр. 22

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 Стр. 23

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 Стр. 24

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 Стр. 25

26. Оптимизация
VETMANAGER TEAM 12.4.12 Стр. 26

27. Минификация HTML
function HTMLCompress($fileBig, $fileCompress) {
$cmd = "php html-compressor.php -x
$fileBig >> $fileCompress";
pake_sh($cmd);
}
11%
2032 1816
VETMANAGER TEAM 12.4.12 Стр. 27

28. Минификация CSS
function YUICompress($fileBig, $fileCompress) {
$cmd = "java -jar yuicompressor.jar
$fileBig -o $fileCompress";
pake_sh($cmd);
}
33%
1785 1193
VETMANAGER TEAM 12.4.12 Стр. 28

29. Минификация CSS
function YUICompress($fileBig, $fileCompress) {
$cmd = "java -jar yuicompressor.jar
$fileBig -o $fileCompress";
pake_sh($cmd);
}
33%
1785 1193
VETMANAGER TEAM 12.4.12 Стр. 29

30. Минификация JS
function YUICompress($fileBig, $fileCompress) {
$cmd = "java -jar yuicompressor.jar
$fileBig -o $fileCompress";
pake_sh($cmd);
}
13%
148801 129457
VETMANAGER TEAM 12.4.12 Стр. 30

31. a2enmod deflat(gzip)
<ifmodule mod_deflate.c>
AddOutputFilterByType DEFLATE text/text
...
application/javascript
</ifmodule>
63%
134.5 KB 49.6 KB
VETMANAGER TEAM 12.4.12 Стр. 31

32. a2enmod expires
<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>
92%
49.6 KB 3,5 KB
VETMANAGER TEAM 12.4.12 Стр. 32

33. Итог
Правильная методология -98%
Стадия компиляции веса
Настройка сервера страницы
VETMANAGER TEAM 12.4.12 Стр. 33

34. Спасибо за внимание!
VETMANAGER TEAM 12.4.12 Стр. 34