一个网站的加载速度直接影响到了客户的转化率,加载速度最佳时间为3秒左右,如果超过7秒会直接导致用户放弃访问。提高网站加载速度的方法有很多种,包括减少请求数、删除多余代码、减少图片等资源的大小等等。

 优化方法

一 、减少请求数

1.减少图片请求数量

合并图标是减少网络请求的常见的优化手段,网页中的小图标特征是体积小、数量多,而浏览器同时发起的并行请求数量又是有限制的,所以这些小图标会严重的影响网页的加载速度。

解决方法:使用雪碧图,把所有的小图标拼成一张图片,然后利用CSS的背景定位到指定区域;

使用雪碧图

使用iconfont图标,现在网上有很多的字体图标,比如font awesome、阿里巴巴iconfont等,优点就是可以随意放大缩小,不会失真;

使用base64编码;

使用webp优化;

对图片使用懒加载,原理是设置先不设置img的src值,而是设置img的data-src属性为真实图片地址,等到窗口滚动到图片的位置时,把data-src的属性值赋给src,从而实现懒加载;

使用CDN网络,CDN网络的好处有很多,按照离请求者最近地区的服务器返回数据,可以减少很多的加载时间。

2.减少css、js的请求数、html文件大小

在项目上线后,可以把js、css文件合并到一个或者两三个文件里,并且对js、css文件进行压缩,可有效减少请求资源。

解决方法:利用第三方在线工具压缩js、css文件;

使用webpack打包项目;

使用webpack打包项目

开启gzip压缩,会减少大部分的文本资源大小。

尽可能的合并类(class)样式,合并一些诸如padding-left、padding-right等为padding: 0 10px 0 10px。删除一些不经常用的兼容代码。

二、减少dom元素

删除首页多余代码,保证html代码清晰简洁

解决方法:尽量减少首页的资源加载,不建议使用单页的形式来制作网页,把所有的资源全都集合在首页,如果图片少的话还好,否则将是一个噩梦;

页面如果图片很多建议使用cdn加速,但是有一个弊端就是,如果访问者使用的是手机,网速不是很理想的情况下同样也是一个噩梦;

不要放视频!不要放视频!不要放视频!放了视频最好不要自动播放,音频同样也是如此,不建议放太多的gif动图,影响加载速度不说,还会导致配置差的移动设备卡顿;

首页包括其他页面的大小最好保持在10M以下,太大会影响网络加载速度。

减少页面的大小

三、减少javascript操作dom元素

一个网站如果有太多的javascript脚本,对浏览器对用户都是一种伤害:浏览器执行慢,用户等待时间长...

解决方法:如非必要请减少dom操作,你的网站在PC端看起来似乎没问题,但是在移动设备上打开可能就是另一种效果了;

项目上线后最好屏蔽console.log代码,使用console.log会降低渲染速度,虽然可能忽略不计;

尽可能的减少一些窗口滚动等一些交互事件;

js脚本文件尽可能的放到页面底部;

尽量避免使用document.write方法来添加脚本。

四、优化域名

优化域名乍一听起来有点奇怪,域名怎么优化?

由于浏览器对于单个域名(也就是同一个域名)下的并发有最大连接限制,一般为4到6个,如果同时只有2个并发连接数数量,那网页打开的时候只能依赖于这2条线程,前面如果有打开慢的内容,就会直接影响到后面的内容打开。但是如果同时有更多的并发连接数,这样就会大大的提高网页加载速度。但是并发连接数越多并非越好。

五、优化DNS缓存

当你在浏览器地址栏输入一个域名之后,浏览器首先需要将其解析成IP,然后再向服务器发起访问请求,这个解析的过程一般叫DNS解析。DNS解析是非常耗时的,特别是当你使用的是一些公共DNS解析或者比较差的DNS服务的时候,解析一个域名需要2-3s时间,甚至偶尔解析错误,导致你的网站根本访问不了。

DNS解析速度慢通常发生在第一次打开网站的时候,第一次打开网站后,浏览器会对DNS进行缓存,这时候打开速度就会变快。

解决方法:更换更好的DNS服务商,免费的不行就用收费的;

如果网站不需要经常改动IP,建议把TTL时间设置成最大,这样可以让DNS缓存的时间更长。

总结:

要想网站加载速度快,肯定是需要优化很多内容,花费很多的精力,希望这篇文章对广大的开发者提供很大的作用。