Викиновости

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

26 марта 2008 года

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

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

Советы:

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

Источники

править


 
 
Creative Commons
Эта статья содержит материалы из статьи «34 совета по увеличению производительности web-приложений», опубликованной OpenNET и распространяющейся на условиях лицензии Creative Commons Attribution (CC BY) — указание автора, источник и лицензию.
 
Эта статья загружена автоматически ботом NewsBots в архив и ещё не проверялась редакторами Викиновостей.
Любой участник может оформить статью: добавить иллюстрации, викифицировать, заполнить шаблоны и добавить категории.
Любой редактор может снять этот шаблон после оформления и проверки.

Комментарии

Викиновости и Wikimedia Foundation не несут ответственности за любые материалы и точки зрения, находящиеся на странице и в разделе комментариев.



Источник — https://ru.wikinews.org/w/index.php?title=34_совета_по_увеличению_производительности_web-приложений&oldid=15177602