Keeping Front Ending Dependencies

Reducing front ending pre loading to improve performace

Dependencies:

• JavaScript
• CSS

5 Steps

• Organize and plan
• location matters
• load smart, load once
• mazimize caching opportunities
• Optime, minify and compress

Organization and Plan Java Script Library
Spry, jQuery, Prototype,, YUI, EXT.js, DOJO, GWT

Classic Pairings

• ColdFusion + Spry
• ColdFusion + EXT
• ColdFusion + jQuery

Externalize Scripts, at the Bottom (colocar todos os scripts no fim da página)

head
...
...
link Script
/head

body
...
...
script
/body

Com o ColdFusion tambem é possivel jogar o javascript para ser processado para o servidor
cf_scriptalizer

Minify & Compress

• minify everything for production (strip out white space, comments, extra character to minimize file size
  
• Gzip files over 1 or 2K (browser entendem gzip)

Cache

• use external scripts
• use google-hosted libraries for caching benefit
• set expires header on common scripts
• configure entity tags on clusters

Olhar o JSLint para analisar performance de codigo em java script

CSS

• externalize cdd, at the top (uma das primeiras coisas do head
• Minify
• Create groups of related styles (search hooks)

Olhar Reset CSS - comprehensive : Eric Meyer, Basic: YUI (yuilibrary.com)

Toward Modular CSS
Build a grid system
http://24ways.org/2008/maging-modular-layout-systems
BlueprintCSS
960 Grid System
YUI Grids

Working with Multiple Files

• Good: organize by purpose
• Bad: problematic organize by rule type

IMAGES
Organization and Planning
images: logo, structure, content
PNG files are your friends
jpegs for photos

Use CSS Sprites for nav tabs, buttons, icons
Do you realy need an image? Use CSS3 (corners, radius, RGBa)
Usar igual ao Yelp, carregar uma unica imagem com um monte de coisas e usar um shift para mostrar só aquela parte que vc quer.

Essential Tools

• FireBug
• YSlow
• FireFox web developer tool bar

Summary

• Organize and plan
• Location matters
• Load Smart

www.riaunleashed.com
rmaxim.blogspot.com
@raelehman