【編者按】來(lái)自Yahoo!的Exceptional Performance團(tuán)隊(duì)為我們帶來(lái)了改善Web性能的最佳實(shí)踐方案。為此，他們?yōu)榇诉M(jìn)行了 一系列的實(shí)驗(yàn)、開發(fā)了各種工具、寫了大量的文章和博客并在各種會(huì)議上參與探討。最佳實(shí)踐的核心就是提高網(wǎng)站性能。通過(guò)各種努力，xcetional Performance團(tuán)隊(duì)總結(jié)出了一系列可以提高網(wǎng)站速度的方法�？梢苑譃� 7 大類 34 條。包括內(nèi)容、服務(wù)器、cookie、CSS、JavaScript、圖片、移動(dòng)應(yīng)用等七部分。

延伸閱讀：

• Web程序優(yōu)化的最佳實(shí)踐（網(wǎng)站內(nèi)容篇）
• Web程序優(yōu)化的最佳實(shí)踐（服務(wù)器篇）
• Web程序優(yōu)化的最佳實(shí)踐：JavaScript和CSS篇

本文為Cookie、圖片及移動(dòng)應(yīng)用部分的內(nèi)容。

圖片和 Coockie 也是我們網(wǎng)站中幾乎不可缺少組成部分，此外隨著移動(dòng)設(shè)備的流行，對(duì) 于移動(dòng)應(yīng)用的優(yōu)化也十分重要。這主要包括以下幾個(gè)部分。

Coockie:

1. 減小Cookie體積

2. 對(duì)于頁(yè)面內(nèi)容使用無(wú)coockie域名

圖片：

3. 優(yōu)化圖像

4. 優(yōu)化CSS Spirite

5. 不要在HTML中縮放圖像

6. favicon.ico要小而且可緩存

移動(dòng)應(yīng)用：

7. 保持單個(gè)內(nèi)容小于 25K

8. 打包組件成復(fù)合文本

1、減小Cookie體積

HTTP coockie可以用于權(quán)限驗(yàn)證和個(gè)性化身份等多種用途。coockie內(nèi)的有關(guān)信息是通 過(guò)HTTP文件頭來(lái)在web服務(wù)器和瀏覽器之間進(jìn)行交流的。因此保持coockie盡可能的小以 減少用戶的響應(yīng)時(shí)間十分重要。

有關(guān)更多信息可以查看Tenni Theurer和Patty Chi的文章"When the Cookie Crumbles"。

這們研究中主要包括：

• 去除不必要的 coockie

• 使 coockie 體積盡量小以減少對(duì)用戶響應(yīng)的影響

• 注意在適應(yīng)級(jí)別的域名上設(shè)置 coockie 以便使子域名不受影響

• 設(shè)置合理的過(guò)期時(shí)間。較早地 Expire 時(shí)間和不要過(guò)早去清除 coockie，都會(huì)改 善用戶的響應(yīng)時(shí)間。

2、對(duì)于頁(yè)面內(nèi)容使用無(wú)coockie域名

當(dāng)瀏覽器在請(qǐng)求中同時(shí)請(qǐng)求一張靜態(tài)的圖片和發(fā)送coockie時(shí)，服務(wù)器對(duì)于這些coockie 不會(huì)做任何地使用。因此他們只是因?yàn)槟承┴?fù)面因素而創(chuàng)建的網(wǎng)絡(luò)傳輸。所有你應(yīng)該確 定對(duì)于靜態(tài)內(nèi)容的請(qǐng)求是無(wú)coockie的請(qǐng)求。創(chuàng)建一個(gè)子域名并用他來(lái)存放所有靜態(tài)內(nèi) 容。

如果你的域名是www.example.org，你可以在static.example.org上存在靜態(tài)內(nèi)容。但 是，如果你不是在www.example.org上而是在頂級(jí)域名example.org設(shè)置了coockie，那 么所有對(duì)于static.example.org的請(qǐng)求都包含coockie。在這種情況下，你可以再重新 購(gòu)買一個(gè)新的域名來(lái)存在靜態(tài)內(nèi)容，并且要保持這個(gè)域名是無(wú)coockie的。Yahoo!使用 的是ymig.com，YouTube使用的是ytimg.com，Amazon使用的是images-anazon.com等等。

使用無(wú)coockie域名存在靜態(tài)內(nèi)容的另外一個(gè)好處就是一些代理（服務(wù)器）可能會(huì)拒絕 對(duì)coockie的內(nèi)容請(qǐng)求進(jìn)行緩存。一個(gè)相關(guān)的建議就是，如果你想確定應(yīng)該使用example.org還是www.example.org作為你的一主頁(yè)，你要考慮到coockie帶來(lái)的影響。 忽略掉www會(huì)使你除了把coockie設(shè)置到*.example.org（*是泛域名解析，代表了所有子 域名譯者dudo注）外沒有其它選擇，因此出于性能方面的考慮最好是使用帶有www的子 域名并且在它上面設(shè)置coockie。

3、優(yōu)化圖像

設(shè)計(jì)人員完成對(duì)頁(yè)面的設(shè)計(jì)之后，不要急于將它們上傳到 web 服務(wù)器，這里還需要做幾 件事：

• 你可以檢查一下你的GIF圖片中圖像顏色的數(shù)量是否和調(diào)色板規(guī)格一致。 使 用imagemagick中下面的命令行很容易檢查：

identify -verbose image.gif

如果你發(fā)現(xiàn)圖片中只用到了 4 種顏色，而在調(diào)色板的中顯示的 256 色的顏色槽， 那么這張圖片就還有壓縮的空間。

• 嘗試把 GIF 格式轉(zhuǎn)換成 PNG 格式，看看是否節(jié)省空間。大多數(shù)情況下是可以壓 縮的。由于瀏覽器支持有限，設(shè)計(jì)者們往往不太樂(lè)意使用 PNG 格式的圖片，不 過(guò)這都是過(guò)去的事情了�，F(xiàn)在只有一個(gè)問(wèn)題就是在真彩 PNG 格式中的 alpha 通 道半透明問(wèn)題，不過(guò)同樣的，GIF 也不是真彩格式也不支持半透明。因此 GIF 能 做到的，PNG（PNG8）同樣也能做到（除了動(dòng)畫）。下面這條簡(jiǎn)單的命令可以安 全地把 GIF 格式轉(zhuǎn)換為 PNG 格式：

convert image.gif image.png

"我們要說(shuō)的是：給 PNG 一個(gè)施展身手的機(jī)會(huì)吧！"

• 在所有的PNG圖片上運(yùn)行pngcrush（或者其它PNG優(yōu)化工具）。例如：

pngcrush image.png -rem alla -reduce -brute result.png

• 在所有的 JPEG 圖片上運(yùn)行 jpegtran。這個(gè)工具可以對(duì)圖片中的出現(xiàn)的鋸齒等做 無(wú)損操作，同時(shí)它還可以用于優(yōu)化和清除圖片中的注釋以及其它無(wú)用信息（如 EXIF 信息）：

jpegtran -copy none -optimize -perfect src.jpg dest.jpg

4、優(yōu)化 CSS Spirite

• 在 Spirite 中水平排列你的圖片，垂直排列會(huì)稍稍增加文件大��；

• Spirite 中把顏色較近的組合在一起可以降低顏色數(shù)，理想狀況是低于 256 色以 便適用 PNG8 格式；

• 便于移動(dòng)，不要在 Spirite 的圖像中間留有較大空隙。這雖然不大會(huì)增加文件 大小但對(duì)于用戶代理來(lái)說(shuō)它需要更少的內(nèi)存來(lái)把圖片解壓為像素地圖。

100×100 的圖片為 1 萬(wàn)像素，而 1000×1000 就是 100 萬(wàn)像素。

5、不要在 HTML 中縮放圖像

不要為了在 HTML 中設(shè)置長(zhǎng)寬而使用比實(shí)際需要大的圖片。如果你需要：

<img width="100″ height="100″ src="mycat.jpg" alt="Web程序優(yōu)化 網(wǎng)站優(yōu)化 圖片優(yōu)化 Web優(yōu)化" />

那么你的圖片（mycat.jpg）就應(yīng)該是 100×100 像素而不是把一個(gè) 500×500 像素的圖 片縮小使用。

6、favicon.ico 要小而且可緩存

favicon.ico 是位于服務(wù)器根目錄下的一個(gè)圖片文件。它是必定存在的，因?yàn)榧词鼓悴?關(guān)心它是否有用，瀏覽器也會(huì)對(duì)它發(fā)出請(qǐng)求，因此最好不要返回一個(gè) 404 Not Found 的 響應(yīng)。由于是在同一臺(tái)服務(wù)器上，它每被請(qǐng)求一次 coockie 就會(huì)被發(fā)送一次。這個(gè)圖片 文件還會(huì)影響下載順序，例如在 IE 中當(dāng)你在 onload 中請(qǐng)求額外的文件時(shí)，favicon 會(huì) 在這些額外內(nèi)容被加載前下載。

因此，為了減少 favicon.ico 帶來(lái)的弊端，要做到：

• 文件盡量地小，最好小于 1K

• 在適當(dāng)?shù)臅r(shí)候（也就是你不要打算再換 favicon.ico 的時(shí)候，因?yàn)楦鼡Q新文件 時(shí)不能對(duì)它進(jìn)行重命名）為它設(shè)置 Expires 文件頭。你可以很安全地把 Expires 文件頭設(shè)置為未來(lái)的幾個(gè)月。你可以通過(guò)核對(duì)當(dāng)前 favicon.ico 的上次編輯時(shí)間來(lái)作出判斷。

Imagemagick可以幫你創(chuàng)建小巧的favicon。

7、保持單個(gè)內(nèi)容小于 25K

這條限制主要是因?yàn)閕Phone不能緩存大于 25K的文件。注意這里指的是解壓縮后的大小。 由于單純gizp壓縮可能達(dá)不要求，因此精簡(jiǎn)文件就顯得十分重要。 查看更多信息，請(qǐng)參閱Wayne Shea和Tenni Theurer的文件"Performance Research,Part 5: iPhone Cacheability – Making it Stick"。

8、打包組件成復(fù)合文本

把頁(yè)面內(nèi)容打包成復(fù)合文本就如同帶有多附件的 Email，它能夠使你在一個(gè) HTTP 請(qǐng)求中 取得多個(gè)組件（切記：HTTP 請(qǐng)求是很奢侈的）。當(dāng)你使用這條規(guī)則時(shí)，首先要確定用戶

代理是否支持（iPhone 就不支持）。

標(biāo)簽： Web程序優(yōu)化 網(wǎng)站優(yōu)化 圖片優(yōu)化 

版權(quán)申明：本站文章部分自網(wǎng)絡(luò)，如有侵權(quán)，請(qǐng)聯(lián)系：west999com@outlook.com
特別注意：本站所有轉(zhuǎn)載文章言論不代表本站觀點(diǎn)！
本站所提供的圖片等素材，版權(quán)歸原作者所有，如需使用，請(qǐng)與原作者聯(lián)系。