As Harvard's online traffic increases, performance improvements are at the center of the University's web and multimedia efforts. Larry Bouthillier and Chris Traganos will discuss the tools and services used to rapidly distribute and scale content online optimally via content delivery networks. They will discuss the operational and performance implications of online video, traffic spikes on the Gazette and other services that are supported by a distributed network of servers around the world.

1. High Performance
Distribution for Harvard
Mobile & the Gazette
Larry Bouthillier, Digital Video Services, HUIT
Chris Traganos • Web Developer, HPAC
@ctraganos #hitsummit

2. Harvard on the Web.

3. Harvard on the Web.

5. Overview
• The Harvard Gazette is
Harvard's official newspaper,
published in print and online.
• Writers, photographers, and
editors create the online
version which has fresh
content delivered daily.
• Editorial workflow is used for
both creating print and online
content.
• Powered by WordPress

6. Mobile Traffic to the Gazette
2011
30000
22500
15000
7500
0
Jun Jul Aug Sept Oct Nov Dec Jan Feb Mar Apr May

7. SymbianOS
1%
Android
Gazette 17%
Mobile
Blackberry
Usage 5%
iPhone
by 50%
Device
iPad
27%

8. HARVARD’s 360th
COMMENCEMENT
G)))))))))g
VIDEO & WEB
Chris Traganos

9. t
BIG DAY
G)))))))g
MAY 264, 2011

11. 12 Graduate Schools
7,200 Conferred Degrees
323k Living Alumni
102 George Brown ’29

12. T
LIVE STREAM
G)))))))))))))))g
Class Day • Commencement

14. SECTIONS

15. EVENT
DETAILS

16. LIVE
VIDEO

17. SOCIAL
STREAM

18. SCHOOL
LINKS

19. DAILY
GAZETTE
SIGN UP

21. t
MOBILE
EXPERIENCE.

23. 89%
Use their smartphone
throughout the day
Source: The Mobile Movement Study, Google/Ipsos OTX MediaCT , Apr 2011

24. % of Mobile-only users per country in 2010
70
70
59
53 54
35
25
22
18 19
0
Egypt India Kenya US UK Russia

25. iCommons
&

26. LIVE VIDEO
WORK FLOW
CAPTURE

27. LIVE VIDEO
CAPTURE

28. DIGITAL
ENCODING

29. SERVER NETWORK

30. DEVICE DETECTION

31. 30+ MOBILE
STREAMS

32. iPad

35. (even android...)

36. t
TOTALS

38. 43,733 Uniques
51,021 Visits
91,444 Pageviews
1,948 Concurrent
75% US Tra c

40. CDN
Content Delivery Networks

46. Make fewer HTTP requests
and spread them out.

49. S3 & Cloudfront (Backup CDN)

50. Dynamic Video Streaming

51. Optimization
&
Distribution Tools

53. Image reduction for faster downloads.

55. ImageOptim
(PNG, JPG, GIF optimizer for Mac OS X)

57. RIOT
(Radical Image Optimization Tool)

58. Photoshop Droplets
Harvard Gazette Team
320kB 90kB

59. A large photo
takes 2-3
seconds to load.
320kB

60. 320kB
A ‘droplet’ will resize &
compress the image.

61. Avg. 75% lighter at top quality.
320kB 90kB

62. Webpage Performance Tips
Stylesheets & Javascript on CDNs
Stylesheets at the Top
Put Scripts at the Bottom
Code compression for CSS & Javascript

63. Hosted libraries with a local fallback.

64. Example: Hosted libraries with a local fallback.
<script
type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/
jquery/1.4.1/jquery.min.js"></script>
<script
type="text/javascript">
if
(typeof
jQuery
==
'undefined')
{
document.write(unescape("%3Cscript
src='/Scripts/jquery-­‐1.3.2.min.js'
type='text/javascript'%3E%3C/script%3E"));
}
</script>

65. Further
Reading

67. READ ONLINE
http://hvrd.me/ljjdvW
http://hvrd.me/ljjdvW
(Harvard ID req’d)

69. READ ONLINE
http://hvrd.me/m6D943
(Harvard ID req’d)

70. THANK YOU.
-
Special thanks:
iCommons • MobileCDN • HUIT Telecom
Harvard Staff Photographers
University Archives
Digital Communications - HPAC