"Aggregate and compress CSS files" and "Aggregate JavaScript files" in performance settings, is not working

Any luck? I'm having the same problem.
I have the directory writable and I see that Drupal created a few css files in there.
/home/drupal/sites/mysite.com/files/css

I get the site loaded with no styles at all.

thanks

have you modified the css file ?? code texts garbled

It ships gzip css to browser and it don't unzip it. maybe not compatible with LiteSpeed server... (rewirte URL issues ??)
you can disable gzip css in settings.php to solve the problem temporarily.

anyway, have you try RC3

I am having this same problem on rc3 after upgrading from rc2. I'm not terribly familiar with the inner workings of this, but with some poking around, i notice that the following happens:

1. I enable "Aggregate and compress CSS files".
2. Everything that has to do with theming goes off its hinges. The page actually loads slower.
3. When I inspect the page with Safari, the aggregated files are "404 not found". Other stylesheets are "304 not modified".
4. The same problem happens for aggregation of javascript files. For example the overlay no longer works after enabling js aggregation.
5. The problem persists after emptying everything of logs, cache and cookies in the browser, for both Safari and Firefox.
6. The problem persists for both logged in and anonymous users.

My server configuration:
MAMP 1.9.4 (I have tried with and without APC cache enabled)
Apache 2.0.63
PHP 5.3.2
Drupal 7.0-rc3 - Using standard admin overlay with Seven, and have tried with Bartik and another custom theme.

Oddly enough, for me this was not an issue in rc2.

The site linked to by the original poster seems fine to me by the way. Could this partially be an issue with the browser?

I also attached an image of the Safari Web Inspector, showing all the crazy files being fed to my browser, but not actually existing.

What are the file permissions and ownership on your files directory? Could it be that the files can't be created by the web server user?

@FanisTsiros

your server response is
Content-Encoding gzip, gzip
Vary Accept-Encoding, Accept-Encoding

I tested it... if gzip,gzip..... it doesn't work in Firefox, but Safari is ok

drupal only append one time from htaccess, so the 2nd one may append by LiteSpeed

Oh my god this is embarrassing. I was fiddling with the multisite functionality, and forgot to rename the example.sites.php.... Well, thanks for making me think :)

Hej Hej,

I have the same issue with the rc4 relaease. Ihave updated from rc3.

To test I have comment out these lines:

#Header append Content-Encoding gzip
#Header append Vary Accept-Encoding

and clear all my caches but the problem is the same. Now I have renamed the file that @tjodolv said
but the problem is the same.

Is a fresh installation without any modifications and only the core is installed.

hope it helps.

kind regards
drew29

please try

1. add two the line to settings.php, to sure not released with compression
$conf['css_gzip_compression'] = FALSE;
$conf['js_gzip_compression'] = FALSE;

2. remove .htaccess (disable clean url first)

what's your env. info. post a live link if available.

ok thanks,

I have test it but it's the same problem

my livesite

hope it helps

kind regards
drew29

@drew29
what's your problem ?? I tested with FF3, IE9, SS5, CHROME 10, OPERA 11, ALL working

oh sorry,

now i have enabled the compression and you can see that does work or?

kind regards
drew29

I get once this error before when I test D6 to D7.
(it's error not same as @tjodolv & @FanisTsiros)

<link type="text/css" rel="stylesheet" href="http://www.medsuma.de/" media="all" />
<link type="text/css" rel="stylesheet" href="http://www.medsuma.de/" media="all" />
<link type="text/css" rel="stylesheet" href="http://www.medsuma.de/" media="all" />
<link type="text/css" rel="stylesheet" href="http://www.medsuma.de/" media="print" />

try clean caches see if it helps. (also manully remove sites/files/css, sites/files/js... maybe help, just try..)

reproducible ?
I tried fresh RC3 & enable compression, then upgrade to RC4. nps.

I have installed the admin menu and clear all caches

now it works :-)

I think i have forgot to delete the theme registry

sorry hope it helps so I closed the issue

kind regards
drew29

Hello,

sorry I'm again. the problem is coming back :-( I don't know why

It is possible my server settings are wrong? I have now disabled apc and restart my server but the problem is the same.

I have updated drupal rc to the final release.

to test I have:

-disabled clean urls
-disabled htaccess
-delete the css and js folders in my site folder
-clear always the cache under the performance settings.

I'm very confused about that.

kind regards
drew29

@drew29,

you live site above

Accept-Ranges bytes
Content-Length 279
Cache-Control max-age=2678400
Expires Sun, 06 Feb 2011 22:35:37 GMT
Keep-Alive timeout=15, max=100
Connection Keep-Alive
Content-Type text/css

the problem is missing "Content-Encoding gzip", so the browsers wont unzip your css/js files.

.htaccess, this part append gzip header

    <FilesMatch "(\.js\.gz|\.css\.gz)$">
      # Serve correct encoding type.
      Header append Content-Encoding gzip
      # Force proxies to cache gzipped & non-gzipped css/js files separately.
      Header append Vary Accept-Encoding
    </FilesMatch>

@droplet

you are great thank you very much, now it runs perfectly :-)

kind regards
drew29

Two sites built with Drupal 7 and run on the same shared host.
public_html/Site A
public_html/folder B/Site B

When I checked the "Aggregate and compress CSS files" and “Aggregate JavaScript files” check-boxes in performance settings for “Site A” and “Site B”, I lost all theming and also getting error about jQuery declaration in "Site B". There is no problem with "Site A".

If I unchecked the "Aggregate and compress CSS files" and “Aggregate JavaScript files” check-boxes for "Site A", there is no problem in "Site B" with "Aggregate and compress CSS files" and “Aggregate JavaScript files”.

I didn't face problem in Drupal 6. How can I optimize my both sites in Druapl 7?

@nihonsei: I think your problem should have been a separate issue, rather than reopening this one.

That said, I think it might be that your sites are sharing a files directory. Are they?

If not, check permissions on the respective files/js and files/css directories to ensure that the aggregate files can be created.

Sites are not sharing files directory. I installed Drupal 7 in both directory.
"public_html/Site A" and "public_html/folder B/Site B"
files/js and files/css are writable. Same as I was running my both sites in Drupal 6.

Hello,
I receive the same error, but:
My site is on a shared hosting, and all works well with "Aggregate and compress CSS files" enabled.
on an addon domain and on a subdomain of this site all goes wrong with "Aggregate and compress CSS files" enabled.

i even tried to put on all 3 sites is the same main .htaccess file, (i coppied the .htaccess from the site that works to the subdomain site and to the addon domain site). the "file system" settings are the same (same folder structure, same name [site1]/sites/[temp]; [site2]/sites/[temp], [site3]/sites/[temp])

all 3 are standard drupal 7.0 installs, with no modifications...

* i found a way through, that works both for the addon domain, and for the subdomain.

on localhost, i installed 2 drupal 7.0 sites, first in folder [site1], and 2nd in folder [site1]/[site2] (a subfolder of [site1]). in the .htaccess file of [site2] i commented the lines that refer to mod_headers (from ... to ... ), assuming that will take the rules from the .htaccess file in [site1]... and it worked. for me, it worked also on the live sites.

je_jorhe>>
Thanks for the solution.

sub

This might help:

Check "Rebuild theme registry on every page." - Save configuration

Check "Aggregate and compress CSS files." - Save configuration

Uncheck "Rebuild theme registry on every page." - Save configuration

I'm with AN hosting, Drupal core is in a sub directory. None of these suggestions have helped.

site renders fine in chrome, a bit strange IE8, and completely borked FF5.

I have same issue, I can aggregate on local mamp environment, but cannot do on remote server. None of above suggestions have worked, unclear what the problem is.

same as above. theming is broken when I check aggregating and compressing css\js...
#33 didn't solved this problem.

#33 did solve it for me (it's essential to manually delete css and js files after commenting out lines in .htaccess).

However, I don't think hacking .htaccess is "works as designed".

Ok, I haven't seen anyone mention the problems I am seeing.. which I am going to explain to you after a little background.

- I am running Drupal 7.8, 2011-08-31
- inmotionhosting shared hosting plan
- Core install is in its own sub-directory

I was trying to fix a problem I have run into before where I can not drag to move the order of blocks. It's an issue with jquery.cookie and mod_security, and the solution is to check the 'aggregate javascript files' checkbox and get on with your life. Well, upon doing so today not only did it not resolve the issue, but I'm seeing a very strange thing here. Also, aggregating CSS results in what others here have said... no CSS is being loaded. I am using Chrome and Firefox to test. neither work... and here's why...

When aggregating CSS or javascript files is checked, the files created by the aggregator are corrupt. As soon as I click 'aggregate javascript' my Firebug console comes back and gives me 'illegal character' errors on each js file that was created. If I browse to these files directly by copying/pasting the URL in the error message (/sites/default/files/js/*.js) it's blatantly obvious that it's corrupt. My first attached screenshot is a screenshot of one of the js files created by the aggregator. Same thing happens to the CSS files (but no error in Firebug). That is my second screenshot.

Even weirder, if I manually download either the CSS or JS file in question via FTP, and open it locally and it's fine. I can even open them locally in Firefox or Chrome and they look just fine.

I am not sure how this aggregating process works, or what files the browser reads or how it deals with compression but it almost seems to me that it's reading the GZIP (.gz) files and not the css or js file. Why? Well, when I first click 'aggregate javascript' and then click save, I get the "illegal character" error, and clicking the link in Firebug to go to the file shows me the corrupt file. If I go into my FTP client and delete ONLY the .gz files and refresh that window, it looks fine. I cannot, however, reproduce this with the CSS files.

Hope this helps. I need a fix too.

Kirk

I am having the same problem as #42.

I also have this illegal characters problem when I enable aggregate css and javascript.
but on my local server it is working properly.

I'm using hostmonster as my webhost.

same issue with patch, try to test it: #1116416: Use "Header set" instead of "Header append" in .htaccess to avoid double encoding

Good luck.

Changing "Header append" to "Header set" fixes the problem for me. Thank you.

(Noobie Q: I note that #1116416 is for 8.x-dev. How do we ensure that gets back-ported if this issue is 'closed (duplicate)'?)

@imonemus,

#1116416 tagged "Needs backport to D7" :)

It was committed to 7.x also and will be in the next stable point release.

This might fix the problem. I had a similar issue where my custom themeing was disappearing when I had the "Aggregate and compress css files" option on. I added the following line to my custom module's info file: stylesheets[all][] = css/example.css

This fixed it for me. I hope this might fix the problem for some of you guys as well...

The same

#46 fix the problem for me.

Closing this as duplicate of #1116416: Use "Header set" instead of "Header append" in .htaccess to avoid double encoding - if you are using the latest 7.x release AND have confirmed that your .htaccess has "Header set" instead of "Header append" (which it should do if you have upgraded) AND have confirmed that the same is true of any Drupal sites in parent directories, I suggest starting a new ticket with detail (attach your .htaccess, note as much detail as possible about your hosting setup) and add the link here.

I just wanted to add that for me on Litespeed, the only solution that worked was disabling javascript compression in settings.php as described in #15. This was after configuring Litespeed not to compress the files, as I wanted to rely on Drupal to do it.

With Drupal 7.12 and on lighthttpd server with all performance settings checked, my site seems partly uncompressed in Page Speed. I get this message:
Enable compression

Compressing the following resources with gzip could reduce their transfer size by 67.3KiB (69% reduction).

Compressing http://www.mikrobiologos.eu/sites/default/files/js/js_W814aiOipul0ER0l3Y... could save 27.7KiB (72% reduction).
Compressing http://www.mikrobiologos.eu/sites/default/files/js/js_3jHghlMLrjr9xXAC0J... could save 20.3KiB (63% reduction).
Compressing http://www.mikrobiologos.eu/sites/default/files/css/css_GCvu0WUKcv4SDbF_... could save 8.8KiB (72% reduction).
Compressing http://www.mikrobiologos.eu/sites/default/files/css/css_fuIdKsr5Dq9H4sWK... could save 5.6KiB (71% reduction).
Compressing http://www.mikrobiologos.eu/sites/default/files/css/css_rhpTo-il9Z4A3crc... could save 2.3KiB (71% reduction).
Compressing http://www.mikrobiologos.eu/sites/default/files/css/css_BOlIFSvN0-g5fPdL... could save 2.3KiB (67% reduction).
Compressing http://www.mikrobiologos.eu/sites/default/files/css/css_e0Oi8I1L8cGJ7Kxc... could save 367B (49% reduction).

Why all these files seem uncompressed?
Thank you!

#23 works for me -- thank you!

I have a D7.16 site on a Litespeed server and was experiencing some of these same anomalies when aggregating css and js. Commenting the .htaccess file solved the problem, lines 107 through 131 - "Rules to correctly serve gzip compressed CSS and JS files". I commented all the active lines in that section, but not sure if all of that is required. I also had to clear the browser cache, because it was still causing the anomalies. That cleaned up the mess.

The main anomaly was the admin menu bar would disappear, The admin overlay did not work, and on the modules page, using the module_filters module, all modules were displayed, and using the tabs on the side would not sort the modules like it is supposed to do.

I do not have command line access to the Litespeed server, and only have access through a cpanel. I wonder if the mod_headers module is installed on it, or even if it can be. I am really only an admin/themer and although I have built apache servers for dev work, I am flying in the dark when it comes to knowing and understanding all the backend stuff. This is my first experience with D7 on a Litespeed server. Hope this helps someone else experiencing this issue.

When i enabled the "Aggregate and compress CSS files" and "Aggregate JavaScript files".. my site lost all styling in IE.. and when i checked the path of css(sites/default/files/css/css_pbm0lsQQJ7A7WCCIMgxLho6mI_kBNgznNUWmTWcnfoE.css) and open it in IE it is giving some weird random latter.
Anyone have any clue??? plz help me :(

I started getting this error abruptly while making some block changes.
None of the other solutions worked for me (did a lot of unnecessary file system changes, cache clears etc to no effect).

What finally worked was #46:

Changing
#Header append Vary Accept-Encoding
To
#Header set Vary Accept-Encoding

#Header set Content-Encoding gzip already had "set" in the version of htaccess that came with Drupal 7.
Once the site started working, I changed the first line back to "append" and it seems to be working fine so far.

So essentially, this is now fixed with no code or setting changes.
All I had to do was reset the corrupted headers and then append works fine.

update:

Ran into the issue again on a reinstall.
The "RewriteBase /" in htaccess also needs to be uncommented.

Validate your CSS!

Errors in the stylesheets cause aggregration & compression to be corrupted.

After a long, long search, this was the solution for me.
Once I corrected a stylesheet-error, aggregration & compression worked well.

Edited to link to relative issues

On Litespeed enabling "Aggregate and compress CSS files." on any of my sites causes the site to lose styling information. This is fixed if I comment out this line from the .htaccess

# Header set Content-Encoding gzip

Apparently this line is redundant as the web server will anyway add a Content-Encoding line to the header if it's compressing content. I would suggest this line be dropped from the .htaccess unless there is compelling reason to keep it in there. Maybe it was introduced to work aroundh osts who do not enable compression but what about hosts that do enable compression by default. Anyway with compression turned off in Litespeed the problem still persists which makes me think the content-encoding line is added to the header twice not by the webserver but elsewhere.

The other line in the same block to control the behaviour of proxies is not a problem.

So the suggestion is to change the last block in the .htaccess from:

<FilesMatch "(\.js\.gz|\.css\.gz)$">
      # Serve correct encoding type.
      Header set Content-Encoding gzip
      # Force proxies to cache gzipped & non-gzipped css/js files separately.
      Header append Vary Accept-Encoding
    </FilesMatch>

To:

    <FilesMatch "(\.js\.gz|\.css\.gz)$">
      # Force proxies to cache gzipped & non-gzipped css/js files separately.
      Header append Vary Accept-Encoding
    </FilesMatch>

Css aggregate work fine but js show like #49 .
I trying the above #63 and didn't work. Litespeed Version?

an htaccess fix is that :

#<FilesMatch "(\.js\.gz|\.css\.gz)$">
<FilesMatch "(\.js\.gz)$">
      # Serve correct content type.
      Header set Content-Type text/javascript
       # Serve correct encoding type.
       Header set Content-Encoding gzip
      # Force proxies to cache gzipped & non-gzipped js files separately.
       Header append Vary Accept-Encoding
     </FilesMatch>

<FilesMatch "(\.css\.gz)$">
# Serve correct content type.
      Header set Content-Type text/css
      # Serve correct encoding type.
      Header set Content-Encoding gzip
      # Force proxies to cache gzipped & non-gzipped css files separately.
      Header append Vary Accept-Encoding
    </FilesMatch>

I ran into this problem as well... what fixed it for me was enabling mod_deflate in apache... give it a check!

hi
https://www.drupal.org/node/1716820

Hello
I have exactly same screenshots (error2.png)
Some css files are working and some not
I am on litespeed server on planethoster. I have tried to modify htaccess and mod_deflate is active

I can edit files generated in sites/default/files/css and everything seems good but in the browser i get some strange characters.

For example: the contextual css
http://www.novabuild.fr/modules/contextual/contextual.css?nh0611

File generated
http://www.novabuild.fr/sites/default/files/css/css_1kF33EODTO5gDyEbdpAf...

I have tried #63 and #64

It is strange that some css are aggregated correctly and some are not.

I had the same problem. I was not read comments above (maybe someone was solve this)

My solution is to change in default/files/.htaccess

from:

# Turn off all options we don't need.
Options None
Options +FollowSymLinks

to:

# Turn off all options we don't need.
# Options None
# Options +FollowSymLinks

Its work fine for me. I hope it will help someone.

@globalmedia: https://www.drupal.org/node/652002