The OpenNET Project / Index page

[ новости/++ | форум | wiki | теги | ]

26.03.2008 17:09  34 совета по увеличению производительности web-приложений

Разработчики, отвечающие за создание высокопроизводительных решений в Yahoo, опубликовали интересную 76-страничную презентацию, в которой обобщен опыт компании, связанный с повышением производительности web-страниц. В презентации представлены 34 рекомендации web-разработчикам, из них 14 советов были описаны в прошлом докладе.

Для выявления проблем с производительностью сайтов, в Yahoo было разработана специальное дополнение к Firefox плагину Firebug - YSlow, позволяющее выявить узкие места и оценить скорость поэтапной загрузки различных частей страницы.

Советы:

  1. Производить как можно меньше HTTP запросов;
  2. Воспользоваться услугами сетей доставки контента (Content Delivery Network), например Akamai;
  3. Не пренебрегать HTTP заголовком "Expires" или "Cache-control";
  4. Отдавать страницы в сжатом виде (например, mod_gzip);
  5. Указывать ссылки на файлы с таблицами стилей (link href) в начале документа;
  6. Указывать ссылки на JavaScript файлы (script src) в конце документа;
  7. Не использовать вычислимые выражения (expression) в CSS;
  8. Хранить JavaScript и CSS вставки в виде отдельных файлов;
  9. Уменьшить число обращений к другим доменам на странице (например, когда картинки или iframe грузятся с другого сервера, в идеале не больше 3 доменов);
  10. Минимизировать размер JavaScript и CSS (например, при помощи JSMin или YUI compressor, которые убирают лишние пробелы, комментарии и сокращают переменные);
  11. Избегать редиректов (HTTP Redirect);
  12. Исключить дублирование JavaScript кода (например, IE повторно грузит повторяющиеся "script src" вставки);
  13. Настроить ETags ("FileETag None" в Apache);
  14. Кэшировать Ajax запросы;
  15. Сбрасывать буфер в на начальном этапе генерации страницы (например, через периодический вызов flush() в PHP, для того чтобы клиент получил ссылки на CSS файлы и успел начать их загрузку);
  16. Использовать для Ajax запросов HTTP метод GET (вмещается в 1 TCP пакет, в то время как POST отправляется в два этапа - заголовки и данные);
  17. Выделение контента, который можно загрузить в последнюю очередь (например, отложенная загрузка картинок и JavaScript блоков, после того как загрузится основная часть);
  18. Выделение скриптов, который нужно загрузить в первую очередь;
  19. Уменьшение числа элементов в дереве DOM (минимизация числа HTML тэгов на странице);
  20. Разделение контента по разным доменам: статика через отдельный static.domain.com (браузер будет загружать данные параллельно);
  21. Минимизировать число iframe'ов, не использовать в iframe и script src ссылки на чужие ресурсы (блокирует загрузку остальной части страницы);
  22. Недопускать появление 404 ошибки (страница не найдена);
  23. Уменьшить размер Cookie (убрать лишнее, сократить имена, привязать только к необходимым доменам, определить время жизни);
  24. Для вспомогательных страниц исключить установку Cookie (вынос картинок, CSS и скриптов на static.domain.com);
  25. В JavaScript минимизировать обращения к DOM (очень медленная операция), исключить повторяющиеся запросы к DOM через кэширование;
  26. Оптимизировать обработку событий в JavaScript (вместо "onload" использовать DOMContentLoaded, с осторожностью использовать onresize, провести аудит при помощи утилиты YUI Event);
  27. Загружать CSS через "link" вначале страницы, не использовать @import (в IE он приводит к загрузке CSS в самом конце);
  28. Избегать использования фильтров в CSS, они поддерживаются только в IE, лучше использовать PNG8;
  29. Оптимизировать изображения (минимизация размера палитры, переход на PNG, оптимизация через утилиты pngcrush, optipng или pngoptimizer, удаления комментариев в картинках, оптимизация JPEG через jpegtran);
  30. Оптимизация CSS спрайтов (css sprite) для создания фоновых изображений;
  31. Фактический размер изображения должен совпадать с указанным в параметрах width и height (для того чтобы избежать масштабирования);
  32. favicon.ico должен быть небольшим (менее 1 Кб) и кэшируемым (должен выставляться Expires, 9% всех запросов в Yahoo Search приходится на favicon.ico !). При использовании Flash нужно определить crossdomain.xml;
  33. Страницы, предназначенные для просмотра на мобильных устройствах, не должны превышать 25Кб (иначе не попадают в кэш iPhone);
  34. Для мобильных устройств можно использовать multipart блоки, когда дополнения к странице (css, картинки) упаковываются в самой странице в виде приложений;


  1. Главная ссылка к новости (http://www.phpied.com/20-new-p...)
Лицензия: CC-BY
Тип: английский / Практикум
Ключевые слова: web, speed, performance, optimization
При перепечатке указание ссылки на opennet.ru обязательно
Обсуждение Ajax/Линейный | Раскрыть все сообщения | RSS
 
  • 1.1, Alrond (??), 17:39, 26/03/2008 [ответить] [показать ветку] [···]    [к модератору]
  • +/
    Кому надо, закачал на яндекс-диск PDF версию
    http://narod.ru/disk/22464000/high-performance-web-pages-20-new-best-practice
     
     
  • 2.3, Бука (?), 17:53, 26/03/2008 [^] [ответить]    [к модератору]
  • +/
    Спасибо
     
  • 1.2, Аноним (2), 17:52, 26/03/2008 [ответить] [показать ветку] [···]    [к модератору]
  • +/
    эээ, я ожидал увидеть советы увеличения вебсерверов ).
    mod_gzip прилично тачку нагружает :)
     
     
  • 2.12, AmdY (?), 04:26, 27/03/2008 [^] [ответить]    [к модератору]
  • +/
    >эээ, я ожидал увидеть советы увеличения вебсерверов ).
    >mod_gzip прилично тачку нагружает :)

    зато уменьшение трафика разгружает. реально получается  сокращение трафика и прирост производительности, только иногда фаерволы блочат.

     
  • 2.16, Koryun (?), 10:17, 28/03/2008 [^] [ответить]    [к модератору]
  • +/
    >эээ, я ожидал увидеть советы увеличения вебсерверов ).
    >mod_gzip прилично тачку нагружает :)

    Ещё можно заранее сжать файлы, например JS скрипты типа "dojo.js"(из 650Кб получилось 150Кб).

     
     
  • 3.17, AmdY (ok), 22:26, 28/03/2008 [^] [ответить]    [к модератору]  
  • +/
    >>эээ, я ожидал увидеть советы увеличения вебсерверов ).
    >>mod_gzip прилично тачку нагружает :)
    >
    >Ещё можно заранее сжать файлы, например JS скрипты типа "dojo.js"(из 650Кб получилось
    >150Кб).

    ну js не так важен, так как после первой загрузки он всё-равно в кеше осядет.
    иногда js, css можно отдавать через РНР, чтобы отослать заголовки, заменить значения и сжать-несжать.


     
  • 1.4, Vaso_Petrovich (?), 19:08, 26/03/2008 [ответить] [показать ветку] [···]    [к модератору]  
  • +/
    >mod_gzip прилично тачку нагружает :)

    дык держивсе сжатым разжимать меньше ресурсов надо, либо держи и так и так, кто может в этом помешать?

     
  • 1.5, Аноним (5), 19:25, 26/03/2008 [ответить] [показать ветку] [···]    [к модератору]  
  • +/
    Большое спасибо!
    Обезательно буду делать странички не меньше чем 30к. Чтоб этот йа-фонко сдохла.
    Ещё раз респект!
     
  • 1.6, Серж (??), 19:46, 26/03/2008 [ответить] [показать ветку] [···]    [к модератору]  
  • +/
    > Страницы, предназначенные для просмотра на мобильных устройствах, не должны превышать 25Кб (иначе не попадают в кэш iPhone)

    Доски для перевозки в легковых автомобилях не должны быть длиннее 135 см (иначе не влезут в AUDI A3).

     
     
  • 2.7, Cyrill Malevanov (?), 20:23, 26/03/2008 [^] [ответить]    [к модератору]  
  • +/
    не больше 3м, иначе в бортовую газель не влезут, а 80% перевозок на них осуществляется

    аналогия, надеюсь, понятна

     
     
  • 3.15, northbear (??), 17:38, 27/03/2008 [^] [ответить]    [к модератору]  
  • +/
    Уж не хотите ли вы сказать, что большая часть мобильных устройств, с которых ходят в сеть, это iPhone?
     
  • 1.8, тайсон (?), 20:36, 26/03/2008 [ответить] [показать ветку] [···]    [к модератору]  
  • +/
    > Использовать для Ajax запросов HTTP метод GET (вмещается в 1 TCP пакет, в то время как POST отправляется в два этапа - заголовки и данные);

    Жесть.

     
  • 1.9, Михаил (??), 21:16, 26/03/2008 [ответить] [показать ветку] [···]    [к модератору]  
  • +/
    1. Непонимаю как количество доменов может влиять на производительность ? может кто просветить ?
    2. GET и POST, разница в том один или два пакета, тоже самое что из пушки по воробьям пулять. Из курса съэкономим все что можно, даже если не нужно.
     
     
  • 2.10, Michael Shigorin (ok), 00:32, 27/03/2008 [^] [ответить]    [к модератору]  
  • +/
    >1. Непонимаю как количество доменов может влиять на производительность ?
    >может кто просветить ?

    Браузеры ограничивают количество одновременных соединений по доменам.  То ли два, то ли пять, что-то такое.

    PS: если они упомянули php, то не понимаю, почему не упомянули акселераторы (а-ля eaccelerator); если речь о CGI, то почему не упомянули FastCGI.  Ну да упомянём. :)

     
     
  • 3.11, Dvorkin (??), 02:58, 27/03/2008 [^] [ответить]    [к модератору]  
  • +/
    > Браузеры ограничивают количество одновременных соединений по доменам.  То ли два, то ли пять, что-то такое.

    Михаил. простите, но гыгыгы. тут речь скорее всего идет о резолвере.

     
     
  • 4.20, Michael Shigorin (ok), 19:36, 28/05/2008 [^] [ответить]    [к модератору]  
  • +/
    >> Браузеры ограничивают количество одновременных соединений по доменам.
    >> То ли два, то ли пять, что-то такое.
    >Михаил. простите, но гыгыгы. тут речь скорее всего идет о резолвере.

    Не прощу! :)  Почитайте сами, не будет "гы".

     
     
  • 5.21, AmdY (ok), 20:37, 28/05/2008 [^] [ответить]    [к модератору]  
  • +/
    >>> Браузеры ограничивают количество одновременных соединений по доменам.
    >>> То ли два, то ли пять, что-то такое.
    >>Михаил. простите, но гыгыгы. тут речь скорее всего идет о резолвере.
    >
    >Не прощу! :)  Почитайте сами, не будет "гы".

    Действительно, есть такое ограничение, и ксожалению, количество небольшое, диктовалось тогдашними диал апами, но эту планку можно увеличить ;)

     
  • 2.13, Аноним (2), 10:20, 27/03/2008 [^] [ответить]    [к модератору]  
  • +/
    Вот посидите в интернете через мобильник, когда round-trip - сотни миллисекунд, тогда каждый пакет экономить будете.
     
  • 1.14, minaev (?), 12:54, 27/03/2008 [ответить] [показать ветку] [···]    [к модератору]  
  • +/
    Браузер закачивает контент в два потока. Если будет много скриптовых вставок или файлов css - то "картинка" оживет нескоро.
     
     
  • 2.18, Кондорий (ok), 04:01, 29/03/2008 [^] [ответить]    [к модератору]  
  • +/
    А у меня в три.
     

     Добавить комментарий
    Имя:
    E-Mail:
    Заголовок:
    Текст:


      Закладки на сайте
      Проследить за страницей
    Created 1996-2018 by Maxim Chirkov  
    ДобавитьПоддержатьВебмастеруГИД  
    Hosting by Ihor