- PVSM.RU - https://www.pvsm.ru -

Золотое правило производительности

От переводчика: Это перевод заметки товарища по имени Steve Souders, который очень плотно занимается вопросами производительности веб-сайтов и даже написал пару неплохих [1] книг [2] на эту тему.

Вчера я проводил семинар в Google Ventures [3] для некоторых из инвестируемых ими компаний. Я не знал насколько подготовленной в вопросах производительности будет аудитория, так что я сделал обзор вопросов, связанных с производительностью, начиная с первых моих выступлений в 2007 году. Уже несколько лет я не рассказывал о методах улчшения производительности, описаных в моем блоге "High Performance Web Sites [4]". Я прошелся по таким вещам, как Меньше HTTP-запросов [5], Добавление заголовка Expires [6] и Gzip [7].

Но мне надо было вернуться еще дальше. Думая о тех временах, когда еще не существовало конференции Velocity [8] и самого понятия WPO [9], я решил, что должен пояснить почему я занялся именно клиентской оптимизацией. Я нашел слайды, поясняющие «Золотое правило производительности»: 80-90% времени ожидания пользователем занимает работа браузера.

На слайдах были данные по времени отработки сервера и клиента для популярных сайтов, но данные были устаревшими и ограниченными, так что я решил обновить их. Вот, что получилось.

Для начала пример «водопада», показывающего распределение времени сервер/клиент для сайта LinkedIn. Серверное время – это время, необходимое серверу для отдачи первого байта клиенту. Оно включает в себя несколько процессов: выборка по БД, вызовы удаленных веб сервисов, собирание HTML-страницы из шаблонов и т.д. Клиентское время — это все остальное. Оно включает в себя очевидные фазы, такие как выполнение JavaScript'а и рендер страницы. Так же в него входит время, затрачиваемое на загрузку всех необходимых ресурсов. Я включаю это время в клиентское, потому что фронтэнд-разработчики могут уменьшать его, применяя асинхронную загрузку скриптов [10], объединение скриптов и таблиц стилей [5] и разнесение ресурсов по разным доменам [11].

Золотое правило производительности

Для получения результатов, имеющих отношение к реальности, я сделал выборку по сайтам, входящим в Топ-10. Среднее клиентское время составило 76%, что чуть ниже, чем заявлено в золотом правиле. Но не забывайте, что эти сайты оптимизированы по-максимуму и два из них – поисковые страницы (не результаты, а именно страница запроса), на которых очень мало лишних ресурсов.

Золотое правило производительности

Для более типичной картины я просмотрел 10 сайтов, находящихся в рейтинге ближе к 10,000-отметке. Клиентское время здесь составило 92%, что намного больше, чем время сайтов из Топ-10 и даже больше, чем время, заявленное в золотом правиле.

Золотое правило производительности

Чтобы донести это правило до участников семинара, я показал графики для их сайтов. Клиентское время составило 84%. Это позволило мне добиться от них согласия с тем, что самая большая проблема в производительности это клиент, и что именно на клиентской оптимизации надо сосредоточиться.

Золотое правило производительности

После этого я понял, что у меня есть информация из HTTP Archive [12]. Я не показываю конкретные данные, потому что считаю, что реальные пользовательские данные более репрезентативны, но я посчитал среднее время для всех 50,000 сайтов, который были обработаны архивом. Оно составило 87%.

Золотое правило производительности

Было очень приятно, что обновленная информация только подтверждает правило, сформированное в 2007-ом году и мотивирует дальше заниматься вопросами клиентской оптимизации. Если вы радеете за доступность и расширяемость вашего сервиса – обратите свое внимание на серверную оптимизацию. Но если вам не все равно как долго пользователи ждут загрузки вашего сайта – сфокусируйтесь на клиентской оптимизации.

От переводчика: Я перевел эту очевидную для кого-то заметку с одной целью – напомнить, что какие бы вы ни преследовали цели в вашем проекте и какими бы вы ни были крутыми, ваш сайт должен работать быстро для конечного пользователя, иначе он просто не дождеться загрузки и уйдет к конкурентам.

Автор: medved13


Сайт-источник PVSM.RU: https://www.pvsm.ru

Путь до страницы источника: https://www.pvsm.ru/javascript/11803

Ссылки в тексте:

[1] неплохих: http://www.amazon.com/dp/0596529309?tag=stevsoud-20&camp=14573&creative=327641&linkCode=as1&creativeASIN=0596529309&adid=00GNM1ZWW77KSD0RERXN&

[2] книг: http://www.amazon.com/dp/0596522304?tag=stevsoud-20&camp=213381&creative=390973&linkCode=as4&creativeASIN=0596522304&adid=09TZDJ7Z5GDMJPAM6XC6&

[3] Google Ventures: http://www.googleventures.com/

[4] High Performance Web Sites: http://stevesouders.com/hpws/

[5] Меньше HTTP-запросов: http://developer.yahoo.com/blogs/ydn/posts/2007/04/rule_1_make_few/

[6] Добавление заголовка Expires: http://developer.yahoo.com/blogs/ydn/posts/2007/05/high_performanc_2/

[7] Gzip: http://developer.yahoo.com/blogs/ydn/posts/2007/07/high_performanc_3/

[8] Velocity: http://velocityconf.com/velocity2012

[9] WPO: http://www.stevesouders.com/blog/2010/05/07/wpo-web-performance-optimization/

[10] асинхронную загрузку скриптов: http://www.stevesouders.com/blog/2009/04/27/loading-scripts-without-blocking/

[11] разнесение ресурсов по разным доменам: http://www.stevesouders.com/blog/2009/05/12/sharding-dominant-domains/

[12] HTTP Archive: http://httparchive.org/