網頁效能調校方向及工具 (Web Performance Tips & Tools) - YSlow, Google Page Speed

從Tim Berners-Lee發明WWW以來，Web已經過17、18個年頭的發展
其成長速度 是呈指數型的爆炸性成長
Web的爆炸性成長 讓Browser變成每人每天最常使用的軟體、介面
從最原始的資訊呈現用途 到現在成為一應用程式的平台
從 HTML5, O3D, Native Client, Chrome OS, ... 都可以感覺到，未來的Web 只會更重要...

一個好的網站 在效能面 是非常重要的
如果網頁回應速度太過、呈現速度太慢 即使有好的應用、好的內容 但還是會被使用者所唾棄。
那到底要怎麼建構一個效能佳的網頁? 有什麼好的實務作法(BestPractice)? 有什麼工具可以幫忙檢查?

下列的參考文章，分別是Yahoo & Google針對網頁開發在效能面的最佳實務作法說明，這些文章 提示了網頁開發者一些效能提升的重點(如: 降低Http Request 數，減少網頁及網頁組成之Size, Cache的使用, Http Compression的使用, Content Delivery Network的使用, 網頁及網頁組成在Server端的分散佈署, JavaScript、CSS 在網頁上的放置位置, ... 等)，從基本的觀念、到建階的方法，資訊非常的完整且值得參考，對於網頁效能提升有興趣的人，絕對值得一看!!

此外，Yahoo 及 Google 也各自依各自所提的網頁效能的要點，製做了檢查、分析的工具，讓網頁開發者透過該工具即可很快的知道自已的網頁在效能上還有什麼需要調整改進之處(會產出recommendation report)。這兩個工具分別的 Yahoo YSlow(Firefox的plugin)、Google Page Speed(Firefox上firebug的plugin)，順便一提，在這部分 Yahoo 的資訊分享及工具都比Google還快，Google在這點看來，是me too、是follower :Q 不過 看來 這兩個東西 都跟 Steve Souders有關... Steve 原本在 Yahoo 工作時 發展了YSlow，但 後來跳槽到Google ...
另外，若只是想單純的check 每個網頁、網頁組件的下載速度，Http Watch這個工具，也值得一試。


參考文章:
Yahoo: Best Practices for Speeding Up Your Web Site
Google: Web Performance Best Practices

檢測工具:
Yahoo! YSlow
Google Page Speed
Http Watch

以下，是拿 udn.com (聯合新聞網)為標靶，用YSlow, Google Page Speed來看看這個新網網站的首頁有什麼需要加強的部分 :Q 也讓讀者感受一下，這兩個Tool的威力..

YSlow:



Google Page Speed:

閱讀全文...

Yahoo Pipes: Web資料擷取處理引擎介紹

Yahoo Pipes 可以依你定義的資料流處理方式，幫你進行 web 資料(rss, atom, csv, ..)的擷取、處理、輸出(format: rss, json, ...)

好處是 透過 pipies 作為資料處理引擎，不用將資料處理邏輯放在自家的 server 上 而是 host 在 yahoo

透過拖拉的方式 將資料處理邏輯定義好(如, 取得、匯集、過濾、排序...等) 也可省掉很多 coding的時間及人力

以之前寫的 sample 而言

就是透過 yahoo pipes 裡user定義好的資料處理流程，將 RSS / ATOM feed 轉成 JSON format

以達到 不用 server side code (proxy) 來達到 client 端跨domain 的資料擷取
(註: 因為 Same Origin Policy 的關係，在AJAX的實作中，client side script 不能透過XMLHttpRequest 存取不同domain的web resources，此時 proxy 是一種walkaround來繞過這種問題的解決方式)

這樣，甚至根本就不用 server side 的程式，就可做很多 mashup 的應用 :Q

供各位參考~ 還滿有趣的

閱讀全文...