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

1. index. art

3. 75% пользователей уйдут с сайта после
10 секунд ожидания
Максимально приемлемое время
ожидания – не более 4 секунд
Размер страниц постоянно растет…
что делать?

4. CENSORED

5. 1. Картинки: оптимизация и подбор формата.
Полноцвет в JPG, остальное в GIF / PNG
Мелкие изображения собираем в спрайты.
2. CSS и JavaScript: уменьшение кода.
Прогон через оптимизаторы и
обфускаторы.
3. HTML: минимизация элементов DOM,
максимальная его подготовка без динамики

6. 4. CSS / inline CSS: в HEADER
5. JS / inline JS: нужное – в HEADER
Остальное в конец HTML или вообще
после onLoad / по требованию.
Используем, где только возможно
асинхронную загрузку по требованию
6. Расположение элементов в HTML
Экспериментируем, меряем скорость,
определяем оптимальные положения

8. Минимизация количества подгружаемого
В идеале должно быть:
• 1 JavaScript-файл
• 1 CSS-файл
• 1 HTML
• остальное на картинки
Не боимся использовать inline
Лучше 1 большой файл чем 2 и более мелких
Лучше избыточность, уходящая в кэш,
чем подгрузки на каждой странице

9. Автосклейка на сервере
<script src=“/glue/a-a.js--b-b.js” />
<script src=“/a/a.js” />
<script src=“/b/b.js” />
ОСОБЕННОСТИ
“-” == “/”
“--” == разделитель файлов
.js надо склеивать через “;”
ПОМНИТЕ О БЕЗОПАСНОСТИ
Проверяйте что и как
склеивается:
1. допустимые источники
2. допустимые файлы
3. допустимый порядок

10. # LAST mean LAST ;)
RewriteCond %{ENV:REDIRECT_STATUS} !^$
RewriteRule .* - [L]
# DEF CHARSET .js / .css
AddDefaultCharset windows-1251
AddCharset windows-1251 .js
AddCharset windows-1251 .css
# GLUE
RewriteCond %{REQUEST_URI} ^/glue/(.+)$
RewriteCond %{DOCUMENT_ROOT}/glue/%1 -f
RewriteRule . /glue/%1 [L]
…
RewriteRule ^.*$ index.php [L]
.htaccess

12. Почти все современные браузеры
поддерживают GZIP сжатие

13. Если есть возможность – используем
Apache mod_deflate.
Однако у большинства хостеров он
отключен
что делать?
Сделаем свой!
С блэкджеком и …

14. В наш обработчик склеивания добавим
возможность сжатия – т.е. к файлу, который
он формирует положим рядом такой же, но
сжатый с добавлением “.gz”
/glue/a-a.js--b-b.js
/glue/a-a.js--b-b.js.gz
/glue/a-a.js--b-b.js
PHP, сжатие данных:
$gzipped = gzencode( $content, 6 );
6 – оптимальная степень сжатия
по нагрузке / качеству
PHP, сжатие output:
ob_start( "ob_gzhandler" );
echo( $content );
ob_end_flush();
Помните о браузерах, не поддерживающих сжатие!!!
Обязательно проверяйте, и если не поддерживается – отдавайте не сжатое.
function isClientSupportGzip() {
if ( headers_sent() || connection_aborted() ) return false;
if ( stripos( getenv( "HTTP_ACCEPT_ENCODING" ), "gzip" ) === false ) return false;
if ( stripos( getenv( "HTTP_USER_AGENT" ), "konqueror" ) !== false ) return false;
return true;
}

15. AddEncoding gzip .gz
<FilesMatch ".js.gz$">
#for proxies
Header set Cache-control: private
Header append Vary User-Agent
ForceType "text/javascript; content=windows-1251"
Header set Content-Encoding: gzip
AddCharset windows-1251 .js.gz
</FilesMatch>
<FilesMatch ".css.gz$">
#for proxies
Header set Cache-control: private
Header append Vary User-Agent
ForceType "text/css; content=windows-1251"
Header set Content-Encoding: gzip
</FilesMatch>
RewriteCond %{REQUEST_URI} ^/glue/(.+)$
RewriteCond %{DOCUMENT_ROOT}/glue/%1.gz -f
RewriteCond %{HTTP:Accept-Encoding} ^.*?gzip.*$ [NC]
RewriteCond %{HTTP_USER_AGENT} !^konqueror [NC]
RewriteRule ^siteglue/(.*)$ /glue/$1.gz [L]
#for not supported GZIP
RewriteCond %{REQUEST_URI} ^/glue/(.+)$
RewriteCond %{DOCUMENT_ROOT}/glue/%1 -f
RewriteRule . /
glue/%1 [L]
.htaccess
добавление

17. 1. Всю статику отдавать через web-сервер
возможно через nginx / lighthttpd
2. Обязательно включить кэширование
3. .htaccess правила для favicon из корня сайта
4. Корректная обработка 404 / 301
<ifModule mod_expires.c>
ExpiresActive On
ExpiresDefault "access plus 604800 seconds"
</ifModule>
<ifModule mod_headers.c>
Header unset Cache-Control
Header set Cache-Control "max-age=604800, public"
</ifModule>

18. 1. YUI Compressor – сжатие CSS / JS
developer.yahoo.com/yui/compressor
2. Firebug – сеть, DOM и т.д.
getfirebug.com
3. Google Page Speed – комплексный анализ
developers.google.com/speed/pagespeed

19. 1. WEBO Labs
webo.in
2. Реактивные вебсайты
speedupyourwebsite.ru
3. 28 способов оптимизации
webzblog.com/28-sposobov-optimizacii-skorosti-
zagruzki-sajta
4. JS Perfomance
www.slideshare.net/souders/javascript-performance-
at-sfjs
5. ktonanovenkogo.ru/vokrug-da-okolo/skorost-
zagruzki/kak-uvelichit-skorost-zagruzki-sajta-
optimizaciya-nagruzki-na-server.html