废话不说，上图
注：
正式站：http://news-af.op-mobile.opera.com
测试站：https://n-infra-app-14-8888.ams.op-mobile.opera.com/
/news/detail/e00b1db2ad5bb1b9e0a7fd391d2fecc9?country=ly&language=ar&share=1
测试连接:
news-af.op-mobile.opera.com/news/detail…
优化前：
优化后：
请忽略 www.youtube.com
明显两个变化：
- 移除阻塞渲染的资源 （优化掉了）
- android-age.css 从
9kb => 3kb
如何做到这些呢? 操作如下：
- 第一条的解决方法就是了解浏览器渲染机制
深入浅出浏览器渲染原理
浏览器是怎样加载js代码的？
简单讲就是：JS 全阻塞，CSS 半阻塞
处理方式就是js和css都放到</body>之前 - 移除unnecessary css
在chrome devtools查看
coverage
优化前：
css文件未使用率降低了20个百分点，total bytes从 2.9M 降低到了 1.2M;
本想采用 css-tree-shaking 去优化css,
文章地址：css-tree-shaking；
but purcss-plugins 不支持模板语法，尝试几次了，果弃~
看图片优化：
服务端处理：显示图片过大了，img.transcoder.opera.com 进行图片压缩,加缓存
前端处理： 将图片进行懒加载，采用lazyload lazyload;
优化后结果：
google analytics地址：Analytics
参考文章：
