2

I have this Joomla! site and I have set up a yoo theme template but my site is very slow because the template has 30 external CSS files and approximately 20 script files.

I have managed to combine all JavaScript files into one with component ScriptMerge, but for CSS, the component doesn't work as it should because it messes up my site when I combine all of the CSS files into one.

I have also tried other components like jch optimizer and jbetolo but without success!

Does anyone know a component or a plugin that can do this job for me? Or something else maybe, I also tried some script for combining in .htaccess, but also without success.

5 Answers 5

2

I know that this Q is posted way way back but since I once had this kind of problem, I thought I can share a link to these two task manager I frequently use when creating templates for Joomla, namely:

A simple grunt task can combine your CSS in an instant (see below example)

...
cssmin: {
    target: {
        files: {
            'css/output.css': [
                'style1.css',
                'style2.css'
            ]
        }
    }
}
...

Cheers!

Sign up to request clarification or add additional context in comments.

Comments

1

You can use @import url'file' to include each css file into one then just include the one file in your main page.

e.g. in my site

@import url("nav.css");
@import url("popup.css");
@import url("latestPosts.css");
@import url("home.css");

This code is placed at the top of common.css and then common.css is just included into index.php

Might want to take a look here: http://www.w3.org/TR/CSS21/cascade.html#at-import

2 Comments

yes but every import makes a separate http request for that file?
Yes it makes a separate request for each import but after the initial load they should be cached.
1

Maybe Factor CSS can help you out? Run your combined file through it and see if that makes a difference. But don't disregard the disclaimer, which states that it might not work well when the stylesheet depends on the order of the rules. Such is the nature of Cascading StyleSheets.

A quote on stylesheets from About.com

A stylesheet is intended to cascade through a series of styles, like a river over a waterfall. The water in the river hits all the rocks in the waterfall, but only the ones at the bottom affect exactly where the water will flow.

When you say it messes up your site when you combine the stylesheets. Have a think about the order in which the files are added. An automated stylesheet combining script can never know how you want the end result to look, all it can do is take what you have and combine it based on a pre-defined set of instructions, not based on how good it will look in the end. So make sure the input is right and the files are combined in the right order.

Here's an interesting link on the cascading order and inheritance in stylesheets, which might be of help.

Comments

1

This is a common problem with template driven CMS's that allow for the loading of various extensions.

The Joomla! extensions directory has an entire section for enhancing "Site Performance" there are a range of popular extensions for combining CSS and Javascript files.

RokBooster is fairly popular.

Comments

1

If you like getting into coding ...here's a solution.

You can bundle your css files into one, dynamically, by creating a php file with something like that:

<?php
# File combcss.php
readfile("stylesheet1.css");
readfile("stylesheet2.css");
?>

Then you may call your stylesheet like that :

<link rel="stylesheet" type="text/css" href="/combcss.php" />

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.