оптимизация скорости загрузки страницы
DESCRIPTION
Основные способы оптимизации размера и времени загрузки страницыTRANSCRIPT
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
Спасибо за внимание!