网站优化(五):前端页面性能优化分享
上一篇写完了SpringBoot后端的优化和技术选型,这篇就写一下前端页面的性能优化。
优化执行标准
既然要优化,我们肯定需要一个指导文件或者标准,我是以Google的标准进行优化的,Google有个指导网站:https://web.dev,并且提供了测评工具:https://developers.google.com/speed/pagespeed/insights,先看下我的优化效果:

六大评价维度
Google大致从六个方向对网站页面进行测评:First Contentful Paint(FCP)、Speed Index、Largest Contentful Paint(LCP)、Time to Interactive(TTI)、Total Blocking Time(TBT)、Cumulative Layout Shift(CLS),中文的话大致意思是:首次渲染时间(FCP)、网络交互时间(TTI)、网络阻塞时间(TBT)、速度指数、最大内容渲染(LCP)、累计位移量(CLS)。
首次渲染时间(FCP)
首次渲染时间(FCP)是指访问您的页面后浏览器呈现第一段DOM内容所花费的时间。页面上的图像,非白色<canvas>元素和SVG被视为DOM内容。这项是个比较综合的评定,优化这项其实就是要提高访问速度,你可以使用CDN技术加速网页响应时间;同时如果使用了webfont,可以设置为webfont在加载期间可见,第一时间让用户看到内容。
网络交互时间(TTI)
网页中需要动态请求其他文档数据,就会产生交互,这项测评的是页面完全交互完成所花费的时间。优化这项就是页面上能少请求就少请求资源,移除不必要的css、js、图片等资源,以缩短交互的时间,同时可以启用gzip压缩,图片也可以使用压缩后的图片,代码可以压缩成无空格的代码。
网络阻塞时间(TBT)
网络阻塞时间(TBT)测评的是阻止页面响应用户输入(例如鼠标单击,屏幕敲击或键盘按压)的总时间。其实就是页面需要停下来去执行JavaScript,这个时候浏览器是被阻塞的,暂时不能响应用户的操作请求,任何js执行超过50毫秒都会判定为慢。这项的优化手段是移除不必要的JavaScript,使用开发者工具找出性能低下的JavaScript进行优化修改,文章下面我会说怎么使用开发者工具。
最大内容渲染(LCP)
最大内容渲染(LCP)测评的是画面中最大的内容元素何时呈现到屏幕的时间。这项不过往往是大图片造成的,尝试压缩降低图片的尺寸、文件大小,我就对图片进行了裁剪,只到够页面显示的大小,减少不必要的浪费。
累计位移量(CLS)
累计位移量(CLS)测评的是页面在加载过程中各个元素会不会位移,位移了多少。这项的优化技巧在于提前告知浏览器元素的大小,这样在元素渲染之前,浏览器就给元素留出了渲染的位置,防止页面其他元素发生位移。例子就是图片img标签要添加width和height,告知浏览器这个元素是多大来显示的。
速度指数
速度指数是测评页面加载过程中内容可视化显示的速度。说白了就是页面用多长时间可以渲染完成,显示出画面,优化这项就是减少不必要的css文件,然后把JavaScript代码放到页面最下面,减少主线程工作、减少JavaScript执行时间。
开发者工具
在上面我提到了使用开发者工来调试页面,这个东西如果是前端工程师应该非常熟悉,我使用的是Chrome浏览器,在菜单->更多工具->开发者工具就可以打开,在性能(Performance)标签页中,可以记录当前页面的性能信息,可以看到网络请求、主线程在做什么、去请求了哪些资源、什么时候使用了GPU、每一个时间点渲染的画面等等,在这个工具中可以轻松找到是什么东西阻塞了你的页面,然后开始调试和优化你的页面性能。

商业用途请联系作者获得授权。
版权声明:本文为博主「任霏」原创文章,遵循 CC BY-NC-SA 4.0 版权协议,转载请附上原文出处链接及本声明。
相关推荐
猜你还喜欢这些内容,不妨试试阅读一下评论与留言
以下内容均由网友提交发布,版权与真实性无法查证,请自行辨别。微信订阅号
扫码关注「任霏博客」微信订阅号- 你写得非常清晰明了,让我很容易理解你的观点。
- 感谢分享!拿走了~
- 您是说 UCClient 类接收来自Discuz的UCenter的消息吧,请求是来自 Discuz 的 UCenter吗?code 为 null 说明请求URL地址中没有 code 参数 (?code=xxx) ,确定是 UCenter 发起的请求吗?
- String code = request.getParameter("code"); code一直是null 这是为什么啊
- 你好,我想问一下如果是分析型的数据库要怎么制作docker镜像呢 是修改V008R003C002B0320版本号吗
- 可以的,我也正在开发分享的程序,可以邮件或群联系我都可以,关于页面里有联系方式:https://www.renfei.net/page/about 。
- 有破解软件的需要可以私下联系您吗?
- 您好,手机APP只是个客户端,用于数据呈现展示,数据均保存在服务器上,只留个APP没有任何用处,无能为力哦。
- 老哥 看你弄了这么多软件好厉害啊。 我有个软件 我买过几个小会员 没用几天 然后商家跑路了,软件服务器关闭了,连不上去 用不了。 你能做成一个打补丁版本可以本地用的么? 方便看下么?https://haodezhe.lanzouw.com/iD0f30h9joza 谢谢老哥!
- 您好,由于版权投诉和我国知识产权法的完善,我已经下架所有破解软件的下载链接了。
- 生花妙笔信手来 – 基于 Amazon SageMaker 使用 Grounded-SAM 加速电商广告素材生成 [1]
- github.renfei.net 不再完整代理 Github 页面改为代理指定文件
- 优雅的源代码管理(三):本地优雅的使用 Git Rebase 变基
- 优雅的源代码管理(二):Git 的工作原理
- 优雅的源代码管理(一):版本控制系统 VCS(Version Control System)与软件配置管理 SCM(Software Configuration Management)
- ChatGPT 开发商 OpenAI 买下极品域名 AI.com
- 火爆的 AI 人工智能 ChatGPT 国内注册教程、使用方式和收费标准
- 解决 SpringCloud 中 bootstrap.yml 不识别 @activatedProperties@ 参数
- Cron表达式书写教程搞定Linux、Spring、Quartz的定时任务
- 阿里云香港可用区C发生史诗级故障