Close

Account

Documentation

Forum

Menu

Combine CSS files

  • Post count: 32
    jkapel
    December 15, 2014 at 9:46 am #7656

    Hello,

    one of the main disadvantages of this theme, is that it creates a lot of separate css files (and js, but I will post a diferent thread for these) and that makes the loading of the page VERY slow, as shown clearly when testing with gtmetrix, YSlow and googlepagespeed tools.

    I have installed a plugin that combines css files, it works somehow, except that some elements of the site are now broken and I need to exclude/ignore the relevant css files from combining. So, please can you tell me how are the names of the css files (so that I can find them) that are responsible for:
    1) the topnavigation. I had the topnavigation of the website white and with certain height, now it is shown black and without the height adjustment.
    2) imagewrapper. I had this element to create 2 rows of images, now in every image there is a white dot appearing.
    3) blog post wrapper. I had it to show blog posts in a grid layout, now it shows them inline.

    What are the names of the relevant css files for these 3 elements, so that I can put them to “ignore” in the settings of the plugin that does the combining?

    • This topic was modified 3 years ago by  jkapel.
    Post count: 32
    jkapel
    December 15, 2014 at 11:07 am #7664

    ok, I found the following:

    for the (2) above: the css file that is responsible for the white dots appearing next to each wrapped item is “js_composer_front.css”

    for the (1) above: the css file that is responsible for the topnav is “<inline style sheet #12>” but here is the next question: how do I type it in the ignore settings of the combine css plugin? As I see it, with the brackets?

    I cannot find the what css is responsible for the (3) above. Any help? I use inspect elements in firefox and chrome, then the tab for style editor to show me all the css that are there, but none is affecting what happens in (3) that I describe

    Post count: 32
    jkapel
    December 15, 2014 at 4:18 pm #7667

    I found them all,
    the css files responsible for breaking the site if altered are:
    main.css
    dark.css
    js_composer_front.css

    So if anyone tries to combine css files to improve performance of the website, should leave these 3 untouched, i.e. to NOT include them in the combined css file

    By the way, my website had 16 css file requests to server. After combining it is now 4.

    Now, let’s go to combining javascripts. I’ll open a separate thread for this.

    Post count: 6700
    Adek
    December 19, 2014 at 5:49 am #7758

    Glad to hear you able to resolve this problem 🙂

    Thank you

    Post count: 7
    akerd
    February 12, 2015 at 8:35 am #9123

    @jkapel

    Thank you for sharing your findings is really interesting. Can you please tell which plugin are you using for CSS cominbining? Is it W3 Total Cache?

    Post count: 32
    jkapel
    February 14, 2015 at 8:15 pm #9258

    Hi akerd,

    I tried a few plugins, but yes, the only one that actually did work was W3.
    But it is not automatic. You will have to do it manually, by adding one css file at a time to the settings, to see if that breaks the site or no. Then if the result is ok, add one more check again and so on.
    You might also have to change the sequence of the files added to the W3 settings, because sometime there are dependencies that break the site.

    It is a lot of work, I’m no developer, I had absolutely no knowledge of CSS etc, and it took me 3 days of full work to make it, combine css and then the javascripts. But I think it is worth it.

    After combining the files, I dropped the loading time of the website from 26-27 seconds, down to 4-5 seconds!

You must be logged in to reply to this topic.