如何在我的網站上對.css和.js文件使用gzip壓縮？

Question

我已經辛苦工作了幾天，以便在我的共享托管服務器上的網站上運行gzip壓縮。 我已經取得了一定程度的成功，但遺憾的是.css和.js文件被遺漏了，盡管我付出了最大的努力。 由於我使用的是共享主機，因此我無法訪問apache配置文件，因此我已經使用我的.htaccess文件來實現此目的。

我正在處理的網站是Peak Heat ，運行Wordpress，下面是我正在使用的.haccess文件：

# compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/js
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access 1 year"
ExpiresByType image/jpeg "access 1 year"
ExpiresByType image/gif "access 1 year"
ExpiresByType image/png "access 1 year"
ExpiresByType text/css "access 1 month"
ExpiresByType application/pdf "access 1 month"
ExpiresByType text/x-javascript "access 1 month"
ExpiresByType application/x-shockwave-flash "access 1 month"
ExpiresByType image/x-icon "access 1 year"
ExpiresDefault "access 1 week"
</IfModule>
## EXPIRES CACHING ##

<IfModule mod_headers.c>
  <FilesMatch "\.(js|css|xml|gz)$">
    Header append Vary Accept-Encoding
  </FilesMatch>
</IfModule>

<ifModule mod_gzip.c>
  mod_gzip_on Yes
  mod_gzip_dechunk Yes
  mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
  mod_gzip_item_include handler ^cgi-script$
  mod_gzip_item_include mime ^text/.*
  mod_gzip_item_include mime ^application/x-javascript.*
  mod_gzip_item_exclude mime ^image/.*
  mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
</ifModule>

當我使用帶有Google PageSpeed v1.12的Firebug v1.8.3檢查網站時，它顯示以下文件尚未壓縮：

/wp-includes/js/jquery/jquery.js?ver=1.6.1

/wp-content/themes/peak-heat/script/global.js

/wp-content/plugins/contact-form-7/jquery.form.js?ver=2.52

/wp-content/themes/peak-heat/style.css

/wp-content/plugins/contact-form-7/scripts.js?ver=3.0

/wp-content/plugins/contact-form-7/styles.css?ver=3.0

/wp-content/plugins/testimonials-widget/testimonials-widget.css

使用在線GIDZipTest站點檢查網站URL本身，它確認已啟用壓縮，但當我檢查上述.css和.js文件時，它表示它們未被壓縮。

壓縮網站時，如何包含所有.css和.js文件？

Answer 1

AddOutputFilterByType DEFLATE text/css將壓縮設置為deflate而不是gzip ，因此使用filesMatch並將Content-Encoding標頭設置為x-deflate ：

<filesMatch "\.(js|css)$">
Header set Content-Encoding x-deflate
# Header set Content-Encoding compress
# Header set Content-Encoding x-gzip
</filesMatch>

如果失敗，請取消注釋compress線並注釋x-deflate線。 gzip不是標准Apache安裝的一部分 ，因此如果deflate不夠，請安裝gzip模塊 。 作為最后的手段， 創建CSS和JS文件的gzip壓縮版本 。

Answer 2

我認為你缺少AddOutputFilterByType DEFLATE text/javascript 。 添加它解決了我的問題。