网页加载慢到底如何提速?
本文摘要: 针对现在的网民来说,时间就是金钱,你的网页慢 抱歉,我换一个,网站那么多总有一个快的 。相信有很多用网页看盗版小说的小伙伴们就深有感触, 打开一个小说页面老半天,看个小说都费劲,不好意思,pass掉,换个反应快的网站继续看 。针对百度搜索引擎来说
针对现在的网民来说,时间就是金钱,你的网页慢 抱歉,我换一个,网站那么多总有一个快的 。

相信有很多用网页看盗版小说的小伙伴们就深有感触, 打开一个小说页面老半天,看个小说都费劲,不好意思,pass掉,换个反应快的网站继续看 。

针对百度搜索引擎来说, 既然网民讨厌你,我也讨厌你,抱歉,首页不宜你呆,下去吧,让别人来,别站着茅坑不拉屎 ,特别是百度要求手机端网页打开要小于3秒,最好1.5秒。

因此,不经意间间,你不知排名莫名的掉了多少,你不知流失了多少流量,你不知流失了多少客户,流失了多少金钱,对于商业网站尤为致命。

网页加载慢到底如何提速?-小六seo

所以我们必须要知道网站加载速度为何慢,前面小六也更新过有一篇 网页打开速度慢该怎么办 的文章,大家可以综合来看,这里再和大家深度剖析一下。

首先我们要明白网页加载原理,从url到网页形成,中间经历了些什么,才知道怎么处理,怎么提速。解析域名过程这里就不多说了,我们说说页面加载过程。
 

html网页加载流程(电脑浏览器渲染过程)

1、用户输入网址(假设该网址第一次在该电脑浏览器打开,没有缓存),电脑浏览器向网络服务器发出请求,网络服务器返回html文件。

2、电脑浏览器载入html文件,开始解析,从上往下开始解析。

3、解析过程当中,电脑浏览器发现 head 标签内有一个外部引用的css文件,然后电脑浏览器向网络服务器发出请求,网络服务器返回css文件,电脑浏览器开始下载。

4、电脑浏览器继续载入下面的代码,而后下载好了css,并开始渲染页面,形成DOM树。

5、电脑浏览器继续载入网页代码,又发现 head 内一个js引用文件,然后电脑浏览器开始发出请求,网络服务器返回js文件,并阻塞并行的压缩文件下载和解析,直到执行完毕。

6、电脑浏览器继续载入网页代码,发现有js脚本,则会立即执行,并阻塞后续资源分享与执行,直到执行完毕。

7、电脑浏览器继续载入,发现 body 中 img 标签引用了一张图片,会向网络服务器发出请求保存图片,电脑浏览器在保存图片的同时会继续渲染后面的代码。

8、图片下载完成,但由于图片占了一定的页面体积,影响了后面的布局,此时电脑浏览器会重新渲染这段代码。

9、电脑浏览器继续载入代码,发现 body 中的js,如果是内置脚本(引用js需要请求下载)则直接执行,暂停后续载入,直至执行完成,而后继续载入后续代码,再进行页面渲染,如js改变了页面样式,电脑浏览器还会重新渲染这些代码。

10、直到最后全部代码执行完毕,页面渲染完成,展示出来。
 

网页加载速度慢的原因

1、js文件请求过多,加长了页面渲染时间。

2、重复渲染次数过多,虚度光阴。

3、图片、视频资源过大,加载慢。

网页加载慢到底如何提速-小六seo

提高网页加载速度的方法

1、css分块

一般情况下,js的执行很取决于前面的css样式,都是等css渲染完毕后开始执行,否则找不着元素;所以可以将css分成几块,首页的css 单独放一块进行执行,减少首次加载网页的白屏时间。

2、js执行顺序

(1)js中有defer= true 、async= true 两个属性值,前者表示要等到DOM加载完成后,再按序执行指定脚本,后者表示异步执行且不会取决于任何js和css,下载完成就会立即执行(执行时会暂停渲染),不会阻断当页面的渲染。

所以在我们的js满足这两个标签时,可使用让其最后执行或异步执行,减少页面渲染时间。

(2)我们还可以将js放到body最后等页面渲染完成再执行。

3、网页减肥

(1)删除网页中多余的空格、没用的注释。

(2)将内置js,css移动到外部文件,免得多次渲染。

(3)将一些可用css写出来的问题代替图片。

(4)可以用一些压缩工具把代码压缩一下。

4、减少文件,减少请求

网页中若有很多个js或css,最好将其合并为一个js或css文件,减少请求次数。

5、重复数据存入缓存

对重复使用的数据进行缓存,提高二次加载速度。

6、指定图片、表格大小

内置样式,指定图片,表格的大小,以免重复渲染,让电脑浏览器直接执行。

7、关于cdn加速

这个没啥好说的,选择优质的dns服务提供商就能够了。至于网络服务器这里就不提了,一个字 好 就行,推荐阿里云服务器,阿里云服务器的网络服务器技术确实没得说,就是快。

小贴士:关于图片视频等大资源的话,大家可使用阿里云服务器阿里云oss技术(Object Storage Service,简称OSS),会提高加载速度,大家自个研究吧。

好了不多说了,希望对你有些启发,本文由小六SEO原创发布,转载请注明出处。

(责任编辑:小六SEO)