如何让你的Web App提速并提高网页性能如果您花一些时间优化Web应用程序以提高速度，您的用户将感谢您，您的转化率将提

原文地址： stxnext.com/blog/2019/0…

额外的一秒延迟对你的网站可能会产生十分重要的影响，以下有一些步骤用来优化你的网站

我会做这些事儿

介绍一些网站性能的基础
列出提速的基本好处
推荐一些性能指标

以下为内容列表

为什么要让web App提速？
网站性能到底是什么？
如何提速？
下一步:PWAs
最后的一些想法

为啥要提速？

如果您花一些时间优化Web应用程序以提高速度，您的用户将感谢您，您的转化率将提高，并且您的Google SERP位置很有可能会受益。

在一项调查中，有79％的受访者表示，如果他们对网站的性能不满意，则不太可能从该网站购买商品。
即使是一毫秒长的延迟，也会对您增加转化和保留重复业务的能力产生重大影响。以下是一些真实的示例（摘自WPO统计信息），这些示例说明Web应用程序优化如何带来更多的金钱收益：

Trainline将整个渠道的延迟减少了0.3秒，客户每年额外花费了800万英镑（约合1150万美元）
加载时间每优化1秒钟，沃尔玛的转换率就会增加2％，而每100毫秒的改善也将使收入增加1％。
AliExpress将加载时间减少了36％，新客户的订单增加了10.5％，转换率增加了27％。

究竟什么是网页性能

要实施正确的措施，您需要做的第一件事就是确定Web性能的哪些方面需要改进。
介绍俩工具：

lighthouse
webpagetest
请记住，load并不是可以用一个指标捕获的某个时刻。

指标：

Time to first byte (TTFB)

当有人访问您的网站时，他们的浏览器会从服务器请求某些信息，例如页面的URL。到达第一字节的时间（TTFB）是一个度量标准，用于捕获您的浏览器接收所请求信息的第一个字节所花费的时间。
虽然平均TTFB为100-500毫秒，但Google建议您将服务器响应时间最多减少200毫秒。

Start render (also known as first paint) (FP)

“Start render”表示网站布局的前几个元素（例如背景）开始出现在之前的空白屏幕上需要多长时间。
它为用户提供了有关该页面正在打开的清晰视觉反馈，他们可以期望其余内容很快出现。
在所有渲染阻止脚本和样式均已下载，解析和执行之后，就会发生这种情况。

建议的开始渲染时间不应超过1-2秒。

First contentful paint (FCP)

在此阶段，用户开始在网站上看到内容（图像或文本），他们会增加页面被填充满的期望。
如果您在此阶段遇到任何延迟，通常意味着您应该优化字体交付。

Speed index 速度指数

速度指标描述页面的首屏内容显示在用户屏幕上所需的平均时间。
这不是特定的时间点指标，而是页面指标的汇总，可以计算页面在整个加载过程中的“完成度”。
速度指标取决于页面的构建方式。如果您有大量的首屏内容，那么得分可能会很差。

Time to interactive (TTI)

此指标衡量您的网站完全可交互时间所需的时间。
简而言之，这是用户可以使用按钮和输入框并期望它们起作用的时候。
此状态有几个要求。最重要的是，事件循环现在应该少于50毫秒。

Fully loaded

最后，当所有初始资产（包括由脚本和样式触发的资产）下载完成时，处于满载状态。

如何提速

先确定问题，二八原则
确定问题区域后，最好在开始优化之前对它们进行优先级排序。请记住，您不必立即尝试解决所有弱点。
一次实施太多更改，您可能会不知道到底哪些是有用的，哪些是没必要的。
首先要解决最紧迫的问题，然后逐步处理下面列出的清单，请记住这绝不是所有的优化方案。

DNS queries optimization

DNS prefetch is mostly useful for vendor scripts and CDNs. Overall, this can reduce the load time by as much as 5%.

SSL negotiation

这个版本有很多提供。最值得注意的是，其简化的握手将使协商时间至少降低三分之一。即使浏览器支持尚不普遍，它仍将完全回到TLS 1.2。

IPv6

启用IPv6可以为您的产品带来惊人的速度。 Facebook的研究表明，仅IPv6的加载时间增加了10％至15％。

HTTP2 Push

向您的Web根目录添加一些标头就可以享受其中的差别，因为您的服务器更了解需要使用什么来呈现页面。
好吧，这实际上并不是那么容易。
请记住，您可能会遇到一些问题，主要与缓存这些资源和优先级有关。
请谨慎使用此技巧，因为即使用户已经获取了一次资源，每次页面加载都会增加额外的开销。
使用PWA缓存将解决大多数上述开销问题。
我们建议您至少发送关键CSS（除非您决定在HTML中内联，这也不是坏主意）和字体（尤其是在关键CSS中使用时）。
您仍然可以从HTML预加载所有其他资源。

Brotli 压缩

该压缩算法自2015年以来一直存在，但采用率却令人惊讶地低。
与gzip相比，它可以快速解码并生成较小的文件。但是，取决于压缩级别，编码可能比仅发送未压缩的文件花费更长的时间。
专家提示：预压缩资产并配置服务器以发送资产，而不使用原始版本。如果由于某种原因无法使用Brotli，请也预先压缩gzip。

Data retrieved from: engineering.linkedin.com/blog/2017/0…

HTTP 3

HTTP3以前被称为“ HTTP over QUIC”（QUIC是使用UDP的新网络传输协议），已被正式接受为HTTP2的后续版本。
该项目尚未完成，但有望成为令人兴奋的发展。请确保您保持关注状态，以便在它出来时可以利用它。

Critical CSS 关键样式

这个巧妙的技巧可以显着改变用户查看您网页的方式，但是除非事先进行计划，否则很难引入。
有两种解决方法：

骨架屏

提供一个“骨架屏” —一个简单的DOM，它介绍布局和基本样式，然后将其替换为实际内容；规划样式，以使浏览器将以非常有限的样式呈现令人满意的内容。
这将有助于为用户创建一个更具吸引力的加载过程。

使用库

对于现有应用程序，您可以使用一个库，该库将尝试提取应用于页面首屏内容的所有规则。

plan your styling in such a way that the browser will render a satisfactory amount of content with a very limited amount of styles. 然后浏览结果，看看哪些需要进一步的手动增强。

Font delivery optimization (个人理解，一般使用浏览器自带字体就没这个问题)

除非请求的字体已准备就绪，否则CSS不会允许浏览器显示您的文本。即使您可以在此处使用HTTP 请求，但通常还不够。
font-display属性可以解决此问题，方法是先使用系统字体显示文本，然后在可能的情况下进行交换。
但请注意：替换字体的大小可能会有所不同，并使布局闪烁。

Parsing time

记住该指标并尝试去除尽可能多的库代码是值得的。

例如，低端设备解析一兆字节的JavaScript可能花费几秒钟，甚至不执行一行代码。一些浏览器较旧，仅支持JavaScript ES5。不要让他们放慢你的速度。
使用脚本类型模块，我们只能将脚本提供给支持ES6模块的浏览器。对于所有其他浏览器，我们可以使用nomodule属性。

充分利用这一点，并创建两个不同的构建目标：一个用于带有polyfils的ES5，另一个用于ES6。

对于新版本的浏览器，这将大大减轻您的软件包重量。最重要的一点是在脚本中添加了defer或async属性，因此可以加载它们而不会阻塞主线程。

<script type="module" src="/main.js"></script>
<script type="text/javascript" src="/main.es5.js" nomodule></script>

How to optimize images in web apps

网站上的图片平均占加载大小的60％。您可以通过一些技巧来减少它。

1. Stop using img tags

    <picture>
        <source srcset="/media/examples/surfer-240-200.jpg" media="(min-width: 800px)">
        <img src="/media/examples/painted-hand-298-332.jpg" />
    </picture>

搜了一把兼容性，好像没有 UIwebview,WKbewview的兼容性测量，应该还行，需要测试。我们的页面兼容性要求到android 4.4，看情况可能不能用