Page load optimization

Page Load Op t i m i za t i on

W hat we wi l l ta lk abou t ...

CACH IN G

a s se t c omp re s s i on

m in i f i ca t i on

{[ST RUCTU RE] - [ P RESENTAT ION] - [B EHAVIOR]

sp r i te si mage op t i m i za t i on

h ead e r s

c on te n t o rgan i za t i on la zy - load

<MARKUP>

CSS vs JSETags

T he Pa re to P r i nc i p le (T he 80 -20 r u le)

...and why i t d oe sn ' t r e a l ly app ly

T he f i r s t 20%

T he s i gn i f i can t 80%

...b i gge s t i mpac t, e a s i e s t to f i x

HTTP Reque s t s

“How ?”, yo u a sk ...

CSS

JS

COMB INE

IMAGES

YU I Comp re s sor - JSMin - M i n i f y

Min im i ze r eque s t ove r h e ad...

Enab le HTTP keepa l i ve s...

gz ip c on te n t to m i n i m i ze p ay load...

“P ip e l i n i ng ! ! !..”, yo u s h o u t...

Courtesy of en.wikipedia.org – HTTP Pipelining

Se rve s ta t i c c on te n t f r om a s se t se rve r s...

w i t h up to 4 d i f f e r e n t c ookie - le s s CNAMES...

Cac h i ng - w i t h o u t

Cac h i ng - w i t h

How d ' ya d o t h a t ??...

## httpd.conf

<Location /assets>

SetOutputFilter DEFLATE # mod_deflate

ExpiresActive On #mod_expires

ExpiresDefault "access plus 1 month"

FileETag MTime Size #core

</Location>

Cookie s - Le s s i s more

W hy ??

Cookie s ad d we i g h t ...w i t h eve ry r eque s t

W hat d o I d o ?? ! !

Keep ' e m l i g h t ! !...

Se t t h e m a t an app rop r i a te d oma in leve l...

Se t an app rop r i a te exp i ry d a te...

I mage s

Caugh t be tween t h e d evi l and t h e d eep b l ue se a...

.g i f

.jp e g

.p ng

Sp o i l t f o r c h o i c e ?...

And t h e w i nne r i s...

Op t im i z i ng Image s

Red und an t c h unks

App l i ca t i on me tad a ta

EX IF d a ta

Com men t s

Conve r t

And t h e ba t t le c on t i n ue s...

vs.

P rog re s s i ve B ase l i ne

Squeaky c le an ma rkup...

Fo l lowing HTTP se man t i c s...

Dep loy t h a t s i l ly favi c on. i c o...

“Huh ?? ! ! !.... Wha t ??....”

“He l lo t ran sp a renc ie s ! ! !...”

No...No...No t aga i n ! ! !

AJAX GET vs POST...

CSS a t t h e top...JS a t t h e bo t tom...b la h...b la h

f i n

ad i tya.mano ha r@gma i l.c om