Google 推出 nginx 上的 PageSpeed 模組

Google 推出了 nginx 上的 Page Speed 模組:「ngx_pagespeed」,想做的事情與 apache 上的 mod_pagespeed 相同,利用各種技術加速網頁的速度:

Nginx module created by Google to help Make the Web Faster by rewriting web pages to reduce latency and bandwidth. It started as a port of mod_pagespeed to Nginx, and for now the documentation links below still all point to mod_pagespeed's documentation.

看之後會不會變成 PPA 裡的一包吧...

Adobe Typekit 對 PageSpeed 的妥協

Adobe Typekit 是個收費的網頁字型服務,為了讓變更可以儘快生效,用了比較短的 cache time:

We use a short cache time for the kit JavaScript so that you can update your kit (for example, adding fonts, or changing the list of allowed domains) and have your changes live in a reasonable amount of time.

但這也造成了不少人抱怨 Google PageSpeed Tools 會扣分,而實際上也的確降低效率 (因為你不需要天天改設定):

Adobe 給了妥協的方案,你可以選擇使用更長的 cache time,從本來的 10 mins 變成 1 week:「Improved caching for kits: Opt for longer cache timeout」。

這個選項使得 Google PageSpeed Tools 不會扣分,也讓效能再更好一些。

Google Chrome 上面的畫面截圖套件

記得之前有提到最多人裝的那幾個 extension 都有嵌入各種 malware 或 spyware,所以試著找有哪個是正常的... 後來想到用 GoogleGitHub 上的 open source 專案,找到這個:「One-click full page screen captures in Google Chrome」,官方說明頁面在「Full Page Screen Capture Chrome Extension」:

It’s open source (on github) and malware free.

看起來這個應該是可以用的... 看起來很久沒更新了,不過實際測試還是會動的 :p

Mozilla Developer Network (MDN) 上的 JavaScript 教學

Mozilla Developer Network (MDN) 寫了一篇關於 JavaScript 的介紹文章,算是以現在的角度來教 JavaScript:「A re-introduction to JavaScript (JS tutorial)」。

不是給完全不懂的人入門看的,而是對程式語言有了解的人看的。

文章裡面不單純只是教學,還引用了許多重要的文獻,尤其是 ECMAScript 規格書。有想要考據確認規格書怎麼定義會很方便。

而最後面還提到了 browser 上 DOM 實作時的 memory leak 問題以及解法,這對於現在 single page application 的應用也愈來愈重要了。

Google Chrome 41 的加速改善

在「New JavaScript techniques for rapid page loads」這篇提到了 Google Chrome 41 對網頁速度的改善,尤其是 JavaScript 很多的情況下:

另外 Google Chrome 42 則會再透過 cache 加速 (目前的穩定版是 41):

Chrome 42 introduces an advanced technique of storing a local copy of the compiled code, so that when the user returns to the page the downloading, parsing, and compiling steps can all be skipped. Across all page loads, this allows Chrome to avoid about 40% of compile time and saves precious battery on mobile devices.

jQuery 這類經常被重複載入的程式碼將會被 compile + cache,大幅加快頁面呈現的速度。

從另外一方面觀察,已經進展到使用 cache 機制加速,看起來其他的都做的差不多了?

網頁大小的分析...

Zite 上看到「The average web page has grown 151% in just three years」,對網頁大小提出三點分析...

直接列出這三點:

  • The average top 1,000 web page is 1575 KB.
  • More than half of this size is due to images.
  • Flash is on the decrease. Custom fonts are on the increase.

前面兩點其實不意外,網頁大小不斷成長、圖片是流量的大宗。但第三點比較有趣,使用自訂字型的網頁急速成長...

快超越 Flash 的使用率了?

Google 推出的 Page Speed Service

Google 在全球的機房數量當然是一個賣點,不過除了 Geo-based 外,Google 還做了很多很多調整,至於這些調整會不會讓效能變好,就不曉得了...

Google 的說明頁面上以 www.ramkikrishnan.com 這個網站當作範例,目前這個網站是指回 original site,如果你要看輸出效果的話可以設 proxy 到 ghs.google.com 硬抓 www.ramkikrishnan.com 的 html 下來看,我把 diff 結果貼到這邊

可以看出 Google 做了一些事情:

  • 重新判讀 html 後再丟出來,所以有些 html attribute 的順序被改變。
  • 如果配合 IE 的 conditional comments 讀入其他的 css,順序有可能被改變,但不確定是 Google 沒有針對 IE 的 conditional comments 判斷,還是將 css 讀出來後認為順序沒有差異 (我是用 curl 去抓,會因為 User-agent 給不同內容嗎?不確定...)。
  • 上面除了可能是 conditional comments 的處理外,也有可能是把 link 放到 script 後面,或是因為要放到 head 尾段造成的。
  • 會把 © 轉成 ©,但也會把 ' 轉成 ',看不太出來原因是什麼...

目前還看不出來比較複雜的 case,等帳號下來後再實際測試看看會比較準...