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

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