Tips for getting the most out of client side performance while keeping your code maintainable and your applications beautiful. We'll look at some specific code techniques for CSS, SASS and Javascript, dependency management with Require.js and some general tips for structuring your applications to optimise for performance.
2. What!!?
Good client-side performance really is simple -
smaller files, fewer HTTP requests, less DOM
manipulation. Use YSlow and understand the
rules it is based on.
OK, so there are lots of tricky details that we
could go into, like CSS selector performance,
but is your site huge enough for things like that
to make a difference? Probably not. So….
3. Where to draw the line
Where do you draw the line between good
performance and maintainability? Class names
like ‘a1’ to make your CSS files smaller? No
way! But there some situations where ‘The
Rules’ can and should be bent...
4. Multiple sprite images
Sprites allows us to download all our image
assets in one request. If you use Compass, it’s
sprite functionality makes this super simple.
But all those disparate colour palettes add up,
resulting in either a big 32bit PNG or degraded
colour reproduction. The solution? Split up your
sprites into similar colour groups and stick to a
set pallette. It’s a few more HTTP requests but
worth it.
6. Scaling images in HTML
Ideally, we would only download images at the
exact size they will be displayed, but your
responsive site will probably call for fluid
images to cater for different devices - what to
do!?
If you can, serve different sized images based
on device categories then allow CSS scaling to
take over.
7. Choose image sizes that match your target
devices closely and that are close to the upper
end of your breakpoint to minimise image
degradation.
Include the served image’s width and height in
your html to reduce the visible effect of reflows
once your image is loaded.
8. Load (most) scripts at the bottom of
the page
Inserting scripts at the end of your page stops
script downloads from blocking the rest of your
content. But long pages can result in a
noticeable lag for script effects - while your
overall page load time may be improved the
users’ perception of load time could be
affected.
9. ...so should I load my scripts in
<head> after all?
One approach is to load your ‘must have’
scripts in the head, then load the rest at the
bottom of the page. While this introduces some
maintenance overhead, your page loads as fast
as possible while also giving your users a
seamless experience.
10. Script loaders FTW!
RequireJS is a script loader that present a
unique solution to this problem. Out of the box,
RequireJS loads modules asynchronously as
they are called for. There is also an
optimisation tool that provides an automated
build. All the files required for your project are
minified and concatenated, this file is then
loaded asynchronously. Your scripts are
optimised, available earlier and are non-
blocking. Yay!
11. What about lazy loading?
It is possible to squeeze even more
performance out of your Require scripts by
splitting them up and lazy loading those that
are less often needed. Read about it here.
YUI includes a script loader that is based on
RequireJS but also utilises a server side combo
handler that serves back separate files in one
request. The combo loader is open source and
you can get it here.
12. Some OO in your SASS
Love the modular approach of OOCSS but don’
t like your HTML getting cluttered up with non
semantic class names? With SASS you have
the tools to write modular, concise code that
can be constructed in any way you wish.
Create a structural hierarchy within your SASS
code and push design complexity back to the
style layer to keep your HTML simple and
readable.
16. But be careful of the final output...
Placeholders generate a single rule with all
selectors combined. If you have too many, IE
goes kaboom!
.btn1, .btn2, .btn { //styles extended from %btn }
Mixin styles are repeated wherever they are
used, so use them minimally, ideally for styles
that are unique (ie, based on a parameter).