1 / 20

index.

index. art. 75% пользователей уйдут с сайта после 10 секунд ожидания. Максимально приемлемое время ожидания – не более 4 секунд. Размер страниц постоянно растет … что делать ?. CENSORED. УБИРАЕМ. ЛИШНЕЕ. 1. Картинки : оптимизация и подбор формата.

glenys
Download Presentation

index.

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. index. art

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

  3. CENSORED УБИРАЕМ ЛИШНЕЕ

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

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

  6. СКЛЕИВАЕМ НУЖНОЕ

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

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

  9. .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]

  10. СЖИМАЕМ

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

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

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

  14. .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]

  15. ЗАТАЧИВАЕМ СЕРВЕР

  16. 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>

  17. ИНСТРУМЕНТАРИЙ 1. YUI Compressor – сжатие CSS / JS developer.yahoo.com/yui/compressor 2. Firebug – сеть, DOM и т.д. getfirebug.com 3. Google Page Speed – комплексный анализ developers.google.com/speed/pagespeed

  18. ССЫЛКИ ПО ТЕМЕ 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

  19. ВОТ И ВСЕ :)

More Related