小程序前端性能测试

If your website takes longer than 3 seconds to load, you could already be losing nearly half of your visitors.

如果您的网站加载时间超过3秒，则可能已经失去了将近一半的访问者。

Yes this is a fact, proven by several research studies. Long loading times can have a devastating impact on your application’s conversion rates. On the other hand, optimising page load time leads to noticeable improvements in customer experience, conversion rates, SEO and ultimately, your product’s success.

是的，这是事实，已通过多项研究证明。 较长的加载时间可能会对应用程序的转换率产生毁灭性的影响。 另一方面，优化页面加载时间可以显着改善客户体验，转换率，SEO，并最终提高产品的成功率 。

So let’s say that you have recently built a website or a frontend application using a modern JS framework (Angular, React, VueJS etc.). How can we make sure that performance is not going to hold it back from success?

假设您最近使用现代JS框架(Angular，React，VueJS等)构建了网站或前端应用程序。 我们如何确保绩效不会阻碍成功？

First things first. We have to somehow gather some data. When it comes to measuring a frontend application’s performance, the tools I trust the most are:

首先是第一件事。 我们必须以某种方式收集一些数据 。 在衡量前端应用程序的性能时，我最信任的工具是：

• Google chrome’s Lighthouse

  谷歌浏览器的灯塔

• Speedcurve

  速度曲线

Both tools can help you keep track of all the major performance KPIs (Pagespeed Index, Time to Interactive, First Contentful Paint, etc.).

两种工具都可以帮助您跟踪所有主要的性能KPI(Pagespeed Index，交互时间，First Contentful Paint等)。

Lighthouse is included in your Chrome’s dev-tools, and by analysing your website/web-app, it can give you some really useful hints on how to boost it up.

Chrome的开发工具中包含Lighthouse ，通过分析您的网站/网络应用，它可以为您提供一些非常有用的提示，以助您提升它。

With Speedcurve you can have all these KPIs, plus the ability to monitor them across time.

使用Speedcurve，您可以拥有所有这些KPI，并且能够跨时间监控它们。

So now that we are able to measure our success, let’s move on with optimising the parts of our website that play the biggest role.

因此，既然我们已经能够衡量我们的成功，那么让我们继续优化网站中发挥最大作用的部分。

图片 (Images)

Images are a key part of every website. On average, images make up for more than 60% of data that are loaded on web pages. Being such a critical component of almost all websites, image optimisation is, in my opinion, the most important, and perhaps the lowest hanging fruit.

图片是每个网站的关键部分。 平均而言，图像占网页上加载的数据的60％以上。 在几乎所有网站中，图像优化都是至关重要的组成部分，在我看来，图像优化是最重要的，也许是效果最差的结果。

1.调整图像大小并使其响应。 (1. Resize your images and make them responsive.)

The most important thing to check is that you are not using a bigger resolution than the one you really need. So you have to resize your images to fit exactly the requirements of your layout.

要检查的最重要的事情是您使用的分辨率不比实际需要的分辨率高。 因此，您必须调整图像大小以完全适合您的布局要求。

Furthermore, you have to make sure that your images are as responsive as your layout is. There is a great tool that I have been using lately, which can help you generate all the different versions of the images that you might need and also generate the HTML5 code that can utilise them. It’s called Responsive Image Breakpoints Generator. I usually prefer generating 8–10 different images.

此外，您必须确保图像与布局一样敏感 。 我最近一直在使用一个很棒的工具，它可以帮助您生成可能需要的所有不同版本的图像，并生成可以利用它们HTML5代码。 它称为响应图像断点生成器 。 我通常更喜欢生成8–10个不同的图像。

Of course you can use the generated HTML5 code in any frontend app or website. In addition, if you are into gulp, you could automate this process with the gulp-responsive plugin.

当然，您可以在任何前端应用程序或网站中使用生成HTML5代码。 另外，如果您喜欢gulp，则可以使用gulp响应插件自动执行此过程。

2.确保它们是延迟加载的。 (2. Make sure they are lazy loaded.)

Lazy loading basically means that we defer the loading of images that are not required immediately. Typically, any image that is not visible to the users on their current viewport, can be loaded at a later point in time, when the image enters or is about to enter the viewport.

延迟加载基本上意味着我们推迟了不需要立即加载的图像的加载。 通常，当用户进入或即将进入视口时，可以在以后的某个时间点加载用户在其当前视口中不可见的任何图像。

No matter which framework you are using, you can find a plugin that can lazy-load the images for you (e.g. v-lazy-image in VueJS), however you could build your own implementation too. Just make sure that you are utilising the modern way to detect when an element enters or exits the browser’s viewport, the IntersesectionObserver API.

无论使用哪种框架，都可以找到一个可以为您延迟加载图像的插件(例如VueJS中的v-lazy-image )，但是您也可以构建自己的实现。 只要确保您正在利用现代化的方法来检测元素何时进入或退出浏览器的视口，即IntersesectionObserver API 。

奖励：使用CDN进行图像传递 (Bonus: Use a CDN for image delivery)

If you have already optimised the size and the number of images that your website loads, and especially if it’s going to be available globally, you could also use a content delivery network (CDN) to serve them.

如果您已经优化了网站加载的图像的大小和数量，尤其是要使其在全球范围内可用，则还可以使用内容分发网络 (CDN)为它们提供服务。

In a few words, a CDN caches your images on its globally distributed network of servers. So if a user from Australia requests an image from your website, instead of retrieving that image from your server in Europe, the CDN is going to deliver it from another one, closer to that user in Australia. This cuts down the round trip time needed to load the image.

简而言之，CDN将您的映像缓存在其全球分布的服务器网络上。 因此，如果来自澳大利亚的用户从您的网站上请求图像，而不是从欧洲的服务器中检索该图像，则CDN将从另一个更接近澳大利亚用户的位置传递该图像。 这样可以减少加载图像所需的往返时间。

CSS，JS和HTML (CSS, JS and HTML)

All modern frameworks optimise your code during the production build time (code-splitting, tree-shaking, minification, etc.). What you can do on top of that?

所有现代框架在生产构建期间都会优化您的代码(代码拆分，摇树，缩小等)。 您还可以做什么？

1.优化主HTML文档 (1. Optimise the main HTML document)

HTML is the backbone of nearly every web app. When it comes to referencing resources within your HTML document there are a few best practices you should follow. It is recommended to:

HTML是几乎每个Web应用程序的骨干。 在HTML文档中引用资源时，应遵循一些最佳实践。 建议：

• Place CSS references at the top of your HTML document’s header in order to ensure progressive rendering.将CSS引用放在HTML文档标题的顶部，以确保逐步呈现。

• Place JavaScript attributes at the bottom of your HTML body and prefer async script loading. This will prevent any <script> tags from blocking the HTML rendering process.

  将JavaScript属性放在HTML正文的底部，并喜欢异步脚本加载 。 这将防止任何<scri pt>标签阻止HTML呈现过程。

2.确保只加载所需的内容 (2. Make sure you only load what you need)

Angular, React, and VueJS all provide you with lazy-loading features. You only have to split your code properly, according to your own needs and load only the modules that you need, as soon as you really need them. For instance, if you have an e-commerce app, you have to make sure that the Basket module or the Payments module are not loaded when the user is in the home page.

Angular，React和VueJS都为您提供了延迟加载功能。 您只需要根据自己的需要适当地拆分代码，并在真正需要它们时立即加载所需的模块。 例如，如果您有一个电子商务应用程序，则必须确保在用户进入主页时未加载购物篮模块或“付款”模块。

压缩与缓存 (Compression & Caching)

In general, for all the assets that are essential to your frontend (images & code) you should apply compression and cache them properly.

通常，对于前端必不可少的所有资产(图像和代码)，您应该应用压缩并适当地缓存它们。

File compression will make your app’s assets a bit lighter and decrease the round trip time needed to serve them. One of the most commonly used file compression methods is Gzip, an excellent method for shrinking code chunks, documents, images and audio files.

文件压缩将使您的应用程序资产更轻，并减少提供这些资源所需的往返时间。 最常见的之一 使用的文件压缩方法是Gzip ，这是一种用于缩小代码块，文档，图像和音频文件的出色方法。

Brotli is another file compression algorithm, and it’s growing in popularity. This open source algorithm is regularly updated by software engineers from Google and other organisations. It has proven itself to compress files at a much better ratio than other existing methods.

Brotli是另一种文件压缩算法，并且越来越流行。 这种开源算法由Google和其他组织的软件工程师定期更新。 它已经证明自己可以以比其他现有方法更好的比率压缩文件。

You can enable your preferred compression method on nginx, apache or whichever server you are using, by modifying their configuration files (enabling brotli on nginx or enabling brotli on apache).

您可以通过修改配置文件( 在nginx上 启用brotli或在apache 上 启用brotli )在nginx，apache或正在使用的任何服务器上启用首选压缩方法。

When it comes to caching, the most commonly used caching technique (also recommended by Lighthouse) is called Leverage Browser Caching. Again, you can enable it by modifying your server’s configuration files (enabling Leverage Browser Caching).

当涉及到缓存时，最常用的缓存技术(也被Lighthouse建议)被称为Leverage Browser Caching 。 同样，您可以通过修改服务器的配置文件( 启用“利用浏览器缓存” )来启用它。

摘要 (Summary)

When it comes to websites and frontend applications, performance is a huge topic and we should take it seriously.

对于网站和前端应用程序，性能是一个巨大的话题，我们应该认真对待。

I hope this article helped you understand and enabled you to tackle some of the most important things that we need to take care of when we want to improve an application’s performance.

我希望本文能帮助您理解并帮助您解决一些我们想提高应用程序性能时需要注意的最重要的事情。

For a detailed checklist, make sure that you check out the Front-End-Performance-Checklist.

有关详细的清单，请确保签出了“ 前端性能清单” 。

Cheers! ?

干杯! ？

翻译自: https://www.freecodecamp.org/news/how-to-boost-your-front-end-applications-performance-72ce872b08c/

小程序前端性能测试