200 likes | 407 Views
index. art. 75% пользователей уйдут с сайта после 10 секунд ожидания. Максимально приемлемое время ожидания – не более 4 секунд. Размер страниц постоянно растет … что делать ?. CENSORED. УБИРАЕМ. ЛИШНЕЕ. 1. Картинки : оптимизация и подбор формата.
E N D
index. art
75%пользователей уйдут с сайта после 10 секунд ожидания Максимально приемлемое время ожидания – не более 4 секунд Размер страницпостоянно растет… что делать?
CENSORED УБИРАЕМ ЛИШНЕЕ
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=“/a/a.js” /> <script src=“/b/b.js” /> <script src=“/glue/a-a.js--b-b.js” /> ПОМНИТЕ О БЕЗОПАСНОСТИ Проверяйте что икак склеивается: 1. допустимые источники 2. допустимые файлы 3. допустимый порядок ОСОБЕННОСТИ “-” == “/” “--” == разделитель файлов .js надо склеивать через “;”
.htaccess # 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]
Почти все современные браузеры поддерживают 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; }
.htaccess добавление 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]
ЗАТАЧИВАЕМ СЕРВЕР
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>
ИНСТРУМЕНТАРИЙ 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 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