Compression of css is not working in Firefox and Iphone safari - css

I Was using google page speed insights and it recommended my css pages to be compressed.So I added this htaccess
<filesMatch "\.(js|css)$">
Header set Content-Encoding x-deflate
# Header set Content-Encoding compress
# Header set Content-Encoding x-gzip
</filesMatch>
So It was compressing css and working fine in chrome , But in firefox When I access http://fasttorrent.me/cdn/bootstrap.css css link it was blank and I get below error
The character encoding of the plain text document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the file needs to be declared in the transfer protocol or file needs to use a byte order mark as an encoding signature.
So I added below code
<filesMatch "\.css$">
FileETag None
<ifModule mod_headers.c>
Header set Content-type "text/css"
</ifModule>
</filesMatch>
But still I get same error in firefox and iphone safari.
EDIT : I tried to set charset like below..still error
<filesMatch "\.(html|css|js)$">
AddDefaultCharset UTF-8
DefaultLanguage en-US
Header set Content-Encoding x-deflate
</filesMatch>

I was having a similar problem earlier and it looks like firefox doesn't support the following lines because they are declaring that the output is compressed but not actually compressing it. https://support.mozilla.org/en-US/questions/1063554
<filesMatch "\.(js|css)$">
Header set Content-Encoding x-deflate
# Header set Content-Encoding compress
# Header set Content-Encoding x-gzip
</filesMatch>
So as per this link https://varvy.com/pagespeed/enable-compression.html I replaced it with the following and now all seems to be working.
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/javascript
AddOutputFilterByType DEFLATE application/x-javascript

Related

HTACCESS file modified but still no GZIP compression

EDITED - I ran speed tests on my site with google page speed insights and some anomalies emerged regarding text compression. I verified that on the site was not active the text compression (Content-Encoding not present in the Response Headers) and then I modified the root htaccess file like this:
# ORIGINAL CODE
<IfModule mod_deflate.c>
SetOutputFilter DEFLATE
<IfModule mod_setenvif.c>
# Netscape 4.x has some problems...
BrowserMatch ^Mozilla/4 gzip-only-text/html
# Netscape 4.06-4.08 have some more problems
BrowserMatch ^Mozilla/4\.0[678] no-gzip
# MSIE masquerades as Netscape, but it is fine
# BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
# NOTE: Due to a bug in mod_setenvif up to Apache 2.0.48
# the above regex won't work. You can use the following
# workaround to get the desired effect:
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
# Don't compress images
SetEnvIfNoCase Request_URI .(?:gif|jpe?g|png)$ no-gzip dont-vary
</IfModule>
<IfModule mod_headers.c>
# Make sure proxies don't deliver the wrong content
Header append Vary User-Agent env=!dont-vary
</IfModule>
</IfModule>
# CODE ADDED TO ACTIVATE COMPRESSION
<IfModule mod_deflate.c>
# Compress HTML, CSS, JavaScript, Text, XML and fonts
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
# Remove browser bugs (only needed for really old browsers)
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
</IfModule>
I think the server is Apache, in google developer tools it just says:
server: - WordPress Hosting by https://www.vhosting-it.com
However after these changes the speed checker keeps giving me the same errors and I still don't see the Content-Encoding in the Response Headers. How can I fix it?
You have added not added the code completely to make it work.
Do add the below code at end of your .htaccess file
# BEGIN GZIP COMPRESSION
<IfModulemod_gzip.c>
mod_gzip_onYes
mod_gzip_dechunkYes
mod_gzip_item_includefile.(html?|txt|css|js|php|pl)$
mod_gzip_item_includehandler^cgi-script$
mod_gzip_item_includemime^text/.*
mod_gzip_item_includemime^application/x-javascript.*
mod_gzip_item_excludemime^image/.*
mod_gzip_item_excluderspheader^Content-Encoding:.*gzip.*
</IfModule>
# END GZIP COMPRESSION
Add the following line of codes if your website is hosted on a Nginx server.
gzipon;
gzip_comp_level2;
gzip_http_version1.0;
gzip_proxied any;
gzip_min_length1100;
gzip_buffers168k;
gzip_types text/plain text/html text/css application/x-javascript text/xml application/xml application/xml+rss text/javascript;
gzip_disable"MSIE [1-6].(?!.*SV1)";
gzip_varyon;
After adding the code you can go to webpagetest or anyother speed test site for confirmation. This will work 100% but, still in any case you will not able to achieve it, can comment below, would love to assist you.
Add below code in the .htaccess file.
<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>
Hope this will help.

I see 200 instead of 304 for cached URLs

Recently my developer enabled site caching per page as well as assets. The response code for assets is 304, as desired, but the pages return 200:
/offers/brand-new-car HTTP/1.1" **200**
Refreshing the page (using the F5 shortcut) doesn’t seem to help.
Here is a sample log:
37.190.212.157 - - [06/Mar/2015:11:10:45 +0100] "GET /offers/brand-new-car HTTP/1.1" **200** 11998 "http://domain.com/cars" "Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/40.0.2214.115 Safari/537.36"
Your help will be highly appreciated.
Thanks
http://www.imageupload.co.uk/image/5tK3 here is screen how that`s look
I also tried to Enter instead of F5 but same result 200
Here is .htaccess setting
Header unset ETag
FileETag None
Set cache-control header
Header set Cache-Control "public"
Header set Cache-Control "private"
Insert filter
SetOutputFilter DEFLATE
SetOutputFilter DEFLATE
Netscape 4.06-4.08 have some more problems
BrowserMatch ^Mozilla/4.0[678] no-gzip
MSIE masquerades as Netscape, but it is fine
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Don't compress images
SetEnvIfNoCase Request_URI \
.(?:gif|jpeg|png)$ no-gzip dont-vary
Make sure proxies don't deliver the wrong content
Header append Vary User-Agent env=!dont-vary
PageSpeed
ExpiresActive On
Header set Connection keep-alive
compress text, html, javascript, css, xml:
AddOutputFilterByType DEFLATE text/xml
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/x-javascript
ExpiresDefault "access plus 1 hour"

GZIP compression doesn't seem to work in htaccess

I am trying to imporve a sites performance but no matter what I try I keep getting a low score (21%) on "Enable gzip compression". Everything else scores in the high 90's to 100. It's really bugging me as it seems to work on some sites and not others.
The code i have in my .htaccess is below. The #BEGIN GZIP to #END GZIP is something new I tried from a comment on css tricks but it looks to be for older versions of apache. How can I increase the score for "Enable gzip compression" through the .htaccess file?
FileETag MTime Size
# BEGIN GZIP
# mod_gzip compression (legacy, Apache 1.3)
<IfModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_dechunk Yes
mod_gzip_item_include file \.(html?|xml|txt|css|js)$
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>
# END GZIP
# DEFLATE compression
<IfModule mod_deflate.c>
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/javascript
AddOutputFilterByType DEFLATE application/x-javascript
# remove browser bugs
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
Header append Vary User-Agent
</IfModule>
<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf|ico)$">
Header set Cache-Control "public"
Header set Expires "Thurs, 06 Jan 2016 14:30:00 GMT"
Header set Last-Modified "Thurs, 06 Jan 2014 14:30:00 GMT"
</FilesMatch>
<IfModule mod_headers.c>
<FilesMatch "\.(js|css|xml|gz)$">
Header append Vary: Accept-Encoding
</FilesMatch>
</IfModule>

How to make gzip work on 1and1 shared host WordPress site

YSlow is telling me that my css should be compressed, but after several hours of tinkering, I cannot for the life of me get gzip to work for my website. At this point, I'm not even sure if the performance increase (will there be one?) will be worth the effort.
I'm running a WordPress site on a 1&1 shared hosting account.
Honestly, I don't really know what I'm doing with this stuff, and can't seem to get an appropriate setup. I read in a few places that with 1&1, "modules Apache mod_deflate and mod_gzip are not installed.", so I assume this is part of the problem.
I have tried the following code:
This one doesn't seem to do anything:
<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>
This causes a 500 error
<Location />
# Insert filter
SetOutputFilter DEFLATE
# Netscape 4.x has some problems...
BrowserMatch ^Mozilla/4 gzip-only-text/html
# Netscape 4.06-4.08 have some more problems
BrowserMatch ^Mozilla/4\.0[678] no-gzip
# MSIE masquerades as Netscape, but it is fine
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
# Don't compress images
SetEnvIfNoCase Request_URI \
\.(?:gif|jpe?g|png)$ no-gzip dont-vary
# Make sure proxies don't deliver the wrong content
Header append Vary User-Agent env=!dont-vary
</Location>
This (from html5 boilerplate) doesn't seem to do anything either:
<IfModule mod_deflate.c>
# Force deflate for mangled headers developer.yahoo.com/blogs/ydn/posts/2010/12/pushing-beyond-gzipping/
<IfModule mod_setenvif.c>
<IfModule mod_headers.c>
SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
</IfModule>
</IfModule>
# HTML, TXT, CSS, JavaScript, JSON, XML, HTC:
<IfModule filter_module>
FilterDeclare COMPRESS
FilterProvider COMPRESS DEFLATE resp=Content-Type $text/html
FilterProvider COMPRESS DEFLATE resp=Content-Type $text/css
FilterProvider COMPRESS DEFLATE resp=Content-Type $text/plain
FilterProvider COMPRESS DEFLATE resp=Content-Type $text/xml
FilterProvider COMPRESS DEFLATE resp=Content-Type $text/x-component
FilterProvider COMPRESS DEFLATE resp=Content-Type $application/javascript
FilterProvider COMPRESS DEFLATE resp=Content-Type $application/json
FilterProvider COMPRESS DEFLATE resp=Content-Type $application/xml
FilterProvider COMPRESS DEFLATE resp=Content-Type $application/xhtml+xml
FilterProvider COMPRESS DEFLATE resp=Content-Type $application/rss+xml
FilterProvider COMPRESS DEFLATE resp=Content-Type $application/atom+xml
FilterProvider COMPRESS DEFLATE resp=Content-Type $application/vnd.ms-fontobject
FilterProvider COMPRESS DEFLATE resp=Content-Type $image/svg+xml
FilterProvider COMPRESS DEFLATE resp=Content-Type $image/x-icon
FilterProvider COMPRESS DEFLATE resp=Content-Type $application/x-font-ttf
FilterProvider COMPRESS DEFLATE resp=Content-Type $font/opentype
FilterChain COMPRESS
FilterProtocol COMPRESS DEFLATE change=yes;byteranges=no
</IfModule>
<IfModule !mod_filter.c>
# Legacy versions of Apache
AddOutputFilterByType DEFLATE text/html text/plain text/css application/json
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE text/xml application/xml text/x-component
AddOutputFilterByType DEFLATE application/xhtml+xml application/rss+xml application/atom+xml
AddOutputFilterByType DEFLATE image/x-icon image/svg+xml application/vnd.ms-fontobject application/x-font-ttf font/opentype
</IfModule>
</IfModule>
This one Doesnt seem to do anything...
AddOutputFilterByType DEFLATE text/html text/plain text/xml text/css application/x-javascript
I followed the tutorial found here
(http://mrrena.blogspot.com/2009/01/how-to-compress-php-and-other-text.html)
but this essentially completely broke the appearance of my site.
Tried this in my Functions.php, and it seemed to compress my html, but leaves some js and css uncompressed
if(extension_loaded("zlib") && (ini_get("output_handler") != "ob_gzhandler"))
add_action('wp', create_function('', '#ob_end_clean();#ini_set("zlib.output_compression", 1);'));
So, after a while I figured out how to compress html, css and js files having a 1&1 Webhosting package. Deflate is not supported!
For the dynamic content you add php.ini to your root directory of your website. Content of php.ini:
zlib.output_compression =1
zlib.output_compression_level =9
Of course you can also choose another compression level, 9 is the highest (and causing the highest server load). That will compress your the dynamically generated html file.
To compress static files (css, js and images...) you need to modify the .htaccess file. For that append
<IfModule mod_rewrite.c>
RewriteEngine on
RewriteBase /
RewriteOptions Inherit
ReWriteCond %{HTTP:accept-encoding} (gzip.*)
ReWriteCond %{REQUEST_FILENAME} !.+\.gz$
RewriteCond %{REQUEST_FILENAME}.gz -f
RewriteRule (.+) $1.gz [QSA,L]
</IfModule>
to your .htaccess file (you find that file in the root directory of your website - else create it).
But the compression is not done automatically. So you have to compress the files on your own! Use e.g. 7-zip and compress the js and css files with .gz -> the result should be e.g. stylesheet.css.gz.
Then upload the file to the same directory as the file you just compressed.
Now it should work!
PS: compression is not always useful especially when the file is very small. So check the differences before and after compression.
It looks to me like you have exhausted your option. Looking at the above it seems like the host indeed doesn't have mod_deflate or mod_gzip. So I guess you are just out of luck.
The PHP solution is indeed only for the HTML. So just stick with that one. HTML is also the best place to add compression, as, most of the time, the CSS and JS are only downloaded on the first page.
You could redirect the request to CSS and JS though a PHP script, and use the PHP to compress. But I would not go there, as you would also have to implement 304 Not modified and set the appropriate expires headers.
Enable gzip compression
The gzip compression can be activated in php.ini with the following code:
zlib.output_compression = On
zlib.output_compression_level = 9
allow_url_fopen = On
I know this question is a bit old now, but I've found a solution that works for me.
Add a file called "php.ini" to the root folder containing the following;
zlib.output_compression = On
zlib.output_compression_level = 9
Then (and this is the bit you might not expect) add the following to your .htaccess file;
AddType x-mapp-php6 .html .htm .php
Yes, that's right. I've put php6 in that. Apparently that will run the latest stable version of PHP (currently 5.4) which will allow gzip compression. This will also run .html and .htm files through the PHP parser, which means that they can be compressed (files not run through the PHP parser will not be compressed). Feel free to add any other extensions that you want to be run through PHP (.xml for example).
By the way, if you do run .xml files through PHP, remember to set the header declaring it as an xml file, otherwise it won't work properly.
Hope this helps!
Works for me,
First you have to copy the php.ini in all directory.
(1and1 provided a script to facilitate this manipulation in their faq)
with this content :
zlib.output_compression =1
zlib.output_compression_level =9
Then add this in the htaccess :
<IfModule mod_gzip.c>
mod_gzip_on Yes
mod_gzip_item_exclude file \.(gz|zip|xsl)$
mod_gzip_item_include mime ^text/html$
mod_gzip_item_include mime ^text/plain$
mod_gzip_item_include mime ^image/x-icon$
mod_gzip_item_include mime ^httpd/unix-directory$
mod_gzip_item_include mime ^text/javascript$
mod_gzip_item_include mime ^application/javascript$
mod_gzip_item_include mime ^application/x-javascript$
mod_gzip_item_include mime ^text/x-js$
mod_gzip_item_include mime ^text/ecmascript$
mod_gzip_item_include mime ^application/ecmascript$
mod_gzip_item_include mime ^text/vbscript$
mod_gzip_item_include mime ^text/fluffscript$
mod_gzip_item_include mime ^text/css$
</IfModule>
You can enable compression by adding this code into your .htaccess file :
<IfModule mod_rewrite.c>
AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml image/svg+xml image/x-icon text/css application/x-javascript application/javascript application/x-httpd-php application/x-httpd-fastphp application/x-httpd-eruby
</IfModule>

Getting gzip to work in wordpress with htaccess

I'm using the following snippet (taken from html5 boilerplate) to gzip files. I don't have too much experience with this kindof thing, but it seems as though it isn't working.
Google PageSpeed is listing out a whole bunch of files which should be compressed but aren't (all of my js and css I think)
Looking at firefox's net panel, I think I've verified that these are not being compressed, though I do see Accept Encoding: gzip, deflate
Part of the problem is maybe the Content-Type of the js is set to application/x-javascript which doesn't appear to be referenced in the below code. The css is however text/css
Honestly (haven't done much googling on this yet), I don't even know how to change the content-type of things, so if thats part of the problem, and its an easy eplanation (or snippet), than please include it in your answer.
If it matters, I'm using WordPress....
# ----------------------------------------------------------------------
# Gzip compression
# ----------------------------------------------------------------------
<IfModule mod_deflate.c>
# Force deflate for mangled headers developer.yahoo.com/blogs/ydn/posts/2010/12/pushing-beyond-gzipping/
<IfModule mod_setenvif.c>
<IfModule mod_headers.c>
SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
</IfModule>
</IfModule>
# HTML, TXT, CSS, JavaScript, JSON, XML, HTC:
<IfModule filter_module>
FilterDeclare COMPRESS
FilterProvider COMPRESS DEFLATE resp=Content-Type $text/html
FilterProvider COMPRESS DEFLATE resp=Content-Type $text/css
FilterProvider COMPRESS DEFLATE resp=Content-Type $text/plain
FilterProvider COMPRESS DEFLATE resp=Content-Type $text/xml
FilterProvider COMPRESS DEFLATE resp=Content-Type $text/x-component
FilterProvider COMPRESS DEFLATE resp=Content-Type $application/javascript
FilterProvider COMPRESS DEFLATE resp=Content-Type $application/json
FilterProvider COMPRESS DEFLATE resp=Content-Type $application/xml
FilterProvider COMPRESS DEFLATE resp=Content-Type $application/xhtml+xml
FilterProvider COMPRESS DEFLATE resp=Content-Type $application/rss+xml
FilterProvider COMPRESS DEFLATE resp=Content-Type $application/atom+xml
FilterProvider COMPRESS DEFLATE resp=Content-Type $application/vnd.ms-fontobject
FilterProvider COMPRESS DEFLATE resp=Content-Type $image/svg+xml
FilterProvider COMPRESS DEFLATE resp=Content-Type $image/x-icon
FilterProvider COMPRESS DEFLATE resp=Content-Type $application/x-font-ttf
FilterProvider COMPRESS DEFLATE resp=Content-Type $font/opentype
FilterChain COMPRESS
FilterProtocol COMPRESS DEFLATE change=yes;byteranges=no
</IfModule>
<IfModule !mod_filter.c>
# Legacy versions of Apache
AddOutputFilterByType DEFLATE text/html text/plain text/css application/json
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE text/xml application/xml text/x-component
AddOutputFilterByType DEFLATE application/xhtml+xml application/rss+xml application/atom+xml
AddOutputFilterByType DEFLATE image/x-icon image/svg+xml application/vnd.ms-fontobject application/x-font-ttf font/opentype
</IfModule>
</IfModule>
There is other similar solved question with several options (despite the reference to the hosting, question and answer is enough generic) here: How to make gzip work on 1and1 shared host WordPress site
Review that your Apache has the required modules installed and loaded (mod_setenvif, filter_module, mod_headers, mod_deflate, mod_gzip).

Resources