如何在我的网站上对.css和.js文件使用gzip压缩?

时间:2021-04-11 20:00:21

I have been toiling for days to get gzip compression working on the websites I have on my shared hosting server. I've had a certain level of success but sadly .css and .js files are being left out, despite my best efforts. Since I'm using shared hosting, I have no access to the apache configuration file, so I have resorted to using my .htaccess file to achieve this.

我已经辛苦工作了几天,以便在我的共享托管服务器上的网站上运行gzip压缩。我已经取得了一定程度的成功,但遗憾的是.css和.js文件被遗漏了,尽管我付出了最大的努力。由于我使用的是共享主机,因此我无法访问apache配置文件,因此我已经使用我的.htaccess文件来实现此目的。

The site I'm currently working on is Peak Heat, running Wordpress, and below is the .haccess file I'm using:

我目前正在开发的网站是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>

When I check the site using Firebug v1.8.3 with Google PageSpeed v1.12, it shows that the following files haven't been compressed:

当我使用带有Google PageSpeed v1.12的Firebug v1.8.3检查网站时,它显示以下文件尚未压缩:

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

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

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

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

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

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

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

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

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

/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/contact-form-7/styles.css?ver=3.0

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

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

Checking the website URL itself with the online GIDZipTest site, it confirms that compression is enabled, but when I check the above .css and .js files, it says that they're not compressed.

使用在线GIDZipTest站点检查网站URL本身,它确认已启用压缩,但是当我检查上述.css和.js文件时,它表示它们未被压缩。

What can I do to include all .css and .js files when compressing my site?

压缩我的网站时,如何包含所有.css和.js文件?

2 个解决方案

#1


12  

AddOutputFilterByType DEFLATE text/css sets the compression to deflate, not gzip, so use filesMatch and set the Content-Encoding header to x-deflate:

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>

If that fails, uncomment the compress line and comment the x-deflate line. gzip is not part of the standard Apache installation, so install the gzip module if deflate is not sufficient. As a last resort, create gzipped versions of your CSS and JS files.

如果失败,则取消注释压缩线并注释x-deflate线。 gzip不是标准Apache安装的一部分,因此如果deflate不够,请安装gzip模块。作为最后的手段,创建CSS和JS文件的gzip压缩版本。

#2


1  

I think you're missing AddOutputFilterByType DEFLATE text/javascript. Adding that fixed the issue for me.

我认为你缺少AddOutputFilterByType DEFLATE text / javascript。添加它解决了我的问题。

#1


12  

AddOutputFilterByType DEFLATE text/css sets the compression to deflate, not gzip, so use filesMatch and set the Content-Encoding header to x-deflate:

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>

If that fails, uncomment the compress line and comment the x-deflate line. gzip is not part of the standard Apache installation, so install the gzip module if deflate is not sufficient. As a last resort, create gzipped versions of your CSS and JS files.

如果失败,则取消注释压缩线并注释x-deflate线。 gzip不是标准Apache安装的一部分,因此如果deflate不够,请安装gzip模块。作为最后的手段,创建CSS和JS文件的gzip压缩版本。

#2


1  

I think you're missing AddOutputFilterByType DEFLATE text/javascript. Adding that fixed the issue for me.

我认为你缺少AddOutputFilterByType DEFLATE text / javascript。添加它解决了我的问题。