手把手好的交互效果可能是这样的：分析网站性能瓶颈-未来可期SEO

为什么你应该阅读它：经验教训，从理论到实践。

以往情况总结

网站优化 是前端开发的重中之重，但优化细节非常复杂。没有好的创意，优化很难高效进行。

本文将以实际网站为参考，一步一步教你怎么做网站优化。

这不是一篇基本的网站优化 文章。在继续之前，请确保已进行以下基本优化：

图片压缩、合并代码精简、减少混淆、避免图片src为空、减少HTTP请求数、避免重定向、样式表、、、……优化的意义

我们可以从两个角度来看这个问题：

用户视角

网站优化可以让页面加载更快，响应更及时，大大提升用户体验。

服务提供商的观点

优化会减少页面资源请求的数量和被请求资源占用的带宽，从而节省可观的带宽资源。

网站优化 的目标是减少网站加载时间并提高响应能力。

那么网站加载速度和用户体验有什么关系呢？让我们看看下面的图片：

而亚马逊的研究表明，将页面加载时间从 0.4 秒增加到 0.9 秒会导致 20% 的流量和广告收入损失，对于亚马逊来说，页面加载时间每增加 100ms 意味着销售额的 1%丢失的。

可见页面的加载速度对用户有着至关重要的影响。

一个好的交互效果可能是这样的：

分析网站性能瓶颈1.打包文件大小

2. 包文件目录

. ├── favicon.ico ├── index.html ├── manifest.json ├── static │ ├── DIN-Medium.1bbe3460.otf │ ├── DIN-Regular.799221d7.otf │ └── logo.c57d38d0.png ├── umi.css ├── umi.css.map ├── umi.js └── umi.js.map

注意：不要打开生产环境。静态资源加载时间

4. 资源瀑布

TTFB的全称是Time To First Byte：是指从发起网络请求到从服务器接收到第一个字节的时间。它包括 TCP 连接时间、发送 HTTP 请求的时间以及获取响应消息第一个字节的时间。.

：下载内容所需的时间。

第1页界面：

第2页界面情况：

用户下载内容所需的时间受服务器资源、资源大小和用户网络速度的限制。因此，我们暂时不讨论这方面的内容。

5. 分析工具

通过打包，分析大文件的组成。

6.YSlow 或

我们可以通过API对网站的整体性能进行评估，并根据建议做一些高效的优化。

加载时间概览：

影响网站加载的因素：

缓存策略问题：

DOM 节点：

关键路径：

主线程情况：

通过策略解决问题1. .ico 404 问题✓2. 去掉调试工具代码eruda网站优化，不需要在线环境✓3. 图像合并或多个svg ✓

推荐使用-，简单使用如下：

plugins: [ new SpritesmithPlugin({ src: { cwd: path.resolve(__dirname, 'src/ico'), glob: '*.png' }, target: { image: path.resolve(__dirname, 'src/spritesmith-generated/jartto.png'), css: path.resolve(__dirname, 'src/spritesmith-generated/jartto.styl') }, apiOptions: {


        cssImageRef: "~jartto.png"
    }
  })
]

4. 大文件拆分 ✓

从以上分析网站优化，大文件主要有：dist.js、.js、.js、.json等文件。所以我们从这些文件入手，一一优化：

ignoreMomentLocale: true

我们如上一步一步处理完之后，重新打包分析一下文件构成：

这里之所以没有继续拆分dist.js，是因为现阶段没有好的解决方案，代码需要做很多调整，所以暂时保留。相关信息可以参考 Ant-Svg 图标尺寸过大的解决方法。

5. 存储 CDN6. 优化 TTFB7. 移除渲染阻塞资源8. 确保文本在 Web 字体加载期间保持可见

使用字体 – 此 CSS 功能可确保在 Web 字体加载期间文本始终对用户可见。

@font-face { font-family: 'Arvo'; font-display: auto; src:local('Arvo'),url(https://fonts.jartto.wang/fonts/temp.woff2)format('woff2'); }

9.使用高效的缓存策略服务静态资源，延长缓存周期，加快网页重访速度。

DNS TTL（Time-To-Live）简单地说：它代表了一个域名解析记录在DNS服务器上的缓存时间。

这条记录在 DNS 服务器上保存的时间就是 TTL 值。

因此，更新域名解析的一般步骤如下：

如下图所示，设置TTL值的最佳实践供参考：

稍后我们会详细介绍DNS相关的内容，欢迎大家关注。10. 避免 DOM 大小 11. 最小化关键请求深度关键请求链显示以高优先级加载的资源。

我们可以通过缩短链长、减小资源的下载文件大小或延迟下载不必要的资源来提高网页的加载速度。

当 HTML 解析遇到一个标签时，它会暂停 DOM 构建，将控制权转移给引擎，当引擎运行完毕时，浏览器会从中断的地方恢复 DOM 构建。

也就是说，内联会阻止页面的第一次渲染。

在关键渲染路径中，我们通常关注三点：

我们的策略也很简单，就是减少关键资源的数量，减少资源的大小，减少关键路径上的往返次数。

优化关键渲染路径的一般步骤如下：

分析和表征关键路径：资源数、字节数、长度。最小化关键资源的数量：删除它们、延迟它们的下载、将它们标记为异步等。优化关键字节以减少下载时间（往返）。优化剩余关键资源的加载顺序：需要尽早下载所有关键资源，以缩短关键路径长度。

更多细节请参考前端性能优化-关键渲染路径。

12. 最小化主线程工作

考虑减少解析、编译和执行 JS 所花费的时间。我们可以提供一个小的 JS 有效负载来实现这一点。

13.优化配置配置

gzip on; gzip_min_length 1k; gzip_buffers 4 8k; gzip_http_version 1.1; gzip_comp_level 4; gzip_types text/plain text/css application/json image/png image/x-icon application/javascript application/x-javascript text/javascript text/xml application/xml application/xml+rss text/cache-manifest application/octet-stream; gzip_vary on;

nginx 启用缓存

如果你对浏览器缓存还不是很清楚，欢迎聊聊浏览器缓存机制。

location ~.*\.(html|htm|js|css|gif|jpg|jpeg|png|bmp|swf|ico|json|otf)$ { root /var/www/jartto_web/; index index.html; expires 1d; }

Nginx 可以非常高效地直接处理静态内容。当静态文件和 Nginx 在同一主机上时，此功能特别有用。效果如何？优化前：网站评分27，第一次内容绘制6.9秒

网站评分：

负载配置文件：

优化后：网站评分70，第一次内容绘制1.6秒

网站评分：

负载配置文件：

当然，优化可以做的更多，我们尽量让网站得分接近100分，例如：

网站评分：

负载配置文件：