<-- IE錯誤修正 --> CSS & JavaScript Compressor 線上程式碼壓縮工具,有效提高網站速度 - RiS社群 | FileMaker 中小企業應用



快速發表主題
返回   RiS社群 | FileMaker 中小企業應用 > 交流平台 / 老少咸宜 (General forums) > 創意新點子 + 遇(預)見新未來 + IT 新知/技術 (Future) > 精選好用APP等相關網站資源 (Website Reviews)

精選好用APP等相關網站資源 (Website Reviews) 本區除了同步注入"免費資源網路社群 "最新資訊外,也不定時將一些提供更多值得關注的App或網站介紹,盡量滿足男女老少們喜愛!


FileMaker 教學 FileMaker 14 教學課程 FileMaker 教學
FileMaker 課程(僅接受公司/單位或1對1專屬教學

輕鬆學會FileMaker
帶你認識FileMaker

FileMaker俱樂部 加入FileMaker獲取官方資訊 FileMaker俱樂部
FileMaker俱樂部

回覆
 
LinkBack 主題工具 顯示模式
  #1 (permalink)  
舊 3 週前
進階會員
 
註冊日期: 2008-08-09
住址: 台灣/台北
文章: 5,660
燈泡 CSS & JavaScript Compressor 線上程式碼壓縮工具,有效提高網站速度

Click the image to open in full size.

在更新網站時,經常透過網站檢測工具來檢查網站有沒有可以改進的部份,例如我個人相當常用 PageSpeed Insights 和 Think With Google,通常會出現 CSS、JavaScript 程式碼可以被壓縮的最佳化提示資訊。如果沒有特別設定,大部分情況下會維持程式碼的可讀性,對於開發者在編輯來說會很有用,但其實放在網路上只要求能夠越快被下載越好,利用壓縮方式將不必要的空格、註解或換行清除,讓檔案盡量維持在最小狀態,不僅可提高下載效率,也能節省網站流量耗費。



本文要介紹的「CSS Compressor」是一款 CSS 樣式表壓縮工具,類似服務不少,運作原理大同小異,只要找一個自己習慣的使用即可。使用方法非常簡單,將你網站使用的樣式表和 JavaScript 程式碼丟入網站,選擇要壓縮等級,就能將程式碼精簡、最小化,無論是什麼類型的網站或部落格我建議上線時至少進行一次檔案壓縮,就能讓網站速度有更好的表現。

如果使用 WordPress 架站,也有很多外掛程式可直接壓縮、最小化檔案,例如之前介紹的 Breeze 免費快取外掛就內建最小化功能;若要更簡單的作法,Cloudflare 架站者必備免費 CDN、DNS 托管加速功能就有提供壓縮選項,開啟就會在雲端自動幫你的 HTML、CSS 和 JavaScript 最小化。

網站名稱:CSS Compressor
網站鏈結:https://csscompressor.com/

使用教學

STEP 1

使用 CSS 壓縮各種 CSS 樣式表,支援 CSS 1、CSS 2、CSS 2.1 和 CSS 3,可減少 CSS 程式碼大小,讓你的網站載入速度更快!壓縮等級(Compression Level)提供四個不同的級別,最高級別會撇開任何的可讀性,但能獲得最小尺寸;依照不同級別也會有不太一樣的壓縮效果,如果日後還會編輯,我建議可拆分成壓縮及未壓縮兩個檔案。

Click the image to open in full size.

STEP 2

若沒有要做其他設定選項,把要壓縮的 CSS 樣式表複製、貼上,點擊「Compress」綠色按鈕即可立即壓縮。

Click the image to open in full size.

STEP 3

CSS Compressor 壓縮等級包括最高、高、標準和低,最高壓縮級別能獲取最小的檔案尺寸,依照等級逐步遞減,但相對來說也會有更好的易讀性。CSS Compressor 會處理的項目除了將不必要的空格和換行去除,還會處理色碼、字重、移除用不到的符號等等。

Click the image to open in full size.

STEP 4

壓縮後 CSS Compressor 會直接把壓縮完成的原始碼顯示於網頁中,同時顯示輸入的檔案大小、壓縮後檔案大小及兩者相差百分比,通常對於沒壓縮過的檔案都會有不錯的壓縮減少。類似工具還有 JavaScript Compressor 用以處理 JS 程式,不過兩者好像共通,只要把程式碼丟進去一樣可以最佳化。

Click the image to open in full size.

值得一試的三個理由:
  1. 直接將 CSS 和 JavaScript 程式碼複製貼上即可進行壓縮
  2. 四種壓縮等級,排除可讀性將程式碼壓縮到最小狀態
  3. 支援 CSS、JavaScript 能產生壓縮前及壓縮後的檔案大小比較
喜歡 CSS & JavaScript Compressor 線上程式碼壓縮工具,有效提高網站速度 嗎?歡迎將免費資源網路社群加入書籤,以 FacebookTwitterGoogle+ 追蹤更新,獲取更多科技新知及免費資源相關介紹教學。

Click the image to open in full size. Click the image to open in full size. Click the image to open in full size. Click the image to open in full size. Click the image to open in full size. Click the image to open in full size.


來源...

回覆時引用此篇文章
回覆
相似的主題
主題 主題作者 討論區 回覆 最後發表
CSS Lint - 線上 CSS 檢測工具,讓你的樣式表更正確精簡 wowria 精選好用APP等相關網站資源 (Website Reviews) 0 2011-06-30 04:58 PM
prototype.js源码解读(一) korpton jQuery 討論區 (jQuery 豐富資源) 7 2009-02-27 07:12 AM


主題工具
顯示模式

發表文章規則
不允許您發表新主題
不允許您發表文章
不允許您上傳附件
不允許您編輯自已的文章

開啟 BB 代碼
關閉 HTML 程式碼
Trackbacks are 關閉
Pingbacks are 關閉
Refbacks are 開啟



所有時間均為 +9。現在的時間是 11:18 AM
Powered by vBulletin® 版本 3.7.2
版權所有 ©2000 - 2017,Jelsoft Enterprises Ltd.
Advertisement System V2.6 By   Branden
RiS 社群 ( 感謝正洋資訊顧問有限公司技術指導 ) - 使用3.7.2永久合法版權。
Ad Management by RedTyger



Content Relevant URLs by vBSEO 3.6.0 PL2