Arun Selvaraj

Front-end Engineer (@selvarajarun)

Agenda

Front-end engineering

Page lifetime
Browser and web page

Performance best practices

FRONT-END ENGINEERING
What is front-end engineering? User interface design and development Content Markup (HTML) Image Style (CSS) Script (JS) Thought process in coding and decision making is very different Mistakes are allowed since everything is interpreted Uniform experience across multiple browser variations and versions Web technologies are slow retiring

HTML5 will become a complete reality only by 2022 (initial estimate)

Knowledge is not technology but knowing limitations and workarounds Discipline by practice not by force

Page lifetime
Back-end
request Server-side HTML sent Web page components

Front-end
onload Event handlers

page settles
User interaction, XHRs

request

conception

birth

graduation

marriage

R.I.P

User perceived speed

20% Back-end : 80% Front-end

4

Page lifetime : Proof

Site ebay.com amazon.com yahoo.com
Server response time Page load time (onload event)

360ms (~20.3kb) 472ms (~29kb) 295ms (~49.8kb)

1.31s 1.63s 1.68s

google.com

233ms (~14.7kb)

788ms
487ms

facebook.com 98ms (~9.2kb)

~23% server time

Web page components

JavaScript

Flash / Video / Audio

Images

Content / HTML

CSS

Cookies

Browser engine What does the browser do with the components ?

Request Process Execute/Apply

Page request Fetch

URL

Ajax Flow
Tree

Flow

Parse
Cache

Paint
Script
Display list Pixels

Paint

Event

Performance best practices Infrastructure

Level 1
Reduce DNS lookups Split components across domains Use a Content Delivery Network (CDN) Add Expires or Cache-Control Header Gzip Components Configure ETags Make javascript and CSS external Put stylesheets at the top Put scripts at the bottom Use cookie free domains for components Make favicon.ico Small and Cacheable

Code
Level 1
Make fewer HTTP Requests (reduce number of components) Reduce the number of DOM elements Combine images into sprite or Data URIs and Dynamic Data URIs Flush Buffer Early Minimize DOM Access Avoid Empty Image src Avoid CSS Expressions Choose <link> Over @import Develop Smart Event Handlers

Level 2 Level 2
Minify and Obfuscate JavaScript and CSS Postload components Preload components Avoid 404s Do Not Scale Images in HTML Use GET for Ajax Requests Optimize Images Avoid Redirects Make Ajax Cacheable Minimize Number of iframes Avoid Filters

Performance best practices

How can we make better use of browsers idle cycles

Performance best practices : Request time

Make fewer HTTP requests
Reduce the number of components in a page Combine files (style, script, image) Data URIs (static and dynamic)

No 404s No empty image src Optimize Images Avoid redirects if possible

Reduce DNS lookups

20-120 milliseconds for (non-cached) lookup Browser, OS and ISP Cache

Split components across domains

Parallel downloads

2-4 domains max for better compromise with DNS lookups

More parallel requests result in more CPU usage and negatively affects performance

CDN/ Cache/ Compress

Users proximity to static resources web server Empty vs Prime cache Gzip everything Cookie free domains

Javascript and CSS

Externalize Minify and obfuscate Javascript blocks parallel loading

10

Performance best practices : Request time

HTML5 / CSS3

11

Performance best practices : Process time

CSS at the top
Styles at the top helps the browser build the render tree early and avoid redraw Blocks progressive rendering when applied at the end

Javascript at the bottom

Blocks parallel download

Smart event handlers

Onload vs DOMContentLoaded event Event delegation

Minimize number of iframes

Blocks page onload event

Costly even if blank

12

Performance best practices : Execution time

Reduce the number of DOM elements
More DOM elements slows down javascript DOM access like attaching event handlers/ applying dynamic styles

Minimize DOM Access

Cache references to accessed elements JS engine Update offline and add to the tree

Cross browser compatibility

Use feature detection and only once

Avoid CSS Expressions

Reflows on every mouseover and scroll event

Do Not Scale Images in HTML

Cause reflow

Use GET for Ajax Requests (if possible)

POST is a two step process 1.headers 2. data

Make Ajax cacheable (if possible)

User based dynamic data

13

Performance best practices : Perceived performance

Flush Buffer Early or Progressive rendering
Multiple chunks

Transfer-Encoding: chunked
More info: http://www.phpied.com/progressive-rendering-via-multiple-flushes/

Postload components
Load on demand Deferred load

Preload components
Unconditional, Conditional, Anticipated preload

14

Take Away
Performance is a feature not an after thought What impacts performance ? Solve the right problem Database query/ service call/ IO operation (OR) Front-end Go after user perceived performance

Use HTML5/ CSS3

Develop for the future Hardware acceleration (Gradients, Box shadow, Rounded corners, etc) Graceful degradation (Use Modenizr script)

15

References http://developer.yahoo.com/performance/ http://www.bookofspeed.com/ - Stoyan Stefanov High Performance Web Sites - Steve Souders

http://yuilibrary.com/theater/douglas-crockford/
- Douglas Crockford

16