I’m so ashamed for the performance of the sites I used to build. Hundreds of requests, megabytes of code… oh poor mobile visitors! I knew I had to stop being lazy and finally do something about it! In this post I’m going to suggest a few easy steps towards making your css framework based sites more speedy.
0. Minimize the number of requests
If your CSS and JS is not minified and concatenated, stop reading this article, uglify it, and then return. You just have no excuse! Then look around and see how else you may minimize the number of requests.
1. Partial load of components
This one is easy. Don’t import all of the Foundation’s components into your stylesheet, you won’t need them all! Foundation is really good at making code modular, that’s why I’m not ashamed of using it even on production website, and only for mock-ups. Comment out general Foundation import:
And only import things as you need them:
@import "foundation/components/grid", "foundation/components/block-grid";
2. Don’t output unneeded classes to HTML, use mixins
Another strong point of Foundation, is that you can avoid outputing unneccessary style defenitions at all.
For example, for the
block-grid component you probably don’t need all of possible definitions for different screens and sizes in your code.
Solution: use mixins!
First disable output of block-grid’s styles into the stylesheet. Go to Foundation’s
_settings.scss and add:
And than use desired mixin where needed in your code:
3. Check for unused styles
This is a good test of how well you did with previous advices. Determine how many style definitions you have left in your stylesheet. I used the extension for Firefox called Dust Me Selectors, you may look for other tools as well. After optimization, I only had about 15% of overhead in CSS, which is only I couple of KB’s. I suggest that you try to optimize CSS on your own, but if you give up, try to use unCSS utillity. It works as a grunt plugin, so there should be no problem adding it to your Gruntfile.js.
4. Lazy load everything you can
There’s that horrible word: render-blocking content. It means that while your JS and CSS are loading, your user will see nothing but blank screen. That makes users sad, you know, especially on the go.
I’ve seen people using
async attributes for this purpose, but with most browsers it wouldn’t work! Use this old school code instead:
Yes, CSS is render-blocking too. If you have a large CSS file you’ll make your user stare at a blank screen while CSS is loading. On mobile, that may be a problem.
There is only one real solution: separate CSS code for above-the-fold content from your main CSS, inline it into your HTML and defer loading of main CSS with this script:
But if your CSS is written in a modular way, it will be very hard to separate the code which is responsible just for this part of the page. There are tools which help you do it, but I decided that in my case it’s not worth it.
To make the pain of mobile users a little easier, I’ve thought out an idea of using CSS loading screen, which will reassure the user that the page is loading indeed, and may even show some critical information. Here I’ve written about this technique in greater detail: Loading screen for CSS
If your landing page is very heavy, I suggest to leave only the most critical top-most parts in HTML, and load the rest with AJAX requests. News, related articles, all but the most important content are a good candidates for being pushed out of main HTML. It should be pretty straightforward using jQuery, so I’m not going to write about it here.
5. Learn atomic design or other OOCSS technique
This is probably the hardest part: learn to write CSS in a modular way! This is not just some technique, and therefore requires you [put your thought in it]. Google-up OOCSS, SMACSS, atomic design and learn to think about your CSS code in a new way. I’m a huge fan of development based on Atomic design and living styleguide. Once refactored, your code size will decrease dramatically and will scale great! And belive it or not, maintanace will become a joy! :)
First head to Google PageSpeed Insights and see how bad things are. Go for the low hanging fruit first. Concatenate, minimize, drop unused code. If that’s not enough, optimize CSS and JS delivery.
If you are lazy to do all of these optimizations by hand, try to use Google PageSpeed Apache Module, I haven’t tried it, but seems cool.
Questions? Comments? Have I missed anything vital?