Streaming live at 10am (PST)

Is 3 separate CSS files slowing my site?


#1

I'm trying to speed up my site and noticed that one way is to have one and only one css file. I noticed webflow exports into 3 different css files.... 'normalize.css', 'webflow.css', 'bloomhmvp.webflow.css'.

Is this normal? Do I need to consolidate these three into one? Would this help?

Any advice appreciated
Brian


#2

Hi @bpark73,

That's a great question. In theory, you're right. Fewer .css files will result in fewer http requests and therefore be more optimal (perform faster). However, the increase in performance really depends on the size of your .css files. If you're more of a purist, go for the monolithic .css file. If you're a bit more practical, then keep the ones you work on the most separated so they're easier to manage. If you're the best of both worlds, try working out of separate files during your buildout, then combine/minify your .css when you want to go live. smile

I hope this helps. If not, please let me know and I'm happy to assist further!

Cheers,
Will


#3

Thanks Will,
I'm guessing that I need all 3 css files for my pages to display properly? If so I might just start with combining. In terms of minifying, I noticed that it slams all the code into one giant indistinguishable mess and then it becomes hard to work with afterwards... how do other more experienced people deal with minifying?

Thank you again
Brian


#4

Hi Brian,

Depending in your browser, you should be able to use your inspector to "un-minify" markup. You can also use 3rd party tools like Sublime and install "un-minify" packages. There are also web services that should produce pleasing results (although I haven't used one for some time)

http://www.ocular-rhythm.com/3-tricks-didnt-know-chromes-web-inspector/
https://github.com/kostasx/Sublime-Text-2-CSS-UnMinify-Plugin
http://html.fwpolice.com/css/

Good luck with your project and keep us posted on your progress! smile

Cheers,
Will


#5