说到Web页面的性能，很多人都要拿Native的页面来对比了，确实原生页面的性能比Web页面的性能要好很多，但是不能快速迭代也是原生应用的一个痛点。两方都在寻求平衡点，客户端同学一直在寻找合理的热更新机制，Web前端同学一直在寻找让页面性能体验接近原生应用的方案。
同时这几年还出现了ReactNative、Weex这些流行的跨端技术，除了使用一套代码能同时运行在三端（Android、iOS、PC）的好处之外，还能拥有像Web页面快速迭代的能力和接近原生应用的性能体验，但是这类技术在对Android/iOS的NativeView的封装过程中，存在很多难以逾越的障碍，例如双端一致性问题、难以实现复杂样式问题等。
再后来，又出现了当前很火的Flutter跨平台技术，解决了ReactNative和Weex难以解决的多端一致性问题，渲染性能优于Web应用，但Flutter上层采用Dart语言，没有利用到前端最强大的JavaScript生态，社区还不成熟。
对于前端开发者来说，虽然是在这个移动端主导的时代，但很多公司Web页面的开发还是占据主要部分。当然，不管是使用哪种渲染引擎，渲染性能和体验是有差异，但加载性能使用的方案大体相同。
既然还是有很多的Web页面需要开发，那Web页面的性能也是我们需要面对的问题。但是话说回来，为什么要优化性能呢？做这个事情有什么价值呢？
??直观感觉用户体验我们先来看一组BadCase和GoodCase，从左到右直观感觉是越来越好的。
第1张，基本不可访问
第2张，白屏时间较长，还没有加载中的提示，性能不好体验也不好
第3张，性能不好，但通过增加有趣的动画填补白屏时间提升了感知性能，体验还可以
第4张，我们完全看不到白屏和加载中的状态,性能体验棒棒的
等待页面呈现的过程容易让用户焦躁，好的情况下会有短暂的加载过程，糟糕的情况下网站完全不可访问，我们从直观感受上就能知道，我们自己作为用户，也经常会因为页面糟糕的性能放弃下一步操作，即使用户愿意等待，也给用户带来了不好的产品使用体验。
单纯从站在服务好用户的角度，我们需要去重视我们的产品给用户带来的性能体验，让我们开发的页面不仅可用、易用，还要让用户爱用。
??数据支撑业务价值作为一家盈利性公司，特别是电商网站，除了站在服务好用户的角度，网站的性能体验对于业务价值的影响也值得探索。
在WPOstats这个网站中有很多通过优化性能带来业务价值的案例，我们来挑选几个看看这些案例使用了哪些优化方案，又带来了怎样的业务价值。
案例一
Furnspace是个在线家具和家居装饰配件售卖网站，网站中有大量高质量的图片导致网页加载速度很慢。
为了解决图像加载而又不牺牲图像质量的问题，通过使用图片引擎ImageEngine识别用户的屏幕、视区尺寸、屏幕分辨率、操作系统和图像文件类型等信息实时调整、转换和压缩图像，给用户传输合适尺寸和质量的图像，从而加快图像的显示速度。
最终，Furnspace减少了86%的图像加载，从而减少了65%的加载时间。改进后的用户体验帮助Furnspace的线上购买转化率翻了一倍，跳出率降低了20%，移动收入增加了7%，SEO也得到了显著改善。
案例二
法国优惠券网站radins.