关于如何做一个“优秀网站”的清单——基础篇

前言

本文翻译自Google Developers中的文章——《Progressive Web App Checklist》

本文分为两篇,分别为基础级清单和规范级清单

一个优秀的Web App

本文中所提到的“优秀的Web App”是指现在比较流行的概念——Progressive Web App,又称PWA。

什么是Progressive Web App?

字面上直译为“先进的web应用”,而维基百科中给出的解释是——PWA是一个用来表示使用了最新技术的Web应用的术语。PWA是可靠的、迅速的、吸引人的、体验好的Web App的代名词。

为了帮助开发团队创造最好的用户体验,我们拆解出了这一份清单,其中包括了我们所能想到的如何进一步做出一个体验更完美的模范版PWA的重要细节。

1

基准版PWA的清单

LightHouse工具能够自动验证此列表中的许多项目,并有助于轻松测试指定站点。他以Chrome插件的形式存在,可以在谷歌应用商店中添加该应用,也可以下载最新版的Chrome浏览器,它会出现在Audits面板中。

下面是利用Lighthouse工具对京东网站的测试结果。他不仅能为站点打分,还可以给出适当的优化建议。

下面一一列出PWA的清单项目。

网站通过HTTPS提供

确认方法:直接用LightHouse工具进行确认,确认项目名称为Served over HTTPS

改善方法:服务端启用HTTPS

页面在平板电脑和移动设备上自适应显示

确认方法:直接用LightHouse工具勾选验证项 Design is mobile-friendly进行确认。

改善方法:网站应该遵从响应式设计原则,或自适应地设置viewport属性。

(关于响应式页面设计,可以看下面这篇文章:

https://developers.google.com/web/fundamentals/design-and-ui/responsive/

同时也推荐各位看一本书《响应式Web设计:HTML5和CSS3实战》By Ben Frain)

在离线状态下加载URL

确认方法:直用Lighthouse工具验证URL responds with a 200 when offline

改善方法:利用Service Worker技术来改善网站体验

页面提供添加到主屏幕的功能

确认方法:直接用LightHouse工具勾选User can be prompted to Add to Home screen的所有选项。

改善方法:在你的项目中添加个Web App Manifest文件。

即使在3G下,初次加载也很快

确认方法:将浏览器调试工具设置成手机Nexus5(或类似的)模式,并把浏览器的网络调至成3G网络。

改善方法:

■这里有很多种方式来提供性能,如

优化内容效率、关键渲染路径等。

■您可以通过使用WebPageTest上的Pagespeed Insights(目标为85分)和SpeedIndex(目标是移动3G Nexus 5 Chrome上的<4000第一视图)来更好地了解您的表现。

■还一些技巧,主要专注于加载较少的脚本,确保使用<script async>尽可能多的脚本异步加载,并确保渲染阻止CSS被标记为这样。

■还可以在服务器上查看使用PRPL模式和工具,如PageSpeed Module。

网站可以跨浏览器正常工作

确认方法:分别在Chrome、Edge、Firefox和Safari浏览器上测试网站的表现。

改善方法:修复所有跨浏览器运行时出现的问题。

页面切换时,不应该让用户感觉像似网络阻塞

应该做到即使在网络环境很糟的情况下,页面切换也是丝般顺滑,这是提供用户体验的关键。

确认方法:在Chrome浏览器中,将网络设置成非常慢(可以设置为3G网络),然后在打开应用。每次点击应用程序中的链接/按钮,页面应立即响应。

方式如下: 在等待网络中的内容时,立即转换到下一个屏幕并显示占位符加载屏幕(或加载动画)。 当应用程序等待来自网络的响应时,显示加载指示符(或加载动画)。

改善方法:如果使用的是单页应用(客户端渲染),页面转换时应该立即完成并且在下一页显示页面骨架图,并且在内容加载时使用诸如标题或缩略图之类的任何内容。

下面的例子中,页面在从列表页进入详情页时,先用列表中的图片进行粗略渲染,等详情页的数据返回后再将数据填充进去,使得页面切换体验非常顺滑,几乎感觉不到卡顿。

每一个页面都有一个URL

确认方法:确保单个页面可以通过URL进行深度链接,并且将当前页面的链接复制,然后在一个新的标签中打开该链接,观察渲染内容是否与原来页面保持一致,这样做可以做到在社交网站中分享当前页面时,其他用户可以正常访问。

改善方法:如果构建的是单页应用,请确保客户端router可以从给定的URL重新构建到之前的应用程序状态。

原文发布于微信公众号 - 较真的前端(gh_7af41a2be77e)

原文发表时间:2017-08-14

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏IMWeb前端团队

移动端重构实战系列0——sandal 和 sheral

sandal是什么 简单来说,sandal是基于sass的一个移动端css的基础库,提供了一些基础的重置,常用的mixin,如flex布局,等分,水平垂直居中,...

22590
来自专栏MixLab科技+设计实验室

02技能之谷歌Chrome爬虫 |数据爬取及可视化系列

今天更新一篇《数据爬取及可视化系列》的技能相关的文章:爬虫技能。 前阵子研究了nodejs爬虫相关的内容,发现最好用的还是casperjs,一个基于Phanto...

48690
来自专栏贾鹏辉的技术专栏@CrazyCodeBoy

快速创建React Native App

尊重版权,未经授权不得转载 本文出自:贾鹏辉的技术博客(http://www.devio.org) 告诉大家一个好消息,为大家精心准备的React N...

45940
来自专栏梧雨北辰的开发录

iOS11后32位应用升级

今天接受了一个改造旧项目的任务,据说项目唯独在iOS11上无法运行。这很容易就让我们想到与最近苹果iOS11放弃支持32位应用的事件有关。确实我在平时开发的项目...

27630
来自专栏达摩兵的技术空间

touch-action导致安卓页面无法滚动

相信大家搜css touch-action很容易搜到一批文章,但感觉自己还是需要写下自己这这个过程中的一些探索经历。

99700
来自专栏快乐八哥

Facebook Like Button在IE上的bug

项目主要是欧美项目,所以大多数网站都要集成Facebook,Twitter和Email三个功能。随着Google大力推广Google+,而且现在图片分享也很火热...

202100
来自专栏進无尽的文章

扒虫篇-使用Xcode8上传到AppStore 无法构建版本 没有➕号

由于公司产品需要上架,在准备好相关文件后,就火速设置好itunsConnect里面的内容,使用Xcode8火速上传 ipa文件到 AppStore后就开心的准备...

16120
来自专栏Youngxj

全平台通用评论神器一键自动填写昵称、邮箱和网址

20330
来自专栏宝塔面板

腾讯云中宝塔面板升级专业版

58920
来自专栏WindCoder

WordPress中通过Ajax评论分页实现方法

一直看着评论一线到底,感觉有点不舒服,看到主题君欲思大大那的评论也分页了,就向大大求援了一下,大大酷酷的回了一句paginate_comments_links函...

29710

扫码关注云+社区

领取腾讯云代金券