著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。

（2）網站內容頁面選擇無域名

靜態資源一般無需使用，可以把它們放在使用二級域名或者專門域名的無服務器上，降低傳送的造成的流量浪費，提高響應速度。例如

使用 專門處理圖片請求使用 專門處理腳本請求使用 專門處理網頁請求

當時我們提到的原因是：

提高了下載的并行度由于可以使用多個服務器，所以可以提高服務器的響應能力

其實這種做法還有一個附加的獎勵，以上的三個主機中，應該只有www主機才可能需要保存（它對于圖片和腳本來說是沒有意義的），我們知道會自動地發送給當前域的所有請求，我們通過將圖片和腳本單獨放在一個主機, 所有與www主機關聯的不會發送到主機或者主機，這樣就可以大大地節省網絡流量。

四、CSS

CSS的樣式表在網站中是給與頁面渲染，呈現視覺反饋的作用。在很多時候，網站的美化過后，過度地修改樣式表也會給網站造成很大的負擔。比如：重復性的樣式過多，垃圾無用的CSS樣式沒有清除，引入過多的CSS文件，都會給網站造成負擔。更好地優化樣式表，才能更好地優化網站。

（1）網站把樣式表置于頂部

把樣式表放在中可以讓頁面漸進渲染，盡早呈現視覺反饋，給用戶加載速度很快的感覺。這對內容比較多的頁面尤為重要，用戶可以先查看已經下載渲染的內容，而不是盯著白屏等待。

這一點毫無爭議。HTML規范中都明確地規定，樣式定義（包括直接定義在文檔中的，或者外部引用的樣式表），應該放在HEAD里面，而不應該放在BODY里面（不管是BODY的頂部，中部，甚至是底部）。

這一條原則進一步對此做了解釋，這對于我來說也是一個很有意思的收獲。

之所以放在頂部，是為了提供漸進式呈現（ ）頁面的可能性。也就是說，可以一點一點地，由上而下地呈現內容。這個對于用戶來說，能提供一種較好的用戶體驗。如果放在了底部，很多瀏覽器（尤其是IE瀏覽器）會阻止呈現任何內容，直到加載了這些樣式表。這是為什么呢？如果它在沒有加載樣式表之前呈現了那些內容，當然是可以的。但大家可以試想一下，等到它加載了樣式表，它很可能需要重新呈現這些內容。所以，它們為了避免重復地呈現，就干脆什么都不做。取而代之的是，用戶將看到空白如也的一個頁面，然后等到全部加載完成了，再突然出現一大堆內容在他面前。

如果把樣式表放在頁面底部，一些瀏覽器為減少重繪，會在 CSS 加載完成以后才渲染頁面，用戶只能對著白屏干瞪眼網站優化，用戶體驗極差。把樣式表放到文檔的HEAD部分能讓頁面看起來加載地更快。

（2）網站避免使用CSS表達式（）

在設計我們的CSS的時候，很可能會有遇到下面這個情況：

-color: ((new Date()).()%2 ? "#" : "#" );

上面的代碼設計的初衷是為了希望我們擁有定義動態的CSS樣式的能力。

這里可以使用一個特殊的函數，其實這是一個的函數。它可以進行根據一個表達式進行計算，動態地決定-color的值。

看起來是一個相當不錯的功能，但我們可能不會想到這個表達式會運算很多次（這個具體的次數可能遠遠超過你的想象）所以，我們在設計網站的時候，應該盡量避免這種情況，這樣會造成瀏覽器極大的損耗。

（3）網站用代替@導入樣式表

這一條規則其實很簡單，因為瀏覽器兼容的問題，IE中，link和導入樣式表是一樣的，但是現在已經不是IE獨霸天下的時代了，所以，為了更好地兼容各個瀏覽器，網站應該使用link而不是@導入樣式表。

（4）網站避免使用濾鏡

和上一條規則：網站應該使用link而不是@導入樣式表，一樣同理。

這一條原則也是關于標準化設計的問題。濾鏡這個功能也是IE當年為了提供更加豐富的一些頁面效果而設計的（相應的也會有代價）。

其實不僅僅是別的瀏覽器可能不支持，IE 從9.0版本開始也放棄了這方面的支持。

我們可以期待的是，CSS 3.0作為后續的一個版本，會為網頁的特殊效果提供一個標準的支持，也就是CSS3 的。（注意：CSS3的是可以用的）

五、JS

是屬于網絡的腳本語言！ 被數百萬計的網頁用來改進設計、驗證表單、檢測瀏覽器、創建，以及更多的應用。就是因為開發者多，而且功能強大，所以功能上精進的同時，我們也要保證網站的高效。

（1）網站把JS腳本置于頁面底部

瀏覽器下載腳本時，會阻塞其他資源并行下載，即使是來自不同域名的資源。因此，最好將腳本放在底部，以提高頁面加載速度。

一些特殊場景無法將腳本放到頁面底部的，可以考慮

重復的腳本不僅產生不必要的HTTP請求，而且重復解析執行浪費時間和計算資源。

（5）網站減少JS對DOM訪問

操作 DOM 很慢，尤其是 DOM 節點很多時。由于現在有了很多強大的框架和庫，網頁開發人員擁有了前所未有的能力和熱情——通過為網頁添加各種各樣的效果，甚至完全可以從零開始構造一個文檔。這在以往是不能想象的。話說， 這個有點“古老”語言這幾年重新煥發了青春，甚至有一發不可收拾的趨勢，原先的只是編寫客戶端的腳本，現在也可以編寫服務器腳本，甚至還可以編寫桌面程序，程序。

為了幫助大家更加清晰地了解，并且避免常見的一些問題，這里整理列舉一些通用的技巧（部分翻譯來自上述提到的幾個文檔）

永遠使用最新的版本。合并并最小化腳本。盡量使用for，而不是each。盡量使用ID去訪問，而不是class。如果有可能，通過提供上下文，縮小查找范圍。例如 $(, )。對一個元素的多次訪問（尤其在循環里面），可以考慮先用一個變量將其緩存起來，而不是每次都重新查找它。應該盡可能使用到的鏈式選擇方法。在可能的情況下，盡量減少動態插入、添加、刪除元素。（我知道你很多時候做不到這一條）對于要拼接大量字符串的情況，可以考慮使用join方法，而不是函數，或者+= 這樣的運算符。為所有事件的處理函數都返回false。

最后，不要滿足于一些較高層的技巧，要以用戶體驗為主。

（6）網站開發智能事件處理程序

其實這也算不上智能，我們需要了解DOM元素的事件工作機制，就能正常地寫出更好的事件處理程序。

六、圖片

網站的圖片是網站必要資源之一，每一個網站的圖片都要用一個http去獲取。網站的圖片優化是網站必要項目之一。

（1）網站要優化圖像

你可以使用這個工具對gif圖片進行檢查，以確認它們是否還有優化的空間。而且圖片的大小關系都下載的速度，圖片大小的優化是非常重要的。

如果圖片大小太大的話，建議壓縮優化大小之后上傳，不然會影響網站的下載速度。

如果是網站，推薦使用 Jpeg & PNG 這個插件來壓縮，每個月有500張圖片的壓縮額度，對一般的網站來說是夠用了。

（2）網站優化CSS

CSS (由于很難做中文翻譯，所以保留英文）是這樣一種技術：如果我們的多個頁面元素需要使用不同的圖片（例如作為背景）,常規的做法可以為每個元素定制一個CSS，每個CSS中通過-image屬性來設置不同的圖片。這樣做是可以實現功能的，但會帶來的一個問題就是可能需要下載多個圖片。為了改善這一點，CSS的設計者考慮了一種新的做法：可以將這些圖片合并為一個大圖片，然后在CSS中不僅僅設置-image屬性，同時還設置-屬性來決定要顯示的圖片區域。這樣一來，既實現同樣的效果，又減少了圖片下載的數量。

這種技術可能會帶來一些額外的工作或者麻煩：

手工地合并這些圖片，并要去測量相應的像素位置，是比較繁瑣的。不過，現在可以通過一些工具來幫助簡化工作。

額外的維護工作。如果其中某個圖片修改了，不光要生成新的圖片，而且可能涉及到很多CSS的修改。CSS 一般只能使用到固定大小的盒子（box）里，這樣才能夠遮擋住不應該看到的部分。

幾個優化建議，主要如下：

盡可能地使用橫向組合圖片，這比縱向組合圖片通常體積更小一些。盡量使圖片具有接近的色系，這樣最終組合出來的圖片也會小一些。盡量使用小一些的圖片，并且圖片之間的間隙盡量也小一些，目的還是為了最終組合出來的圖片體積更小。（3）網站不要在HTML中縮放圖像、圖片

這個錯誤的設計其實在早些年做網頁設計的時候，也經常會犯（原因在于很多時候，我們都有懶散的心理，圖一時的方便）。

有時候，能得到的圖片尺寸并不那么合乎要求（我說過了，我通常不太會自己做圖片），但為了在網頁中顯示出我希望的尺寸，我會很自然地想到通過如下的方式來圖片進行縮放：

width="100" ="100" src="mycat.jpg" alt="My Cat" />

縮放的意思其實是說：

不管mycat.jpg這個圖片原始尺寸是多少，通過明確地設置圖片寬度和高度，要求它最終顯示出來的尺寸是100px * 100px.

很顯然，瀏覽器下載到原始圖片之后，如果原始尺寸與目標尺寸不符，就會需要對圖片進行縮放（拉伸或者縮?。?，以便實現剛才所提到的目的。

所以，請記住并遵守這條原則：你需要在網頁中顯示什么尺寸的圖片，就請圖片設計人員提供什么尺寸的圖片，而不是在網頁中進行縮放。

（4）網站中的.ico要小而且可緩存

這個文件的詳細信息，有興趣的朋友可以參考/zh-cn/，整理總結如下：

每個網站都應該有該文件，瀏覽器在訪問任何頁面的時候，總是會嘗試去請求這個文件（如果本地沒有的話）。該文件通常應該命名為.ico ，如果希望使用別的名稱或者格式（例如PNG），則需要在頁面的頭部(Head)中定義引用（下面兩句中的第一句是必須的）

該文件可以直接放在網站根目錄，但也可以放在其他的主機，或者你想要的任何位置。如果不在默認的根目錄下面，也是需要通過上面所提到的引用方式定義。

由于該文件的這些特性，所以我們有三條優化的建議

七、移動端

網站的移動端在近幾年發展得很快，這里的優化也是非常重要的，百度和谷歌分別推出了針對移動端的優化，MIP頁面和AMP頁面。如果對移動端需求量非常大的話，可以針對市場進行相應的優化。

八、相關

這里是針對網站來進行相關的優化，因為網站發展了這么多年，雖然它強大的系統也是被人們廣泛使用的原因之一，但是，經過這么多年的發展，很多功能也會對網站造成了多余的負擔，更好地定制和優化網站是我們必須要做的。

（1）關閉日志修訂記錄

有個功能叫做日志修訂，是為了能夠回退到以前日志修改的位置。覺得在制作發布信息平臺時用處不大，可能在做重要信息存儲時有用，這個根據個人情況取舍吧！有了這個日志修訂功能，每個修訂都會在 posts 表中插入一條記錄，寫了一篇文章，多修改了幾次，都會插入多個修訂版本。這樣子每篇日志都有10多條記錄在 posts 表中，那么到時候文章一多，就有可能把表撐爆，數據一多，查詢肯定慢， 的效率就會很低了。解決方法：在 wp-.php 添加的代碼如下：

('', false);

（2）刪除數據庫緩存

在后臺寫文章會時隔一段時間自動給我們保存成修訂版本，這樣的修訂版本會自動保存到數據中心，在前臺是看不到的，這樣更新一篇文章需要花費幾十分鐘甚至1個小時的時候會產生很多的修訂版本，這就是ID不連續的主要原因，這樣在我們有500篇文章時候可能會有2000個記錄文章，時間之后會產生幾千幾萬的記錄（這就是為什么很多人說開始速度還可以，以后速度越來越不好）。我們需要刪除修訂版本，不讓修訂版本添加到數據中心。

解決方法：

在wp-.php文件中添加"('', false);"代碼。插件wp-可以刪除（3）禁用谷歌字體

谷歌字體在國內很多時候加載非常慢，所以禁用谷歌的字體是非常有必要的。我們可以在.php中查找/css，并注釋掉，如下：

// ('ts', ( $, "/css"));

// ('ts');

（4）禁止函數

在中的.php中添加如下：

('', 'n' );

( '', '' );

() {

('');

}

（5）去除中的非必須項

我們知道，();會引入很多我們不想要的資源來到里面，增加網站的負載，而對于程序，雖然功能很多，但是還是要盡量給網站減負，這里對刪除里面很多沒用的標記和元素。這些東西包括, , , , , prev, next, meta, , index, start等。這些標記不僅會對增加頁面的體積網站優化，而且可能導致安全問題。比如“” 元標記就會泄露的版本號，如果你沒用及時更新一個已經曝出有安全漏洞的版本。

在.php加入下面的代碼即可，代碼后面的注釋，可根據自己的需要加入：

//洗

( '', '', 2 ); //去除文章feed

( '', '' ); //針對Blog的遠程離線編輯器接口

( '', '' ); // Live 接口

( '', '', 10, 0 ); //移除后面文章的url

( '', '', 10, 0 ); //移除最開始文章的url

( '', '', 10, 0 );//自動生成的短鏈接

( '', '' ); // 移除版本號

('', '');//當前文章的索引

('', '', 3);// 額外的feed,例如, tag頁

('', 'ink', 10, 0); // 上、下篇.

('', '', 10, 0 );//rel=pre

('l10n');

('', '');//禁用半角符號自動轉換為全角

('', '', 2);//禁用類似rel='dns-' href='//'

('', '' );

('', '' );

( '', 'head', 10 );

( '', '', 10 );

（6）移除JS和CSS中的版本號

在.php加入下面的代碼即可移除版本號，反正黑客知道的版本進行黑客攻擊：

/**

* 移除 加載的JS和CSS鏈接中的版本號

*/

_ver( $src ) {

if( ( $src, 'ver=' ) )

$src = ( 'ver', $src );

$src;

}

( '', '_ver', 999 );

( '', '_ver', 999 );

（7）移除非必要的插件

網站是用插件來實現很多功能，但是插件太多的話，會造成網站負載太高，所以有時候，網站的CPU會很高。刪除不必要的插件對網站來說是非常必要的。

（8）關閉更新的提示

關閉后臺的更新提示可以解決后臺比較慢的問題，在.php加入下面的代碼：

//關閉所有更新提示

('', ('$a', " null;")); // 關閉核心提示

('', ('$a', " null;")); // 關閉插件提示

('', ('$a', " null;")); // 關閉主題提示

('', ''); // 禁止 檢查更新

('', 's'); // 禁止 更新插件

('', ''); // 禁止 更新主題

總結

網站的優化是一個長期的過程，只有長期優化網站，才能讓網站更好地運行。最后，推薦大家一個谷歌插件來給自己網站的頁面評分， ，可以給自己的頁面評分，而且對于一些可優化項，也會列出明細，評分后頁面如下：