initial commit

2 files changed, 165 insertions, 0 deletions

diff --git a/files/ru/learn/performance/business_case_for_performance/index.html b/files/ru/learn/performance/business_case_for_performance/index.html
new file mode 100644
index 0000000000..2d7ffc7203
--- /dev/null
+++ b/files/ru/learn/performance/business_case_for_performance/index.html
@@ -0,0 +1,82 @@
+---
+title: Производительность веб-приложений в бизнесе
+slug: Learn/Performance/business_case_for_performance
+translation_of: Learn/Performance/business_case_for_performance
+---
+<div>{{LearnSidebar}}</div>
+
+<div>{{PreviousMenu("Learn/Performance/Mobile", "Learn/Performance")}}</div>
+
+<p>{{draft}}</p>
+
+<p>Мы обсудили важность производительности веб-приложений. Вы изучили, что вам нужно для того, чтобы её оптимизировать. Но как убедить ваших клиентов и/или менеджмент в том, что нужно инвестировать в производительность? В этом разделе мы обсудим создание такой аргументации, чтобы ответственные за принятие решений менеджеры согласились на инвестиции.</p>
+
+<table class="learn-box standard-table">
+ <tbody>
+  <tr>
+   <th scope="row">Необходимо:</th>
+   <td>Базовое понимание компьютерной терминологии, знание <a href="/en-US/docs/Learn/Getting_started_with_the_web">клиентской части веб-технологий</a>, понимание базовых принципов <a href="/en-US/docs/Web/Performance">оптимизации производительности</a>.</td>
+  </tr>
+  <tr>
+   <th scope="row">Задача:</th>
+   <td>
+    <p>Стать уверенным при объяснении клиентам и менедженту важности оптимизации производительности.</p>
+   </td>
+  </tr>
+ </tbody>
+</table>
+
+<h2 id="Делайте_производительность_приоритетом">Делайте производительность приоритетом</h2>
+
+<p>Мы уже обсудили, как приоритезация производительности может улучшить пользовательский опыт и доход компании. Мы также знаем, что игнорирование проблем производительности может привести к потери доходности. Эта статья объясняет, какие конкретные бизнес-показатели напрямую связаны с производительностью веб-приложений  и как применить сервисное проектирование для улучшения пользовательского опыта. В статье подчеркивается важность понимания, как сумма всех небольших улучшений влияет на конверсию и удержание клиентов.</p>
+
+<dl>
+</dl>
+
+<h3 id="Бюджеты_производительности">Бюджеты производительности</h3>
+
+<p>Установка бюджетов веб-производительности поможет вам быть уверенным в том, что команда придерживается верного пути и содержит приложение в хорошем состоянии. Бюджет производительности - это набор ограничний, которые, например, указывают максимальное количество HTTP запросов с клиента, максимальный размер всех ресурсов, минимально допустимую частоту кадров на конкретных устройствах и т.д. Бюджет может быть применён к определенному ресурсу, типу ресурсов, всем ресурсам на странице, конкретному показателю или пороговому показателю за какой-то период времени. Бюджет отражает достижимые цели, будь то время, количество или правило.</p>
+
+<p>Создание и продвижение бюджета помогает вам защищать интересы пользователя в борьбе с конкурирующими интересами: маркетингом, продажами или даже другими разработчиками, которые хотят добавить видео, сторонние скрипты или поиграться с новым фреймворком. Бюджеты помогают командам разраотчиков защищать оптимальную производительность для пользователей, в то время как бизнес может заниматься расширением рынков.</p>
+
+<h3 id="Ключевые_показатели"><strong>Ключевые показатели</strong></h3>
+
+<p>Установка ключевых показателей (Key Performance Indicators, KPI) целями может привести к тому, что цели производительности также станут целями бизнеса. KPI может быть одновременно и набором важных бизнес-показателей, которые объясняют влияние производительности на цели бизнеса, так и способом демонстрации преимущества такого подхода. Вот несколько примеров KPI:</p>
+
+<dl>
+ <dt><strong>Уровень конверсии </strong></dt>
+ <dd>Процент от общего траффика, который выполняет какое-то конкретное действие, например, покупает товар или подписывается на новости. Когда приложение работает медленно, пользователи не могут завершить эти задачи. Это приводит к низкому показателю конверсии.</dd>
+ <dt><strong>Время на сайте</strong></dt>
+ <dd>Среднее время, которое пользователь проводит на вашем сайте. Когда производительность низкая, высока вероятность того, что пользователи закроют сайт прежде, чем он выдаст нужные результаты.</dd>
+ <dt><strong>Уровень лояльности клиентов</strong></dt>
+ <dd>Этот показатель также называется "The net promoter score (NPS)". Он позволяет понять, будет ли пользователь рекомендовать ваш сервис / бизнес своим знакомым.</dd>
+</dl>
+
+<p>Установка уровня конверсии, времени на сайте и/или уровня лояльности клиентов в виде KPI даёт другим департаментам наглядный пример того, зачем нужно тратить усилия на производительность.</p>
+
+<div class="hidden">
+<h2 id="Ожидание_и_реальность_в_производительности">Ожидание и реальность в производительности</h2>
+
+<p>Производительность бизнеса (в доходе, количестве транзакий и т.д.) напрямую связана с веб-производительностью.</p>
+
+<p>Зона конфликта - не заниматься производительностью, но ожидать хороших бизнес-показателей.</p>
+</div>
+
+<div>{{PreviousMenu("Learn/Performance/Mobile", "Learn/Performance")}}</div>
+
+<h2 id="См._также">См. также:</h2>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/Performance/why_web_performance">The "why" of web performance</a></li>
+ <li><a href="/en-US/docs/Learn/Performance/What_is_web_performance">What is web performance?</a></li>
+ <li><a href="/en-US/docs/Learn/Performance/Perceived_performance">How do users perceive performance?</a></li>
+ <li><a href="/en-US/docs/Learn/Performance/Measuring_performance">Measuring performance</a></li>
+ <li><a href="/en-US/docs/Learn/Performance/Multimedia">Multimedia: images</a></li>
+ <li><a href="/en-US/docs/Learn/Performance/video">Multimedia: video</a></li>
+ <li><a href="/en-US/docs/Learn/Performance/JavaScript">JavaScript performance best practices</a>.</li>
+ <li><a href="/en-US/docs/Learn/Performance/HTML">HTML performance features</a></li>
+ <li><a href="/en-US/docs/Learn/Performance/CSS">CSS performance features</a></li>
+ <li><a href="/en-US/docs/Learn/Performance/Fonts">Fonts and performance</a></li>
+ <li><a href="/en-US/docs/Learn/Performance/Mobile">Mobile performance</a></li>
+ <li><a href="/en-US/docs/Learn/Performance/business_case_for_performance">Focusing on performance</a></li>
+</ul>
diff --git a/files/ru/learn/performance/index.html b/files/ru/learn/performance/index.html
new file mode 100644
index 0000000000..74187cfbf7
--- /dev/null
+++ b/files/ru/learn/performance/index.html
@@ -0,0 +1,83 @@
+---
+title: Web performance
+slug: Learn/Performance
+tags:
+  - CSS
+  - HTML
+  - HTTP
+  - JavaScript
+  - Learn
+  - NeedsTranslation
+  - Performance
+  - TopicStub
+  - Web Performance
+translation_of: Learn/Performance
+---
+<p>{{LearnSidebar}}</p>
+
+<p class="summary">Для разработки веб-сайтов необходимы HTML, CSS и JavaScript. Чтобы создавать веб-сайты и приложения, которые люди хотят использовать, которые привлекают и удерживают пользователей, вам нужно создать ?? хороший пользовательский опыт. Частью такого пользовательского опыта является обеспечение быстрой загрузки контента и отзывчивости на взаимодействие с пользователем. Это известно как веб-performance, и в этом разделе вы сосредоточитесь на основах создания эффективных веб-сайтов.</p>
+
+<p class="summary">В наших учебных о<span>ставшихся частях учебного материала для новичков мы старались максимально придерживаться лучших практик Интернета, таких как performance и </span><a href="/en-US/docs/Learn/Accessibility">accessibility</a><span>, однако было бы хорошо сосредоточиться и на таких темах. Убедиться, что вы знакомы с ними.</span></p>
+
+<h2 id="Путь_Обучения">Путь Обучения</h2>
+
+<p>Хотя знание HTML, CSS и JavaScript необходимо для реализации многих рекомендаций по повышению производительности сети, знание того, как создавать приложения, не является необходимым предварительным условием для понимания и измерения perfomance сети. Однако мы рекомендуем, чтобы перед тем, как вы приступили к работе с этим модулем, вы получили хотя бы общее представление о веб-разработке, проработав наше <a href="/en-US/docs/Learn/Getting_started_with_the_web">Начало работы с сетью </a>модулем.</p>
+
+<p>Также было бы полезно углубиться в эти темы с помощью таких модулей, как:</p>
+
+<ul>
+ <li><a href="/en-US/docs/Learn/HTML/Introduction_to_HTML">Введение в HTML</a></li>
+ <li><a href="/en-US/docs/Learn/CSS/First_steps">CSS первые шаги</a></li>
+ <li><a href="/en-US/docs/Learn/JavaScript/First_steps">JavaScript первые шаги</a></li>
+</ul>
+
+<p>После того, как вы проработаете этот модуль, вы, вероятно, захотите глубже изучить веб-производительность - вы можете найти много дополнительных учений в нашем <a href="/en-US/docs/Web/Performance">Раздел веб-производительности</a>, включая обзоры API performance, инструментов тестирования и анализа, а также ошибки, связанные с узкими местами performance. </p>
+
+<h2 id="Guides">Guides</h2>
+
+<p>This topic contains the following guides. The following is a suggested order for working through them; you should definitely start with the first one.</p>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Performance/why_web_performance">The "why" of web performance</a></dt>
+ <dd>This article discusses why web performance is important for accessibility, user experience and your business goals.</dd>
+ <dt><a href="/en-US/docs/Learn/Performance/What_is_web_performance">What is web performance?</a></dt>
+ <dd>You know web performance is important, but what is constitutes web performance? This article introduces the components of performance, from web page loading and rendering, including how your content makes it into your users browser to be viewed, to what groups of people we need to consider when thinking about performance,</dd>
+ <dt><a href="/en-US/docs/Learn/Performance/Perceived_performance">How do users perceive performance?</a></dt>
+ <dd>More important than how fast your website is in milliseconds, is how fast your users perceive your site to be. These perceptions are impacted by actual p<span>age load time, idling, responsiveness to user interaction, and the smoothness of scrolling and other animations. In this article, we discuss the various loading metrics, animation, and responsiveness metrics, along with best practices to improve user perception, if not the actual timings.</span></dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Performance/Measuring_performance">Measuring performance</a></dt>
+ <dd>Now that you understand a few performance metrics, we take a deeper dive into performance tools, metrics, and APIs and how we can make performance part of the web development workflow.</dd>
+ <dt><a href="/en-US/docs/Learn/Performance/Multimedia">Multimedia: images</a></dt>
+ <dd>The lowest hanging fruit of web performance is often media optimization. Serving different media files based on each user agent's capability, size, and pixel density is possible. In this article we discuss the impact images have on performance, and the methods to reduce the number of bytes sent per image.</dd>
+ <dt></dt>
+ <dt><a href="/en-US/docs/Learn/Performance/video">Multimedia: video</a></dt>
+ <dd>The lowest hanging fruit of web performance is often media optimization. In this article we discuss the impact video content has on performance, and cover tips like removing audio tracks from background videos can improve performance.</dd>
+ <dt><a href="/en-US/docs/Learn/Performance/JavaScript">JavaScript performance best practices</a></dt>
+ <dd>JavaScript, when used properly, can allow for interactive and immersive web experiences — or it can significantly harm download time, render time, in-app performance, battery life, and user experience. This article outlines some JavaScript best practices that should be considered to ensure even complex content is as performant as possible.</dd>
+ <dt><a href="/en-US/docs/Learn/Performance/HTML">HTML performance features</a></dt>
+ <dd>Some attributes and the source order of your mark-up can impact the performance or your website. By minimizing the number of DOM nodes, making sure the best order and attributes are used for including content such as styles, scripts, media, and third-party scripts, you can drastically improve the user experience. This article looks in detail at how HTML can be used to ensure maximum performance.</dd>
+ <dt><a href="/en-US/docs/Learn/Performance/CSS">CSS performance features</a></dt>
+ <dd>CSS may be a less important optimization focus for improved performance, but there are some CSS features that impact performance more than others. In this article we look at some CSS properties that impact performance and suggested ways of handling styles to ensure performance is not negatively impacted.</dd>
+ <dt><a href="/en-US/docs/Learn/Performance/Fonts">Fonts and performance</a></dt>
+ <dd>A look at whether you need to include external fonts and, if you do, how to include the fonts your design requires with the least impact on your sites performance. </dd>
+</dl>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Performance/Mobile">Mobile performance</a></dt>
+ <dd>With web access on mobile devices being so popular, and all mobile platforms having fully-fledged web browsers, but possibly limited bandwidth, CPU and battery life, it is important to consider the performance of your web content on these platforms. This article looks at mobile-specific performance considerations.</dd>
+ <dt><a href="/en-US/docs/Learn/Performance/business_case_for_performance">Focusing on performance</a></dt>
+ <dd>There are many different things a developer can do to improve performance, but how fast is fast enough? How can you convince powers that be of the importance of these efforts? Once optimized, how can you ensure bloat doesn't come back? In this article we look at convincing managements, developing a performance culture and performance budget, and introduce ways to ensure regressions don't sneak into your code base.</dd>
+</dl>
+
+<h2 id="See_also">See also</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Learn/Performance/Web_Performance_Basics">Web performance resources</a></dt>
+ <dd>In addition to the front end components of HTML, CSS, JavaScript, and media files, there are features that can make applications slower and features that can make applications subjectively and objectively faster. There are many APIs, developer tools, best practices, and bad practices relating to web performance. Here we'll introduce many of these features ad the basic level and provide links to deeper dives to improve performance for each topic.</dd>
+ <dt><a href="/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images">Responsive images</a></dt>
+ <dd>In this article, we'll learn about the concept of responsive images — images that work well on devices with widely differing screen sizes, resolutions, and other such features — and look at what tools HTML provides to help implement them. This helps to improve performance across difference devices. Responsive images are just one part of <a href="/en-US/docs/Learn/CSS/CSS_layout/Responsive_Design">responsive design</a>, a future CSS topic for you to learn.</dd>
+ <dt><a href="/en-US/docs/Web/Performance">Main web performance section on MDN</a></dt>
+ <dd>Our main web performance section — here you'll find much more detail on web performance including overviews of performance APIs, testing and analysis tools, and performance bottleneck gotchas.</dd>
+</dl>