最近 Blog 更新比較勤快，也多了很多新的訪客和讀者，其中不少和我反應網站從國內訪問比較慢。我就想着要去優化一下以照顧國內的讀者們訪問體驗，於是就有了這篇文章。
首先感謝 @lepture 的友情指導，在他的指導下，我的 Blog 在國內網絡的訪問速度，從原本可能要 2.5 秒，變成只要 0.8 秒左右，幾乎是原來的 1/3。可以說有了巨幅提升。而這一切僅僅是在一個非常簡單的優化下達成的，也沒有花一分錢。下面我就簡單的介紹一下這個過程。
優化原理
想要提升網站的訪問速度，基本上切入點無非是優化前后端的訪問性能。第一步肯定是 Profile，通過各種方法，看看速度的瓶頸在哪里。關於后端性能的 Profile，可以看我這篇《為 Nginx 啟用帶請求消耗時間的 access log》。
我的 Blog 架構比較簡單，問題不出在后端，通過 Chrome 的 Developer Tools 的 Network 可以評測得出，還是出在網絡訪問性能上：這個 1KB 的 JS 文件和 193 KB 的 CSS 文件，一共花了 1.5s 秒才載入成功。整體的載入性能（以 DOMContentLoaded 為准），也因此達到了 2.61 秒。見圖：
這時優化思路就比較簡單了，那就是上 CDN 來加速。這時可以考慮用 Cloudflare。不過小明告訴了我一個更合適的思路，那就是將 JS+CSS 資源做成 npm 包，然后通過免費的全球加速的 jsDelivr 服務來加速訪問，整個過程也相對簡單。於是我就采用了這種方式。
使用 npmjs + jsDelivr
我的網站是基於 Django 構建的，因此在工具流上面需要做不少的改進，才能完美的結合這套 npm + jsDelivr 的靜態資源部署。在寫這篇文章的時候，我目前還是手動部署，接下去我會優化流程再寫一篇。於是現在的手動部署適合任何用到靜態資源並需要加速訪問的網站。
第零步：創建 npmjs 賬號
由於我們要把網站靜態資源作為 npm 包的形式放在 npmjs.org 網站上，於是首先需要注冊一個賬號。
第一步：建立並發布 imtx npm 包
創建一個目錄，然后放一個名為 package.json 的文件，寫簡單的兩行即可：
{
"name": "imtx", "version": "1.0.0" }
將 imtx.js 和 imtx.css 放置其中，然后執行 npm publish，即可發布一個名為 imtx 的 npm 包了。
第三步：使用 jsDelivr 來引用這個包
發布完這個 npm 包后，就可以在線使用它了，怎么用？很簡單，在 HTML 模版里面，根據版本號引用在 jsDelivr 的地址：
https://cdn.jsdelivr.net/npm/imtx@1.0.0/imtx.js
和：
https://cdn.jsdelivr.net/npm/imtx@1.0.0/imtx.css
這樣，你的網站的資源文件，就通過 jsDelivr 這個全球加速的 CDN 來訪問了。
值得一提的是，如果你也是 Django 項目，那么有必要在 HTML 模版里通過判斷是不是 debug （這個 debug 需要在 INTERNAL_IPS 去指定）環境來分別考慮本地加載還是從 jsDelivr 加載，這樣就不會影響開發工作了。
{% if debug %}
{% stylesheet "imtx" %}
{% else %}
<link href="https://cdn.jsdelivr.net/npm/imtx@1.0.0/imtx.css" rel="stylesheet" type="text/css" media="screen"> {% endif %}
驗收結果
使用 jsDelivr 來訪問靜態資源文件后，效果如何？繼續用 Chrome 來 Profile 一下，發現這兩個資源文件的訪問已經減少到 500ms 以內了，DOMContentLoaded 的完成也只需要 761ms。效果立竿見影！
后續
完成了這個基本優化后，在國內訪問我的主頁基本上 1 秒內是可以打開了，雖然還遠遠算不上快，但基本上不會讓人覺得不耐煩了。后面可以繼續做的一些優化是：
- 優化文章圖片等靜態資源等訪問（這部分才是大頭）；
- 優化部署工作流：每次更新 JS 和 CSS，不僅需要和 Django 的那套結合起來更新版本號，也要去自動更新模版里面的引用文件，這些需要下一番功夫；
- 優化后端性能，榨干它！
最后，再次感謝小明同學的指導。值得一提的是，小明的 Typlog 服務也使用類似的機制使訪問速度很快。有做獨立 Blog 站點需求的同學，可以訪問：https://typlog.com 了解更多。