再正文之前先貼上優化後的個人部落格：http://散.top/
（本人學是的javaEE，因此虛擬主機不能在上面跑，只能寫靜態的掛上面玩。。）

為什麼要優化網頁載入速度？

引用下別人的話：
好奇心日報無論是設計還是內容都追求高品質，於是豐富的圖文混合成了標配：首頁的banner圖，文章詳情頁的配圖，研究所有趣的gif圖等等。
特別嚴重的時候，一篇文章有十多個gif圖，載入花費的時間10-20秒之長，載入消耗的流量幾十M之多，嚴重影響了使用者體驗！尤其是Mobile端，一寸流量一寸金；3-5s打不開頁面，使用者都會直接逃離。所以網頁載入速度優化勢在必行！

我們都知道一個網頁的載入流程大致如下： 1、解析HTML結構。 2、載入外部指令碼和樣式表文件。 3、解析並執行指令碼程式碼。//
部分指令碼會阻塞頁面的載入 4、DOM樹構建完成。//DOMContentLoaded 事件 5、載入圖片等外部檔案。
6、頁面載入完畢。//load 事件
一句話就是：請求HTML，然後順帶將HTML依賴的JS/CSS/iconfont等其他資源一併請求過來。
那麼優化網頁的載入速度，最本質的方式就是：減少請求數量 與 減小請求大小。

拿我的部落格為例，因為這個設計網站有點特殊。全部內容都寫在同一個頁面中，1000行左右的程式碼。幾十張大小不一的圖片，還引用了Jquery+boostrap等框架。因此優化在此就顯得相當重要了。

圖片壓縮：

首先要優化的是圖片！沒錯，剛寫完網站的時候，只是把素材來使用，完全沒有考慮到影象大小之類的問題，而虛擬主機問了免繁瑣的備案用了香港伺服器，速度方便有點不盡人意。

先看優化前的一張大圖
優化後：
優化前小圖：
優化後：

經過ps壓過後的大小可以大幅度加快載入速度！而且在很多圖的頁面下更為明顯，在壓縮的時候，可以根據自己的需要進行級別壓縮，壓縮太大的話會導致圖片質量下降。
這裡介紹下ps怎麼對圖片進行壓縮，其他工具另行百度。
如果沒有什麼要求的話，首先對圖片大小進行裁剪-開啟ps-影象-影象大小。然後按自己需求進行裁剪。
 

然後進行圖片質量的壓縮,按ctrl+shift+s另存為

可以對品質進行選擇，級別越低圖片大小越小，通過圖片也越模糊。也可以滑動進行調整。

HTML優化

引用地址：http://blog.csdn.net/for_cxc/article/details/50488287

如何加快HTML頁面載入速度
1. 頁面減肥：
a. 頁面的肥瘦是影響載入速度最重要的因素。
b. 刪除不必要的空格、註釋。
c. 將inline的script和css移到外部檔案。
d. 可以使用HTML Tidy來給HTML減肥，還可以使用一些壓縮工具來給JavaScript減肥。
2. 減少檔案數量：
a. 減少頁面上引用的檔案數量可以減少HTTP連線數。
b. 許多JavaScript、CSS檔案可以合併最好合並，人家財幫子都把自己的JavaScript. functions和Prototype.js合併到一個base.js檔案裡去了。
3. 減少域名查詢：
a. DNS查詢和解析域名也是消耗時間的，所以要減少對外部JavaScript、CSS、圖片等資源的引用，不同域名的使用越少越好。
4. 快取重用資料：
a. 對重複使用的資料進行快取。

1. 優化頁面元素載入順序：
   a. 首先載入頁面最初顯示的內容和與之相關的JavaScript和CSS，然後載入HTML相關的東西，像什麼不是最初顯示相關的圖片、flash、視訊
   等很肥的資源就最後載入。
2. 減少inline JavaScript的數量：
   a. 瀏覽器parser會假設inline JavaScript會改變頁面結構，所以使用inline JavaScript開銷較大。
   b. 不要使用document.write()這種輸出內容的方法，使用現代W3C DOM方法來為現代瀏覽器處理頁面內容。
3. 使用現代CSS和合法的標籤：
   a. 使用現代CSS來減少標籤和影象，例如使用現代CSS+文字完全可以替代一些只有文字的圖片。
   b. 使用合法的標籤避免瀏覽器解析HTML時做“error correction”等操作，還可以被HTML Tidy來給HTML減肥。
4. Chunk your content：
   a. 不要使用巢狀table，而使用非巢狀table或者div。將基於大塊巢狀的table的layout分解成多個小table，這樣就不需要等到整個頁面（或
   大table）內容全部載入完才顯示。
5. 指定影象和table的大小：
   a. 如果瀏覽器可以立即決定影象或table的大小，那麼它就可以馬上顯示頁面而不要重新做一些佈局安排的工作。
   b. 這不僅加快了頁面的顯示，也預防了頁面完成載入後佈局的一些不當的改變。
   c. image使用height和width。
   HTML頁面載入和解析流程
6. 使用者輸入網址（假設是個html頁面，並且是第一次訪問），瀏覽器向伺服器發出請求，伺服器返回html檔案。
7. 瀏覽器開始載入html程式碼，發現標籤內有一個標籤引用外部CSS檔案。
8. 瀏覽器又發出CSS檔案的請求，伺服器返回這個CSS檔案。
9. 瀏覽器繼續載入html中部分的程式碼，並且CSS檔案已經拿到手了，可以開始渲染頁面了。
10. 瀏覽器在程式碼中發現一個標籤引用了一張圖片，向伺服器發出請求。此時瀏覽器不會等到圖片下載完，而是繼續渲染後面的程式碼。
11. 伺服器返回圖片檔案，由於圖片佔用了一定面積，影響了後面段落的排布，因此瀏覽器需要回過頭來重新渲染這部分程式碼。
12. 瀏覽器發現了一個包含一行Javascript程式碼的

總結：

對於我們新手而言，我個人覺得對優化效果最大的如下幾個：
    1。圖片大小的壓縮。
    2.image使用height和width。
    3.其次是外部css要放在js的前面。樣式顯示是首要的，而事件是次要的。

    對於新手上面那些優化之後，頁面載入已經很明顯了。再想優化可以瞭解更深入，畢業我也剛接觸不久。
    想看到網站載入時間速度可以用火狐按F12，然後點選網路。在最右邊可以觀察資源載入的速度，對此採取解決方案。

有什麼建議可以留言，不對的也可以指正哈。