Why can't CSS and Javascript be merged in my Magento Store?

Question

My Magento shop is loading really slow and I decided to fix some things and make it load faster. I read through some guides on the topic and found multiple plugins that could help me fixing my speed-issues. But every time I try to install one of the plugins, like Fooman Speedster and GTspeed by GTmetrix, and try to combine and/or merge the JS & CSS files, both the front-and backend of the shop get messed up. the CSS and Javascript files don't work anymore. The lay-out is gone and the dropdown menu's don't show either.

I thoroughly (in my humble opinion) searched for tips on solving my issue but I can't find one that clearly explains what should be done. I hope someone can provide me with an answer as the loading times right now just clock under 5 seconds, which is a hell of a loading time!

I'd like to thank everyone in advance for the effort!

Answer 1

I think that the plugins that you are using already merge JS and CSS files if needed.

You can also try installing Google PageSpeed plugin for Apache - haven't tried it so please do it on a testing environment.

Try looking at your DB and see maybe you have long queries that you can optimise by adding indices etc...

Try using a CDN for the images and static files like JS and CSS so they load from a different server in parallel.

The speed-up plugins for Magento are very unstable.

Answer 2

A few different things could be happening here.

I would check you aren't having conflicts. For example, if two different modules are including jQuery at different times that can cause conflicts that often don't appear until you merge the Javascript files.

I would highly recommend against using the built-in merge tool. I'm not sure if Fooman or GTSpeed disable them if they are enabled but I would recommend disabling that in the System -> Config menu. I am positive that those two modules don't respect that setting, but I'm not sure what Magento does if both are enabled.

Answer 3

If you have troubles, you might have some error message in the firebug console or in Magento logs. Check that it will help fixing this.

If you want a really lightning speed, you'll need to install something like Varnish cache server side to get extreme speed up.

Regards,

Answer 4

I had the same problem. I saw in the chrome inspector, when looking at the large concatenated css file that there were red dots from one of the css files. It turned out the file encoding was wrong. I converted the file in sublime text to save the encoding as UTF-8 by going into File...Save with encoding..UTF-8. The encoding before was UTF-16 LE with BOM. Once I changed it to UTF-8 the css was displaying properly.

Answer 5

Maybe your javascript and css lines are not properly closed. When you run your script without being merged and compressed, the browser interpret the code with closing semicolons at the end of your js statements and some other syntax that you probably forget while writting the code, but if the code is merged and compressed the browser crashes and your magento fallsback to default or base files.

Answer 6

I had an issue with design break while using CSS merging. The actual cause was " import " method used in one of my CSS file.

Check if any of your combined CSS files have used " import " method. This can cause design breaking as imported CSS will not work when you combine them. For example:

@import url("style.css")

Instead of using import, you can create one separate CSS file and write down all the imported CSS files code in that separate CSS file.

Or, you can include the file using "link" HTML tag, like this:

<link rel="style.css" href="style.css" type="text/css">

In Magento, you can include CSS files from app/design/frontend/YOUR_PACKAGE/YOUR_THEME/layout/local.xml