Marian Marian - 20 days ago 5
CSS Question

GZIP CSS completely breaks page

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



THE SITUATION...



I'm live with my own website on a shared hoster. When I came to the point of wanting to compress my tons of cms-generated js and css to make PageSpeedInsights and myself happy, I read into it and at last found out that my hoster doesn't have neither mod_gzip nor mod_deflate installed. What is installed is ZLIB. So I searched. Found the typical php append solution and didn't like it. Found a few neat lines of code for htaccess which made me happy cause 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 it's working by using GIDZipTest. This is all fine and I love it.

But as soon as I put .css to the AddHandler List, my page completely breaks.
I tried to use the php solution with ob_gzhandler for only css files, but it ended up not working at all. Just does plain nothing.




WORKAROUND? (NOT REALLY)



I manually minified all the css and uploaded a 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]


This works fine as well.



QUESTIONS!




  1. What do I need to define/specifiy for css compression to work? I feel I'm just missing some conversion stuff...


  2. When I'm serving my manually minified .css.gz files to a client, will they still be compressed extra?


  3. Would this have any further advantages in filesize or should I rather just stick to the manually served versions and give a ** about Google PageSpeed?
    (GIDZipTest still shows «what if» scenarios even for the minified files, which are impressive numbers to be honest. I'd like that...)




Thank you in advance for any comment given.

Yours sincerely


Marian

Answer

So if you run into similar problems I advise to read this article and get your full web directory path right!

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

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

and prepend it with .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>

to all .css files. This seemed to be the only solution for me until now. I would've got this right without asking here if I had found my full path earlier. Maybe someone still has a better idea on how to combine the AddHandler version with the css tho.

Things that did not work (completely disables all css):
- Adding .css to the AddHandler and any of the above (mine included) solutions.
- Serve manually gzipped css files and prepend a content type script
- Combination of the two