Intro Web Performance

Afu Tseng (曾坤福) PIXNET 技術研發部前端組 Intro Web Performance 倫敦會議室∘2015.10.16

不容忽視的網站效能？

不容忽視的網站效能 • Amazon: 每次加快 100ms 速度，營收成⻑⾧長 1% • AOL 發現網站瀏覽速度在前
10% 的訪客，相較於末 10% 會看更多⾴頁⾯面 IUUQTXXXqJDLSDPNQIPUPTKFUPX

不容忽視的網站效能 (續) • Yahoo: 每加快 400ms 速度，流量成⻑⾧長 9% • Mozilla:
網站載⼊入速度加快 2.2 秒使每年 Firefox 下載數成⻑⾧長 6000 萬次 IUUQTXXXqJDLSDPNQIPUPTKFUPX

伺服器篇 !

WebPageTest.org T NT

Chrome Dev Tools - Network • TFFB - Time to
First Byte • 瀏覽器等候收到第⼀一個 Byte 的時間 dT NT

WebPageTest.org

加快伺服器回應時間 (< 200ms) • https://developers.google.com/speed/docs/ insights/Server

伺服器端常⾒見調校⽅方式 • 避免或減少存取資料庫 • 使⽤用後端程式語⾔言的快取機制 • PHP - OPCache (避免重新剖析
PHP 原始碼) • NodeJS - function 限制在 < 600 字元 • 包含註解在內！ (妖術？) • 勤勞升級後端程式語⾔言版本 • PHP 7 效能在 WordPress 等軟體⽐比 PHP 5.5 提昇 100%

NodeJS : A quick optimization advice • https://top.fse.guru/nodejs-a-quick-optimization- advice-7353b820c92e •
node --max_inlined_source_size=600 example.js • 左圖案例效能增進 50%

傳輸篇 "

下載時間越快越好 • 盡量提供體積⼩小的檔案 • (圖⽚片/字型/JS.. 等)

PageSpeed   Insights 最佳化圖⽚片

JPG 格式，1440 x 600，359 KB 90 % quality

JPG 格式，1440 x 600，280 KB 80% quality

JPG 格式，1440 x 600，244 KB 75% quality

圖⽚片壓縮⼯工具 (無損壓縮) • ImageOptim (Mac) • https://github.com/pornel/ImageOptim • pngquant (Command-Line
Interface) • https://github.com/pornel/pngquant • ⽐比 PNG 原圖瘦⾝身 70%

JPG 格式，1440 x 600，344 KB 90 % quality, ImageOptim, —4%
size

PageSpeed   Insights 最佳化圖⽚片 • 09/10 實測 • 許多 PNG
icon   尚有壓縮空間

PageSpeed Insights 最佳化圖⽚片  (續上⾴頁) • 以不失真⽅方式壓縮 http://front.pixfs.net/css/mobile/styles/images/zoom_out.png 可將檔案⼤大⼩小減少 2.7KB (減少幅度為
87%)。 • 以不失真⽅方式壓縮 http://front.pixfs.net/…css/mobile/styles/images/pixnet-logo.png 可將檔案⼤大⼩小減少 1.3KB (減少幅度為 31%)。 • 以不失真⽅方式壓縮 http://s.pixfs.net/blog/images/choc/avatar-neutral.png 可將檔案⼤大⼩小減少 1.2KB (減少幅度為 48%)。 • 以不失真⽅方式壓縮 http://s2.pimg.tw/…isko/0/0/zoomcrop/90x90.png?v=1441130749 可將檔案⼤大⼩小減少 1.2KB (減少幅度為 14%)。 • 以不失真⽅方式壓縮 http://front.pixfs.net/…bile/images/icons/openid-google-icon.png 可將檔案⼤大⼩小減少 1.1KB (減少幅度為 49%)。 • 以不失真⽅方式壓縮 http://r-ec.bstatic.com/…c730e41524bfc0c2306d6d4a5c4a8a315185.png 可將檔案⼤大⼩小減少 977B (減少幅度為 28%)。 • 以不失真⽅方式壓縮 http://front.pixfs.net/…bile/images/icons/openid-pixnet-icon.png 可將檔案⼤大⼩小減少 967B (減少幅度為 69%)。 • 以不失真⽅方式壓縮 http://front.pixfs.net/css/mobile/styles/images/zoom_in.png 可將檔案⼤大⼩小減少 946B (減少幅度為 70%)。 • 以不失真⽅方式壓縮 http://front.pixfs.net/css/mobile/styles/images/arr-all.png 可將檔案⼤大⼩小減少 868B (減少幅度為 85%)。 • 以不失真⽅方式壓縮 http://s.pixfs.net/mobile/images/icons/comment_add_B.png 可將檔案⼤大⼩小減少 865B (減少幅度為 71%)。 • 以不失真⽅方式壓縮 http://front.pixfs.net/css/mobile/styles/images/icon-up.png 可將檔案⼤大⼩小減少 849B (減少幅度為 38%)。 • 以不失真⽅方式壓縮 https://googleads.g.doubleclick.net/simgad/7832239255609163457 可將檔案⼤大⼩小減少 846B (減少幅度為 5%)。 • 以不失真⽅方式壓縮 http://front.pixfs.net/css/mobile/styles/images/point.png 可將檔案⼤大⼩小減少 844B (減少幅度為 91%)。

PageSpeed Insights 最佳化圖⽚片 • 使⽤用 pngquant 批次壓縮 PNG icon •
$ cd mobile-asset-images • $ pngquant --quality=50-60 *.png --ext=.png --force

PageSpeed Insights 壓縮 JavaScript • jQuery v1.11.1，未壓縮，283KB (Gzip: 82.7 KB)

PageSpeed Insights 壓縮 JavaScript • jQuery v1.11.1，壓縮，96KB (Gzip: 32.9 KB)

minify tools • UglifyJS, https://github.com/mishoo/UglifyJS2 • UglifyCSS, https://github.com/fmarcia/UglifyCSS

No CDN :( ! # $ % $ ! 0SJHJO4FSWFS
6TFS #%

CDN :) ! $ % $ ! $POUFOUFEHF4FSWFS 6TFS %
# # ! ! ! ! 0SJHJO4FSWFS

瀏覽器篇 # $ & % '

PageSpeed Insights   清除禁⽌止轉譯 JavaScript & CSS • 22 項禁⽌止轉譯指令碼資源和
5 項禁⽌止轉譯 CSS 資源，對網⾴頁的轉譯作業造成延遲。

PageSpeed Insights   清除禁⽌止轉譯 JavaScript & CSS • 盡量把外部 <script>
搬到⾴頁⾯面底部 (</body> 前) • 放在 <head> 裡的 <script> ，如果沒有相依性，可以加上 async 屬性避免 block browser render • 例如 Google Adsense (adsbygoogle.js)

PageSpeed Insights   清除禁⽌止轉譯 JavaScript & CSS

PageSpeed Insights   清除禁⽌止轉譯 JavaScript & CSS • 1 項禁⽌止轉譯指令碼資源和
4 項禁⽌止轉譯 CSS 資源，對網⾴頁的轉譯作業造成延遲。 • ⾏行動網⾴頁上升⾄至 69 / 100 速度 • 持續努⼒力試著搬⾛走 jQuery

總結 • 運⽤用各種⼯工具持續找出效能瓶頸，改善它

References • 15 ways to speed up your site, http://www.slideshare.net/wrttnwrd/15-ways-to-speed-up-your-site
• Modern Performance Best Practices, https://speakerdeck.com/dustinwhittle/modern-performance-best- practices • Google: 打造優異的網路體驗 - 效能最佳化 https://developers.google.com/web/fundamentals/performance/ • Performance RAIL’s by Ilya Grigorik, https://docs.google.com/presentation/d/ 13AJe2Ip4etqA8qylrva7bEgu1_hAvsq_VQiVOAxwdcI/present? • Delivering the goods in under 1000ms by Paul Irish, https://docs.google.com/presentation/d/ 1MtDBNTH1g7CZzhwlJ1raEJagA8qM3uoV7ta6i66bO2M/present? • Oh really, why is that? by Ilya Grigorik, https://www.igvita.com/slides/2012/web-performance-for-the- curious/ • #perfmatters - Performance Tooling by Paul Irish https://docs.google.com/presentation/d/ 19R_E5B__kdE55L1bTpS6IFKbYbHq-PQKKky4do5Yc6A/edit?pli=1#slide=id.g105c64d69_170

Q & A @afutseng

Intro Web Performance

Intro Web Performance

More Decks by chph

Other Decks in Technology

Featured

Transcript