High Performance

Distribution for Harvard

Mobile & the Gazette

Chris Traganos • Web Developer, HPAC

@ctraganos #hitsummit

Larry Bouthillier, Digital Video Services, HUIT

Harvard on the Web.

Harvard on the Web.Harvard on the Web.

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

Mobile Traffic to the Gazette

0

7500

15000

22500

30000

Jun Jul Aug Sept Oct Nov Dec Jan Feb Mar Apr May

2011

SymbianOS1%

Android17%

Blackberry5%

iPad27%

iPhone50%

Gazette

Mobile

Usage

by

Device

HARVARD’s 360thCOMMENCEMENT

Chris Traganos

G)))))))))gVIDEO & WEB

BIG DAYt

G)))))))gMAY 264, 2011

12

7,200

102

323k

Graduate Schools

Conferred Degrees

George Brown ’29

Living Alumni

LIVE STREAMT

G)))))))))))))))gClass Day • Commencement

SECTIONS

EVENTDETAILS

LIVEVIDEO

SOCIALSTREAM

SCHOOLLINKS

DAILYGAZETTESIGN UP

MOBILE EXPERIENCE.

t

89%Use their smartphone

throughout the day

Source: The Mobile Movement Study, Google/Ipsos OTX MediaCT , Apr 2011

0

18

35

53

70

1922

25

54

59

70

Egypt India Kenya US UK Russia

% of Mobile-only users per country in 2010

iCommons

&

LIVE VIDEO CAPTUREWORK FLOW

LIVE VIDEO CAPTURE

DIGITALENCODING

SERVER NETWORK

DEVICE DETECTION

30+ MOBILE STREAMS

iPad

(even android...)

TOTALSt

43,73351,021

1,94891,444

Uniques

Visits

Concurrent

Pageviews

75% US Tra!c

CDNContent Delivery Networks

Make fewer HTTP requests

and spread them out.

S3 & Cloudfront (Backup CDN)

Dynamic Video Streaming

Optimization

&

Distribution Tools

Image reduction for faster downloads.

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

RIOT(Radical Image Optimization Tool)

320kB 90kB

Photoshop DropletsHarvard Gazette Team

320kB

A large photo takes 2-3 seconds to load.

320kB

A ‘droplet’ will resize &

compress the image.

320kB 90kB

Avg. 75% lighter at top quality.

Stylesheets & Javascript on CDNs

Stylesheets at the Top

Put Scripts at the Bottom

Code compression for CSS & Javascript

Webpage Performance Tips

Hosted libraries with a local fallback.

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>

Further Reading

http://hvrd.me/ljjdvWREAD ONLINE

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

READ ONLINEhttp://hvrd.me/m6D943

(Harvard ID req’d)

Special thanks:

Harvard Staff Photographers

Digital Communications - HPAC

THANK YOU.

University Archives

-iCommons • MobileCDN • HUIT Telecom