Как сделать сайт отзывчивее для пользователей, как ускорить появление контента на сайте чтобы пользователь не уходил с сайта, так и не дождавшись его появления.
3. 75% пользователей уйдут с сайта после
10 секунд ожидания
Максимально приемлемое время
ожидания – не более 4 секунд
Размер страниц постоянно растет…
что делать?
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. Автосклейка на сервере
<script src=“/glue/a-a.js--b-b.js” />
<script src=“/a/a.js” />
<script src=“/b/b.js” />
ОСОБЕННОСТИ
“-” == “/”
“--” == разделитель файлов
.js надо склеивать через “;”
ПОМНИТЕ О БЕЗОПАСНОСТИ
Проверяйте что и как
склеивается:
1. допустимые источники
2. допустимые файлы
3. допустимый порядок
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;
}
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