Combine CSS files
Post count: 32jkapelDecember 15, 2014 at 9:46 am #7656
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?
Post count: 32jkapelDecember 15, 2014 at 11:07 am #7664
- This topic was modified 3 years, 7 months ago by jkapel.
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 describePost count: 32jkapelDecember 15, 2014 at 4:18 pm #7667
I found them all,
the css files responsible for breaking the site if altered are:
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.
Glad to hear you able to resolve this problem 🙂
Thank youPost count: 7Post count: 32jkapelFebruary 14, 2015 at 8:15 pm #9258
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.
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.