壓縮js和css代碼可以提高瀏覽者訪問網站的速度,從而增加用戶體驗度,那么如何壓縮javascript和css代碼呢?
減小代碼在傳輸中的大小,就能提高頁面的傳輸速度,打開網頁也就快了。
使" />
大連新圖聞告訴您如何壓縮你的JS和CSS代碼:
壓縮js和css代碼可以提高瀏覽者訪問網站的速度,從而增加用戶體驗度,那么如何壓縮javascript和css代碼呢?
減小代碼在傳輸中的大小,就能提高頁面的傳輸速度,打開網頁也就快了。
使用Apache2的mod_deflate模塊來壓縮頁面,但這需要在Apache中加載這個模塊才行,需要我們打開apache中的打開mod_deflate。
mod_deflate模塊提供了DEFLATE輸出過濾器,允許服務器在將輸出內容發(fā)送到客戶端以前進行壓縮(應該也是采用gzip數(shù)據格式壓縮,deflate是一種壓縮算法)以節(jié)約帶寬。Apache2已經內置了mod_deflate模塊。Apache 1.3.x時代使用mod_gzip模塊來實現(xiàn)
那么對于沒有開啟mod_deflate模塊的主機或者服務器來說,我建議您采用ob_gzhandler函數(shù)來壓縮了,它的壓縮效果和mod_deflate相比,相差很小,幾乎可以忽略
而WordPress默認的gzip壓縮功能是通過ob_gzhandler這個函數(shù)來實現(xiàn)的,ob_gzhandler是php 4.0.4新增的一個輸出緩存函數(shù),并通過gzip壓縮后發(fā)送到客戶端。這個函數(shù)需要zlib庫支持,一般的虛擬主機都安裝有這個庫,所以很多blog都使用這個方法來實現(xiàn)對php頁面的壓縮。
使用ob_gzhandler函數(shù)有3種方法讓它對php進行壓縮:
1、在php.ini中設置output_handler = ob_gzhandler
2、在.htaccess中加入php_value output_handler ob_gzhandler
3、在php文件頭加上ob_start('ob_gzhandler');
先進種我們是沒法辦到,第二種方法不錯,可以一勞永逸,一、二種方法效果都一樣,就是對所有php后綴文件進行壓縮。我這里主要介紹一下第三種方法,參考“How To: Optimize Your CSS Even More”。
例如對模板下的style.css進行壓縮
1、把模板目錄下的style.css復制一份出來,命名為style.css.php
接著在style.css.php頂部加入這句:
< ?php if(extension_loaded('zlib')) {ob_start('ob_gzhandler');} header("Content-type: text/css"); ?>
在后加上
< ?php if(extension_loaded('zlib')) {ob_end_flush();} ?>
(復制的時候去掉?php前的空格)
2、按照下面的方式修改header.php中的css連接
原來的:
<link rel="stylesheet" type="text/css" media="screen" href="/style.css"/>
修改后的:
<link rel="stylesheet" type="text/css" media="screen" href="/style.css.php"/>
搞定,現(xiàn)在你的CSS就可以被gzip壓縮了。
JS也可以使用同樣的方法,只是在xx.js.php頭部加入的應該是這樣:
< ?php if ( extension_loaded('zlib') ) {ob_start('ob_gzhandler');} header("Content-Type: text/javascript"); ?>
(復制的時候去掉?php前的空格)
仔細看看K2主題的中的JS,就是修改后綴為php后在頂部加入了ob_gzhandler函數(shù)。
用這種方法,我把50多K的prototype.js和13K的style.css壓縮了,現(xiàn)在用Web Page Analyzer測試我的首頁,JS大小從88,553b減小到了45,852b,CSS從17,626b減小到了7,193b。
掃一掃
關注新圖聞科技
全國咨詢熱線
186-0984-0880