Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Client Side Performance
Compromises Worth
Making
Sydney Web Apps Group: 19.9.13
@cathyblabla
What!!?
Good client-side performance really is simple -
smaller files, fewer HTTP requests, less DOM
manipulation. Use YSl...
Where to draw the line
Where do you draw the line between good
performance and maintainability? Class names
like ‘a1’ to m...
Multiple sprite images
Sprites allows us to download all our image
assets in one request. If you use Compass, it’s
sprite ...
Like this...
$green-sprites: sprite-map("sprites/green/*.png");
$grey-sprites: sprite-map("sprites/grey/*.png");
%mail-ico...
Scaling images in HTML
Ideally, we would only download images at the
exact size they will be displayed, but your
responsiv...
Choose image sizes that match your target
devices closely and that are close to the upper
end of your breakpoint to minimi...
Load (most) scripts at the bottom of
the page
Inserting scripts at the end of your page stops
script downloads from blocki...
...so should I load my scripts in
<head> after all?
One approach is to load your ‘must have’
scripts in the head, then loa...
Script loaders FTW!
RequireJS is a script loader that present a
unique solution to this problem. Out of the box,
RequireJS...
What about lazy loading?
It is possible to squeeze even more
performance out of your Require scripts by
splitting them up ...
Some OO in your SASS
Love the modular approach of OOCSS but don’
t like your HTML getting cluttered up with non
semantic c...
Use placeholders to create re-usable
structures...
%btn {
@include rnd( 3px );
border: 1px solid grey;
cursor: pointer;
li...
Build up top level rules from
combinations of re-usables
.news-module {
@extend %media-block;
@extend %media-module;
.top-...
Mixins give you more flexibility...
@mixin button ($colour: green) {
@include background-image(
linear-gradient(white, $co...
But be careful of the final output...
Placeholders generate a single rule with all
selectors combined. If you have too man...
.delete-button {
background-image(
linear-gradient(white, red)
);
border: 1px solid #660000;
color: 1px solid #FFBFBF;
}
....
Upcoming SlideShare
Loading in …5
×

Client side performance compromises worth making

374 views

Published on

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.

Published in: Technology, Art & Photos
  • Be the first to comment

  • Be the first to like this

Client side performance compromises worth making

  1. 1. Client Side Performance Compromises Worth Making Sydney Web Apps Group: 19.9.13 @cathyblabla
  2. 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. 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. 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.
  5. 5. Like this... $green-sprites: sprite-map("sprites/green/*.png"); $grey-sprites: sprite-map("sprites/grey/*.png"); %mail-icon { background: sprite($grey-sprites, mail) no-repeat; &:hover { background: sprite($green-sprites, mail) no-repeat; } }
  6. 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. 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. 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. 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. 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. 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. 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.
  13. 13. Use placeholders to create re-usable structures... %btn { @include rnd( 3px ); border: 1px solid grey; cursor: pointer; line-height: 2.3; padding: 0 17px; text-decoration: none; } .my-button { @extend %btn; color: green; }
  14. 14. Build up top level rules from combinations of re-usables .news-module { @extend %media-block; @extend %media-module; .top-stories { @extend %stories-list; } .more-link { @extend %btn; } }
  15. 15. Mixins give you more flexibility... @mixin button ($colour: green) { @include background-image( linear-gradient(white, $colour) ); border: 1px solid darken($colour, 40%); color: 1px solid lighten($colour, 20%); } .delete-button { @include button(red); } .active-button { @include button(blue); }
  16. 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).
  17. 17. .delete-button { background-image( linear-gradient(white, red) ); border: 1px solid #660000; color: 1px solid #FFBFBF; } .active-button { background-image( linear-gradient(white, blue) ); border: 1px solid #000066; color: 1px solid #99CCFF; }

×