秦皇岛seo博主拥有多年seo,网络营销推广经验,曾服务于多家中大型企业,众多成功案例,可为您提供专业的网站seo,网络营销推广,网站建设等服务。点击这里给我发消息

网页加载缓慢怎么办?网页加载缓慢怎么优化

seo入门知识 秦皇岛seo 1526℃ 0评论

网页加载缓慢怎么办?网页加载缓慢怎么优化针对现在的网民来说,时间就是金钱,你的网页慢“对不起,我换一个,网站那么多总有一个快的”。

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

针对搜索引擎来说,“既然网民不喜欢你,我也不喜欢你,对不起,首页不适合你呆,下去吧,让别人来,别站着茅坑不拉屎”,特别是百度要求移动端网页打开要小于3秒,最好1.5秒。

于是乎,不知不觉间,你不知排名莫名的掉了多少,你不知流失了多少流量,你不知流失了多少客户,流失了多少金钱,对于大型网站尤为致命。

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

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

  网页加载缓慢怎么优化 html网页加载流程(浏览器渲染过程)

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

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

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

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

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

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

7、浏览器继续载入,发现标签引用了一张图片,会向服务器发出请求下载图片,浏览器在下载图片的同时会继续渲染后面的代码。

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

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

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

  网页加载速度慢的原因 网页加载缓慢怎么优化

1、后端的问题

看请求瀑布图,如果第一个请求特别长、特别长,明显比其他请求放到一起不和谐。一般网页第一个请求是动态请求的概率比较大,如果这个请求特别耗时,那肯定不是前端的责任,html都没加载完呢,你怎么就能说是前端的问题呢。作为一个后端RD,优化代码、优化数据库、优化一切可以优化的东西。

2、请求数太多

数一下瀑布图总共有多少行,on load之前如果有几百行,那么请求就太多了。一下子加载那么多资源真的好么?css,js该合并的合并,图标该精灵的精灵,有些不重要的东西不用放到on load之前加载,放到后面也一样嘛。

3、老鼠屎

看到图中的这个请求没?再看看其他请求,这个请求比其他请求的时间大出一个数量级。这种情况一般是因为某一个资源太慢了,它就是一颗老鼠屎,坏掉了整锅汤,导致网页整体变慢。资源慢的原因,概率比较大的几个可能是:(a)资源在第三方站点上,他们很慢;(b)这个资源太大了;(c)这个资源使用的域名有问题。

4、网络问题

仔细看一下一个单独的HTTP请求,他们会分为好几段,分别是域名解析、建立连接、发送请求、等待响应和接收数据几个阶段。理论上域名解析和建立连接应该占用的时间很小才对,主要的时间应该用在后面几个阶段上。上图中,浅灰色和灰色分别代表域名解析和建立连接,可以看出这两个请求中花费在网络层上的时间太长了,超过总时间的一半还要多。网络层时间过长除了可能和底层网络有关之外,还可能和站点的服务端性能有关(后端RD的事情哦)。当然,如果这种情况发生在向第三方站点发送的请求上(实际上也经常发生),可以建议取消或者更换某些站点功能从而避免这样的请求了。

5、接收数据时间过长

HTTP请求的大部分时间应该花在后面几个阶段,比如等待响应和接收数据。但是,如果接收数据的时间太长了,长到数百毫秒甚至以秒计算的时候,那也是有问题的。这种情况一般是因为下载的内容太重了,例如大图片、大脚本等。这类问题可以使用GZIP压缩、图片压缩或者JS/CSS的minify等手段来解决。

6、js阻塞请求

两个连续的请求之间出现了一个很大的空隙,为啥会出现这个空隙呢?可能js性能有问题,解析执行js花了很长时间,导致这段时间的资源加载都被阻塞住了。

7、如果以上都没有

可以翻看每个HTTP请求,仔细研究每个请求头响应头,看看是不是没有设置缓存啦,图片优化的不够好啦之类的。

提高网页加载速度的方法

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服务商就可以了。至于服务器这里就不提了,一个字“好”就行,推荐阿里云,阿里云的服务器技术确实没得说,就是快。

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

好了不说了,希望对你有些启发,本文由秦皇岛seo原创发布,转载请注明出处。

转载请注明:老街华纳公司开户-MD62333 » 网页加载缓慢怎么办?网页加载缓慢怎么优化

喜欢 (1)or分享 (0)
发表我的评论
取消评论

表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址