PWA 渐进式实践 (3) - 用户体验 & 性能

为了让我们的网站能达到更高的评分(咦,为什么变成刷分了),我们最后需要进行用户体验和性能的优化。

页面加载性能

我们需要尽可能把其他所有页面做成异步的,如:

function getSubmitCase(nextState, callback) {
  require.ensure([], (require) => {
    callback(null, require(‘./containers/case/SubmitCasePage‘).default);
  }, ‘SubmitCasePage‘);
}
<Route path="submit" getComponent={getSubmitCase} />

通过把非首页面路由给大部分变成异步化的后:

原来都是黄色红色的,现在大部分变成了绿色。

渐进式增强

页面在脚本(JavaScript)不可用的时候仍然包含一些内容,即便它只是一个给用户的警告,官方文档见:no-js

复杂地话,我们需要能输出静态页面,但由于我们是纯粹的客户端渲染,没办法那么做,所以一切从简,考虑直接在无法使用 JS 的时候输出提示。

具体怎么做呢?不用急,还真有个标签可以直接拿来用:

<noscript>Your browser does not support JavaScript!</noscript>

放在 body 里面就好了。

辅助功能

考虑到应用场景,这个就不加了(更何况报的一些其实是 ant design 的问题)。

还有一个是我们 form 表单没有使用 label(因为使用了 icon 来示意),这个提示有点傻逼,无视它。

性能指标

请求链路的优化,主要是因为一些静态文件的依赖比较多(css、js、图片)。没有想到特别好的方法,官方解释见:Critical Request Chains,应该需要尽量做成异步非阻塞的,并减少 roundtrips 数量。

避免影响用户体验的 APIs

CSS 文件大,容易导致阻塞,因为 CSS 会被默认处理为渲染阻塞的资源。

可以先阅读 Google 的这一篇文档:Render Blocking CSS

因为通常在 CSS 文件未正确加载前,我们的页面会无法正常使用,所以唯一的优化方案就是让加载 CSS 变得更快。

可是具体怎么做呢?其实 link stylesheet 有一个标签 —— media,也就是我们熟知的 media query:

<link href="style.css" rel="stylesheet">
<link href="print.css" rel="stylesheet" media="print">
<link href="other.css" rel="stylesheet" media="(min-width: 40em)">
  • 第一个 stylesheet 就是我们以往常用的,被应用在所有场景,总是会阻塞渲染。
  • 第二个 stylesheet 在内容被打印后才应用 —— 可能你会想要重新排版布局,改变字体等等,所以不会阻塞页面的首次加载。
  • 第三个使用了 media query,会被浏览器执行,如果条件负责,则会阻塞到该 stylesheet 被下载并处理完毕。

再来看几个例子:

<link href="style.css"    rel="stylesheet">
<link href="style.css"    rel="stylesheet" media="all">
<link href="portrait.css" rel="stylesheet" media="orientation:portrait">
<link href="print.css"    rel="stylesheet" media="print">
  • 第一个申明在所有条件下都是渲染阻塞的。
  • 第二个申明和第一个其实等价,因为如果没有指定 media type 的话,他其实就是 “all”。
  • 第三个申明有一个动态 media 查询,在页面加载时进行评估。依赖于加载时设备的方向,portrait.css 可能会阻塞渲染。
  • 最后一个在页面被打印时才应用,所以不会在首次加载页面时阻塞渲染。

最后要注意的是,阻塞渲染仅仅涉及到浏览器是否要等待资源加载后才进行首次渲染,在任何场景下,浏览器还是会下载该 css 资源的,只不过对非阻塞资源的优先级会低一点。

GitLab 也存在这个问题,见:https://gitlab.com/gitlab-org/gitlab-ce/issues/26080

找了一下没找到对应的工具,回头试试看:https://github.com/WatchBeam/split-css-loader,暂且先放着了,毕竟目前 CSS 文件还不算太大。

尾声

最后的优化结果,竟然达到了97分,还是让我吓了一跳的。

PWA 实践系列到了这里就是尾声了,大家下回见。

时间: 2024-10-16 00:53:26

PWA 渐进式实践 (3) - 用户体验 & 性能的相关文章

【Testin实验室】MoiMark安卓中国终端体验性能排行榜(11月报)

[Testin实验室]MoiMark安卓中国终端体验性能排行榜(11月报) 2014/11/20 · Testin · 实验室报告 11月报要点: 新增机型Note4强势夺得第一. 三星Note4以多个单项第一的成绩获得MoiMark综合排行榜第一名.比方显示质量.Wi-Fi性能和3D游戏性能.另外在照相质量和音乐质量两大重要体验维度接近于MoiMark最佳水平. 详情见下图: 注:Note4的具体评測报告.敬请关注MoiMark的最近资讯. 尽管三星依然强势,但国产机型突飞猛进.在综合排行榜T

《云计算架构技术与实践》连载15:2.3.2~2.3.6 弹性伸缩、高性能、用户体验、高安全、高可靠

版权全部,未经华为书面许可,请勿转载或转发. 2.3.2 弹性伸缩 弹性伸缩要求以同样架构,支撑从最少几个计算与存储节点.到最大10万甚至是100万级的计算与存储节点集群规模,且保证数据中心容量扩展过程中的业务连续性及业务服务不中断,或中断时延最短. 这里的弹性伸缩扩展能力应该体如今: l  管理节点弹性伸缩能力. l  数据中心资源的弹性伸缩能力: l  所承载云租户业务的计算集群弹性伸缩能力: l  承载用户数据信息及系统卷镜像的存储集群的弹性伸缩能力 l  连接计算与存储集群资源的网络弹性

使用渐进式 JPEG 来提升用户体验

今天才认识到原来JPEG文件有两种保存方式他们分别是Baseline JPEG(标准型)和Progressive JPEG(渐进式).两种格式有相同尺寸以及图像数据,他们的扩展名也是相同的,唯一的区别是二者显示的方式不同. Baseline JPEG 这种类型的JPEG文件存储方式是按从上到下的扫描方式,把每一行顺序的保存在JPEG文件中.打开这个文件显示它的内容时,数据将按照存储时的顺序从上到下一行一行的被显示出来,直到所有的数据都被读完,就完成了整张图片的显示.如果文件较大或者网络下载速度较

web开发性能优化---用户体验篇

怎样从技术角度怎样增强用户体验.都是非常多平台都在做的事情,依据个人实际经验碰到几种体验做下总结. 1.降低页面刷新白屏 适当使用ajax技术.改善刷新白屏现象. 2.信息提醒,邮件.站内信.短信在购物流程.售后流程适当添加信息温馨提醒环节: 3.定期回訪及互动记录好会员每次来电来訪.购买情况分析等数据做到定期客户关怀:添加生日免单.会员日等互动环节.增强互动性: 3.智能分析推荐分析会员购买偏好,智能推荐相关相关产品:依据会员喜欢定期推送促销信息: 4.多平台联合登录能够通过QQ.开心网.支付

经典文摘:饿了么的 PWA 升级实践(结合Vue.js)

自 Vue.js 官方推特第一次公开到现在,我们就一直在进行着将饿了么移动端网站升级为 Progressive Web App 的工作.直到近日在 Google I/O 2017 上登台亮相,才终于算告一段落.我们非常荣幸能够发布全世界第一个专门面向国内用户的 PWA,但更荣幸的是能与 Google.UC 以及腾讯合作,一起推动国内 web 与浏览器生态的发展. 您可能感兴趣的相关文章 网站开发中很有用的 jQuery 效果[附源码] 分享35个让人惊讶的 CSS3 动画效果演示 十分惊艳的8个

高性能极致用户体验前端开发实战

课程介绍 高性能极致用户体验前端开发实战课程适合所有前端开发学习或者从业者,结合目前前端开发的最佳实践,提供前端网页性能分析优化知识,结合实际项目经验分析可以采用的优化思路,并给出开发高性能极致体验网页的通用方法和技巧. 课程官方博客:前端学堂 在开始学习本课程之前,先提2个基本要求: 了解业务 作为一名合格的前端开发,我们的开发工作不是盲目的,我们的优化目标需要明确,所以首先要了解你所做的业务.不仅要知道整个业务背景,还需要了解业务需求,业务目的,最后最好能拿到业务结果. 了解业务的目的是能让

PWA-让前端网页媲美原生APP的用户体验

一.背景 从2018年到现在,作为号称下一代web应用模型的PWA,逐渐成为了一个各大前端厂商争先恐后进行涉足,布局的一个新的技术, 其主要的对标物Native app,作为现在最主流的mobile端应用,它的安全,性能,用户体验的确明显领先于其他互联网载体,但是原生App始终有一些缺点,比如 1. 昂贵开发成本 2. 软件上线,版本更新都需要发布到不同的商店,并通过审核 有些APP你可能使用频率特别少,但是你还是不得不去商店中下载庞大安装包,或者可能一段时间不使用以后,随着版本的更新,你也不得

监控宝优化升级 创新驱动用户体验

监控宝优化升级 创新驱动用户体验 近日,云智慧(北京)科技有限公司宣布,监控宝第一季度的产品和基础监测点升级部署计划已经提前完成.本次服务升级主要包含:监测点网络部署.产品体验优化和部分套餐优惠调整等几个方面.其中标准.高级.专业套餐均为用户免费增加了2个监控点,并且标准套餐降价优惠了48%,提高产品服务品质的同时,帮助用户降低运维成本. 随着江西电信监测点的正式投入运营,监控宝独立部署的监测点已经达到35个,覆盖全国主要地区以及中国电信.中国联通.中国移动和教育网等网络服务商.除了监测点外,监

利用简洁的图片预加载组件提升h5移动页面的用户体验

在做h5移动页面,相信大家一定碰到过页面已经打开,但是里面的图片还未加载出来的情况,这种问题虽然不影响页面的功能,但是不利于用户体验.抛开网速的原因,解决这个问题有多方面的思路:最基本的,要从http请求合并,缓存管理,图片压缩等方面做性能优化:另外就是可以对页面里用到的所有图片做预加载的处理,当用户打开页面的时候不立即显示第一屏,而是先显示资源加载效果,等到加载完毕,再来显示页面的主内容,这样就能解决那个问题.虽然这种加载效果占用了用户的浏览时间,但是我们可以把它做的好看有趣一点,所以也不会影