SEO技巧 - 网站速度优化实战

来源:风享互联SEO推广知识时间:2019-03-07

391次阅读

网站优化是我们做网站最重要要的一部分,而且要做的东西多,非常重视细节及流程。

从网站设计最初开始,就需要提前进行规划布局,没有好的思路,优化很难高效的开展。本文将以实际网站来做参考,手把手教你如何一步步做好网站优化。

 

这不是一篇基础网站优化文章,继续下文前,请确定已经做了如下基本优化:

1.图片压缩、合并

2.代码精简、混淆

3.减少 iframe 使用,及尽量不实用

4.避免图片 src 为空

5.减少HTTP 请求数

6.避免重定向

7.样式表放页头,脚本放底部

 

一、优化的意义

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

1.用户角度

网站优化能够让页面加载得更快,响应更加及时,极大提升用户体验。

 

2.服务商角度

优化会减少页面资源请求数,减小请求资源所占带宽大小,从而节省可观的带宽资源。

网站优化的目标是:减少网站加载时间,提高响应速度。

 

那么网站加载速度和用户体验又有着怎样的关系呢?我们来看下面这张图:

 SEO-网站加载速度与用户体验 

Google 和亚马逊的研究表明,Google页面加载的时间从 0.4 秒提升到 0.9 秒导致丢失了 20% 流量和广告收入,对于亚马逊,页面加载时间每增加 100ms 就意味着 1% 的销售额损失。可见,页面的加载速度对于用户有着至关重要的影响。

 

二、分析网站性能瓶颈

1.打包文件大小

 网站SEO打包文件大小

 2.打包文件目录

 网站SEO打包文件目录

.
├──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. 静态资源加载时间

网站SEO静态资源加载时间

 4. 资源瀑布:Waterfall

 SEO资源瀑布


TTFB 全称 Time To First Byte:是指网络请求被发起到从服务器接收到第一个字节的这段时间,它包含了 TCP 连接时间、发送 HTTP 请求时间和获得响应消息第一个字节的时间。

 Content Download:即下载内容所需要的时间。

 

页面一接口情况:

 网站SEO-页面一接口情况

 

 

页面二接口情况:

 网站SEO-页面二接口情况

 

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

 

 

5.分析工具

通过 webpack 打包,分析一下大文件构成。

网站SEO-分析工具 

 

6.YSlow 或者 PageSpeed

我们可以通过Google PageSpeed Insights API Extension 来对网站整体性能做一下评估,按照建议去做一些高效优化。

加载时间概况:

 网站SEO页面加载时间概况

影响网站加载因素:

 网站SEO影响网站加载因素

缓存策略问题:

 网站SEO-缓存策略问题

DOM 节点:

 

网站SEO - DOM节点


关键路径:

 

网站SEO关键路径

主线程情况:

 网站SEO主线程情况

 

三、通过策略解决问题

1.favicon.ico 404 问题;

2.去除调试工具代码:eruda,线上环境是不需要的;

3.图片合并或者多个 svg

建议使用 webpack-spritesmith,简单使用如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

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.大文件拆分

 网站SEO速度提升-大文件拆分

 

从上图分析得出,大文件主要包含:dist.jslottie.jslodash.jsloading.json 等文件。所以我们从这几个文件入手,逐个优化:

l  moment.js:配置 moment 忽略本地化,可减少 70kb

1

ignoreMomentLocale: true

l  dist.js:在给单页应用做按需加载优化时,一般采用以下原则:

 

l  把整个网站划分成一个个小功能,再按照每个功能的相关程度把它们分成几类。

l  把每一类合并为一个 Chunk,按需加载对应的 Chunk

l  对于用户首次打开你的网站时需要看到的画面所对应的功能,不要对它们做按需加载,而是放到执行入口所在的 Chunk 中,以降低用户能感知的网页加载时间。

l  对于个别依赖大量代码的功能点,例如依赖 Chart.js 去画图表、依赖 flv.js 去播放视频的功能点,可再对其进行按需加载。

l  lottie.js:分离减少 60kb

1

2

3

externals: {

lottie : 'react-lottie',

}

l  lodash.js

1

2

3

4

5

6

7

externals: {

lodash : {

commonjs: 'lodash',

amd: 'lodash',

root: '_' // indicates global variable

}

}

l  动态导入以及文件拆分

1

2

3

4

dynamicImport: {

webpackChunkName: true,

loadingComponent: './components/Loading/jartto.js',

}

 

按照上面我们一步步处理后,重新打包分析一下文件构成:

 网站SEO-页面文件构成

这里为什么没有继续拆分 dist.js ,是因为目前阶段没有好的方案,需要对代码做很多调整,所以暂且保留。相关信息可以在 Ant-Design Issuse Svg icons make bunlde size too large 中查看解决方案。

 

5.存放 CDN

loading.json,大小54kb

svg 替换 2 倍图

删除项目冗余图片

 

6.优化 TTFB

减少 DNS 查询

使用 CDN

提早 Flush

添加周期头


7.移除阻塞渲染的资源

l  css 预加载 preload

<link rel="preload">

l  异步加载第三方资源:

<script async src="https://cdn.jartto.wang/fastclick.js"><

没有 async 属性,script 将立即获取(下载)并执行,期间阻塞了浏览器的后续处理。如果有 async 属性,那么script 将被异步下载并执行,同时浏览器继续后续的处理。

 

8.确保文本在网页字体加载期间保持可见状态

利用 font-display 这项 CSS 功能,确保文本在网页字体加载期间始终对用户可见。

1

2

3

4

5

@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 服务器接受到解析请求时,就会向域名指定的 DNS 服务器发出解析请求从而获得解析记录;

在获得这个记录之后,记录会在 DNS 服务器中保存一段时间,这段时间内如果再接到这个域名的解析请求,DNS 服务器将不再向 DNS 服务器发出请求,而是直接返回刚才获得的记录;

而这个记录在 DNS 服务器上保留的时间,就是 TTL 值。

 

所以一般更新域名解析的步骤如下:

1.      先查看域名当前的 TTL 值。

2.      修改 TTL 值为可设定的最小值,建议为 60 秒。

3.      等待一天,保证各地的 DNS 服务器缓存都过期并更新了记录。

4.      设置修改 DNS 解析到新的记录,这个时候各地的 DNS 就能以最快的速度更新到新的记录。

5.      确认各地的 DNS 已经更新完成后,再 TTL 值设置成常用的值(: TTL=86400)

 

如下图,TTL 值设置的最佳实践,可供参考:

SEO优化之域名TTL值. 

10.避免 DOM 规模过大

网页包含的 DOM 节点最好少于 1500 个左右。理想状况是,树深度少于 32 个元素,且少于 60 个子/父元素。大型 DOM 可能会增加内存使用量、导致样式计算用时延长并产生高昂的布局重排费用。

 

11.最大限度地缩短关键请求深度

关键请求链 显示了以高优先级加载的资源。

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

SEO提高页面加载速度 

HTML 解析过程中遇到一个 script 标记时,它会暂停 DOM 构建,将控制权移交给 JavaScript 引擎,等JavaScript 引擎运行完毕,浏览器再从中断的地方恢复 DOM 构建。

也就是说,执行内联的 JavaScript 会阻塞页面的首次渲染。

 

在关键渲染路径中,我们通常要关注三个点:

1.      页面首次渲染需要的关键资源数量

2.      关键资源的大小

3.      关键渲染路径的往返次数(Roundtrip

我们的策略也非常简单,就是减少关键资源数量,降低资源大小,减少关键路径的往返次数。

 

优化关键渲染路径的常规步骤如下:

a. 对关键路径进行分析和特性描述:资源数、字节数、长度。

b. 最大限度减少关键资源的数量:删除它们,延迟它们的下载,将它们标记为异步等。

c. 优化关键字节数以缩短下载时间(往返次数)。

d. 优化其余关键资源的加载顺序:您需要尽早下载所有关键资源,以缩短关键路径长度。

 

更多详情,请参考前端性能优化—关键渲染路径。

 

12.最大限度地减少主线程工作

考虑减少为解析、编译和执行 JS 而花费的时间。我们可以提供较小的 JS 负载来实现此目标。

 

13.最优配置 nginx

a. 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;

 

 

b. 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

1.网站评分

SEO网站评分差

 2.加载概况:

网站SEO页面加载概况差

当然,优化还可以做更多,我们尽量让网站的评分接近 100 分,譬如:

 

1.网站评分

SEO网站评分优

 

2.加载概况:

SEO网站加载优秀

五、总结

我们整体把网站优化下来,做了不少代码改动,也达到了不错的效果。但是有几点还是需要注意:

1.尽可能减少白屏出现时间

骨架图解决 webview 加载页面过长的白屏过程。

 

2.关注整站性能,如 TTFB

服务端接口也需要同步优化,而不要仅仅依赖前端单方面优化。

3.按照使用情况加载优先使用的资源

l  css 预加载

l  font 预加载

l  js 预加载

l  图片预加载

 

4.请高效利用 DNS CDN

l  增加缓存时间

l  DNS 预解析

 

网站优化从来不是一蹴而就,需要不断的去优化细节,不断的摸索尝试。从我的角度来看,网站优化更像是在网站性能和加载速度之间找到一个平衡点。譬如,文中我们为了优化文件打包大小,进行了大文件拆分。随之而来的问题就是拆分后的文件可能还会对某些文件有关联,那么就影响到了关键渲染路径。

 

所以,优化不存在什么通天捷径,需要不断的去尝试,去找到这个最佳优化点,这才是根本。


希望这篇文章在您SEO的学习道路上能起到帮助,如需更多网站SEO解决方案请联系风享互联咨询了解。

0 人参与回答

风享SEO管理系统注册申请

  • 公司名称
  • 姓名
  • 手机号
  • 注册邮箱
  • 推荐人

    无推荐人的话写无

  • 验证码
    Alternate Text

*为了准确获取解决方案,请注意填写有效信息!