標籤：style http java color 使用 strong
Yslow是一套雅虎的網頁評分系統，詳細的列出了各項影響網頁載入速度的參數，這裡不做多說。
我之前就一直參考Yslow做部落格最佳化，經過長時間的學習也算是有所收穫，小博的YslowV2分數達到了94分（偶耶！），如果換用部落格類小網站評分標準更是可以達到滿分。
下面我就總結幾點大家力所能及最佳化方法，分享給各位。
下面貼一下小博全新重新整理的載入圖，下面文章中用得到：
我認為網頁最佳化主要分為兩類，個人稱之為軟最佳化與硬最佳化。軟最佳化主要包括：伺服器緩衝類與瀏覽器本機快取類，這些最佳化主要是參數設定上的改動。而硬最佳化包括：傳輸線路，CDN，HTTP請求數，頻寬等基礎項目。
咱們小部落客要能做的，也是我想介紹的主要是軟最佳化類。
一、Make fewer HTTP requests（減少http請求數）
網頁載入中，每一個檔案都是一個http請求，包括html，js，css，圖片等。而每一個檔案的載入都需要DNS查詢（可忽略），建立串連，發送請求（可忽略），等待回複，下載檔案，總共5個步驟，檔案依次載入，時間就得依次增加，檔案越多，時間越長。
下面看看俺的主機商小張童鞋的部落格載入圖吧：
簡直是一條長龍，橙色JS，藍色HTML，綠色CSS，紫色IMG，雖然1秒多就響應，但最終載入時間為9秒。
而面對這樣的網頁，我們要做的是：
把CSS全都合到一個檔案中去（複製粘貼就行）
把JS全都合到一個檔案中去（複製粘貼就行）
主題中盡量少的使用圖片
如果必須使用圖片，把背景圖片全都合到一個檔案中去（這個用photoshop合成，調用背景圖片時用background:url（all.png） no-repeat 幾px 幾px;來控制背景位置）
把框架頁能去掉的都去了，每一個框架頁等於新開啟一個網頁。
最佳化好之後，整個頁面只有1個js，1個css，1個背景圖片和若干文章圖片頁面載入速度起碼提升2/3。
二、Add Expires headers（添加周期頭）
啥叫周期頭啊，其實就是給檔案一個保質期。
沒到期的直接從本地調用，到期了後就得換新的了。
這個做起來簡單，直接在網站根目錄的.htaccess檔案末尾添加以下代碼就行了（只有LINUX主機有.htaccess）
其中Axxxxxx是時間，單位秒。
| <IfModule mod_expires.c> ExpiresActive On ExpiresDefault A3600 ExpiresByType image/gif A2592000 ExpiresByType image/png A2592000 ExpiresByType image/jpeg A2592000 ExpiresByType text/plain A604800 ExpiresByType application/x-shockwave-flash A2592000 ExpiresByType video/x-flv A2592000 ExpiresByType application/pdf A2592000 ExpiresByType text/html A600 ExpiresByType image/x-icon A2592000 ExpiresByType application/javascript A604800 ExpiresByType text/css A604800 </IfModule> |
這樣設定後，第二次訪問就會直接調用本機快取，僅僅HTML重新下載，速度飛快，
三、Configure entity tags （ETags）（配置實體標籤設定ETAG）
說實在的我也不知道ETAG是個什麼東東，網上的解釋說他相當於一個標籤，來確認瀏覽器緩衝裡的元素是否和原來伺服器上的一致，可是卻沒有說如何設定。終於找到了一篇如何設定的文章，可作者也是不太懂，作者就是萬戈大俠了。
他的方法是，在.htaccess中加入這句話。
FileETag none
說實話我並沒有明白為什麼要設定成none，不過它起作用了，Yslow這項的評分到了A，肯定是有好處的，這就足夠了。
四、最佳化外部調用順序。（個人想法，也許有錯）
這一點是最容易被忽略的。
據我觀察，網頁載入的時候所有元素不是同時一起載入的，但也不是one by one這麼著載入的，它有一個少數串連並發下載的情況，觀察文章頭部小博的載入圖，第1-3個圖片就是並發的。所以調用順序決定了載入順序，載入順序決定誰和誰並發。
我做過實驗，如果JS檔案放在<head></head>中，他會跟隨HTML與CSS一同載入，然後等JS載入完成後才載入所有圖片，如果JS太肥了的話，這樣效率很低，JS要是卡住了，網頁更是死活不出來。
那麼把JS放在body的footer中，情況就會改善很多，JS跟隨大批圖片一起載入，共用時間，如文章頭部小博載入圖。
而且最重要的是，html載入完畢就可以顯示DOM元素了，不需要等待JS完畢再顯示。
五、伺服器緩衝
老話題了，WP一般使用外掛程式緩衝，我使用的是WP-CACHE，它可以使平時需要1秒左右載入的HTML在幾十毫秒內載入。
配合圖片本機快取，二次開啟的頁面基本是秒開。（這就是小博的平時載入速度了）：
六、其他
其他就剩下一些零碎的最佳化了，這些影響比較小。
比如把主題中所有不經常更改內容的php語句直接改成文字，比如部落格名神馬的。
還有，CSS，JS壓縮，小一點就快一點。
本地DNS的選擇（在網卡屬性裡），第一次訪問時，DNS-LOOK-UP（DNS查詢）也是佔了相當時間的，如果你的DNS的ping較高。
COOKIE-FREE 網域名稱設定：意思就是每次建立串連的時候，用戶端都要先發一份COOKIE到伺服器去，而設定COOKIE-FREE後就可以省下這點時間了。個人覺得沒多少時間，不發COOKIE後，使用者評論資訊還要自己寫，體驗不好，不建議設定。
就先寫這麼多，剩下的想到了再補。轉載請註明出處。
我了個槽哦，發完文章後又測了一遍YSLOW，變100分了，上一回得100還是小學二年級的事兒呢。
老柴
原文地址：http://laochai.net/49
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
