平面摄影技术研习社

秒掉APP? “小程序”式网页或将引领“移动端网页新时代”

人民日报媒体技术 2017-12-06 19:44:13


如今的互联网已进入“移动时代”和“可视化阅读时代”,各种网站的主要流量来源已从昔日的“大窗口”PC端变为“小窗口”手机移动端,这么大的一块“蛋糕”对于媒体来说可是个不小的机遇,于是各家媒体便纷纷开始琢磨在这个“小窗口”下足功夫,大面积图片、视频等可视化元素的应用逐渐替换掉了原来单一的“白底黑字”,使得用户的阅读视觉体验不断提升。


然而,大量可视化元素却加重了移动端网站负担,使得网页卡顿、加载缓慢,还存在兼容问题。于是,如何在移动端网站的视觉效果与技术承载能力之间寻求平衡,成为了互联网技术人员的难题。


这不,最近《福布斯》官网最近就想了个招。



创新
使用最新技术,提升页面加载速度


《福布斯》杂志是美国知名商业杂志之一,其以金融、科技等领域专业文章而著称,拥有大批商业精英人士读者。“高质量”的读者对于线上阅读质量的要求自然也高,过长的加载时间和较差的广告体验可是绝不可接受的。于是,上周二《福布斯》杂志决定对其网站(www.forbes.com)移动端页面进行更新,新版页面不仅可视化元素更加丰富,加载时间更是由以前的3—12秒缩短到了0.8秒,可以说是“秒杀”一切大型门户网站了。



据《福布斯》移动端产品开发高级副总裁萨利赫·扎拉迪莫称,他们的新版移动端网页基于了谷歌最新研发的移动网络技术——渐进式网页应用PWA(Progressive Web App),这是一项能够利用现有移动浏览器使网页达到类似App用户体验的技术,利用它可使移动端web页面功能与app相匹敌,并且在视觉效果上也更像是一个装在移动设备上的原生app。当然最大的亮点还是它的速度,低于1秒的加载时间能让大部分内容类app都为之汗颜。


PWA在任何移动设备上都能流畅运行,在安卓系统中,用户还可以在手机屏幕上添加网页程序和自定义功能,无需下载安装,实现离线状态下运行和推送通知等,从一个简单网页变成了一个小型应用,有没有感觉跟前些日子火热的微信“小程序”有几分相似呢?




借鉴
向社交媒体看齐,引入新的内容形式


作为新版网站特色之一,为了优化信息流的展现形式,《福布斯》还借鉴了社交媒体平台snapchat的卡片式界面,将新闻信息用一个个具象化的便签卡片来呈现,用户可以通过滑动屏幕来切换不同内容。



“如今大部分移动端上的文章都只是把PC端上的文字照搬过来重新排了一下格式而已。”扎拉迪莫说:“在设计网页时,我们要跳出PC端的思维模式框架,研究移动端上最好的信息呈现方式,这也是我们为什么要从snapchat上寻找灵感的原因,毕竟它是一个纯粹基于移动端的社交平台。”


网站前端进行了如此大规模的“变脸”,会给后台带来什么影响呢?“对于编辑人员而言,他们的工作习惯并不会有太多变化。”扎拉迪莫说:“我们在现有的CMS上使用自定义模板的方式来为移动端编辑内容,这样一来,真正改变的将是记者和各栏目下的作者写手们,没有了以往页面模板的空间限制,有助于他们改变创作思路,适应不同的内容形式。”



畅想
移动端网页会“逆袭”App吗?


目前,《福布斯》网站流量有60%都是来自移动端,并且预计未来这个比例将会上升至80%。新版网站上线后的收效如何呢?数据显示,用户在新页面上的停留时间较以往增加了1倍,成功加载率提升了6倍,并且内容曝光率也上涨了20%。


《福布斯》在PWA基础上,还使用了一种移动网页加速技术AMP(Accelerated Mobile Pages),这也是一项由谷歌开发的优化移动端网页显示技术,能实现页面加载速度提升 4 倍,使用数据流量最多减少10倍。目前除了《福布斯》以外,《华盛顿邮报》和《金融时报》等多家媒体也开始尝试在自家网站上使用PWA+AMP技术,将移动端网页体验优化到比客户端app还要更胜一筹。



还记得当年wap网页盛行的时候,每个人对着手机屏幕上的简单文字来完成浏览、搜索甚至玩游戏“偷菜”等各项操作,但伴随着智能手机的来临,形形色色的客户端填满了我们的“小屏幕”,移动端网页开始逐渐被人遗忘。如今人们又将目光回到了今非昔比的移动端网页上,有人说,拥有了这样的“利器”,移动端网页会不会在将来取代app重回“辉煌时代”?


四个字:任重道远,这些新技术普及起来尚需时日。


其实PWA和AMP技术早在2014年就已推出,在当时互联网技术领域确实引起了不小的轰动,但不久便逐渐冷场。与此类似的微信“小程序”,也是上线时火爆一时,随后热度逐渐降低。为什么这些“小程序”仍难以取代用户对“大程序”的使用习惯呢?



原因也许就是一个“小”字,尽管“小而简”,却难以满足用户“多而全”的功能需求,使得用户反响与预期尚有一定差距。但毫无疑问的是,“小程序”式网页的优点还是很明显的,例如加载快、占用系统资源低、无需下载等。所以,互联网web时代从未离去,移动端网页在向着app优化,这是趋势,更是好事。


本文由“人民日报媒体技术”出品,转载使用请注明出处。

部分内容参考来源:

[1] Joseph Lichterman,Forbes rebuilt its new mobile website as a Progressive Web App:http://www.niemanlab.org/2017/03/forbes-rebuilt-its-new-mobile-website-as-a-progressive-web-app/

[2] Paul Bakaus,Progressive Web AMPs,https://www.smashingmagazine.com/2016/12/progressive-web-amps/

[3] https://www.forbes.com/

[4] https://developers.google.com/web/progressive-web-apps/

[5] https://www.ampproject.org/




选择“识别图中二维码”,关注“人民日报媒体技术”官方微信公号。