What is the recommended way to configure Apache to enable HTTP compression for CSS and JS fiels, using .htaccess? I have seen several different directives used in examples on the web. I have tried some of these and yet I have not been able to get it to work. I am checking the HTTP headers using Firebug.
Ensure that mod_deflate and mod_mime are enabled and add something like:
AddOutputFilterByType DEFLATE application/x-javascript text/javascript text/css
to your .htaccess.
See also: http://brightscape.net/blog/compress-your-web-pages-with-mod_deflate/
Related
My original problem was that I can't get mod_deflate working despite ensuring it is properly installed and enabled and trying all possible .htaccess combinations. What is even more strange is that the document itself is gzipped while JS and CSS files aren't.
So this led to me another strange observation: response headers contain a line Server: nginx, even though I am convinced I am using Apache. How am I convinced? If I run service apache2 stop, the website is down. So it seems rather strange to me and I am curious why it happens and maybe it will help me to solve my original problem.
OS I am using is Debian 7, Plesk is used for configuration of Apache, and the website is running Laravel (which is of little significance I guess, but still).
I hope someone can help me, thanks in advance.
I use the same configuration as you with one of my servers. Nginx is used to manage the SSD cache after Apache.
You can change Nginx configuration with Plesk:
Websites & Domains > domain > Web Server Settings (Additional nginx directives).
I use Gzip with:
gzip on;
gzip_comp_level 9;
gzip_disable “MSIE [1-6]\.(?!.*SV1)”;
gzip_types text/plain text/html text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript application/javascript text/x-js;
I am using mod_defalte, as so:
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
</IfModule>
I am wondering, but cannot find the answer to: Does the above mean all content that matches those rules will be gzipped to any request? Or does mod_defalte on compress when the HTTP request states it can accept gzip?
Further, I am reading some posts where people are disabling certain browsers with bugs in their gzip implementation. But there is no explanation for this. Does anyone have a definitive set of rules for this. Or is it not needed?
mod_deflate is capable of compressing using gzip encoding.
Sometimes the module skips certain files because they are either too small or thought to have no significant gain.
The request header tells the server whether to compress or not.
Most of the bugs are related to proxy server on the client side where gzipped content is cached because a browser that accepts the encoding requested a resource first, but other browsers behind the same cache cannot. This is the reason to use the Vary header.
Since the update to Mac OS Mavericks all my styles and scripts get served as text/html
I have no idea where I can change this behavior. I'm using the built in apache service
EDIT: I forgot to mention that static files works as expected. The files above get parsed by a php script to get served cached and compressed. I'm using header("Content-type: text/css") to define the content type
In your server/vhost config try adding:
AddType text/javascript .js
AddType text/css .css
If something else is already setting the type, you can try adding this instead:
<Files "*.js">
ForceType text/javascript
</Files>
<Files "*.css">
ForceType text/css
</Files>
After further digging into the cacheing script I found a flush() method forces PHP to add a text/html content type in the header. This happens right before I add headers like header("Content-type: text/css")
I've rewritten my class method and the output is now correct. Strange is that it doesn't cause the problem on my live server with the same cacheing class
When I check this website: http://www.tropicbreeze.co.uk/, for example with http://checkgzipcompression.com/ - it reports that it is using Gzip. But Yslow disagrees.
I have this in my .htaccess file:
AddOutputFilterByType DEFLATE text/html text/php text/x-php application/php application/x-php application/x-httpd-php-source text/plain text/xml text/css text/javascript application/x-javascript application/xhtml+xml application/javascript application/x-httpd-php
Checking in the Net tab of Firebug for headers, I can see that the various associated .css and .js files on that page have Content-Encoding gzip appearing as expected - but the php files do not.
Yslow tells me that the homepage is not using Gzip. The Firebug Net tab says that the home page (and other php files on the server) are not being sent with Content-Encoding gzip
I've tried adding all the mimetype filters I could find suggested, and so far as I can see, DEFLATE text/html should cover it anyway, but still no joy.
I have cleared my cache and am not using a proxy.
Can anyone suggest what I've missed? Why are the php files not being gzipped when the other files are? Or, if they are being gzipped, why does Firebug /yslow think they aren't?
Not sure exactly what the issue might be but perhaps an easy fix would be to try something like...
<IfModule mod_deflate.c>
<FilesMatch "\.(css|htm|html|js|php|txt|xml)$">
SetOutputFilter DEFLATE
</FilesMatch>
</IfModule>
...which should setup compression on popular file extensions including PHP.
I personally think this format is much easier for a human to read too. Bonus!
trying to enable gzip compression for javascripts (jquery libs) I have on my site.
I do have enabled deflate in Apache's httpd.config file, and I have added next lines in .htaccess:
RewriteEngine On
AddOutputFilterByType DEFLATE text/html text/plain text/javascript
But, when I check with Google's page speed web performance tool, it gives me information that js is not compressed.
Can you tell me what I do wrong and how can I enable gzip compression for my web app?
Thank you in advance!
Javascript isn't text/javascript, it is application/javascript.