如何对网站上的 .css 和 .js 文件使用 gzip 压缩?
我花了好几天的时间才让 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>
当我使用 Firebug v1.8.3 和 Google PageSpeed v1.12 检查站点时,显示以下文件尚未压缩:
/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 站点,它确认压缩已启用,但是当我检查上面的 .css 和.js 文件,它说它们没有被压缩。
压缩网站时如何包含所有 .css 和 .js 文件?
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.
The site I'm currently working on is Peak Heat, running Wordpress, and below is the .haccess file I'm using:
# 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:
/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
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.
What can I do to include all .css and .js files when compressing my site?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
![扫码二维码加入Web技术交流群](/public/img/jiaqun_03.jpg)
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(2)
AddOutputFilterByType DEFLATE text/css
将压缩设置为deflate
,而不是gzip
,因此请使用filesMatch
并设置>Content-Encoding
标头到x-deflate
:如果失败,请取消注释
compress
行并注释x-deflate
行。 gzip 不是标准 Apache 安装的一部分,因此请安装 gzip 模块(如果 deflate 不够)。作为最后的手段,创建 gzip 版本你的 CSS 和 JS 文件。AddOutputFilterByType DEFLATE text/css
sets the compression todeflate
, notgzip
, so usefilesMatch
and set theContent-Encoding
header tox-deflate
:If that fails, uncomment the
compress
line and comment thex-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.我认为您缺少
AddOutputFilterByType DEFLATE text/javascript
。添加这解决了我的问题。I think you're missing
AddOutputFilterByType DEFLATE text/javascript
. Adding that fixed the issue for me.