优化推广
当前位置:首页 >> 新闻资讯 >> 优化推广 >> 企业网站优化推广之如何提高前端网页加载速度优化
企业网站优化推广之如何提高前端网页加载速度优化
发布日期:2021-05-22 16:33:57 阅读次数:13 字体大小:

在同样的网络环境下,两个同样能满足你的需求的网站,一个“Duang”的一下就加载出来了,一个纠结了半天才出来,你会选择哪个?研究表明:用户最满意的打开网页时间是2-5秒,如果等待超过10秒,99%的用户会关闭这个网页。

许多研究发现,页面速度和访客的滞留时间,跳出率以及收入都有直接的关系。另外,谷歌的排名算法中也把页面加载速度作为其中一项考虑因素。因此,你网站的页面加载时间是至关重要的。

小于3秒的页载入时间被认为是优良的,而且高达5秒是可接受的。而大于6秒的页面载入时间不仅影响你网站的搜索引擎排名,还会严重影响用户体验。

在四月份下旬的时候,就有一个老客户的反应他们的网站打开速度过慢,导致跳出率过高,寻求解决办法。

经过对网站的实测分析:网站服务器基础设施一般般+服务软件有很大的改进空间+程序代码和前端需要升级改进。针对这位老客户的需求,提出如下解决方案:网站前端改版+服务端优化升级。

下面我们就分享一下如何提高前端网页加速度

进行前端优化的时候,我们首先需要明白网页加载顺序:

加载顺序:1.DNS查找 > 2.下载并渲染HTML文件 > 3.下载并执行css及js组件 > 4.下载图片 > 5.渲染展示

1.html文档优化

1.1. 避免使用空请求,包括空的href链接、空src链接。空链接本身无法请求成功,因此会把一个HTTP请求拖到超时,而且空链接会阻塞页面中其他资源的下载进程,会拖慢页面加载速度。

1.2. 根据项目大小,选择主要使用class还是id。id选择器优先级最高,访问速度最快。但是在html中每声明一个id,就会在JS底层声明一个全局变量,而全局变量的增多,将会拖慢JS中变量遍历的效率,若变量遍历达到十万次以上,就会出现较显著的延迟,而且容易造成全局变量污染。对于小项目,并无影响,但是对中大型项目来说,尤其是游戏项目,影响很大。个人推荐,当项目较小时,灵活使用class和id,当项目较大时,尽量少使用id。

1.3. 预先设定图片大小。在页面加载过程中,图片最后加载,若不对图片预设大小,当图片加载完成后,将会引起大量的重排,将会浪费浏览器资源及拖慢页面加载速度。

1.4. 尽量减少DOM元素的数量与层级。解析HTML时,标签的数量越多,标签的层级越深,浏览器解析构建DOM树的时间就越长,应尽可能的减少DOM元素的数量和层级。

1.5. 尽量避免使用table标签。浏览器对table标签的解析是全部生成后再一次性绘制的,因此会造成表格位置较长时间的空白,推荐使用ul及li标签绘制表格。

1.6. 使用异步加载iframe标签。浏览器加载iframe标签时,会阻塞父页面渲染树的构建及HTTP请求,因此尽量使用异步加载iframe。

2.减少DNS查找 增加DNS预解析

2.1 DNS查找,即浏览器根据url中域名,查找该域名对应的服务器IP地址,然后才能根据服务器IP地址,下载到文件。在DNS查找完成之前,所有的文件下载都无法执行。每一次DNS查找时间约20-120ms。

一般而言,电脑会进行DNS缓存,包括浏览器缓存、系统缓存、路由器缓存、ISP DNS缓存。所以,浏览器DNS查找顺序一般是这样的:浏览器缓存→系统缓存→路由器缓存→ISP DNS 缓存→递归搜索。

递归搜索,即ISP的DNS服务器从根域名开始进行递归查询,查找时间一般为20-120ms。

若没有DNS缓存,才会执行DNS递归搜索。但是显而易见,第一次访问网站首页时,是不会有DNS缓存的,必然会执行DNS查找。而每一个DNS查找,需要耗时20-120ms。因此,减少DNS查找能加快网页加载速度。

2.2 DNS预获取,是前端优化的一部分。一般来说,在前端优化中与 DNS 有关的有两点: 一个是减少DNS的请求次数,另一个就是进行DNS预获取 。

DNS Prefetch 应该尽量的放在网页的前面,推荐放在 <meta charset="UTF-8"> 后面。具体使用方法如下:

< meta  http-equiv="x-dns-prefetch-control" content="on">
< link  rel="dns-prefetch" href="//www.hnek.net">

特别说明:减少dns请求是说尽量不要引用外站文件,dns预获取是在引用外站文件的时候使用,比如说使用cdn的时候,使用这个就可以减少dns请求数和加快下载速度。

3.避免重定向

重定向增加了额外的HTTP请求,因此也增加了页面加载时间。然而有时重定向却是不可避免的,如链接网站的不同部分、保存多个域名、或者从不存在的页面跳转到新页面。

重定向增加了延迟时间,因此要尽量避免使用它。检查是否有损坏的链接,并立即修复。

4.减少http请求

HTTP请求需从客户端发起请求,然后由服务器端进行数据处理,然后再返回数据或资源。一般而言,耗时据请求资源的大小,服务器网速,约数ms-数百ms之间。请求资源越大,所花费的时间越长,服务器网速越慢,所花费的时间也越长。

一般而言,完成了DNS查找后,接下来便是进行HTTP请求,获取资源。首先下载HTML文件,然后解析HTML文件,根据HTML内容,获取CSS、JS及图片文件。每一个CSS链接、JS链接以及图片链接都是一个HTTP请求。

4.1 合并图片等小文件,使用 CSS Sprites 整合图像。多图像的网站加载时间比较久。其中一个解决方法就是把多个图像整合到少数几个输出文件中。你可以使用 CSS Sprites 来整合图像文件。这样就减少了在下载其他资源时的往返次数和延迟,从而提高了站点的速度。

4.2 合并css/js文件。尽量减少css或是js文件的数量,有些css文件代码比较少,可以多个合并成为一个。

5.压缩/缩小文件

5.1 压缩CSS和JavaScript. 压缩是通过移除不必要的字符(如TAB、空格、回车、代码注释等),以帮助减少其大小和网页的后续加载时间的过程。这是非常重要的,但是,你还需要保存JS和CSS的原文件,以便更新和修改代码。

5.2 启用GZIP压缩. 在服务器上压缩网站的页面是提升网站访问速度非常有效的一种方法。你可以用gzip压缩做到这一点。Gzip是一个减小发送给访客的HTML文件、JS和CSS体积的工具。压缩的文件减少了HTTP响应时间。

5.3 图片文件尽量满足需要就好,图片格式上尽量选择压缩比较高的格式。同一张图片,jpg格式比png格式小约5倍,加载速度快约3倍;推荐使用webp图片格式,更快更好哦。什么是webp图片格式

6.CSS优先加载,JS延迟加载

在解析HTML文件,构建DOM树时,一旦遇到link标记时,即遇到了CSS样式表,将之下载,便可立即构建渲染树,从而立即呈现页面效果。

而一旦遇到script 标记时,即遇到了JS脚本,将立即阻塞DOM树的构建,将控制权移交给 JavaScript 引擎,等到 JavaScript 引擎运行完毕,浏览器才会从中断的地方恢复渲染树的构建。

若将引入JS脚本的链接放到HTML页面顶部,那么在加载该页面时,一旦遇到JS,页面渲染就会停滞,出现一段时间的灰色空白,直到JS加载完成,才会出现页面内容,这对用户体验是不友好的。因此,我们需要将JS脚本放置到页面底部,或者让JS脚本异步或是延迟加载。(说白了就是css文件可以放到</head>标签之前,js文件放到</html>之前)

7.合理利用缓存

避免在HTML文件中使用style标签插入CSS样式,及使用script标签插入JS脚本。若在HTML文件中插入CSS及JS,那么它们无法进入缓存,每次刷新页面,都要重新加载,不但浪费了浏览器资源,拖慢了页面加载速度,而且显得冗余且复用性低,不利于日后的维护。因此,将CSS样式与JS脚本分离出来,形成CSS文件及JS文件,就能进入缓存,进而提高页面加载速度。这就要求好好规划文件内容了,缓存公共部分能有效提升加载渲染速度哦!

8.css代码优化及js代码优化

8.1 CSS样式代码优化

8.1.1. 禁止使用样式表达式。CSS表达式从IE5起开始支持,但仅有IE支持。它的解析速度较慢,而且运算次数远比我们想象的要大,随意动动鼠标就能轻松达到上万次运算,会对页面性能造成影响。譬如:"#myDiv{width:expression(document.body.offsetWidth - 110 + "px"); }"

8.1.2. 优化关键选择器,去掉无效的父级选择器,尽量少在选择器末尾使用通配符。大多数人都认为,浏览器对CSS选择器的解析式从左往右进行的,譬如选择器:"#myDiv ul li a",大多数人会认为这个选择器效率极高,毕竟第一个ID #myDiv 就已经把范围限定了,先选择 #myDiv ,再在 #myDiv 下寻找 ul ,再一级一级往下,直到找到 a 标签,效率很高。事实上这是错的,浏览器对CSS选择器的解析式从右往左进行的。在上述选择器中,浏览器会先去寻找 a 标签,范围为全局,再在 a 标签的列表中,寻找父级标签是 li 标签的 a 标签,一直向上,直到最后,找到父级标签是 #myDiv ul li 的a标签。因此,效率并不像想象中那么高。显而易见,"#myDi a"选择器比"#myDiv ul li a"选择器效率要高得多。而通配符 a 的效率远比类选择器及id选择器低,若给 a 标签添加一个class myA ,构造新选择器:"#myDiv .myA",它的效率又远比"#myDi a"要高了。浏览器对CSS选择器的解析式从右往左进行,因此在选择器末尾最好使用类选择器,而不是通配符。

8.2 JS代码优化

8.2.1. ajax请求方法按需求选择get或是post,访问接口所花费的时间在页面加载时间中占很大的比重,而接口访问方法中,get方法远比post方法要快,因此按需选择接口访问方法很重要。

8.2.2. 减少全局变量,尽量使用局部变量。js中,全局变量运算速率远低于局部变量,速度差异达到上百倍,且全局变量越多,全局变量的查找速率便越慢。

8.2.3. 减少对DOM的操作。js操作DOM将会引起页面的重绘及重排,需要花费时间及耗费浏览器资源。

9.去掉不必要的插件

一个非常值得关注但经常被忽略的因素是你网站安装的插件。如今,大量免费的插件诱导网站开发者添加很多不必要的功能。您安装的每个插件都需要服务器处理,从而增加了页面加载时间。所以禁用和删除不必要的插件。然而,有些插件是必须的,如社交分享插件,你可以选择CMS内置的社交分享功能来代替安装插件。

10.服务端输出优化

10.1 启用GZIP压缩

在服务器上压缩网站的页面是提升网站访问速度非常有效的一种方法。你可以用gzip压缩做到这一点。Gzip是一个减小发送给访客的HTML文件、JS和CSS体积的工具。压缩的文件减少了HTTP响应时间。据Yahoo报道,这大概可以减少70%的下载时间。而目前90%的通过浏览器的流量都支持Gzip压缩,因此,这是一个提示网站性能有效的选项。

10.2 添加Expires头

页面的初次访问者会进行很多HTTP请求,但是通过使用一个长久的Expires头,可以使这些组件被缓存,下次访问的时候,就可以减少不必要的HTPP请求,从而提高加载速度。

Web服务器通过Expires头告诉客户端可以使用一个组件的当前副本,直到指定的时间为止。若同时制定Cache-Control和Expires,则max-age将覆盖Expires头(本方法对初次访问无效,作用在于可以加快其它页面的加载速度)

11 使用CDN服务

有些时候,技术手段搞到无能为力的时候,只需要使用CDN服务就可以将加载速度提升一个级别。如果应用程序web服务器离用户更近,那么一个HTTP请求的响应时间将缩短。另一方面,如果组件web服务器离用户更近,则多个HTTP请求的响应时间将缩短。

 CDN(内容发布网络)是一组分布在多个不同地理位置的Web服务器,用于更加有效地向用户发布内容。在优化性能时,向特定用户发布内容的服务器的选择基于对网络慕课拥堵的测量。例如,CDN可能选择网络阶跃数最小的服务器,或者具有最短响应时间的服务器。

其实大部分网站都是一般的网站,改善一下服务器设置,或是开启CDN服务就能满足用户打开的速度要求了。记得有句话说的是:大部分网站web项目的性能瓶颈都可以通过人民币快速找到解决办法,若是还不能,那就再加一点。


文章标签: