網(wǎng)站logo圖相關(guān)以及之外的性能優(yōu)化故事

0 評論 1701 瀏覽 0 收藏 7 分鐘

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

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

  • 預(yù)加載Logo圖： 第一時間顯示logo圖和背景，避免空白和無背景；
  • 合并背景圖到Logo： 減少頁面請求；
  • 優(yōu)化壓縮logo： 盡可能減少文件大??；
  • 在img中指定logo的替換文字： 提升頁面可用性和兼容性；
  • 在img中指定logo尺寸大小： 提升瀏覽器渲染效率；
  • 閉合logo所在的img標(biāo)簽： 提升瀏覽器渲染效率；（這個還提！？）
  • 對logo啟用Gzip壓縮？： 這個真的不行??！用長cache吧?。?！

1. 預(yù)加載Logo： 第一時間顯示logo圖和背景，避免空白和無背景
被說爛了的google的方式，老調(diào)重彈，在頁面的內(nèi)容還沒有加載之前，先把需要的圖加載：這樣就會讓logo第一時間顯示出來(如果你不想讓logo第一時間顯示，請忽略)，也不會出現(xiàn)光禿禿的沒有背景圖修飾內(nèi)容。
下面是google首頁的做法，其實(shí)，這個圖是搜索結(jié)果頁的logo和背景合并圖，首頁并沒有用到，但是到了google首頁的人有幾個會不去搜索結(jié)果頁呢…(這里多謝鬼哥提醒)

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

2. 合并背景圖到Logo： 減少頁面請求
同事們都喜歡雪碧(css sprite)，這個雪碧也不例外。其實(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>

本來面目：
這樣這樣，那樣那樣：
g2
最后就這樣了：
g3

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

  1. 首先，png8格式是首選(別說了，沒人都知道啦！)
  2. 其次，fireworks比photoshop的壓縮效果要好，體積更小
  3. 最后，再用專門的壓縮工具(如PngOptimizer)壓縮
  4. 沒有這個工具？在firefox里裝firebug再裝page speed，性能分析，直接存儲壓縮好的圖pg
  5. 太復(fù)雜? 那就直接上http://www.smushit.com/ysmush.it/，在線壓縮吧

4. 在img中指定logo的替換文字： 提升頁面可用性和兼容性 這個也要再說?。?！
嘿嘿，忘了說這個和seo也有一點(diǎn)關(guān)系哦-.-

5. 在img中指定logo尺寸大?。?提升瀏覽器渲染效率 還說?。?！
要說的，這個有爭議，有時候會不便于內(nèi)容維護(hù)，或者在css中指定尺寸也是一種方案。

6. 關(guān)閉logo所在的img標(biāo)簽 ：（ 我又提這個了
網(wǎng)站標(biāo)準(zhǔn)不能忘啊，不知道仔細(xì)讀過W3C規(guī)范書的有多少人呢，我沒有：（ 有空看看吧
HTML 4.01 Specification
CSS 2.1 Specification

7. 對logo啟用Gzip壓縮？還是算了吧
對于長時間不會變動的logo，可以設(shè)置長cache，減少對服務(wù)器的請求。
在服務(wù)器端對圖片進(jìn)行Gzip壓縮是沒有用的，不過css/js/html等文本文件是可以，而且在服務(wù)器壓力允許的情況下是必須允許的（大部分css/js/xml文件大小可壓縮70-80%）

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

參考：
W3C HTML4)?Headings: The H1, H2, H3, H4, H5, H6 elements
W3C HTML5)?The section element 可設(shè)置多個H1

優(yōu)化瀏覽器渲染
Web Performance Best Practices

《高性能網(wǎng)站建設(shè)指南》讀后隨感
Yslow: Best Practices for Speeding Up Your Web Site

來源：http://isd.tencent.com/?p=2233

更多精彩內(nèi)容，請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
旺旺旺旺旺仔
一直很尊重奶茶，沒去冰，沒少糖，沒少喝。
4319篇作品 34162350總閱讀量
02-201825 瀏覽
為讓美國人“砍”幾刀，拼多多60秒燒一億
05-312700 瀏覽
大廠砍業(yè)務(wù)，為“未來故事”燒錢的時代結(jié)束了
01-104021 瀏覽
為什么MCN都在做自有品牌？輸?shù)枚?，贏得少？
04-102992 瀏覽
三級火箭：To B產(chǎn)品的網(wǎng)絡(luò)效應(yīng)怎么做？
06-2813460 瀏覽
電商運(yùn)營管理——商品活動
評論
評論請登錄
  1. 目前還沒評論，等你發(fā)揮！