Armen Chakmakjian

#RIAUnleashed – notes from “keeping front end dependencies under control session”

In technology, web 2.0 on November 13, 2009 at 4:52 pm

The real slides are going to be posted at some point by the coordinators, but just for my own sake here is what I typed as fast as possible

5 simple rules for better client performance  (these are yahoo’s recommendations)

  1. organize and plan
  2. location matters
  3. load a component smart and once
  4. maximized caching opportunities
  5. optimize, minify and compress

Javascript

over time you keep adding libraries because something is missing

website application continuum

spry jquery prototype YUI EXT.hs Dogo GWT

<————————————————->

keep all your scripts in one central place

Classic pairings of libraries:

  • cf + ext
  • cf + spry (adobe)
  • jquery + jqueryUI  (nice theme roller DOM manipulation)
  • YUI + YUI (very comprehensive…followed their own advice)
  • Prototype + script.aculo.us

Externalize (java)scripts at the bottom.

because scripts load their own stuff, you can’t render anything while the scripts are loading.  Only caveat, some scripts only run in the head.  Anyway will improve performance

Try to get your scripts load only once

manage loading from the client-side.  http://24ways.org/2007/keeping-javascript-dependencies-at-bay

Yui has a loading component

Ajile?  yes with a j

Server-side script bundling – coldfusion example given.   scriptalyzer

Minify and Compress

YUI compressor strips out whitespace and comments to minimize

optionally obfuscate your code

http://develop.yahoo.com/yui/compressor

There are other examples of

GZip over 1 or 2k

serve compressed files from the server to browsers that support it

don’t compress files already compressed

Browser Cache

use external scripts

set expire headers for caching (Google-hosted)

set expire headers on common scripts

configure entity tags (e-tags) on clusters (http://www.askapache.com/htaccess

She gave some example of the tags to use for these various options

JSLINT

will help you write more efficient code

CSS/Style Sheets

externalize the CSS files at the top

embedded styles are a bad practice

use core style sheet when developing

if you use YUI you can link to their common style sheets

the import directive will not be invoked until CSS is completely loaded.  (you’ll see the page loaded without the style then zap the style gets applied)

Use a link tag to avoid the problem

Minify for CSS

cascading nature of css is not effective as javascript

cssinclude Custom Tag

manage them on the server side (recommendation)

Please

o Comment Your CSS

o declare your most global rules first then the page structure

o try to minimize the declaration and stack/cascade the styles and then the classes

o put your rules as high up in the stack as possible (to avoid redundancy)

Reset CSS

comprehensive eric meyer (http://meyer.web.com/tools/css/reset/reset.css)

Yui

Toward Modular CSS

  • build a grid system
  • blueprintCSS

Working with Multiple CSS files

Good-organize by purpose

  • framework
  • core/skin
  • hacks
  • application sections

Problematic-organize by rule type (but useful for user-skinnable apps)

  • colors/images
  • typography
  • positioning


Images: Organization and planning

  • keep them in a central place
  • separate structure and skin
  • keep logos in one place
  • use a naming convention for commonly repeated files

Images: Minimize file size

  • PNG files are your friend
  • jpegs for photos and continuous tones
  • GIFS for simple illustrations
  • use the comparison views of your image editor
  • Fireworks to do the compress slightly better than photoshop

Images: Loading Smart

  • minimize your image needs
  • use css sprites for nav tabs
  • do you really need an image—Use CSS3 for nonfunctional enhancements (like rounded corners)
  • trim images to minimal dimension
  • small tile backgrounds (if you do it 10000 times it reduces performance)

Essential tools

  • firebug
  • yslow
  • firefox web developer toolbar
  • safari web developer toos
  • ie web developer tool extensions
Advertisements

Leave a Reply

Please log in using one of these methods to post your comment:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: