Slow websites are not only frustrating, they can cause you to lose your audience — and money. What is a “fast” website? What are the keys to page performance? What image type is best? And most importantly, what is the best way to load all external resources for optimal speed?
2. What is a "fast" website?
Scientific Questionnaire to determine if a
site is slow or not:
1) Does it feel slow?
! A) Yes
! B) No
2) Does anyone care?
! A) Yes
! B) No
END.
3. What is a "fast" website?
“My boss needs a number.”
The Mike Wilcox 7 second rule
http://useit.com
http://webpagetest.org
http://alexa.com
10 seconds is about the limit for
keeping the user's attention
focused
4. It is a slow website.
“How can I convince my boss/client that
we need to invest in site speed?”
6. Affects Search Ranking
Google announced they are factoring the load time of
the page in rankings.
Fast
Web
site
http://googlewebmastercentral.blogspot.com
7. Mobile
How most pages will be viewed in the future
Mobile phones hate lookups
Graceful degradation
iP hone 5.0
pro totype I
foun d at the
bar
8. Tethering
More and more users connect by tethering their
laptops to their cell phones. They are also using G3
cards, WiFi hotspots and various other ways of
connecting.
9. Broadband - Good News
US broadband penetration among active Internet
users in December 2009
94.5
5%!
http://websiteoptimization.com
10. Broadband - Bad News
Broadband penetration for the US was still out of the
top 20, coming in at 22nd place worldwide at 73.2%
es
at
St
d
ite
http://websiteoptimization.com Un
11. Bandwidth - How Much?
Increasing bandwidth results in diminishing returns
Decreasing round-trip-times are more effective
http://belshe.com
13. Steve Souders Performance
Golden Rule
80-90% of the end-user response time is
spent on the front-end. Start there.
Svelte
Java Guy!
Front End Developer
14. Who’s Steve Souders???
Yahoo Google Performance Specialist
Created YSlow! (which is
awesome)
And Hammerhead (which
sucks)
Hey Potts!
Let’s go to
Arnold’s!
He wrote these books
.
http://www.stevesouders.com/
18. Cache - not 100%
40-60% of Yahoo!’s users have an empty cache experience
and ~20% of all page views are done with an empty cache.
Safari cache buggy
Always clears
User’s first time on page cache.
Cache was automatically cleared
User cleared the browser cache
User’s cache is full
IE cache could be set to as little
as 8MB
http://yuiblog.com/blog/
19. GZIP
Easiest and most effective way to speed up site
All major browsers support it
US Pat
ent for
GZIP
21. GZIP Best Practices
Write code with a proper convention - major attribute
first, then alphabetical
Good:
<a href=”foo.html” class=”zap” tabIndex=”-1”>
<a href=”bar.html” class=”zap” tabIndex=”-1”>
Bad:
<A class=zap href=”foo.html” tabIndex=’-1’ >
<a href=”bar.html” class=”zap” tabIndex=”-1”>
22. GZIP Best Practices
Don’t abuse it. JavaScript != Java
Good:
var id = lib.byId(“list”);
Bad:
var uniqueIdentifier =
myVerboseLibrary.returnElementById(“firstPageRightList”)
23. Mike Wilcox 3 Keys to Page
Performance:
1) Resources
2) Resources
3) Resources
24. Who’s Mike Wilcox??? ight
ndi ng r
He’ s sta th ere.
•Front-end Engineer
•AJAX Developer
•Web & Graphics Artist
•Web-Multimedia Specialist
•AS3 Programmer
•Dojo Committer Worked on
Dojo
Resource L
oader
Dudley Do-Right
will never save her
in time!!
http://clubajax.org/
26. Image Types
JPEG JPG
Created by the Joint Photographic Experts Group in
1992
Best on photographs of realistic scenes with smooth
variations of tone and color
Poorly handles redundant data
JPEG is the compression codec, not a file
JFIF or Exif (with meta data) are actually the files
In 2003 Forgent Networks claimed patent rights,
which expired in 2006
27. Image Types
GIF GIF
Introduced in 1987 by CompuServe
Suitable for sharp-edged line art with flat areas of
color (such as logos)
Used to store low-color data (game sprites)
256 color (8 bit), 1 bit alpha
Handles redundant data very well
Animation
Lempel-Ziv-Welch (LZW) Lossless Compression which
was patented in 1985 by Unisys which expired in 2005
28. Image Types
PNG PNG
Portable Network Graphics format introduced by the
W3C in 1996 in response to the Unisys patent fiasco
Adoption was slow. IE7 support is buggy. IE6 support
is uber buggy.
Uses DEFLATE, a non-patented lossless compression;
better than GIF, less than JPEG
8 or 24 bit color, 1 or 8 bit alpha
No animation, but there is MNG and APNG
30. Image Sprites
For the hover and active states, instead of swapping
the background-image URL, use one image containing
all three states, and change the background-position
DIV button{
Click Me background-image:url(btn.png);
background-position:0px 0px;
}
Click Me button:hover{
background-position:0px -75px;
Click Me
}
button:active{
background-position:0px -150px;
ojoX
}
s fro mD
Sp rite
Dra wing
31. Stylesheets
Combine all styles into one sheet or modular sheets
Set cache-expire headers
Avoid inline styles. Use an external stylesheet that
can be cached.
Avoid using @import. Besides the additional
requests, they may not load at predictable times.
Should be inserted at the top of the page to avoid a
layout shift on load, and because of “blocking” in
older browsers.
32. Resource Waterfalls
To get a firm understanding of page load time, it’s
imperative to analyze network resource waterfall charts.
or...
Why is it taking m
y
20 JQuery scripts
so
long to load??
33. Anatomy of a Page Load
<head>
<script src=”script1.js”></script>
<script src=”script2.js”></script>
</head>
<body>
Two scripts loa
<img src=”agent.png” /> d at
once - new bro
wsers DOM (body)
<img src=”access.png” /> only!
starts and
</body> ends here
scripts finish
loading
scripts start
loading
script
execution Images Done!
time
34. Blocking
In older browsers (IE < 7 and FF < 3.5), scripts do not
load in parallel, they are “blocked”. One needs to finish
loading and execute in case it contains dependencies for
the next.
s
No parallel download
for Opera 10.5?! execution
times Took longer
to finish!
First script
second
script
35. Parallel Loads
Modern browsers can load up to six (or more) resources
in parallel at one time. The execution is deferred until
the set is downloaded.
First six Last two
scripts scripts
execute execute
here here
36. IE8 Parallel Loads like a MoFo
Wow, 12!
Sometimes
as high as
IE8 is the first 20
browser to
implement parallel
downloads. Tests
vary but leave no
500ms is
doubt that it very fast
exceeds other and over the
net, not
browsers in this localhost
area.
37. Domain Sharding
By loading scripts from another domain, The 6-resource
limit can be subverted, allowing FF 3.5+ and Webkit to
attain similar parallelism as that of IE8. Opera
doesn
A dozen ’t
count
scripts at .
once!
this.com
that.co
m
38. Defer Scripts
Scripts should be placed at the bottom of the document.
DOM and
images start
loading
right away Faster
because
execution
time is
deferred
39. Firebug Net Detail
Other factors need to be considered other than just
download time.
Download
Wait time
Connection time time
DNS Lookup time
Blocked time
(not shown)
40. Best Practice Checklist
1. Caching
1.1. Set headers properly for Expires, Last-Modified,
and ETags
1.2. Version slow-changing resources:
1.2.1. <script src=”dojo.js?v=0151”>
1.3. Keep components under 25k
2. Minimize DNS Lookups
2.1. Can be expensive; balance this with domain
sharding
41. Best Practice Checklist
3. Use CDNs
3.3. Better chance for caching
3.4. Domain Sharded
3.5. Multiple server locations
4. Use Subdomains
4.3. Domain sharding
4.4. Use “cookieless” subdomain to reduce even more
bytes
42. Best Practice Checklist
5. Turn on GZIP
6. JavaScript
6.1. More than 3 JS files means you need to re-
evaluate the situation
6.2. Use Minification tools
6.3. Minimal inline script
6.4. Place scripts at bottom of page
6.5. Be aware of slow-running code
43. Best Practice Checklist
7. CSS
7.1. More than 2 CSS files means you need to re-
evaluate the situation
7.2. Strip comments, line breaks and tabs
7.3. <link />, not @import
7.4. Place stylesheets at top of page
7.5. Be aware of slow-running selectors
7.6. Use a design professional who knows how to
write CSS properly
44. Best Practice Checklist
8. Images
8.1. Use the proper image type (PNG/GIF/JPG)
8.2. Use image sprites
8.3. Do not resize images in the browser
8.4. Use CSS styling where possible (ergo, rounded
corners)
8.5. Use a PNG compressor tool (PNGOUT, PNGCrush)
8.6. Use a design professional who knows how to work
with images properly
45. Best Practice Checklist
9. Reduce the Number of DOM Elements
9.1. Do you really need all those tables for that
form? It’s not 1999.
9.2. Make use of unique tag names and selectors
instead of verbose classes
9.3. Use background-images instead of <img />
9.4. No iframes! (or back up your reasoning)
9.5. Use a design professional who knows how to
write HTML properly
46. Tools
Google PageSpeed
YSlow!
WebPageTest
Firebug ZoomPF