High Performance Web Design
Koji Ishimoto
Web Designer
October 24, 2009
CSS Nite in ISHIKAWA
Twitter:#CSSNiteIshikawa

Agenda

1. What’s High Performance?

Essential Knowledge for Frontend Engineers

80:20
Browser : Server

2. Why High Performance?

+500ms 20% fewer searches

+100ms 1% drop in sales

Page views 11%
Conversions 7%
Customer satisfaction 16%

Response Times
Jakob Nielson

Time is Money

3. How do you measure it?

Performance Tools
Packet Sniffers
Performance Analyzers

Packet Sniffers

Fiddler
Runs on Microsoft Windows

Firebug Net Panel
Firefox add-on

Web Inspector Resources Panel
Safari’s Web Inspector

Performance Analyzers

Page Speed
Firefox add-on

YSlow for Firebug
Firefox add-on

Grade

Components
Statistics

YSlow Grade
Grade (score) Components Weights
Yahoo! C (77) 28 889.4k
Google A (97) 4 22.9k
YouTube C (71) 24 178.0k
Rakuten E (55) 111 940.2k
Livedoor D (68) 71 367.1k
Goo E (59) 61 275.8k
Amazon D (67) 71 399.2k
2009/10/14 YSlow Ruleset applied: Classic(V1)

How to Use

You can’t improve what
you can’t measure

4. What should I do to improve?

14 Steps to Faster Loading Web Sites

20 More Best Practices

Performance Best Practices

Too Many!

Make Fewer HTTP Requests

What’s HTTP Requests?
Images
Scripts
Stylesheets
Flash

Make Fewer HTTP Requests
Image Maps
CSS Sprites
CSS
Inline Images
Combined Scripts and Stylesheets

Space Pen

Design Solutions

5 Planes Model
Jesse James Garrett

Visual Design
Interface Design
Navigation Design
Information Design

Feng-GUI V2
Heatmap

CSS Nite Banner Test
Original +116% +24.4%

COOKPAD Premium Services

Design is Not Decoration

Interface Design
Navigation Design
Information Design
Interaction Design
Information
Architecture
Functional
Specifications
Content
Requirements

Spry Google Web Toolkit
MooTools Ext JS MochiKit
Dojo
jQuery Prototype
script.aculo.us
Yahoo! User Interface Library

Web Analytics

Know Your Audience

Functional Specifications
Content Requirements
User Needs
Site Objectives

Visitor Attention and Web Page Exposure

Why Web Users Scan Instead of Read
Jakob Nielson

iPod Experience

One Page One Theme One Screen

Know What You Want

5. Conclusion

Clear Objectives

Consistent Design

Clean Code

High Performance Site!

Thank you!

See Also
• http://warikiru.blogspot.com/2009/05/yslow-20-release.html
• http://warikiru.blogspot.com/2009/03/web-site-performance-seminar-at-gomez.html
• http://warikiru.blogspot.com/2008/12/design-fast-websites-dont-blame-rounded.html
• http://warikiru.blogspot.com/2008/12/understanding-progressive-enhancement.html
• http://warikiru.blogspot.com/2008/09/visitor-attention-and-web-page-exposure.html
• http://www.ideaxidea.com/archives/2008/03/37_signals.html
• http://journal.mycom.co.jp/news/2008/03/27/016/index.html
• http://coliss.com/articles/build-websites/operations/web-performance-best-practices-from-google.html
• Web — 14
• —
• —5
• Design rule index— 100
• Even Faster Web Sites: Essential Knowledge for Frontend Engineers

Credits
• http://www.flickr.com/photos/kenhurlford/986744061/
• http://www.flickr.com/photos/generated/99991779/
• http://www.flickr.com/photos/comphacker/3177112563/
• http://www.flickr.com/photos/jeffbelmonte/8228640/
• http://www.flickr.com/photos/pinksherbet/3206805049/
• http://www.flickr.com/photos/eflon/3465042138/
• http://www.flickr.com/photos/mikebaird/332877581/
• http://www.flickr.com/photos/dm-set/3493848714/
• http://www.flickr.com/photos/runtcake/2606448656/
• http://www.flickr.com/photos/jking89/3291408977/
• http://www.flickr.com/photos/wrote/2340192847/
• http://www.flickr.com/photos/qmnonic/266203795/
• http://www.flickr.com/photos/aubergene/380451857/
• http://www.flickr.com/photos/wolfgangstaudt/2051232504/
• http://www.flickr.com/photos/wwworks/1384954600/
• http://www.flickr.com/photos/nicole_hugo/3478088864/
• http://www.flickr.com/photos/scragz/2718035962/
• http://www.flickr.com/photos/elgrandee/2458845042/
• http://ja.wikipedia.org/wiki/
%E3%83%95%E3%82%A1%E3%82%A4%E3%83%AB:Jakob_Nielsen_1.jpg