Websites Performance Highlights

WEBSITES PERFORMANCE HIGHLIGHTS

WHERE DOES THE TIME GO?Ala’ Yasin Abuhijleh

Software Development Manager, Bayt.com

1

InternetRequest

WHERE DOES THE TIME GO?

2

Internet


3

Processing

Rendering Loading

InternetRequest


4

Processing

Rendering 20%Loading80%

Internet

HTTP OVERVIEW

5

DNS

Internet

HTTP OVERVIEW

6

TCP/ IP

Internet

HTTP OVERVIEW

7

TCPHTTP Request

Internet

HTTP OVERVIEW

8

TCPHTTP Response

HTTP REQUEST

9

Get /en/jobs HTTP 1.1Host: www.bayt.comUser-Agent: Mozilla/5.0 Gecko Firefox/1.5.0.9Accept-Encoding: gzip,deflate ……..other headers

http://www.bayt.com/

HTTP RESPONSE

10

HTTP/1.1 200 OKContent-type: text/htmlLast-Modified: Wed, 2 Feb 2010 04:15:54 GMT

… Content<html> …

HTTP OVERVIEW

11

<html> <head> <script src=“script1.js”/> <style src=“style1.css” /> </head> <body> <img src=“image1.jpg “ /> … …

Initiates a new request



HTTP OVERVIEW

12

• Each src attribute is a new request• www.cnn.com 127 requests• www.bayt.com 68 requests• www.google.com 11 requests!

http://www.cnn.com/

http://www.bayt.com/

http://www.google.com/

PROCESSING OPTIMIZATION PRINCIPLES

13

• Reduce I/O reads• Reduce Memory and CPU usage• Reduce network connections• Stay inside the application process, If you can!• Avoid over-processing

EXAMPLE: CACHING

14

Data Store

Cach

ing

Ap

plic

atio

n

EXAMPLE: CACHING

15

• Local to application server• Distributed cache: Memcache• Cache data/pages/parts of pages

MORE PROCESSING OPTIMIZATION TECHNIQUES

16

• Pre-request pages parsing• Load Balancing• Master-Slave / separate writes from reads

LOADING OPTIMIZATION PRINCIPLES

17

• Reduce HTTP requests• Reduce response size• Cache content on browsers/proxies• Reduce DNS lookups

EXAMPLE: JAVASCRIPT OPTIMIZATION

18

function showAlert( message1, message2, status) {

if ( status == 1 ) {alert( message1 )

} else {alert ( message2 )

}}

135 Characters = 135 bytes transferred over the internet

EXAMPLE: JAVASCRIPT OPTIMIZATION

19

function shwAlrt(msg1,msg2,st){(st==1)?alert(msg1):alert (msg2)}

• Minification:• No wrapping = -2 characters/line• No white spaces• Obfuscation: message1 msg1

62 Characters = 62 bytes62/135 = 45% !

Same functionality with 45% of bytes

MORE LOADING OPTIMIZATION TECHNIQUES

20

• CDN• Expire Headers• Compression/Gzipping• No Redirects

RENDERING OPTIMIZATION PRINCIPLES

21

• Make use of progressive rendering• Reduce client side processing• Maximize parallel downloads

EXAMPLE: CSS ON TOP

22

• No redraw• Styles applied directly• No blank page• Feedback to user/Slow connection

MORE RENDERING OPTIMIZATION TECHNIQUES

23

• Scripts on bottom• No CSS Expressions• JavaScripts Asynchronously• Multiple Hosts• Ajax

PERFORMANCE TOOLS

24

• Firebug / Page Speed / Hammerhead• Yahoo! YSlow• Page Speed• SpeedTest.org

Technology

Websites Performance Highlights