要了解影响页面速度因素有哪些,首先得了解访问一个网页的全过程。简单来讲,首先访客是打开网页,浏览器发送请求到服务器,然后服务器接收处理后再返回正确的数据,最后浏览器开始下载数据一直到完成整个页面的一系列过程。
在访客角度来说,页面速度并不是整个页面打开到完成所产生耗时,而是打开页面到页面首屏完成,也就是电脑屏幕所呈现第一屏内容完成所产生的耗时。所以首屏渲染完成越快,访客所等待的时间越短,则留着访客的概率大概率提升。
在页面上所能优化有以下几个因素:
1.减小请求数量
2.清除阻碍呈现的JS和CSS内容
3.使用浏览器缓存
4.优先加载可见内容
5.缩短服务器响应时间
6.优化图片
一、减小请求数量(一)
减少http请求数,是前端开发性能优化的一个非常重要方面,所以在基本所有的优化原则里,都有这一条原则;减少http请求数。减少http请求有这样几个优点:
(1) 减少DNS请求所耗费的时间.
(2)减少服务器压力.
1.减小请求数量(二)
1、合并css js:在不影响页面的情况下,尽可能的减少css和js数量。
2.使用精灵图:大量的小图标导致的多次请求可以使用一张精灵图来处理。
3.减少不必要的HTTP跳转:比如301跳转。
4.避免重复的资源请求:这种情況主要是由于硫忽或页面由多个模块拼接而成,然后每个模块中请求了同样的资源时,会导致资源的重复请求。
二、清除阻碍呈现的JS和CSS内容(一)
浏览器必须先通过解析 HTML 标记来构建DOM树,然后才能呈现网页。在此过程中,每当解析器遇到脚本时,它都必须先停止解析 HTML 并执行该脚本,然后才能继续解析。对于外部脚本 ,系统还会强制解析器等待相应资源下载完毕。
清除阻碍呈现的JS和CSS内容(二)
1.应尽可能避免使用会阳止内容呈现的JS和,css,尤其是必须先由系统获取然后才能被执行的外部脚本。
2.用于呈现网页内容的脚本可内嵌到网页中以避免产生额外的网络请求,但内嵌的内容不能太大,而且必须可被快速执行以提供良好的性能。
3.对初次呈现不重要的脚本应设为异步加载,或推迟到首屏呈现完毕后再开始加载。
三、使用浏览器缓存
缓存能够减少浏览器请求资源的次数,当第一个请求资源完成后,,根据相应的缓存机制,将一些静态资源存储在本地磁盘当中,这样下次请求资源的时候,浏览器直接从本地缓存中读取文件,,不需要再次发送送请求。这样可以减少了网络延迟,加快了页面响应速度。
四、优先加载可见内容
1、合理地构建网页,以便首先加载关键的首屏内容,暂缓呈现其余部分。比如图片可使用图片懒加载,第三方脚本放到最后加载,内部脚本异步加载等等
2.为提高网页加载速度,请限制用于呈现网贡首屏内容的数据的大小。
3.优先加载核心内容部分 :比如两列式布局,一边是边栏一边是文章,优先加载文
五、缩短服务器响应时间(一)
服务器响应时间直接影响访客等待页面呈现的时间。是反映服务端响应速度的重要指标。如果访客访问网页是对你问一个问题,那么服务器响应时间便是你所思考的时间,思考的时间越长,访客为获得想要的答案所等待的时问就越长。
缩短服务器响应时间(二)
服务器响应用时控制在200毫秒内。很多潜在因素都可能会延缓服务器响应,例如缓慢的应用逻辑、缓慢的数据库查询、缓慢的路由、CPU不足或内存不足等等。需要充分考虑所有这些因素,才能改善服务器的响应用时。
六、优化图片 (一)
图片是页面上提供的最基本的内容类型之一,一张图片胜过干言万语,但是如果不小心的话,一张图片大小有可能占据整个数据大小的80%以上,这样严重的影响了页面的打开速度。
优化图片(二)
1.图片原始尺寸不应大于页面所皇现的图片尺寸。
2.不显著影响图片视觉效果的情況下优化压缩图片大小。
3.如果非必要的情况下,首屏尽可能的少用大小过大的图片。
七、工具推荐
https://www.thinkwithgoogle.com/intl/en-apac/marketing-strategies/app-and-mobile/mobile-tools-to-optimize-site-and-app/

優(yōu)網(wǎng)科技秉承"專業(yè)團隊、品質(zhì)服務" 的經(jīng)營理念,誠信務實的服務了近萬家客戶,成為眾多世界500強、集團和上市公司的長期合作伙伴!
優(yōu)網(wǎng)科技成立于2001年,擅長網(wǎng)站建設、網(wǎng)站與各類業(yè)務系統(tǒng)深度整合,致力于提供完善的企業(yè)互聯(lián)網(wǎng)解決方案。優(yōu)網(wǎng)科技提供PC端網(wǎng)站建設(品牌展示型、官方門戶型、營銷商務型、電子商務型、信息門戶型、微信小程序定制開發(fā)、移動端應用(手機站、APP開發(fā))、微信定制開發(fā)(微信官網(wǎng)、微信商城、企業(yè)微信)等一系列互聯(lián)網(wǎng)應用服務。