Fast FastER Fasta little journey into Website Optimization
EST
@stelianweb designer @digitibelieves in optimization
“People don’t like to wait”
- Captain Obvious
40% of people abandon a website that takes
more than 3 seconds
to load.
- Forrester Research
online shoppers expect pages to load in
2 seconds
- Forrester Research
on the web 250ms might
win you the race
- Google & Microsoft studies
Page load times affect online businesses
+500ms
Page loadtime Tr
affic
-3%
+500ms
Page loadtime
Reve
nue -1.2%
+100ms
Page loadtime
-1%
Sale
s
- Steve Saunders, Google
“80-90% of the end-user response time is spent on the
front-end”
ObjectivesLow number of filesSmall file sizeFast rendering
Low number of files
"Every HTTP request is a gamble. A chance to
fail."
- Scott Jehl
6Connections per Hostname
Use CSS Sprites
1 CSS file
1 CSS file, ideally
29
Use @media printinstead of print.css
1 JS file per hostname
40+
Small file size
Writesemantic HTML
avoiding unnecessary elements
Minify thejavascript
Smaller CSSuse a reset.css file to avoid repetitionuse shorthand properties*design with consistencyremove unused styling
* for the designers
Normalbody{ font-family: "Lucida Grande", Lucida, Verdana, sans-serif; font-size: 1em; line-height: 1.5em; font-style: italic; font-weight: bold;}
Shorthandbody{ font: italic bold 1em/1.5em "Lucida Grande", Lucida, Verdana, sans-serif;}
Consistency: font-size
Alexa top 1000 websites
78%10+
23%100+
The number of font-size declarations
Consistency: patterns
source: stubbornella.org
Minify theCSS
Use font subsetsif possible
Choose theright image format
84%binary files (images,
PDFs, ...)
Alexa top 1000 websites
GIFOnly for animations
PNG-8for small dimensions and no need for
true color support; recommended for illustrations
PNG-8 Alpha TransparencyFireworks
PNG-8 Alpha TransparencyImageAlpha (Free)
PNG-24when in need for high quality
graphics, although it tends to get bigger in size
Use posterization to reduce the number of
colors in a PNG-24 file
JPEGgreat for large images that contain
photographic data
JPEG tips80% quality is usually good enoughtry to align edges to an 8x8 pixel griduse JPEG selective quality in FW
JPEGLeft square aligned to the 8x8 grid,
right one not
JPEG Selective Qualityin Fireworks
Use ImageOptimto compress images further
Alternatives: smush.it, punypng, jpegmini
Original PNG-8 + Alpha Transparency
1068 KB 263 KB
Original PNG-8 + Alpha +ImageOptim
1068 KB 228 KB
Fast rendering
Cache static files
Cache static filesforever
“e fastest HTTP request is the one not
made”
Using .htaccessHeader unset PragmaFileETag NoneHeader unset ETag # cache images for 10 years<FilesMatch "\.(ico|pdf|jpg|jpeg|png|gif)$"> Header set Cache-Control "max-age=315360000, public, must-revalidate" Header unset Last-Modified</FilesMatch> # cache html/htm/xml/txt files for 2 hours<FilesMatch "\.(html|htm|xml|txt|xsl)$"> Header set Cache-Control "max-age=7200, must-revalidate"</FilesMatch>
this is just an example;for best results, use HTML5 Boilerplate
Cache AJAX requests
Faster CSS
Don't use @importStay away from *Avoid using a tag as a key
body * {...}body > * {...}ul.active li a {...}ul.active > li > a {...}
Use CSS3 responsiblydon’t overuse border-radius, box-shadow,
gradients
http://perfectionkills.com
Use domain shardingto increase the number of
concurrent connections
Use a CDNContent Delivery Network
Use CDN hostedJS libraries
Specify the jQuery versionfor better caching
http://code.jquery.com/jquery-latest.min.js
http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js
http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
no cache
1 hour
1 year
Always load scriptsasyncroniusly and put them at the bottom of
the page
Compress only compressible resources
HTML, CSS, JS, XML, SVG, ICOuse GZIP instead of Deflateuse lowercase for better compressionHTML5 Boilerplate .htaccess recommened
e faviconhave one to avoid a 404load it from a subdomaincompress itcache it forever
Avoid mixed content warnings
http://code.jquery.com/jquery-latest.min.js
//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
Minimize reflows
Watch out for 404faviconapple touch iconsapple-touch-icon-ZxZ-precomposed (android)
crossdomain.xml
Trigger hardware accelerated CSS in iOS
TestPageSpeed, Yslow
MeasureGoogle Analytics Site
Speed
//default sample rate is 1%_gaq.push(['_setSiteSpeedSampleRate', 5]);
So, what now?
Cheat Lie
Deceive
Performance Perception
AppleThe iPhone saves a screenshot of every app
when it closes. So when you relaunch the app it loads that screenshot first.
Amazon
Priority Loading
Tools & Resources(1 of 2)Tools๏ ImageOptim
๏ ImageAlpha
๏ HTML5 Boilerplate
๏ Smush.it - PunyPNG - JPEGmini - PNGGauntlet (Win)
๏ Online YUI Compressor
๏ CSS Sprite Generator - CSSsprite Photoshop script
๏ Page Speed - YSlow
Resources๏ Akamai Reveals 2 Seconds as the New Threshold of Acceptability for eCommerce Web Page Response Times
๏ How Loading Time Affects Your Bottom Line (Infographic)
๏ For Impatient Web Users, an Eye Blink Is Just Too Long to Wait
๏ Facebook pages that are 500ms slower result in a 3% drop-off in traffic (PDF)
๏ If Google increased page load by 500ms it would cost them 1.2% of their revenue (Video)
๏ Every 100ms of latency costs Amazon 1% of profit
๏ The Performance Golden Rule
Tools & Resources(2 of 2)๏ Most Browsers Allow 6 Concurrent Connections per Hostname
๏ Top 5 Mistakes of Massive CSS (Video + Graphs)
๏ How to create CSS objects? Get the granularity right!
๏ HTTP Compression use by Alexa Top 1000
๏ Profiling CSS for fun and profit. Optimization notes. (CSS3 Performance)
๏ Maximize Your Chances of Caching Your jQuery
๏ Lose the Wait: HTTP Compression
๏ Instagram and Optimizing Favicons
๏ Use Lowercase Markup For Better Compression
๏ Small site? Raise your page load time calculation sample to 100%
๏ The iPhone’s Perceived Performance
๏ The 3 White Lies Behind Instagram’s Lightning Speed
๏ Making a Slow Site Appear Fast
Recommended
