用戶(hù)體驗(yàn)設(shè)計(jì):Logo與網(wǎng)站性能優(yōu)化－鄭州網(wǎng)站優(yōu)化

莫名的源起 – H1

這里的H1不是H1N1中那令人不寒而栗H1，而是HTML中的一個(gè)標(biāo)簽，一個(gè)重構(gòu)者日常工作中不可避免的一個(gè)標(biāo)簽，一個(gè)不能被忽視的標(biāo)簽，一個(gè)在HTML的標(biāo)題中排名第一的標(biāo)題，歷史上有過(guò)很多的關(guān)于H1的探討，也有人在Twitter上進(jìn)行過(guò)H1辯論(en)，雖然大家會(huì)有一些分歧，但是對(duì)于H1的重要性，大家都一種認(rèn)同，追求者眾多，追法各異，各有各的手段，各有各的目的，滿(mǎn)足了才是王道。

捏造的主題 – Logo與網(wǎng)站性能優(yōu)化

談到H1，無(wú)可避免的就會(huì)和SEO發(fā)生關(guān)系，同時(shí)也會(huì)把網(wǎng)站Logo扯出來(lái)說(shuō)事；其實(shí)今天的女主角不是H1，SEO也不是男主角，網(wǎng)站Logo也不是男女主角，他們的故事很精彩，他們的關(guān)系也不簡(jiǎn)單；其實(shí)這里只是想單說(shuō)一下網(wǎng)站Logo，網(wǎng)站性能優(yōu)化相關(guān)。唉，其實(shí)這些東西早就在坊間流傳，我這也說(shuō)不出什么新點(diǎn)子，只是陳詞濫調(diào)，左顧右盼，羅列出一些常識(shí)性的東西。(其實(shí)這兩個(gè)字為什么老是出現(xiàn)呢)

預(yù)加載Logo圖： 第一時(shí)間顯示logo圖和背景，避免空白和無(wú)背景；

合并背景圖到Logo： 減少頁(yè)面請(qǐng)求；

優(yōu)化壓縮logo： 盡可能減少文件大小；

在img中指定logo的替換文字： 提升頁(yè)面可用性和兼容性；

在img中指定logo尺寸大?。?提升瀏覽器渲染效率；

閉合logo所在的img標(biāo)簽： 提升瀏覽器渲染效率；（這個(gè)還提??？）

對(duì)logo啟用Gzip壓縮？： 這個(gè)真的不行?。∮瞄L(zhǎng)cache吧?。?！

1. 預(yù)加載Logo： 第一時(shí)間顯示logo圖和背景，避免空白和無(wú)背景

被說(shuō)爛了的google的方式，老調(diào)重彈，在頁(yè)面的內(nèi)容還沒(méi)有加載之前，先把需要的圖加載：這樣就會(huì)讓logo第一時(shí)間顯示出來(lái)(如果你不想讓logo第一時(shí)間顯示，請(qǐng)忽略)，也不會(huì)出現(xiàn)光禿禿的沒(méi)有背景圖修飾內(nèi)容。

下面是google首頁(yè)的做法，其實(shí)，這個(gè)圖是搜索結(jié)果頁(yè)的logo和背景合并圖，首頁(yè)并沒(méi)有用到，但是到了google首頁(yè)的人有幾個(gè)會(huì)不去搜索結(jié)果頁(yè)呢…(這里多謝鬼哥提醒)

＜body .... onload="...;if(document.images)new Image().src='/images/nav_logo8.png'"...>

2. 合并背景圖到Logo： 減少頁(yè)面請(qǐng)求

同事們都喜歡雪碧(css sprite)，這個(gè)雪碧也不例外。其實(shí)，這一條和第一條有些重復(fù)了，為了顯示文章內(nèi)容的豐富性，不管了。

＜h1> ＜a title="Go to Google Home" id="logo">

Google＜img width="164" height="106" alt="" src="/images/nav_logo8.png" />

＜/a>＜/h1>

本來(lái)面目：

這樣這樣，那樣那樣：

最后就這樣了：

3. 優(yōu)化壓縮logo： 盡可能減少文件大小

首先，png8格式是首選(別說(shuō)了，沒(méi)人都知道啦！)

其次，fireworks比photoshop的壓縮效果要好，體積更小

最后，再用專(zhuān)門(mén)的壓縮工具(如PngOptimizer)壓縮

沒(méi)有這個(gè)工具？在firefox里裝firebug再裝page speed，性能分析，直接存儲(chǔ)壓縮好的圖

太復(fù)雜? 那就直接上http://www.smushit.com/ysmush.it/，在線(xiàn)壓縮吧

4. 在img中指定logo的替換文字： 提升頁(yè)面可用性和兼容性 這個(gè)也要再說(shuō)?。?！

嘿嘿，忘了說(shuō)這個(gè)和seo也有一點(diǎn)關(guān)系哦-.-

5. 在img中指定logo尺寸大?。?提升瀏覽器渲染效率 還說(shuō)?。?！

要說(shuō)的，這個(gè)有爭(zhēng)議，有時(shí)候會(huì)不便于內(nèi)容維護(hù)，或者在css中指定尺寸也是一種方案。

6. 關(guān)閉logo所在的img標(biāo)簽 ：（ 我又提這個(gè)了

網(wǎng)站標(biāo)準(zhǔn)不能忘啊，不知道仔細(xì)讀過(guò)W3C規(guī)范書(shū)的有多少人呢，我沒(méi)有：（ 有空看看吧

HTML 4.01 Specification

CSS 2.1 Specification

7. 對(duì)logo啟用Gzip壓縮？還是算了吧

對(duì)于長(zhǎng)時(shí)間不會(huì)變動(dòng)的logo，可以設(shè)置長(zhǎng)cache，減少對(duì)服務(wù)器的請(qǐng)求。

在服務(wù)器端對(duì)圖片進(jìn)行Gzip壓縮是沒(méi)有用的，不過(guò)css/js/html等文本文件是可以，而且在服務(wù)器壓力允許的情況下是必須允許的（大部分css/js/xml文件大小可壓縮70-80%）

小小結(jié)：知易行難，重構(gòu)是一種態(tài)度。許多的創(chuàng)新只是已有事物的重新巧妙組合和利用。