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

1 index.art

2

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 Экспериментируем, меряем скорость, определяем оптимальные положения

7

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

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

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

11

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 #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 #for proxies Header set Cache-control: private Header append Vary User-Agent ForceType "text/css; content=windows-1251" Header set Content-Encoding: gzip RewriteCond %{REQUEST_URI} ^/glue/(.+)$ RewriteCond %{DOCUMENT_ROOT}/glue/%1. gz -f RewriteCond %{ ^.*?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 добавление

16

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

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 способов оптимизации webzblog.com/28-sposobov-optimizacii-skorosti- zagruzki-sajta 4. JS Perfomance at-sfjs 5. ktonanovenkogo.ru/vokrug-da-okolo/skorost- zagruzki/kak-uvelichit-skorost-zagruzki-sajta- optimizaciya-nagruzki-na-server.html

20