A little journey into website optimization

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.

Instagram

Instagram

Instagram

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