【轉】加快網站訪問速度——Yslow極限優化

時間 2019-11-18

標籤加快網站訪問速度 yslow 極限優化欄目網站開發简体版

原文原文鏈接

Yslow是一套雅虎的網頁評分系統，詳細的列出了各項影響網頁載入速度的參數，這裏不作多說。javascript

我以前就一直參考Yslow作博客優化，通過長時間的學習也算是有所收穫，小博的YslowV2分數達到了94分（偶耶！），若是換用博客類小網站評分標準更是能夠達到滿分。php

下面我就總結幾點你們力所能及優化方法，分享給各位。css

下面貼一下小博全新刷新的載入圖，下面文章中用獲得：html

我認爲網頁優化主要分爲兩類，我的稱之爲軟優化與硬優化。軟優化主要包括：服務器緩存類與瀏覽器本地緩存類，這些優化主要是參數設置上的改動。而硬優化包括：傳輸線路，CDN，HTTP請求數，帶寬等基礎項目。java

我們小博客主要能作的，也是我想介紹的主要是軟優化類。瀏覽器

1、Make fewer HTTP requests（減小http請求數）緩存

網頁載入中，每個文件都是一個http請求，包括html，js，css，圖片等。而每個文件的載入都須要DNS查詢（可忽略），創建鏈接，發送請求（可忽略），等待回覆，下載文件，總共5個步驟，文件依次載入，時間就得依次增長，文件越多，時間越長。服務器

下面看看俺的主機商小張童鞋的博客載入圖吧：併發

簡直是一條長龍，橙色JS，藍色HTML，綠色CSS，紫色IMG，雖然1秒多就響應，但最終載入時間爲9秒。app

而面對這樣的網頁，咱們要作的是：

把CSS全都合到一個文件中去（複製粘貼就行）

把JS全都合到一個文件中去（複製粘貼就行）

主題中儘可能少的使用圖片

若是必須使用圖片，把背景圖片全都合到一個文件中去（這個用photoshop合成，調用背景圖片時用background:url（all.png） no-repeat 幾px 幾px;來控制背景位置）

把框架網頁能去掉的都去了，每個框架網頁等於新打開一個網頁。

優化好以後，整個頁面只有1個js，1個css，1個背景圖片和若干文章圖片頁面載入速度起碼提高2/3。

2、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從新下載，速度飛快，如圖：

3、Configure entity tags （ETags）（配置實體標籤設置ETAG）

說實在的我也不知道ETAG是個什麼東東，網上的解釋說他至關於一個標籤，來確認瀏覽器緩存裏的元素是否和原來服務器上的一致，但是卻沒有說如何設置。終於找到了一篇如何設置的文章，可做者也是不太懂，做者就是萬戈大俠了。

他的方法是，在.htaccess中加入這句話。

FileETag none

說實話我並無明白爲何要設置成none，不過它起做用了，Yslow這項的評分到了A，確定是有好處的，這就足夠了。

4、優化外部調用順序。（我的想法，也許有錯）

這一點是最容易被忽略的。

據我觀察，網頁載入的時候全部元素不是同時一塊兒載入的，但也不是one by one這麼着載入的，它有一個少數鏈接併發下載的狀況，觀察文章頭部小博的載入圖，第1-3個圖片就是併發的。因此調用順序決定了載入順序，載入順序決定誰和誰併發。

我作過實驗，若是JS文件放在<head></head>中，他會跟隨HTML與CSS一同加載，而後等JS加載完成後才加載全部圖片，若是JS太肥了的話，這樣效率很低，JS要是卡住了，網頁更是死活不出來。如圖：

那麼把JS放在body的footer中，狀況就會改善不少，JS跟隨大批圖片一塊兒載入，共用時間，如文章頭部小博載入圖。

並且最重要的是，html載入完畢就能夠顯示DOM元素了，不須要等待JS完畢再顯示。