Velocity Conference 2013: The Challenges of Internationalization and Localization on Page...

©2013 AKAMAI | FASTER FORWARDTM

Performance*and*[i18n,*l10n]

@ColinBendell

Tuesday, November 5, 13

©2013 AKAMAI | FASTER FORWARDTM

Colin*BendellAkamai

Tuesday, November 5, 13

©2013 AKAMAI | FASTER FORWARDTM

He*who*cannot*draw*

on*three*thousand*

years*is*living*hand*to*

mouth.

Wer*nicht*von*dreitausend*Jahren

Sich*weiß*Rechenscha@*zu*geben,

Bleib*im*Dunkeln*unerfahren,

Mag*von*Tag*zu*Tage*leben.

-- GoetheBuch des Unmuts, West-östlicher Divan

Tuesday, November 5, 13

http

://w

ww

.flic

kr.c

om/p

hoto

s/jo

shlty

/261

8266

556/

Earth is a pretty big place

Tuesday, November 5, 13

Tuesday, November 5, 13

©2013 AKAMAI | FASTER FORWARDTM

Languages*on*the*Internet

Korean39 million

Russian59 million

French59 million

Arabic66 million

German75 million

Portuguese82 million

Japanese99 million

Spanish164 million

Chinese509 million

English536 million

English

Chinese

Spanish

Japanese

Portuguese

German

Arabic

French

Russian

Korean

ww

w.la

ngua

geco

nnec

t.net

/blo

g/20

12/0

7/to

p-la

ngua

ges-

on-t

he-in

tern

et-in

fogr

aphi

c/

% of total speakers on the internet

Tuesday, November 5, 13

©2013 AKAMAI | FASTER FORWARDTM

Market*Opportunity

=

If I had 30% of US Market That’s 2% of Global Market

Tuesday, November 5, 13

©2013 AKAMAI | FASTER FORWARDTM

internaLonali[sz]aLon*=*more*$$$

Tuesday, November 5, 13

web*performance*is*a*

balancing*act*of*concernsTuesday, November 5, 13

©2013 AKAMAI | FASTER FORWARDTM

500*randomly*selected*urls*from*

HTTP*Archive*(where*Rank*<10k)*

i18n

no-i18n

0ms 1,000ms 2,000ms 3,000ms 4,000ms 5,000ms

Speed Index

Tuesday, November 5, 13

©2013 AKAMAI | FASTER FORWARDTM

Sample*Set*Breakdown

0

1775

3550

5325

7100

i18n no-i18n

Rank

0

20

40

60

80

i18n no-i18n

Page Speed

Tuesday, November 5, 13

©2013 AKAMAI | FASTER FORWARDTM

Does*LocalizaLon*∝*Slower*Sites?

Tuesday, November 5, 13

©2013 AKAMAI | FASTER FORWARDTM

Housekeeping:*for*the*pedanLc

• i18n*=*architecture*supporLng*localizaLon

• l10n*=*implementaLon*for*a*locale

• g11n*=*i18n*∪*l10n

• m17n*⊆*l10n

Tuesday, November 5, 13

©2013 AKAMAI | FASTER FORWARDTM

i18nbranding

multiple languages

input and output

related languages

geographytimezones

finance / legal obligationsnumber formats

currency

weights & measures

government regulations

culture / social

date formats

paper sizes

price hiding

workflows

Tuesday, November 5, 13

Yours

Tuesday, November 5, 13

Yours

3rd Parties

Tuesday, November 5, 13

©2013 AKAMAI | FASTER FORWARDTM

6,900*languages*

x**206*Countries

x**182*currencies

x**39*Date*formats*

...

=*high*fragmentaLon

Tuesday, November 5, 13

©2013 AKAMAI | FASTER FORWARDTM

Where*does*i18n*belong?

(RAR!)

Request Assemble Respond (Adapt) Render

Tuesday, November 5, 13

©2013 AKAMAI | FASTER FORWARDTM

Distributed*Caching*will*follow*

Geo*PoliLcal*Lines

Tuesday, November 5, 13

©2013 AKAMAI | FASTER FORWARDTM

My*recommended*balance*of*

cacheability*and*performance

Request Assemble Respond (Adapt) Render

currencynumber formatsdate formatsweights / measures

languagebrandingworkflowspricinggeo rules

geo rulesbranding

cachingtransform

Tuesday, November 5, 13

©2013 AKAMAI | FASTER FORWARDTM

Why*not*use*the*browser*for*l10n?

Tuesday, November 5, 13

©2013 AKAMAI | FASTER FORWARDTM

Core*Javascript*limited*to*date*l10n

Tuesday, November 5, 13

©2013 AKAMAI | FASTER FORWARDTM

Many,*many*js*libs*to*fill*the*gaps

• i18next.js*(i18next.com)

• jsperanto.js*(github.com/jpjoyal/jsperanto)

• jed.js*(slexaxton.github.io/Jed/)

• messageformat.js*(github.com/SlexAxton/messageformat.js)

• jquery.i18n*(github.com/recurser/jquerygi18n)

• globalize*(github.com/rxaviers/globalize)

• TwiherCLDR*(github.com/twiher/twihergcldrgjs)

• Closure*(developers.google.com/closure/library/)

• etc,*etc

Tuesday, November 5, 13

©2013 AKAMAI | FASTER FORWARDTM

i18n*means*more*code

Tuesday, November 5, 13

©2013 AKAMAI | FASTER FORWARDTM

Beware*of*the*template*tax

Tuesday, November 5, 13

©2013 AKAMAI | FASTER FORWARDTM

Takeaways

• Use*Javascript*for*date/Lme/number/currency*formajng

• Resource*bundles*cost*network*Lme

• Don’t*do*mulLglanguage*failover

• Most*users*don’t*override*the*locale*so*don’t*worry*about*it

Tuesday, November 5, 13

©2013 AKAMAI | FASTER FORWARDTM

Server*Side*i18n*is*Just*as*Hard

• control*the*memory,*cpu*and*runLme

• same*i18n*uses*the*same*techniques

• can*fragment*your*own*local*cache

• best*combinaLon*is*to*let*the*browser*handle*formajng,*server*

handle*m17n

Tuesday, November 5, 13

©2013 AKAMAI | FASTER FORWARDTM

m17n*is*the*hardest*part*of*i18n

• plurals*(goose*v.*geese)

• gender,*noun*declension,*verb*conjugaLon,*tense

• colloquialisms*(holegingthegwall*v.*ATM)

• page*layout*(speed*limit*v.*Geschwindigkeitsbegrenzung)

Tuesday, November 5, 13

©2013 AKAMAI | FASTER FORWARDTM

m17n*is*really*text*subsLtuLon

<!DOCTYPE*html>

<%

**ResourceBundle*msgs*=

ResourceBundle.getBundle("messages");

%>

<html>

**<head>

***<Ltle><%=msgs.getString("HELLO_WORLD")%></Ltle>

**</head>

**<body>

****<h1><%=msgs.getString("WELCOME")%></h1>

****<%=msgs.getString("BODY_TEXT")%>

**</body>

</html>

gggggg*messages.res*gggggg

WELCOME=Welcome*to*my*homepage

HELLO_WORLD=Hello*World*Example!

BODY_TEXT=This*is*just*a*sample*page*to*

compare*the*various*localizaLon*methods.

#*Errors*Messages

ERR_IE_VISTA=Java*1.6.0_10*or*above*is*required*

when*using*IE*under\nWindows*Vista

ERR_ACCESS01=No*access*allowed

ERR_ACCESS02=No*access*g*system*error

ERR_ACCESS03=No*access*g*password*failed

ERR_ACCESS04=No*access*g*userID*{0}*not*found

ERR_ACCESS05=No*access*g*userID*{0}*not*allowed

Tuesday, November 5, 13

©2013 AKAMAI | FASTER FORWARDTM

gehext*is*nicer,*but*sLll*the*same

<!DOCTYPE*html>

<%

****I18n*i18n*=*I18nFactory.getI18n(getClass());

%>

<html>

**<head>

***<Ltle><%=i18n.tr("Hello*World*Example!")%></Ltle>

**</head>

**<body>

****<h1><%=i18n.tr("Welcome*to*my*homepage!")%></h1>

****<%=i18n.tr("This*is*just*a*sample*page*to*compare*the*

various*localizaLon*methods.

")%>

**</body>

</html>

Tuesday, November 5, 13

©2013 AKAMAI | FASTER FORWARDTM

gehext*vs.*in*stringgid

php gettext

String ID

0 200 400 600 800

Requests / second

http

://m

el.m

elax

is.c

om/d

evbl

og/2

006/

04/1

0/be

nchm

arki

ng-p

hp-lo

caliz

atio

n-is

-get

text

-fast

-eno

ugh/

default (en)translated (de)

Tuesday, November 5, 13

©2013 AKAMAI | FASTER FORWARDTM

Does*m17n*make*sense?

deve

lope

r.tiz

en.o

rg/d

ocum

enta

tion/

artic

les/

plur

al-a

nd-g

ende

r-ru

les-

inte

rnat

iona

lized

-app

licat

ions

Tuesday, November 5, 13

©2013 AKAMAI | FASTER FORWARDTM

TranslaLon*Proxies

Tuesday, November 5, 13

©2013 AKAMAI | FASTER FORWARDTM

Mindful*of*the*gap

Tuesday, November 5, 13

©2013 AKAMAI | FASTER FORWARDTM

m17n*takeaways

• It’s*hard;*There*aren’t*any*silver*bullets

• It*will*require*hand*tuning

• Precompute*the*language*output

• TranslaLon*proxies*are*only*as*good*as*what*they*can*“see”

Tuesday, November 5, 13

©2013 AKAMAI | FASTER FORWARDTM

Language*DetecLon

Tuesday, November 5, 13

©2013 AKAMAI | FASTER FORWARDTM

Locale*detecLon*and*tracking

Connected*to*82.150.226.198*

from*50.58.99.162

GET*/engus/index.html?lang=engus*HTTP/1.1

Host:*en.example.com

Accept:**/*

AcceptgLanguage:engUS,en;q=0.8,frgCA;q=0.6,fr;q=0.4

Cookie:*lang=engus

Tuesday, November 5, 13

©2013 AKAMAI | FASTER FORWARDTM

Locale*DetecLon

SEO/BotCrawlable

Shareable Links

Cache Aware

Ops Friendly

Accept-Language

IP Geo

Cookie

URL

N ? ? ?

N ? ? N

N ? ? Y

Y Y Y Y

Tuesday, November 5, 13

©2013 AKAMAI | FASTER FORWARDTM

i18n*is*not*just*for*users

Tuesday, November 5, 13

©2013 AKAMAI | FASTER FORWARDTM

Other*usegcases*for*i18n

Operations Business

Early geo detection

(DNS)

Late geo detection

Performance

Capacity

Financial*&*

Legal

IP*Deny*/*

security

EnLtlement

Contract

Price*arbitrage

Tuesday, November 5, 13

©2013 AKAMAI | FASTER FORWARDTM

Don’t*overlook*UX*when*

implemenLng*i18n

Tuesday, November 5, 13

©2013 AKAMAI | FASTER FORWARDTM

Takeaways

• Use*browser*l10n*for*formajng*(currency,*Lmezones,*numbers,*date)

• Translate*server*side*and*cache*output

• Detect*with*AcceptgLanguage*header,*but*embed*the*locale*in*the*url

• Leverage*dns*for*localizaLon*business*rules

• Adding*i18n*early*is*cheaper*than*later

Tuesday, November 5, 13

©2013 AKAMAI | FASTER FORWARDTM

My*recommended*balance*of*

cacheability*and*performance

Request Assemble Respond (Adapt) Render

currencynumber formatsdate formatsweights / measures

languagebrandingworkflowspricinggeo rules

geo rulesbranding

cachingtransform

Tuesday, November 5, 13

©2013 AKAMAI | FASTER FORWARDTM

Thanks!

Tuesday, November 5, 13