GZIP CSS completely breaks the page

Question

Thanks for stopping by. I really tried this on my own, but again it seems to me that there is too much for me to handle.

SITUATION...

---

I live with my own site on a shared host. When I came to compress my tons of jms and css created with cms to make me happy, and I realized that my host did not install either mod_gzip or mod_deflate . Installed ZLIB. Therefore, I was looking. Found a typical php append solution and didn't like it. Found some neat lines of code for htaccess that made me happy because they worked right away:

AddHandler application/x-httpd-php .html .htm .php .js php_flag output_buffering On php_value output_handler ob_gzhandler php_flag zlib.output_compression Off 

I confirmed that it works with GIDZipTest . This is all good and I like it.

But as soon as I put .css in the AddHandler list, my page completely breaks.
I tried to use php solution with ob_gzhandler only for css files, but in the end it doesn't work at all. It just does nothing.

Temporary solution? (NOT VALID)

---

I manually minimized all css and downloaded the css.gz version of each file, serving it with

 RewriteCond %{HTTP:Accept-encoding} gzip RewriteCond %{REQUEST_FILENAME}\.gz -s RewriteRule ^(.*)\.css $1\.css\.gz [QSA] RewriteRule \.css\.gz$ - [T=text/css,E=no-gzip:1] 

It works great.

QUESTIONS!

---

• What do I need to define / refine for css compression? I feel like I’m just lacking conversion information ...
  
• When I manually serve my mini .css.gz files for the client, will they still be compressed additionally?
  
• Will it have any additional benefits in files, or should I just stick with the manually maintained versions and give ** about Google PageSpeed?
  (GIDZipTest still shows what-if scenarios even for mini files that I would like this to ...)

Thanks in advance for any comment.
Respectfully,

Marian

Answer 1

So, if you encounter such problems, I advise you to read this article and get the full path to the web directory correctly!

Create a php script (for example: "gzip-css.php") with

 <?php ob_start("ob_gzhandler"); header("content-type: text/css; charset: UTF-8"); ?> 

and add it using .htaccess

 <FilesMatch "\.css$"> ForceType application/x-httpd-php php_value auto_prepend_file "/full/path/to/that/file/see/link/above/gzip-css.php" </FilesMatch> 

for all .css files. This seems to be the only solution so far for me. I would get this right without asking here if I had found my full path before. Maybe someone else has an idea on how to combine the AddHandler version with css tho.

Things that didn't work (completely disables all css):
- Adding .css to AddHandler and any of the above (included) solutions.
- Serve manually gzipped css files and add content type script
- combination of two

Answer 2

The PHP + zlib solution automatically compresses EVERY PHP file served from a web server. This means that every file you put in your php handler will be sent to the client browser. In any case, the AddHandler directive tells the web server to treat css files as php scripts, so I believe they are “broken”. Css files must have their own handler (text / css).

Another (untested) solution might contain a handler that you defined initially:

 AddHandler application/x-httpd-php .html .htm .php .js .css 

and adding this php code to the beginning of your css files:

 <?php header('Content-Type: text/css'); ?> 

But I'm not sure if this will work. This should tell browsers that they are actually receiving css files.

The best solution in these cases would be the mod_deflate you were talking about.

Answer 3

You transmit the content as compressed, but not just for the transfer that will be executed with Content-Encoding . Therefore, the client does not unpack it before interpreting the content.

You can enable MultiViews to enable automatic content matching with mod_negotiation :

 <FilesMatch "\.css$"> Options MultiViews </FilesMatch> 

Answer 4

Old question, but I found a .htaccess solution that worked for me without changing the code.

 AddHandler application/x-httpd-php .html .htm .php .js .css <Files *.css> Header set Content-type "text/css" </Files> php_flag zlib.output_compression On php_value zlib.output_compression_level 5