利益相关者软件工程_让您的利益相关者了解网站性能的影响

利益相关者软件工程

One thing you will know if you have ever seen one of my talks or even worked with me is that I can be a bit obsessed when it comes to performance.

如果您看过我的演讲之一，甚至和我一起工作，您都会知道的一件事是，我可能会对表现有些痴迷。

It certainly wouldn’t be out of the ordinary to find me with webpack-bundle-analyzer open in my browser analysing a JavaScript bundle to figure out what is next on the chopping block. Usually, anything over 10KB is fair game for seeing if there is an alternative I can use instead.

在浏览器中打开webpack-bundle-analyzer并分析JavaScript包以找出斩波块的下一步内容时，找到我肯定不会与众不同。 通常，任何超过10KB的内容都是公平的游戏，以查看是否可以替代使用。

The reason I get so obsessed about web performance is that I understand the impact that performance can have on the user’s experience. After all, I want users using the sites I produce to have a great user experience because that’s why I build them, I want products I create to make a difference to peoples lives.

我对网络性能如此着迷的原因是，我了解性能可能会对用户的体验产生影响。 毕竟，我希望使用我生产的网站的用户拥有出色的用户体验，因为这就是我建立它们的原因，我希望我创造的产品能够改变人们的生活。

Where I reach the limits of my obsession is that I am a single developer, and this can limit the amount of impact I can have on my own. To increase this impact, I need to champion performance with all stakeholders of the project I am working on, right through from my immediate team to the general manager responsible for the business unit I am part of. For performance to be considered a critical metric that we measure ourselves against, these stakeholders must get on board with the idea that performance is essential to our business.

我达到极限的地方就是我是一个开发人员，这可能会限制我自己所能拥有的影响力。 为了增加这种影响，我需要与我所从事的项目的所有利益相关者保持一致，从我的直属团队到负责我所隶属的业务部门的总经理，一直保持绩效。 为了使绩效被视为衡量自己的关键指标，这些利益相关者必须接受绩效对我们业务至关重要的想法。

围绕表演规范您的语言 (Standardising your language around performance)

When we are talking about performance with stakeholders, we must have a common language we use within the team. It is therefore essential to educate our stakeholders about the different kinds of performance and what we mean when we are saying our website is slow (or even fast).

当我们与利益相关者讨论绩效时，我们必须在团队中使用通用语言。 因此，必须对利益相关者进行不同类型的性能教育以及当我们说我们的网站运行缓慢(甚至快速)时的含义。

One way in which we can educate our stakeholders is to educate them about the different kinds of performance. The three I usually talk about with my stakeholders are as follows:

我们可以对利益相关者进行教育的一种方式是对他们进行不同类型的绩效教育。 我通常与利益相关者讨论的三个问题如下：

Render performance

渲染效果

“Render Performance” is the time it takes for the browser to start rendering the page for the user. This is the point that the browser has enough data about your page that it can begin painting the page.

“渲染性能”是浏览器开始为用户渲染页面所花费的时间。 这就是浏览器具有有关页面的足够数据以便可以开始绘制页面的要点。

Until the browser starts to render your website, your user’s initial experience of your site is merely staring at a blank white screen. It’s not until the browser renders the page that they start to see the content.

在浏览器开始呈现您的网站之前，用户对您网站的最初体验只是盯着空白的空白屏幕。 直到浏览器呈现页面后，他们才开始查看内容。

The key metric that measures the render performance of a page is `Time to first paint`.

衡量页面渲染性能的关键指标是“首次绘制时间”。

Page load performance

页面加载性能

The “page load performance” is the time it takes for the page to be ready with all dependent resources such as stylesheets and images downloaded and loaded. Before the rich, JavaScript-heavy pages, our users are using today, “Page Load Performance” was the most common metric used to measure web performance.

“页面加载性能”是页面准备就绪所需的所有相关资源(例如样式表和下载并加载的图像)所花费的时间。 在拥有丰富的，包含大量JavaScript的页面之前，今天我们的用户正在使用“页面加载性能”是用于衡量Web性能的最常见指标。

The problem is that it is no longer reflects when a page might be ready to be used by the user, so it is not often used these days.

问题在于，该页面不再反映用户何时可以使用该页面，因此这些天很少使用。

Perceived performance

感知表现

Perceived performance is different from both “Render performance” and “Page load performance” in that it is measured primarily on the user’s perception of the performance of your site. Specifically, it is how fast that a user thinks your website is, not necessarily what a technical stat says it is.

感知性能与“呈现性能”和“页面加载性能”不同，因为它主要根据用户对网站性能的感知来衡量。 具体来说，用户认为您的网站的速度有多快，而技术指标却不一定如此。

When thinking about metrics that impact the perceived performance of the page, you should be considering “Time to interactive” and “First input delay”.

在考虑影响页面感知性能的指标时，应考虑“交互时间”和“首次输入延迟”。

比较这三种表现 (Comparing these three types of performance)

To demonstrate the three types of performance further, I have put together the following video using The Guardian website. To help illustrate this, I am loading the site on a slow 3G connection on an iPhone. Why don’t you see if you can spot the three types of performance yourself?

为了进一步演示这三种性能，我使用The Guardian网站整理了以下视频。 为了说明这一点，我在iPhone上以缓慢的3G连接加载该网站。 您为什么不看自己是否可以发现三种类型的演奏？

演示地址

When playing the video, you should be able to see the three types of performance I previously mentioned. These being:

播放视频时，您应该能够看到我之前提到的三种表演。 这些是：

• At 4 seconds, the page starts to render; this is “Render performance.”
  4秒钟后，页面开始渲染； 这就是“渲染效果”。
• At 7 seconds, we can see the content and imagery is starting to be available; this is the “Perceived performance.”
  7秒钟后，我们可以看到内容，并且图像开始可用； 这就是“感知性能”。
• At 32 seconds, we will see the page has finished loading; this is the “Page load performance.”
  32秒后，我们将看到页面已完成加载； 这就是“网页加载效果”。

为什么绩效对您的利益相关者很重要？ (Why should performance matter to your stakeholders?)

Having standardised with our stakeholders the language we use to talk about performance, the next step is to work with your stakeholders to help them understand why it should matter to your business.

在与利益相关者进行标准化之后，我们将用来谈论绩效的语言，下一步就是与您的利益相关者合作，以帮助他们理解为什么这对您的业务很重要。

The narrative you use will likely depend on who your stakeholders are, to mention but a few examples:

您所使用的叙述可能取决于您的利益相关者是谁，仅举几个例子：

To designers, the perceived performance has an impact on the user experience of the site. Before they have had an opportunity to use your website if your page takes a long time to load the user will already have had a bad experience.

对于设计师而言 ，感知的性能会影响网站的用户体验。 如果您的页面需要很长时间才能加载，那么他们没有机会使用您的网站时，用户将已经体验不好。

To clients/product managers, performance can affect what they are trying to achieve. The majority of clients/product managers are aiming to reach specific KPIs. Examples of these might be:

对于客户/产品经理而言 ，绩效可能会影响他们想要达到的目标。 大多数客户/产品经理的目标是达成特定的KPI。 这些示例可能是：

• Number of new signups
  新注册人数
• Minimising the cost of acquiring or retaining customers
  最小化获取或保留客户的成本
• The higher visitor return rate
  较高的访客回访率
• Lower visitor bounce rate
  降低访客跳出率
• Higher interaction rate
  更高的互动率

To SEO managers, the performance is essential to the rankings that search engines, especially Google, assign your pages.

对于SEO经理而言 ，性能对于搜索引擎(尤其是Google)分配页面的排名至关重要。

使用数据来证明性能的好处。 (Use data to demonstrate the benefit of performance.)

To support the narrative that performance is having an impact on your business, the best thing that you can do is to start to use data.

为了支持绩效影响业务的说法，您最好的办法就是开始使用数据。

There are two kinds of data that you can use to help you justify spending time on the performance of your site, each with increasing levels of investment to achieve.

您可以使用两种数据来证明花费在网站性能上的时间是合理的，每种数据都需要增加投资水平。

第三方案例研究 (Third-party case studies)

The first type of data that I recommend you spend time looking at is case studies from other businesses about how performance improvements have benefited their sites.

我建议您花时间研究的第一类数据是来自其他企业的案例研究，这些案例涉及性能改进如何使他们的站点受益。

There are many companies that are happy to share the positive results they get from improving the performance of their websites. Some examples of which are:

有许多公司乐于分享改善网站性能所获得的积极成果。 其中的一些示例是：

• Amazon found that every 100ms delay in loading a page cost them 1% in sales.

  亚马逊发现，页面加载每延迟100毫秒 ，就会使他们的销售收入减少1％ 。

• Google experienced that an extra 500ms delay loading search results decreased traffic by 20%

  Google体验到额外500毫秒的延迟加载搜索结果使流量减少了20％

• The Trainline reduced latency by 0.3 seconds, and it increased ticket sales by £8m per year.

  Trainline减少了0.3秒的延迟，并且每年增加了800万英镑的门票销售。

• Walmart saw for every 1 second that they decreased the page load they had a 2% increase in sales.

  沃尔玛每1秒钟看到一次 降低了页面加载量，他们的销售额增长了2％ 。

There are many more examples of businesses that found improving the performance of their site helped their businesses. The best way to find such case studies is to check out https://wpostats.com.

还有更多的企业示例发现改善站点的性能对他们的业务有帮助。 查找此类案例研究的最佳方法是查看https://wpostats.com 。

From an effort point of view, looking at case studies about the impact of performance is the lowest amount of effort. The value is also the weakest as the users visiting the sites in the case studies may be different from the users using your site so your mileage may vary.

从工作量的角度来看，查看有关性能影响的案例研究是最少的工作量。 该值也是最弱的，因为案例研究中访问站点的用户可能不同于使用您站点的用户，因此您的里程可能会有所不同。

您的真实用户数据 (Your real user data)

An alternative to using case studies from other websites is to gather your own data on how performance impacts your website.

使用其他网站的案例研究的替代方法是收集有关性能如何影响您的网站的数据。

How you do this is to perform an A/B test of a page, determining if an increase in performance results in a positive impact for the business.

这样做是对页面执行A / B测试，以确定性能的提高是否会对业务产生积极影响。

To start with you would select a page that has a specific action you want a customer to achieve (such as buy a product) and setup analytics so that you know when that action has been completed. You then would set up an A/B test on that page where the 50% of users are shown a slow page, and 50% are shown a faster page.

首先，您将选择一个页面，该页面具有您希望客户实现的特定操作(例如购买产品)并设置分析，以便您知道该操作何时完成。 然后，您将在该页面上设置A / B测试，其中50％的用户显示为较慢的页面，而50％的用户显示为较快的页面。

If it is not possible to make the page, you are testing faster in a time-efficient manner then consider instead intentionally slowing down the page for the 50% of users who are getting slower page.

如果无法制作页面，则您正在以省时的方式加快测试速度，然后考虑有意让速度变慢的50％的用户放慢页面速度。

If you are interested in more details on capturing data on your own website, then check out this post — https://medium.com/@JonthanFielding/programatically-performant-capturing-web-performance-data-using-javascript-ab2571b31fd3 which talks about how you can use Segment to capture real user metrics.

如果您对在自己的网站上捕获数据的更多详细信息感兴趣，请查看这篇文章— https://medium.com/@JonthanFielding/programatically-performant-capturing-web-performance-data-using-javascript-ab2571b31fd3其中讨论如何使用细分来捕获实际用户指标。

在哪里很难证明收益？ (Where is it hard to demonstrate the benefit?)

It is very easy for us to link a metric showing an increase in performance to an increase of a KPI such as signups. However, there are other impacts of having a performant site which is not quite as easy to track.

对于我们来说，将表现出性能提升的指标与诸如注册的KPI增长联系起来非常容易。 但是，拥有一个绩效网站的其他影响并不十分容易跟踪。

The key metric with a difficult to measure benefit is search engine ranking. It is therefore unlikely you will find a study that shows an increase in performance is linked to better search engine rankings. The reason for this is that there are a large number of factors that contribute to a websites search engine rankings.

收益难以衡量的关键指标是搜索引擎排名。 因此，您不太可能会发现一项研究表明性能提高与更好的搜索引擎排名相关。 这样做的原因是，有许多因素会影响网站搜索引擎的排名。

This includes things in our control, such as the content and things outside our control, including what websites are linking to our website and the content of competing website’s.

这包括我们控制范围内的内容，例如内容和我们控制范围之外的内容，包括哪些网站链接到我们的网站以及竞争对手网站的内容。

When it comes to search engine optimisation, we, therefore, need to take the search engines (Google, Bing, etc.) word on it that our site performance will affect our rankings.

因此，在进行搜索引擎优化时，我们需要在搜索引擎(Google，Bing等)上加上一个字眼，即我们的网站性能会影响我们的排名。

性能的竞争优势 (The competitive advantage of the performance)

Having demonstrated with data the advantage of the performance, we can see that there is a competitive advantage in a site being performant. It, therefore, is important that we ensure our site is more performant than our competitors.

通过数据展示了性能优势，我们可以看到，表现出色的网站具有竞争优势。 因此，重要的是要确保我们的网站比竞争对手更具性能。

To measure ourselves against our competitors, we can use Web Page Test to perform a visual comparison. To do this, we can visit https://www.webpagetest.org/video/ and enter the different competitors we want to benchmark against.

为了与竞争对手进行比较，我们可以使用网页测试进行视觉比较。 为此，我们可以访问https://www.webpagetest.org/video/并输入要作为基准的其他竞争对手。

Once the test has finished running, you can then export a video like this showing your site and your competitors. Below is an example video that I generated comparing Beamly against a few of its competitors.

测试完成后，您可以导出这样的视频，以显示您的网站和竞争对手。 以下是我制作的示例视频，将Beamly与其他竞争对手进行了比较。

演示地址

我的网站应该快多少？ (How much faster should my site be?)

Being able to benchmark against our competitors enables us to see how we perform against them. To have a competitive edge, we want to ensure our site loads faster than our competitors.

能够与竞争对手进行基准比较，使我们能够了解自己如何与竞争对手竞争。 为了具有竞争优势，我们希望确保我们的网站加载速度快于竞争对手。

Steven Seow identified the minimum we should be aiming to achieve in his book “Designing and Engineering Time” where he suggests a 20% rule. The 20% rule is as follows; in order for your users to perceive a task as faster than another task, the difference in time needs to be a minimum of 20%.

史蒂文·西欧(Steven Seow)在他的《设计与工程时间》(Designing and Engineering Time)一书中指出了我们应该达到的最低限度，其中提出20％的规则。 20％规则如下： 为了使您的用户感觉到一个任务比另一个任务更快，时间差至少应为20％。

Tim Kadlec summed up how this applied to the web in his post “Fast Enough” saying:

蒂姆·卡德莱克(Tim Kadlec)在他的文章“ 快速够用 ”中总结了如何将其应用于网络：

For example, say a competitors site loads in 5 seconds. 20% of 5 seconds is 1 second. So to be perceived as faster than them, you need to have your pages taking no longer than 4 seconds (5 seconds load time — 20% difference).

例如，假设竞争对手的网站在5秒钟内加载完毕。 5秒的20％是1秒。 因此，要使其速度比它们快，您需要使页面花费的时间不超过4秒(加载时间为5秒，相差20％)。

When comparing our competitors, we, therefore, want to look at the load time of our faster competitor and then set our own target as 20% less. It’s important to add a caveat to this, however; if your competitor’s site takes 10 seconds to load, to be perceived faster you only need to load your site in 8 seconds BUT 8 seconds is still a really slow site. In this case, you should aim to be significantly faster than your competitor.

因此，在比较竞争对手时，我们希望查看更快的竞争对手的负载时间，然后将自己的目标设置为减少20％。 但是，重要的是要添加警告。 如果您的竞争对手的网站需要10秒钟的加载时间，那么要使其更快地被感知，您只需要在8秒钟内加载您的网站即可，但8秒钟仍然是一个非常慢的网站。 在这种情况下，您应该力争比竞争对手更快。

综上所述 (In Summary)

The performance of our websites is critical to providing our users with great user experience. As people who understand the technical side of performance, it often falls on our shoulders to ensure performance is championed in our workplaces.

我们网站的性能对于为用户提供出色的用户体验至关重要。 作为了解绩效的技术方面的人们，它常常落在我们肩上，以确保在工作场所中提倡绩效。

To help them understand the impact of performance we need to standardise the language we are using so we are talking about the same thing and as part of this we need them to understand the three different types of performance that I highlighted in this post. Drawing particular attention to how important the perceived performance of your page is to your users.

为了帮助他们理解性能的影响，我们需要对所使用的语言进行标准化，因此我们在谈论同一件事，因此，我们需要他们了解我在本文中强调的三种不同类型的性能。 特别要注意页面的感知性能对用户的重要性。

Once your stakeholders understand the language we use to talk about performance, it is then essential to educate them on the benefits of having a performant site will have on the business.

一旦您的利益相关者理解了我们用来谈论绩效的语言，那么就必须对他们进行培训，让他们了解拥有一个绩效良好的网站将对企业产生的好处。

The best way we can educate them to these benefits is through the use of data. This can be achieved by using case studies, data on your competitors and any data you have on your own users.

我们教育他们获得这些好处的最好方法是使用数据。 这可以通过使用案例研究，竞争对手的数据以及您自己的用户的任何数据来实现。

翻译自: https://medium.com/javascript-in-plain-english/making-your-stakeholders-aware-of-the-impact-of-website-performance-b57c31911ed2

利益相关者软件工程