著作權(quán)歸作者所有。商業(yè)轉(zhuǎn)載請聯(lián)系作者獲得授權(quán)，非商業(yè)轉(zhuǎn)載請注明出處。

（2）網(wǎng)站內(nèi)容頁面選擇無域名

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

使用 專門處理圖片請求使用 專門處理腳本請求使用 專門處理網(wǎng)頁請求

當(dāng)時我們提到的原因是：

提高了下載的并行度由于可以使用多個服務(wù)器，所以可以提高服務(wù)器的響應(yīng)能力

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

四、CSS

CSS的樣式表在網(wǎng)站中是給與頁面渲染，呈現(xiàn)視覺反饋的作用。在很多時候，網(wǎng)站的美化過后，過度地修改樣式表也會給網(wǎng)站造成很大的負(fù)擔(dān)。比如：重復(fù)性的樣式過多，垃圾無用的CSS樣式?jīng)]有清除，引入過多的CSS文件，都會給網(wǎng)站造成負(fù)擔(dān)。更好地優(yōu)化樣式表，才能更好地優(yōu)化網(wǎng)站。

（1）網(wǎng)站把樣式表置于頂部

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

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

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

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

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

（2）網(wǎng)站避免使用CSS表達(dá)式（）

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

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

上面的代碼設(shè)計(jì)的初衷是為了希望我們擁有定義動態(tài)的CSS樣式的能力。

這里可以使用一個特殊的函數(shù)，其實(shí)這是一個的函數(shù)。它可以進(jìn)行根據(jù)一個表達(dá)式進(jìn)行計(jì)算，動態(tài)地決定-color的值。

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

（3）網(wǎng)站用代替@導(dǎo)入樣式表

這一條規(guī)則其實(shí)很簡單，因?yàn)闉g覽器兼容的問題，IE中，link和導(dǎo)入樣式表是一樣的，但是現(xiàn)在已經(jīng)不是IE獨(dú)霸天下的時代了，所以，為了更好地兼容各個瀏覽器，網(wǎng)站應(yīng)該使用link而不是@導(dǎo)入樣式表。

（4）網(wǎng)站避免使用濾鏡

和上一條規(guī)則：網(wǎng)站應(yīng)該使用link而不是@導(dǎo)入樣式表，一樣同理。

這一條原則也是關(guān)于標(biāo)準(zhǔn)化設(shè)計(jì)的問題。濾鏡這個功能也是IE當(dāng)年為了提供更加豐富的一些頁面效果而設(shè)計(jì)的（相應(yīng)的也會有代價）。

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

我們可以期待的是，CSS 3.0作為后續(xù)的一個版本，會為網(wǎng)頁的特殊效果提供一個標(biāo)準(zhǔn)的支持，也就是CSS3 的。（注意：CSS3的是可以用的）

五、JS

是屬于網(wǎng)絡(luò)的腳本語言！ 被數(shù)百萬計(jì)的網(wǎng)頁用來改進(jìn)設(shè)計(jì)、驗(yàn)證表單、檢測瀏覽器、創(chuàng)建，以及更多的應(yīng)用。就是因?yàn)殚_發(fā)者多，而且功能強(qiáng)大，所以功能上精進(jìn)的同時，我們也要保證網(wǎng)站的高效。

（1）網(wǎng)站把JS腳本置于頁面底部

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

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

重復(fù)的腳本不僅產(chǎn)生不必要的HTTP請求，而且重復(fù)解析執(zhí)行浪費(fèi)時間和計(jì)算資源。

（5）網(wǎng)站減少JS對DOM訪問

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

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

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

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

（6）網(wǎng)站開發(fā)智能事件處理程序

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

六、圖片

網(wǎng)站的圖片是網(wǎng)站必要資源之一，每一個網(wǎng)站的圖片都要用一個http去獲取。網(wǎng)站的圖片優(yōu)化是網(wǎng)站必要項(xiàng)目之一。

（1）網(wǎng)站要優(yōu)化圖像

你可以使用這個工具對gif圖片進(jìn)行檢查，以確認(rèn)它們是否還有優(yōu)化的空間。而且圖片的大小關(guān)系都下載的速度，圖片大小的優(yōu)化是非常重要的。

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

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

（2）網(wǎng)站優(yōu)化CSS

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

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

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

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

幾個優(yōu)化建議，主要如下：

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

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

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

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

縮放的意思其實(shí)是說：

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

很顯然，瀏覽器下載到原始圖片之后，如果原始尺寸與目標(biāo)尺寸不符，就會需要對圖片進(jìn)行縮放（拉伸或者縮小），以便實(shí)現(xiàn)剛才所提到的目的。

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

（4）網(wǎng)站中的.ico要小而且可緩存

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

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

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

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

七、移動端

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

八、相關(guān)

這里是針對網(wǎng)站來進(jìn)行相關(guān)的優(yōu)化，因?yàn)榫W(wǎng)站發(fā)展了這么多年，雖然它強(qiáng)大的系統(tǒng)也是被人們廣泛使用的原因之一，但是，經(jīng)過這么多年的發(fā)展，很多功能也會對網(wǎng)站造成了多余的負(fù)擔(dān)，更好地定制和優(yōu)化網(wǎng)站是我們必須要做的。

（1）關(guān)閉日志修訂記錄

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

('', false);

（2）刪除數(shù)據(jù)庫緩存

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

解決方法：

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

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

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

// ('ts');

（4）禁止函數(shù)

在中的.php中添加如下：

('', 'n' );

( '', '' );

() {

('');

}

（5）去除中的非必須項(xiàng)

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

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

//洗

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

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

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

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

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

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

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

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

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

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

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

('l10n');

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

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

('', '' );

('', '' );

( '', 'head', 10 );

( '', '', 10 );

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

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

/**

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

*/

_ver( $src ) {

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

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

$src;

}

( '', '_ver', 999 );

( '', '_ver', 999 );

（7）移除非必要的插件

網(wǎng)站是用插件來實(shí)現(xiàn)很多功能，但是插件太多的話，會造成網(wǎng)站負(fù)載太高，所以有時候，網(wǎng)站的CPU會很高。刪除不必要的插件對網(wǎng)站來說是非常必要的。

（8）關(guān)閉更新的提示

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

//關(guān)閉所有更新提示

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

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

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

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

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

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

總結(jié)

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