websites performance highlights
Post on 30-Oct-2014
983 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
WHERE DOES THE TIME GO?
3
Processing
Rendering Loading
InternetRequest
WHERE DOES THE TIME GO?
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 RESPONSE
10
HTTP/1.1 200 OKContent-type: text/htmlLast-Modified: Wed, 2 Feb 2010 04:15:54 GMT
… Content<html> …
HTTP OVERVIEW
11
<!-- start rendering content --><html> <head> <script src=“script1.js”/> <style src=“style1.css” /> </head> <body> <img src=“image1.jpg “ /> … …
Initiates a new request
Initiates a new request
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!
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
top related