Web App Performance

Best Practices

YSlow - Yahoo
PageSpeed - Google

Tools

- 1 -

Minimize HTTP requests

1 - Minimize HTTP request

1 - Minimize HTTP request

80% of user-time spend on front-end.

&

Most of this spent on downloading

image, css, scripts etc

Solution's

1 - Minimize HTTP request

Simplify & re-Design the Eshop

1 - Minimize HTTP request

Combined Files

A CSS file

A JavaScript file

 

1 - Minimize HTTP request

CSS Sprites

1 - Minimize HTTP request

<img usemap="#map1" border="0" src="/images/imagemap.gif?t=1413377724">
<map name="map1">
  <area shape="rect" coords="0,0,31,31" href="javascript:alert('Home')" title="Home">
  <area shape="rect" coords="36,0,66,31" href="javascript:alert('Gifts')" title="Gifts">
  <area shape="rect" coords="71,0,101,31" href="javascript:alert('Cart')" title="Cart">
  <area shape="rect" coords="106,0,136,31" href="javascript:alert('Settings')" title="Settings">
  <area shape="rect" coords="141,0,171,31" href="javascript:alert('Help')" title="Help">
</map>

1 - Minimize HTTP request

Image Map

1 - Minimize HTTP request

http://eshop.atea.com/

Inline images

data:image/gif;base64,R0lGODlhHAAmAKIHAKqqqsvLy0hISObm5vf394uLiwAAAP///
yH5BAEAAAcALAAAAAAcACYAAAO9eLpMIMYIQJi9DcYtKv6KtnHgB4yoAZSXKAyDy1rjoAzj
zOQLrx8+4OanCAZnxiExGSEKmz3lj2lwUq3SZ3WZPbKuXGgxu9t4tLYDTkpIRQILF0x2G4l
WipM7gj/oJQUkcXsCDCIFATULBCIcZ2tvB3QLDxETFnR/BgU/gRt9jX0gnpYMkJZpFzEoqQ
qJKAIBaQOVKHAXr3t7txgBjboSvB8EpLoFZywOAo3LFE5lYs/QW9LT1TRk1V7S2xYJADs=


/* Usage */
.gsri_a {
    background: url(data:image/gif;base64,R0lGODlhHAAmAKIH...);
    ...
    height: 23px;
    width: 17px;
}

1 - Minimize HTTP request

IE8+

1 - Minimize HTTP request

-3-

Avoid Redirects

Three different ways to redirect

  • META tag
  • JavaScript
  • HTTP response header

3 - Avoid Redirects

JavaScript

setTimeout(function(){
 window.location.replace("http://example.com/newuri");
},2000);

HTTP response headers(301, 302)

HTTP/1.1 301 Moved Permanently
Location: http://example.com/newuri
Content-Type: text/html
<meta http-equiv="refresh" content="0;URL='http://example.com/newuri/'" />

META Tag

3- Avoid Redirects

A wasteful Redirect

http://eshoptest.atea.com/dk/
https://eshoptest.atea.com/dk/
https://eshoptest.atea.com/dk
https://eshoptest.atea.com/dk/

3 - Avoid Redirects

-4-

Post-load Components

 

http://www.webpagetest.org/

4- Post-load Components

What's absolutely required in order to render the page initially?

  • JavaScript

  • CSS

  • AJAX

  • Hidden Contents

  • Images below the fold

4- Post-load Components

-5-

Pre-load components

There are actually several types:

  • Unconditional pre-load 
  • Conditional pre-load
  • Anticipated pre-load 

5- Pre-load Components

1 -Unconditional pre-load

window.onload

or

<body onload=“”/>

5- Pre-load Components

2 - Conditional pre-load

5- Pre-load Components

2 - Conditional pre-load

5- Pre-load Components

3 -Anticipated preload

The new site is cool, but it's slower than before

5- Pre-load Components

-6-

Reduce the Number of DOM elements

Problems

Slow DOM handling

means

Slow User experience

6- Reduce DOM elements

Reasons

  •  Are you using nested tables for layout purposes?
  • Are you throwing in more <div>s only to fix layout issues?
  • Are you not removing useless DOM elements?

6- Reduce DOM elements

Statistics

document.getElementsByTagName('*').length

atea

467

telia

739

ebay

2359

amazon

2678

6- Reduce DOM elements

-7-

Minimize the Number of iframes

 

Pros

  • Helps with slow third-party content like badges and ads
  • Security sandbox
  • Download scripts in parallel

Cons

  • Costly even if blank
  • Blocks page onload
  • Non-semantic
  • Dynamic Asynch IFrame
  • Friendly IFrame

7-Numbers of IFrame

1 - Minimize HTTP request

2 - Reduce DNS lookup

3 - Avoid Redirects

4- Post-load Components

5- Pre-load Components

6- Reduce DOM elements

7-Minimize the numbers of IFrame

https://developer.yahoo.com/performance/rules.html

-?-

Q/A

Thanks

Made with Slides.com