DIV CSS 佈局教程網

 DIV+CSS佈局教程網 >> 網頁腳本 >> WEB網站前端 >> 關於網頁技巧 >> 網站性能:圖片和Coockie以及移動應用的優化
網站性能:圖片和Coockie以及移動應用的優化
編輯:關於網頁技巧     
     我們在前面的幾節中分別講了提高網站性能中內容、服務器、JavaScript和CSS等方面的內容。除此之外,圖片和Coockie也是我們網站中幾乎不可缺少組成部分,此外隨著移動設備的流行,對於移動應用的優化也十分重要。這主要包括:
Coockie:
  1. 減小Cookie體積
  2. 對於頁面內容使用無coockie域名

圖片:

  1. 優化圖像
  2. 優化CSS Spirite
  3. 不要在HTML中縮放圖像
  4. favicon.ico要小而且可緩存

移動應用:

  1. 保持單個內容小於25K
  2. 打包組件成復合文本

27、減小Cookie體積

      HTTP coockie可以用於權限驗證和個性化身份等多種用途。coockie內的有關信息是通過HTTP文件頭來在web服務器和浏覽器之間進行交流的。因此保持coockie盡可能的小以減少用戶的響應時間十分重要。
有關更多信息可以查看Tenni Theurer和Patty Chi的文章“When the Cookie Crumbles”。這們研究中主要包括:

  • 去除不必要的coockie
  • 使coockie體積盡量小以減少對用戶響應的影響
  • 注意在適應級別的域名上設置coockie以便使子域名不受影響
  • 設置合理的過期時間。較早地Expire時間和不要過早去清除coockie,都會改善用戶的響應時間。

28、對於頁面內容使用無coockie域名
      當浏覽器在請求中同時請求一張靜態的圖片和發送coockie時,服務器對於這些coockie不會做任何地使用。因此他們只是因為某些負面因素而創建的網絡傳輸。所有你應該確定對於靜態內容的請求是無coockie的請求。創建一個子域名並用他來存放所有靜態內容。
      如果你的域名是www.example.org,你可以在static.example.org上存在靜態內容。但是,如果你不是在www.example.org上而是在頂級域名example.org設置了coockie,那麼所有對於static.example.org的請求都包含coockie。在這種情況下,你可以再重新購買一個新的域名來存在靜態內容,並且要保持這個域名是無coockie的。Yahoo!使用的是ymig.com,YouTube使用的是ytimg.com,Amazon使用的是images-anazon.com等等。
      使用無coockie域名存在靜態內容的另外一個好處就是一些代理(服務器)可能會拒絕對coockie的內容請求進行緩存。一個相關的建議就是,如果你想確定應該使用example.org還是www.example.org作為你的一主頁,你要考慮到coockie帶來的影響。忽略掉www會使你除了把coockie設置到*.example.org(*是泛域名解析,代表了所有子域名譯者dudo注)外沒有其它選擇,因此出於性能方面的考慮最好是使用帶有www的子域名並且在它上面設置coockie。

29、優化圖像
      設計人員完成對頁面的設計之後,不要急於將它們上傳到web服務器,這裡還需要做幾件事:

  • 你可以檢查一下你的GIF圖片中圖像顏色的數量是否和調色板規格一致。 使用imagemagick中下面的命令行很容易檢查:
    identify -verbose image.gif
    如果你發現圖片中只用到了4種顏色,而在調色板的中顯示的256色的顏色槽,那麼這張圖片就還有壓縮的空間。
  • 嘗試把GIF格式轉換成PNG格式,看看是否節省空間。大多數情況下是可以壓縮的。由於浏覽器支持有限,設計者們往往不太樂意使用PNG格式的圖片,不過這都是過去的事情了。現在只有一個問題就是在真彩PNG格式中的alpha通道半透明問題,不過同樣的,GIF也不是真彩格式也不支持半透明。因此GIF能做到的,PNG(PNG8)同樣也能做到(除了動畫)。下面這條簡單的命令可以安全地把GIF格式轉換為PNG格式:
    convert image.gif image.png
    “我們要說的是:給PNG一個施展身手的機會吧!”
  • 在所有的PNG圖片上運行pngcrush(或者其它PNG優化工具)。例如:
    pngcrush image.png -rem alla -reduce -brute result.png
  • 在所有的JPEG圖片上運行jpegtran。這個工具可以對圖片中的出現的鋸齒等做無損操作,同時它還可以用於優化和清除圖片中的注釋以及其它無用信息(如EXIF信息):
    jpegtran -copy none -optimize -perfect src.jpg dest.jpg

30、優化CSS Spirite

  • 在Spirite中水平排列你的圖片,垂直排列會稍稍增加文件大小;
  • Spirite中把顏色較近的組合在一起可以降低顏色數,理想狀況是低於256色以便適用PNG8格式;
  • 便於移動,不要在Spirite的圖像中間留有較大空隙。這雖然不大會增加文件大小但對於用戶代理來說它需要更少的內存來把圖片解壓為像素地圖。100x100的圖片為1萬像素,而1000x1000就是100萬像素。


12下一頁
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved