記一次9kb => 3kb;

廢話不說，上圖

注：
正式站：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

明顯兩個變化：

1. 移除阻塞渲染的資源 （優化掉了）
2. android-age.css 從 9kb => 3kb

如何作到這些呢? 操做以下：

1. 第一條的解決方法就是了解瀏覽器渲染機制
   深刻淺出瀏覽器渲染原理
   瀏覽器是怎樣加載js代碼的？
   簡單講就是：JS 全阻塞，CSS 半阻塞
   處理方式就是js和css都放到</body>以前
2. 移除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 爲 98， 沒有了優化建議；

google analytics地址：Analytics

參考文章：

1. Chrome渲染性能；
2. Chrome審查規則；