Websites Performance Highlights
-
Upload
ala-abuhijleh -
Category
Technology
-
view
983 -
download
0
description
Transcript of Websites Performance Highlights
![Page 1: Websites Performance Highlights](https://reader038.fdocuments.us/reader038/viewer/2022103109/54531d22b1af9f7f248b573f/html5/thumbnails/1.jpg)
WEBSITES PERFORMANCE HIGHLIGHTS
WHERE DOES THE TIME GO?Ala’ Yasin Abuhijleh
Software Development Manager, Bayt.com
1
![Page 2: Websites Performance Highlights](https://reader038.fdocuments.us/reader038/viewer/2022103109/54531d22b1af9f7f248b573f/html5/thumbnails/2.jpg)
InternetRequest
WHERE DOES THE TIME GO?
2
![Page 3: Websites Performance Highlights](https://reader038.fdocuments.us/reader038/viewer/2022103109/54531d22b1af9f7f248b573f/html5/thumbnails/3.jpg)
Internet
WHERE DOES THE TIME GO?
3
Processing
Rendering Loading
![Page 4: Websites Performance Highlights](https://reader038.fdocuments.us/reader038/viewer/2022103109/54531d22b1af9f7f248b573f/html5/thumbnails/4.jpg)
InternetRequest
WHERE DOES THE TIME GO?
4
Processing
Rendering 20%Loading80%
![Page 5: Websites Performance Highlights](https://reader038.fdocuments.us/reader038/viewer/2022103109/54531d22b1af9f7f248b573f/html5/thumbnails/5.jpg)
Internet
HTTP OVERVIEW
5
DNS
![Page 6: Websites Performance Highlights](https://reader038.fdocuments.us/reader038/viewer/2022103109/54531d22b1af9f7f248b573f/html5/thumbnails/6.jpg)
Internet
HTTP OVERVIEW
6
TCP/ IP
![Page 7: Websites Performance Highlights](https://reader038.fdocuments.us/reader038/viewer/2022103109/54531d22b1af9f7f248b573f/html5/thumbnails/7.jpg)
Internet
HTTP OVERVIEW
7
TCPHTTP Request
![Page 8: Websites Performance Highlights](https://reader038.fdocuments.us/reader038/viewer/2022103109/54531d22b1af9f7f248b573f/html5/thumbnails/8.jpg)
Internet
HTTP OVERVIEW
8
TCPHTTP Response
![Page 9: Websites Performance Highlights](https://reader038.fdocuments.us/reader038/viewer/2022103109/54531d22b1af9f7f248b573f/html5/thumbnails/9.jpg)
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
![Page 10: Websites Performance Highlights](https://reader038.fdocuments.us/reader038/viewer/2022103109/54531d22b1af9f7f248b573f/html5/thumbnails/10.jpg)
HTTP RESPONSE
10
HTTP/1.1 200 OKContent-type: text/htmlLast-Modified: Wed, 2 Feb 2010 04:15:54 GMT
… Content<html> …
![Page 11: Websites Performance Highlights](https://reader038.fdocuments.us/reader038/viewer/2022103109/54531d22b1af9f7f248b573f/html5/thumbnails/11.jpg)
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
![Page 12: Websites Performance Highlights](https://reader038.fdocuments.us/reader038/viewer/2022103109/54531d22b1af9f7f248b573f/html5/thumbnails/12.jpg)
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!
![Page 13: Websites Performance Highlights](https://reader038.fdocuments.us/reader038/viewer/2022103109/54531d22b1af9f7f248b573f/html5/thumbnails/13.jpg)
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
![Page 14: Websites Performance Highlights](https://reader038.fdocuments.us/reader038/viewer/2022103109/54531d22b1af9f7f248b573f/html5/thumbnails/14.jpg)
EXAMPLE: CACHING
14
Data Store
Cach
ing
Ap
plic
atio
n
![Page 15: Websites Performance Highlights](https://reader038.fdocuments.us/reader038/viewer/2022103109/54531d22b1af9f7f248b573f/html5/thumbnails/15.jpg)
EXAMPLE: CACHING
15
• Local to application server• Distributed cache: Memcache• Cache data/pages/parts of pages
![Page 16: Websites Performance Highlights](https://reader038.fdocuments.us/reader038/viewer/2022103109/54531d22b1af9f7f248b573f/html5/thumbnails/16.jpg)
MORE PROCESSING OPTIMIZATION TECHNIQUES
16
• Pre-request pages parsing• Load Balancing• Master-Slave / separate writes from reads
![Page 17: Websites Performance Highlights](https://reader038.fdocuments.us/reader038/viewer/2022103109/54531d22b1af9f7f248b573f/html5/thumbnails/17.jpg)
LOADING OPTIMIZATION PRINCIPLES
17
• Reduce HTTP requests• Reduce response size• Cache content on browsers/proxies• Reduce DNS lookups
![Page 18: Websites Performance Highlights](https://reader038.fdocuments.us/reader038/viewer/2022103109/54531d22b1af9f7f248b573f/html5/thumbnails/18.jpg)
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
![Page 19: Websites Performance Highlights](https://reader038.fdocuments.us/reader038/viewer/2022103109/54531d22b1af9f7f248b573f/html5/thumbnails/19.jpg)
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
![Page 20: Websites Performance Highlights](https://reader038.fdocuments.us/reader038/viewer/2022103109/54531d22b1af9f7f248b573f/html5/thumbnails/20.jpg)
MORE LOADING OPTIMIZATION TECHNIQUES
20
• CDN• Expire Headers• Compression/Gzipping• No Redirects
![Page 21: Websites Performance Highlights](https://reader038.fdocuments.us/reader038/viewer/2022103109/54531d22b1af9f7f248b573f/html5/thumbnails/21.jpg)
RENDERING OPTIMIZATION PRINCIPLES
21
• Make use of progressive rendering• Reduce client side processing• Maximize parallel downloads
![Page 22: Websites Performance Highlights](https://reader038.fdocuments.us/reader038/viewer/2022103109/54531d22b1af9f7f248b573f/html5/thumbnails/22.jpg)
EXAMPLE: CSS ON TOP
22
• No redraw• Styles applied directly• No blank page• Feedback to user/Slow connection
![Page 23: Websites Performance Highlights](https://reader038.fdocuments.us/reader038/viewer/2022103109/54531d22b1af9f7f248b573f/html5/thumbnails/23.jpg)
MORE RENDERING OPTIMIZATION TECHNIQUES
23
• Scripts on bottom• No CSS Expressions• JavaScripts Asynchronously• Multiple Hosts• Ajax
![Page 24: Websites Performance Highlights](https://reader038.fdocuments.us/reader038/viewer/2022103109/54531d22b1af9f7f248b573f/html5/thumbnails/24.jpg)
PERFORMANCE TOOLS
24
• Firebug / Page Speed / Hammerhead• Yahoo! YSlow• Page Speed• SpeedTest.org