## Web Front-end optimization Mohammad Tayseer [Blog](http://mtayseer.net) / [Github](http://github.com/mtayseer) / [Facebook](http://facebook.com/mohammad.tayseer)
## Story

Why

Delay User reaction
0 - 100ms Instant
100 - 300ms Still fast
300 - 1000ms Server is loading
1s+ Goes to Facebook till it finishes loading?
10s+ It's broken
## 80-90% of response time is spent on the front-end

HTTP page life cycle

## Tools 1. [feedthebot tools](http://www.feedthebot.com/tools/) 2. [Google PageSpeed](http://developers.google.com/speed/pagespeed/) 2. [Firebug](getfirebug.com/‎) 2. [YSlow](http://developer.yahoo.com/yslow/) 2. Chrome DevTools
## Optimization techniques * Easy 1. HTTP Compression 2. Image Compression 3. Minify JS & CSS 4. Use framework builders 5. Use CDN (Content Distrubution Network) * Not so easy 1. Use Images Sprites 2. Bundle JS files & CSS files 3. Caching

HTTP Compression

Client sends

						Accept-Encoding: gzip, deflate
					
Server responds with

						Content-Encoding: gzip
					

Image Compression - Formats

JPG PNG SVG

7KB

3KB

2KB

62KB

413KB

Image Compression - Tools

  1. PNGCrush
  2. JPEG Compressor
  3. GIF Reducer
  4. Google WebP and WebM

Use CDN

Content Distrubution Network

Minify JS & CSS

bootstrap.css 116KB
bootstrap.js 55KB
bootstrap.min.css 96KB
bootstrap.min.js 25KB

Use framework builders

Requires more effort to do

Use Image Sprites


One image instead of 140
[class^="icon-"], [class*=" icon-"] {
    background-image: url("../img/glyphicons-halflings.png");
    width: 14px;
    height: 14px;
}
.icon-glass { background-position: 0 0;}
.icon-music { background-position: -24px 0; }
.icon-search { background-position: -48px 0; }
.icon-envelope { background-position: -72px 0; }
.icon-heart { background-position: -96px 0; }

Caching - Effect

Caching - How?

  1. Expires header
  2. ETag header

Bundle JS files & CSS files

  1. application-hge73h3.js
  2. application-39fe93rj.css
## References 1. http://www.igvita.com/slides/2013/fluent-perfcourse.pdf 2. https://www.cloudflare.com/features-cdn 3. http://jqueryui.com/download/