index. art

75% пользователей уйдут с сайта после10 секунд ожидания

Максимально приемлемое время ожидания – не более 4 секунд

Размер страниц постоянно растет…

что делать?

CE

NS

OR

ED

1. Картинки: оптимизация и подбор формата. Полноцвет в JPG, остальное в GIF / PNG Мелкие изображения собираем в спрайты.

2. CSS и JavaScript: уменьшение кода. Прогон через оптимизаторы и обфускаторы.

3. HTML: минимизация элементов DOM, максимальная его подготовка без динамики

4. CSS / inline CSS: в HEADER

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

6. Расположение элементов в HTML Экспериментируем, меряем скорость, определяем оптимальные положения

Минимизация количества подгружаемогоВ идеале должно быть:• 1 JavaScript-файл• 1 CSS-файл• 1 HTML• остальное на картинки

Не боимся использовать inline

Лучше 1 большой файл чем 2 и более мелких

Лучше избыточность, уходящая в кэш,чем подгрузки на каждой странице

Автосклейка на сервере

<script src=“/glue/a-a.js--b-b.js” /><script src=“/a/a.js” /><script src=“/b/b.js” />

ОСОБЕННОСТИ

“-” == “/”“--” == разделитель файлов

.js надо склеивать через “;”

ПОМНИТЕ О БЕЗОПАСНОСТИ

Проверяйте что и каксклеивается:

1. допустимые источники2. допустимые файлы3. допустимый порядок

# LAST mean LAST ;)RewriteCond %{ENV:REDIRECT_STATUS} !^$RewriteRule .* - [L]

# DEF CHARSET .js / .cssAddDefaultCharset windows-1251AddCharset windows-1251 .jsAddCharset windows-1251 .css

# GLUERewriteCond %{REQUEST_URI} ^/glue/(.+)$RewriteCond %{DOCUMENT_ROOT}/glue/%1 -fRewriteRule . /glue/%1 [L]…RewriteRule ^.*$ index.php [L]

.htaccess

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

Если есть возможность – используемApache mod_deflate.

Однако у большинства хостеров он отключен

что делать?

Сделаем свой!С блэкджеком и …

В наш обработчик склеивания добавимвозможность сжатия – т.е. к файлу, которыйон формирует положим рядом такой же, носжатый с добавлением “.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;

}

AddEncoding gzip .gz

<FilesMatch "\.js.gz$">#for proxiesHeader set Cache-control: privateHeader append Vary User-AgentForceType "text/javascript; content=windows-1251"Header set Content-Encoding: gzipAddCharset windows-1251 .js.gz

</FilesMatch><FilesMatch "\.css.gz$">

#for proxiesHeader set Cache-control: privateHeader append Vary User-AgentForceType "text/css; content=windows-1251"Header set Content-Encoding: gzip

</FilesMatch>

RewriteCond %{REQUEST_URI} ^/glue/(.+)$RewriteCond %{DOCUMENT_ROOT}/glue/%1.gz -fRewriteCond %{HTTP:Accept-Encoding} ^.*?gzip.*$ [NC]RewriteCond %{HTTP_USER_AGENT} !^konqueror [NC]RewriteRule ^siteglue/(.*)$ /glue/$1.gz [L]

#for not supported GZIPRewriteCond %{REQUEST_URI} ^/glue/(.+)$RewriteCond %{DOCUMENT_ROOT}/glue/%1 -fRewriteRule . /glue/%1 [L]

.htaccessдобавление

1. Всю статику отдавать через web-сервер возможно через nginx / lighthttpd

2. Обязательно включить кэширование

3. .htaccess правила для favicon из корня сайта

4. Корректная обработка 404 / 301

<ifModule mod_expires.c>ExpiresActive OnExpiresDefault "access plus 604800 seconds"

</ifModule><ifModule mod_headers.c>

Header unset Cache-ControlHeader set Cache-Control "max-age=604800, public"

</ifModule>

1. YUI Compressor – сжатие CSS / JS developer.yahoo.com/yui/compressor

2. Firebug – сеть, DOM и т.д. getfirebug.com

3. Google Page Speed – комплексный анализ developers.google.com/speed/pagespeed

1. WEBO Labs webo.in

2. Реактивные вебсайтыspeedupyourwebsite.ru

3. 28 способов оптимизацииwebzblog.com/28-sposobov-optimizacii-skorosti-zagruzki-sajta

4. JS Perfomancewww.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