好康道相報
※加入部落軌道,讓你的部落格有更多人知道 《按此加入》《使用心得
※欲轉貼本站文章者,只要註明出處及網址即可,不需我同意了,謝謝您的配合
※留悄悄話的網友請注意:如果您非痞客邦會員(包含使用FB/Google+帳號),是看不到回覆的喔
※痞客邦會自動將疑似廣告留言隱藏,因此若留言後看不到,可能是被系統自動隱藏了,由於我現在很久才會開一次網誌,有看到時我才會將非廣告留言解開,敬請見諒

雖然我知道這種東西大家都已經很清楚了...
但因為我是最近才知道的,就讓我野人獻曝一下吧^^"

大家都知道,CSS是一個用來設定網頁中文字或排版的程式語言
卻很少人知道,CSS也會影響到網頁開啟的速度
因為要載入一個網頁,必須先載入其CSS
當CSS檔有太多贅碼的時候,網頁就開啟就比別人慢
所幸,現在網路上多的是幫你的CSS減肥的工具
趕快拿起你的CSS,到以下網站吧幫它瘦身吧

注意:由於減肥過的CSS,排版會變的很不易讀
請務必先用記事本將原本的CSS檔案儲存起來!
不然到時想要修改就無從下手了

1. Clean CSS
載入方式:文字、網址
優化選項:有
減肥內容:有
減肥大小:有

2. CSS Drive Gallery
載入方式:只有文字
優化選項:有
減肥內容:無
減肥大小:有

3. Online CSS Optimizer
載入方式:文字、網址
優化選項:無
減肥內容:無
減肥大小:無

以上三個網站都有CSS優化功能
也許你會想怎麼大家都會作這種功能
其實...他們都是從CSSTidy這個開放原始碼的軟體下去改的@_@"

撇開那些載入方式等等的不談,到底哪個優化的最好呢?

首先,我用的是我目前所使用的小青蛙樣式CSS(作者s9me7617)
順便一提,這並不是原始的檔案
我有修改過像是迴響部份、版主回覆部份、頁碼部分等小東西
然後對以上三個網站使用"預設選項"來優化,看看結果

原始檔案:17.8 KB
Clean CSS:10.5 KB (-0.41%)
CSS Drive:11.5 KB (-0.35%)
CSS Optimizer:9.77 KB (-0.45%)

看起來好像是最後一個比較好
但會這樣的原因是因為CSS Optimizer沒有任何調節選項
換句話說他用的是別的網站壓縮率最高的選項,理所當然壓的比較低
而且看完他壓出來的成果...全部擠在一起了=__=||
好啦,反正我們有留原始檔備份,這樣也沒關係

我個人還是比較推薦Clean CSS的優化工具
因為他們有個Compression選項,能自由選擇要壓縮的程度
你不用了解那些代碼代表什麼意思,就能做出高度壓縮
還有,他會顯示它做過什麼壓縮動作
這對不喜歡黑箱作業的人也很有吸引力

那...平平是肝藥...不是
平平是CSS,你知道為什麼可以壓到這麼多嗎?
其實CSS是有很多縮寫特性的
比方說"0px"可以寫成"0"
還有empty selector是可以刪掉的(作者保留是為了將來修改方便)
還有#008800這種色碼可以縮寫成#080
更狠的,還可以把所有程式不分行串成一條線
只要中間有間隔,CSS還是可以正常讀取(跟C語言一樣)

減肥完後,將CSS檔覆蓋回去,來試試網頁速度有沒有變快吧

----
本日分享歌曲 GARNET CROW - 夢のひとつ
這也是殺手13的ED2

創作者介紹

正因為活著

蕭雲 發表在 痞客邦 PIXNET 留言(2) 人氣()


留言列表 (2)

發表留言
  • 訪客
  • 當CSS檔有太多贅碼的時候...
    我是到現在還對YAHOO外觀設計自訂莫宰羊的K
    沒真正學過網頁設計 只看過簡單版本FRONTPAGE書
    覺得了解這樣的WEB語言有困難
    對標籤完全不理解 對TAG好奇
    請教較易入門的BLOG---最好有書目引導或網站導引專書...介紹一下好嗎?
    想在其中文化前 僅懂得應用就好的K
    @CHALLO網路找門路
  • 本部落格值得紀念的第一篇就寫了各家網誌分析囉
    http://catchtest.pixnet.net/blog/post/5620639

    蕭雲 於 2012/04/30 00:51 回覆

  • a7526746
  • 版主你好,我使用過之後發現都無法使用在我的部落格上,顯示都會跑掉,是否有其他更好的方式?
  • 照理來說他只是幫你把css排版,應該不會有顯示跑掉的問題
    如果會有這種情形的話,可以試著把壓縮程度調低
    或是乾脆不要做壓縮,反正瀏覽器通常會做cache

    蕭雲 於 2014/04/28 02:02 回覆

找更多相關文章與討論