手把手教你如何一步步做好网站优化(组图)
网站优化是后端开发的重中之重，但优化细节非常繁琐。没有好的想法，很难有效地进行优化。本文将以实际网站为参考，教你如何一步一步地进行网站优化
这不是一篇基本的网站优化文章。继续之前，请确保您已完成以下基本优化：
图像压缩、合并代码简化、iframe使用减少混乱、防止图像SRC为空、减少HTTP请求数、防止重定向、样式表将页眉、脚本放在顶部。。。优化的意义
我们可以从两个角度来看待这个问题：
用户角度
网站优化可以使页面加载速度更快，响应更及时，大大提高用户体验
服务提供者视角
优化将减少页面资源请求的数量和请求资源占用的带宽网站优化，从而节省可观的带宽资源
网站优化的目标是减少网站加载时间，提高响应速度
那么，网站加载率和用户体验之间有什么关系呢？让我们看下图：
谷歌和亚马逊的研究表明，谷歌页面从0.4秒数增加到0.9秒导致了20%的流量和广告收入的损失。对于亚马逊来说，页面加载时间每减少100毫秒，就意味着销售损失1%
可以看出，页面加载速率对用户有着至关重要的影响
良好的交互效果可能如下所示：
分析网站性能困境
1.package文件大小
2.package文件目录
. ├── 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
注意：不要在生产环境中打开sourcemap
3.静态资源加载时间
4.resource falls瀑布
Ttfb全名到第一个字节的时间：指从网络请求启动到从服务器接收到第一个字节的时间段。它包括TCP连接时间、发送HTTP请求的时间以及获取响应消息的第一个字节的时间
内容下载：下载内容所需的时间
第1页的插座条件：
第2页的插座条件：
用户下载内容所需的时间受到服务器资源、资源大小和用户网络速率的限制。因此，我们暂时不讨论这方面的问题
5.分析工具
通过网页包装，分析大文件的组成
6.YSlow或页面速度
我们可以通过Google pagespeed insights API扩展来评估网站的整体性能，并根据建议进行一些有效的优化
加载时间概述：
影响网站加载的因素：
缓存策略问题：
DOM节点：
关键路径：
主线程状态：
通过策略解决问题
1、favicon.ico404问题
2、删除调试工具代码eruda，不需要在线环境
3、图片合并或多个SVG
建议使用webpack spritesmith。简单用法如下：
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、lottie.js、lodash.js、load.json等文件。让我们从这些文件开始，逐一优化它们：
ignoreMomentLocale: true
在逐步处理之后，我们重新打包并分析文件组成：
dist.js在这里没有进一步拆分的原因是，在这个阶段没有好的方案，需要对代码进行很多调整，所以它是保留的。有关相关信息，您可以在ant design issue中查看解决方案SVG图标使捆绑包大小过大
5、store CDN
6、ttfb
7、删除阻止渲染的资源
8、确保网页字体加载期间文本保持可见
使用字体显示的CSS功能，确保用户在加载网页字体时始终可以看到文本
@font-face {
font-family: 'Arvo';
font-display: auto;
src:local('Arvo'),url(https://fonts.jartto.wang/fonts/temp.woff2)format('woff2');
}
9、使用高效缓存策略提供静态资源
延长缓存时间可以提高网页访问率
DNS TTL（生存时间）简单地说：它表示DNS服务器上域名解析记录的缓存时间
此记录在DNS服务器上的保留时间为TTL值
因此，更新域名解析的步骤如下：
下图显示了TTL值设置的最佳实践，以供参考：
稍后，我们将详细介绍DNS相关内容。欢迎您注意儿童鞋
10、避免过大的DOM大小
11、最小化临界深度
关键请求链显示加载了高优先级的资源
我们可以通过缩短链长、减少资源的下载文件大小或延迟不必要资源的下载来提高网页加载速度
当HTML解析过程中遇到脚本标记时，它将暂停DOM构造并将控制权转移到JavaScript引擎。JavaScript引擎运行后，浏览器将从中断的位置恢复DOM构造
也就是说，执行内联JavaScript会阻止页面的第一次呈现
在关键渲染路径中，我们通常应关注三点：
我们的策略也非常简单，即减少关键资源的数量，减少资源的大小，并减少关键路径的往返次数
优化关键渲染路径的一般步骤如下所示：
分析关键路径并描述其特征：资源数量、字节数量和长度。最小化关键资源的数量：删除它们、延迟它们的下载、将它们标记为异步等。优化关键字节的数量并减少下载时间（往返）。优化其他关键资源的加载顺序：您需要尽快下载所有关键资源，以减少关键路径的宽度
有关详细信息，请参阅后端性能优化-关键渲染路径
12、最小化主线程工作
考虑减少解析、编译和执行JS所花费的时间。我们可以提供更小的JS负载来实现这一目标
13、最佳配置nginx
Gzip配置
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分网站优化，例如：
网站评级：
加载概述：
总结
我们从头开始对其进行了优化，对代码进行了大量更改，并取得了良好的效果。但是，有几点需要注意：
1、尽量减少碰撞时间
框架图解决了WebView加载太长页面的崩溃过程
2、关注全站性能，如ttfb
服务器套接字也需要同步优化，而不是仅仅依赖后端
3、根据使用情况加载优先级资源
4、与DNS和CDN一起高效
网站优化从来不是一朝一夕就能实现的。我们需要不断优化细节，不断探索和尝试。在我看来，优化更像是在网站性能和加载速率之间找到平衡。例如，为了优化文件打包大小，我们拆分了大文件。由此产生的问题是，分割文件可能依赖于单个文件，这将影响关键点渲染路径
因此，优化中没有技巧和窍门。不断地寻找最佳的优化点，这是最基本的
优搜云-快速排名优化系统，支持百度、360、搜狗、神马四大搜索引擎做关键词优化推广。拥有全新百度优化算法，新站降权站皆可做单词、整站优化，是能免费试词的百度seo推广公司。
