This document discusses improving website performance using edge servers within a fog computing architecture, presenting various optimization techniques that can lead to significant reductions in page size and load time. It highlights the importance of tailoring optimizations based on client device capabilities, network characteristics, and user experiences to enhance overall performance. Additionally, it outlines specific recommendations and methodologies for achieving optimization goals in web applications.

1. Improving Web Site Performance
Using Edge Servers in Fog
Computing Architecture
Jiang Zhu, Douglas S. Chan, Mythili S. Prabhu,
Preethi Natarajan, Hao Hu, Nii Ampa-Sowa
Advanced Architecture & Research
Cisco Systems, Inc
CTECH 2013
© 2010 Cisco and/or its affiliates. All rights reserved.
Cisco Confidential
1

2. 2

3. Source http://www.stevesouders.com/blog/2012/02/10/the-performance-golden-rule/
3

4. November 2012
November 2013
* Chart produced by httparchive.org
4

5. 5

6. • Zoompf - analysis tools, recommendations
• Strangeloop Site Optimizer – appliance, external instance,
software on web server
• Stingray Aptimize - runs as a proxy
• Torbit – site optimizer service
6

7. 7

8. 8

9. 1.
2.
3.
4.
5.
Choose PNG over GIF (lossless)
Crush your PNGs (lossless)
Strip needless JPEG metadata (lossless)
Scale generated images (lossless)
Image maps
9

10. Recommendations show a possible 90% reduction in page size
10

11. Firefox add-on
11

12. Analysis shows nearly 70% reduction possible using compression
12

13. GET /v-app/scripts/107652916-dom.common.js HTTP/1.1
Host: www.blogger.com
User-Agent: Mozilla/5.0 (…) Gecko/2008070208 Firefox/3.0.1
Accept-Encoding: gzip,deflate
HTTP/1.1 200 OK
Content-Type: application/x-javascript
Last-Modified: Mon, 22 Sep 2008 21:14:35 GMT
Content-Length: 2066
6230
Content-Encoding: gzip
function d(s) {...
XmoÛHþÿ
FÖvã*wØoq...
typically reduces size by 70%
(6230-2066)/6230 = 67%
13

14. • Pro:
•
smaller transfer size
• Con:
•
CPU cycles – on client and server
• Don’t compress resources < 1K
• Don’t compress resources already compressed
(images)
14

15. 15

16. 16

17. The Cloud and the Fog
Actors (end
users and
providers)
Scalability,
security,
availability
Enterprises,
individuals
rendering,
transcoding
Low latency
end
subscribers,
service
providers
Fusion/aggre
gation, MR
Geodistribution,
security,
privacy
Control loops
Partitioning/
quasiautonomy,
security
Software
frameworks
MR/Hadoop
DC Bursting
Deep data
mining, search,
financial
algorithms
Web Hosting
E-commerce
Web
applications
Key Use Cases
Large Batch Jobs
Cloud
Computing
at the Core
Key
requirements
Areas of
application
Storage
Mobile Content
Delivery
Geo-distributed
Sensor/Actuator
Networks
Smart cities,
environmental
monitoring
Large Scale
Distributed
Controlled Systems
Fog
Computing
Video
streaming,
gaming
SCV, Smart
Grid, Int.
Transportation
© 2010 Cisco and/or its affiliates. All rights reserved.
Utilities,
federal/state
agencies, car
manufacturers
Cisco Confidential
17

18. • Optimizing for client device
Adapt optimization filters for a specific client device display resolution
Adapt optimization filters for a specific client browser
• Optimizing for client network
Gather network characteristics from Fog device on the edge
Adapt optimization for network characteristics (wired vs. wireless)
18

19. 19

20. Fog node
running web
optimization
service
www.a.com
Fog node
with web
optimization
service
20

21. Fog Device
User, Client
Metadata
Distributed
data store
Optimization
Engine
Optimization
config
Web Proxy +
Optimization Filters
Performance
feedback
Browser on
Client
Request/
Optimized resource
21

22. 22

23. • Overall process flow
Initial and subsequent requests
• Dynamic and custom optimizations
Client device and local network conditions
• Per user optimization
Tracking users via MAC/ IP addresses
• Obtaining and applying user experience
Collective and individual experience
23

24. Category
Filters
Caching
Optimizations
canonicalize javascript libraries, extend cache, extend cache pdfs,
local storage cache, outline css, outline javascript
Minimize
Round Trip
Times
combine css, flatten css imports, inline css, combine
javascript, inline javascript, move css above scripts, insert
dns prefetch, sprite images
Minimize
Payload Size
collapse whitespace, combine heads, elide attributes, rewrite
javascript, rewrite images, remove comments, remove quotes,
rewrite css, trim urls, fallback rewrite css urls, rewrite style
attributes, rewrite style attributes with url
Minimize
Request
Overhead
rewrite domains
Optimize
Browser
Rendering
convert meta tags, defer javascript, inline preview images,
resize mobile images
lazyload images, move css to head, rewrite images, rewrite
style attributes
rewrite style attributes with url
24

25. 7000
6000
4000
No Optimizations
3000
Minimized Round Trip Time
2000
Performance
improvement of
1.5x
1000
0
1
4
7
10
13
16
19
22
25
28
31
34
37
40
43
46
49
52
55
58
61
64
67
70
73
76
79
82
85
88
91
94
97
100
Page Load Time (ms)
5000
Request Index
25

26. 10000
9000
8000
6000
5000
No Optimization
4000
Optimized Browser Rendering
3000
2000
1000
0
1
4
7
10
13
16
19
22
25
28
31
34
37
40
43
46
49
52
55
58
61
64
67
70
73
76
79
82
85
88
91
94
97
100
Page Load Time (ms)
7000
Performance
improvement of
2x
Request Index
26

27. 9000
8000
6000
5000
Optimized Browser Rendering
4000
Minimized Round Trip Time
3000
2000
1000
0
1
4
7
10
13
16
19
22
25
28
31
34
37
40
43
46
49
52
55
58
61
64
67
70
73
76
79
82
85
88
91
94
97
100
Page Load Time (ms)
7000
Request Index
27

28. • Proof of Concept
• Testing on various client platforms
• Tuning the optimization engine
• Real data results
28

29. Thank you.