$30 off During Our Annual Pro Sale. View Details »

ThinkPHP #3: Оптимизация быстродействия Веб-сайта

ThinkPHP #3: Оптимизация быстродействия Веб-сайта

thinkphp_com_ua

August 18, 2012
Tweet

More Decks by thinkphp_com_ua

Other Decks in Programming

Transcript

  1. Оптимизация
    быстродействия
    Веб-сайта (обзорная)
    Евгений Котельницкий
    Харьков 2012 г.

    View Slide

  2. План:
    - Среда и принципы работы WWW
    - Что мы можем оптимизировать?
    - Средства для мониторинга / утилиты
    - Правильно определяем цели и задачи
    - Детальнее про клиентскую оптимизацию

    View Slide

  3. Принципы работы WWW
    Статические и динамические компоненты WEB-страниц
    Схема загрузки компонентов WEB-страницы:
    1) Index.PHP
    2) Style.CSS
    3) jQuery.JS
    4) Image1.JPG
    5) Image2.JPG
    6) Image3.JPG
    Text / HTML
    Text / CSS
    Image / JPEG
    Image/JPEG
    Image/JPEG
    Text / JavaScript

    View Slide

  4. Принципы работы WWW
    Схема загрузки объектов страницы

    View Slide

  5. Принципы работы WWW
    Как загружаются компоненты страницы?
    Этап Нагрузка на:
    1 DNS Lookup Сеть
    2 Открытие TCP/IP соединения Сеть
    3 Пересылка HTTP запроса Сеть
    4 Разбор запроса сервером Сервер
    5 Формирование ответа Сервер
    6 Компрессия ответа (1) Сервер
    7 Пересылка ответа Сеть
    8 Распаковка ответа (1) Браузер
    9 Представление ответа Браузер
    10 Закрытие соединения? (2)
    11 Отправка следующего запроса (3)
    1) Если компрессия включена
    2) Соединение не закрывается - ждѐм следующий запрос
    3) Если для представления текущего ответа требуются другие компоненты

    View Slide

  6. Что мы можем оптимизировать?
    Мы можем уменьшить задержки на каждом этапе:
    Этап Возможное уменьшение задержки на этапе
    1 DNS Lookup Уменьшим количество различных доменов
    2 Открытие TCP/IP соединения Используем сервера, которые географически ближе
    3 Отправка HTTP запроса Минимизируем размер шапки запроса
    4 Разбор запроса сервером Настройка/оптимизация сервера
    5 Формирование ответа Зависит от типа компонента
    6 Компрессия ответа (1) Отключим компрессию? А как же пункт 7 ?
    7 Пересылка ответа Минимизируем размер ответа
    8 Распаковка ответа (1) См. п. 6
    9 Представление ответа Оптимизируем HTML, CSS, JS и д.р.
    10 Закрытие соединения? (2) К счастью, соединение не закрывается
    11 Отправка следующего запроса (3) Минимизируем кол-во запросов

    View Slide

  7. Средства для мониторинга / утилиты
    1.Firebug + Yahoo YSlow
    2.Google PageSpeed
    3.Pingdom Performance Tools

    View Slide

  8. Правильно определяем цели и задачи
    Перед тем как "рваться в бой" проанализируем ситуацию
    Методично собираем симптомы, чтобы не было как на рисунке:
    Клиент Разработчик

    View Slide

  9. Правильно определяем цели и задачи
    О чём не стоит забывать?
     Расставляем и учитываем приоритеты;
     Учитываем целесообразность изменений;
     Учитываем скорость загрузки без попадания в кэш;
     Действия могут противоречить;
     Стандартные приѐмы могут усугубить ситуацию.

    View Slide

  10. Про клиентскую оптимизацию
    Минимизируем количество HTTP-запросов

    View Slide

  11. Про клиентскую оптимизацию
    Редиректы не желательны

    View Slide

  12. Про клиентскую оптимизацию
    К чему приводят ответы 404 (некорректные URL-адреса)?

    View Slide

  13. Про клиентскую оптимизацию
    Минимизация объёма данных, пересылаемых по сети
     Gzip компрессия;
     Что целесообразно «архивировать»?
     Компрессия vs Минификация;
     YUI Compressor (JS / CSS);
     Минимизация размера медиа-файлов;
     Минимизация размера HTTP-заголовка.

    View Slide

  14. Про клиентскую оптимизацию
    Какие компоненты целесообразно «архивировать»?
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE text/xml
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE text/javascript
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE application/xhtml+xml
    AddOutputFilterByType DEFLATE application/xml
    AddOutputFilterByType DEFLATE application/rss+xml
    AddOutputFilterByType DEFLATE application/atom_xml
    AddOutputFilterByType DEFLATE application/x-javascript
    AddOutputFilterByType DEFLATE application/x-httpd-php
    AddOutputFilterByType DEFLATE application/x-httpd-fastphp
    AddOutputFilterByType DEFLATE application/x-httpd-eruby
    AddOutputFilterByType DEFLATE image/svg+xml
    Настройка “mod_deflate” для Apache:

    View Slide

  15. Про клиентскую оптимизацию
    Нагрузка на сервер от Gzip компрессии

    View Slide

  16. Про клиентскую оптимизацию
    Gzip vs YUI Compressor. Степень сжатия JavaScript

    View Slide

  17. Про клиентскую оптимизацию
    Оптимизация компонентов - HTML
     Уменьшим количество DOM-элементов
     Реже используем

    View Slide

  18. Про клиентскую оптимизацию
    Оптимизация компонентов - CSS
     Используем вместо @import;
     Оптимизируем селекторы;
     Избавляемся от CSS Expressions;
     Не копируем бездумно код.

    View Slide

  19. Про клиентскую оптимизацию
    Оптимизация компонентов - JavaScript
     Распределяем нагрузку по времени;
     Отладка JavaScript в Google Chrome.

    View Slide

  20. Про клиентскую оптимизацию
    Оптимизация компонентов - Изображения

    View Slide

  21. Про клиентскую оптимизацию
    Кэширование компонентов браузером
     Expires или Cache-Control Header
     Last-Modified / If-Modified-Since
     Etags
     Кэширование AJAX-запросов

    View Slide

  22. Про клиентскую оптимизацию
    Кэширование компонентов браузером
    GET /encrypted-area HTTP/1.1
    Host: www.example.com
    Accept-Encoding: gzip, deflate
    HTTP/1.1 200 OK
    Date: Mon, 23 May 2005 22:38:34 GMT
    Server: Apache/1.3.3.7 (Unix) (Red-
    Hat/Linux)
    Last-Modified: Wed, 08 Jan 2003
    23:11:55 GMT
    Etag: "3f80f-1b6-3e1cb03b"
    Accept-Ranges: bytes
    Content-Length: 438
    Connection: close
    Content-Type: text/html; charset=UTF-8
    Content-Encoding: gzip
    Заголовок запрорса Заголовок ответа

    View Slide

  23. Про клиентскую оптимизацию
    Pre / Post-load. Всему своё время.
     Lazy Load;
     Preload;
     Ajax Post-load.

    View Slide

  24. Про клиентскую оптимизацию
    Сеть
     Параллельная загрузка компонентов;
     Минимизируем количество различных доменов;
     CDN (Content Delivery Network);
     Сookie-free domains;

    View Slide

  25. Вопросы?

    View Slide

  26. Спасибо!

    View Slide

  27. Материалы:
    1. http://developer.yahoo.com/performance/rules.html/
    2. http://developer.yahoo.com/blogs/ydn/posts/2007/03/high_performanc/
    3. http://webo.in/articles/habrahabr/30-gzip-versus-broadband/
    4. http://developer.yahoo.com/yui/compressor/
    5. http://www.appelsiini.net/projects/lazyload/
    Утилиты:
    1. http://developer.yahoo.com/yslow/
    2. https://developers.google.com/speed/pagespeed/
    3. http://tools.pingdom.com/fpt/
    4. http://refresh-sf.com/yui/
    5. http://www.smushit.com/ysmush.it/

    View Slide