front-end web performance optimization

8/3/2019 Front-End Web Performance Optimization

1/16

Arun SelvarajFront-end Engineer

(@selvarajarun)


2/16

2

Agenda

Front-end engineering

Page lifetime

Browser and web page

Performance best practices


3/16

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

3


4/16

4

Page lifetime

request HTML sent onload page settles request

Server-side Web page components Event handlers User interaction, XHRs

Back-end Front-end

conception birth graduation marriage R.I.P

20% Back-end : 80% Front-end

User perceived speed


5/16

5

Page lifetime : Proof

Site Server response time Page load time (onload

event)

ebay.com 360ms (~20.3kb) 1.31s

amazon.com 472ms (~29kb) 1.63s

yahoo.com 295ms (~49.8kb) 1.68s

google.com 233ms (~14.7kb) 788ms

facebook.com 98ms (~9.2kb) 487ms

~23% server time


6/16

Web page components

Content

/ HTML

JavaScript

Images

CookiesCSS

Flash /Video /Audio

6


7/16

7

Browser engine

What does the browser do with the components ?

Flow

Paint

Event

ScriptFetch Parse Flow Paint

URL Cache PixelsDisplay listTree

Page request Ajax

Request Process Execute/Apply


8/16

8

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 forcomponents

Make favicon.ico Small and Cacheable

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 Over @import

Develop Smart Event Handlers

Infrastructure Code

Level 2

Minify and Obfuscate JavaScript and CSS

Postload components

Preload components

Avoid 404s

Level 2 Do Not Scale Images in HTML

Use GET for Ajax Requests

Optimize Images

Avoid Redirects

Make Ajax Cacheable

Minimize Number of iframes

Avoid Filters



9/16

9

How can we make better use of browsers idle cycles



10/16

10

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)

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

No 404s

No empty image src

Optimize Images

Avoid redirects if possible


11/16

11

HTML5 / CSS3

Performance best practices : Request time


12/16

12

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


13/16

13

Performance best practices : Execution time

Reduce the number of DOM elements

More DOM elements slows down javascript DOM access like attachingevent 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


14/16

14

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


15/16

15

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)

Take Away


16/16

16

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

front-end web performance optimization

Documents