Meta Refresh 2014

ALL ABOUT PERCEIVED PERFORMANCE

Aakash BapnaUI Engineer flipkartcom

1

2

Arya

Abhilash

Me

I HATE SLOW WEBSITES

3

4

ANYTHING YOU ADD- BROWSERS HAVE TO DOWNLOAD COMPUTE amp

RENDER

5


RENDER

6

Basics Performance Rules

bull CSS on top JS at bottombull Use CDNbull Caching static resourcesbull Minify JS CSS gzipbull hellip Y slow rules

7

8

USERS STILL SAY YOUR SITE IS SLOW

WHAT PERCEIVED PERFORMANCE

9

10

ITS ALL HOW USERS PERCEIVE YOUR PAGE LOAD

whether loads in a flash or takes ages to load

11

YOU HAVE TO MAKE USERS BELIEVE ITS LOADING FAST

12

HOW WE DO THIS

13

14

Skeleton screens- Homepage (below fold)

Progressively enhanced MotoG page

15

SLOW CONNECTION FAST CONNECTION

Other Techniques 1 Show precise progress loader when it

takes time (gmail)2 Optimistic actions (Instagram)3 Paint what they are seeing right now

16



17

MEASURING PERCEIVED PERFORMANCE

HARD

18

SYNTHETIC MONITORING

19

WEBPAGETEST1 Shows load times2 Shows waterfall of requests of how

page loaded3 CPU network utilisation4 Filmstrips 5 etchellip

20

21

Frames

Waterfall

ldquoWhy is it taking 715ms to download a 5kb imagerdquo - A developer after running WPT

22

Problem with WPT

bull Inconsistent results for load times on every run

bull Probably due to network conditions in India

23

BIGGER QUESTION- HOW OFTEN ARE USERS SEEING THE PAGE WEBPAGETEST

IS SEEING

24

REAL USER MONITORING

25

windowonload1 so Web 102 Doesnrsquot tell you how page loaded 3 Above the fold might complete very

early4 This is the bare minimum you should

record

26

27

NAVIGATION TIMING API

28


Server Time Very less for big sites

Client Time Very HighNEED MOAR DETAILS

WHAT IF YOU COULD EXPORT REQUESTS WATERFALL FROM

REAL USERS

and reconstruct picture

29

Resource Timing API

bull windowperformancegetEntries()bull Supported latest Chrome IE10bull DNSTCP connect times available

when cross origin headers are setbull under documented

30

NAVIGATION TIMING API + RESOURCE TIMING API =

WINDOWONLOAD

complete end to end picture of network performance

31

WE EXPORTED DATA FROM BROWSERS RAN HADOOP JOBS TO PROCESS THIS

32

33

34

Requests Waterfall from RUM

35

Identify critical requests


36

Above the fold load time aim for getting this as low as possible


Findings (what was fast)

bull CSS JS are heavily cached over requests median under 100ms

bull Cleaning up CSSJS would hardly move metrics

bull Although CSS load times are less its a blocking resource and need to keep a check on its size

37

Findings (what was slow)

bull Google Analytics Omniture tracking calls were taking 500ms (median)

bull Redirectsbull HTML document itself taking too long

to loadbull Images

38

CRITICAL REQUESTS

Let browser handle make them discoverable to browsers as soon as possible via

markup itself

39

NON-CRITICAL BELOW FOLD

Lazy load images lazy load modules via Ajax at DOM Ready

40

3RD PARTY CODE SHARE BUTTONS

You donrsquot have control over these start at post onload

41

42

All in all data by Resource Timing APIs is a gold mine There is lots to discover from it

FIXING IMAGES

43

DEVELOPER ldquoTHIS IMAGE IS HUGE GIMME A SMALLER ONErdquo

DESIGNER ldquoOKAY HOW SMALLrdquo

DEVELOPER (CONFUSED MAKES A RANDOM GUESShellip)

44

DONrsquoT GUESS USE DATA

use data from Resource Timing APIs

45

46

Example730px x 300px

50kb 380ms to load

FIXING CAROUSELS

47

48

An example carousel on site

49

3 x 50kb images in parallelMedian load time of each 832msBUT we are showing only one image why load all three

Wrong way

50

Median load time 380ms

Right way

Load via javascript after critical requests end

Load via ltimg src=rsquorsquordquo gt as a critical resource

IMAGE REUSE

51

52

Browse Page Product Page

53


Same cached image from previous page upscaled and used as placeholder while big image loads

THEMING

All developers hate it

54

55

Progressive festival theming1 Theme is non-critical should load after all

critical requests complete2 All functionality should work with base skin3 Limited to colours background images4 No new DOM elements use before after5 Packed in single themecss file6 Theme CSS file is loaded asyncly on DOM

ready

56

FIXING HTML SIZE

Important as affects discovery on critical requests

57

Our huuuge Nav menu

58

MENU ON SLOW CONNECTION

59

60

lthtmlgtltheadgt ltmdash css mdashgtltheadgtltbodygt ltdiv class=ldquoheaderrdquogt ltmdash search bar mdashgt ltmdash navigation menu and big fat submenus mdashgt helliphellip helliphellip ltdivgt ltimg src=ldquohelliprdquo gt ltimg src=ldquohelliprdquo gt hellipltbodygt

HTML caching

bull Over 40 of our markup is flyout menu

bull Persisted on clientside with localStorage for 10 mins

bull Drastically reduced payload which was transferred for every request

bull 200ms improvement over median

61

REDIRECTS

very costly

62

IT ALL STARTS WITH A SHORTCUT

if (some condition) redirect()

63

DECIDE URL STRATEGY BETWEEN MOBILEDESKTOP EARLY ON

64

PREFER ONE URL BETWEEN MOBILEDESKTOP

wwwflipkartcom - goodwwwflipkartcomm - bad

65

MOBILE SITE PERFORMANCE

66

Mobile perf highlights

bull Much of users(~50) still come from 2G connections in India

bull Use touchStart event instead of click(~300ms delay)

bull AB tested heavily to find right mix of content

67

TO SUSTAIN

Performance is a moving target

68

To sustain1 Have a performance team2 Measure key performance metrics3 Use webpagetest in CI to keep an eye

on whats being checked in

69

THE FUTUREPrefetching

70

NATIVE APPS ARE CHEATING WITH PREFETCHING

71

NATIVE APP 85MB WEB VIEW 0 BYTES

72

Food for thought

bull Prefetching autosuggest next pageshellipbull Going offline with ServiceWorkers

[W3C proposal] bull Prefetching on hovertouchStart http

instantclickio

73

THANK YOU

connecttwitter _aakash

mail aakashflipkartcom

74

2

Arya

Abhilash

Me


3

4


RENDER

5


RENDER

6



7

8



9

10



11


12

HOW WE DO THIS

13

14



15




16



17


HARD

18


19



20

21

Frames

Waterfall


22

Problem with WPT



23


IS SEEING

24


25



record

26

27


28





REAL USERS


29

Resource Timing API



30


WINDOWONLOAD


31


32

33

34


35



36







37




to loadbull Images

38

CRITICAL REQUESTS


markup itself

39



40



41

42


FIXING IMAGES

43




44



45

46


50kb 380ms to load

FIXING CAROUSELS

47

48


49


Wrong way

50


Right way



IMAGE REUSE

51

52


53



THEMING


54

55



ready

56

FIXING HTML SIZE


57

Our huuuge Nav menu

58


59

60


HTML caching





61

REDIRECTS

very costly

62



63


64



65


66





67

TO SUSTAIN


68



69


70


71


72

Food for thought



instantclickio

73

THANK YOU



74


3

4


RENDER

5


RENDER

6



7

8



9

10



11


12

HOW WE DO THIS

13

14



15




16



17


HARD

18


19



20

21

Frames

Waterfall


22

Problem with WPT



23


IS SEEING

24


25



record

26

27


28





REAL USERS


29

Resource Timing API



30


WINDOWONLOAD


31


32

33

34


35



36







37




to loadbull Images

38

CRITICAL REQUESTS


markup itself

39



40



41

42


FIXING IMAGES

43




44



45

46


50kb 380ms to load

FIXING CAROUSELS

47

48


49


Wrong way

50


Right way



IMAGE REUSE

51

52


53



THEMING


54

55



ready

56

FIXING HTML SIZE


57

Our huuuge Nav menu

58


59

60


HTML caching





61

REDIRECTS

very costly

62



63


64



65


66





67

TO SUSTAIN


68



69


70


71


72

Food for thought



instantclickio

73

THANK YOU



74

4


RENDER

5


RENDER

6



7

8



9

10



11


12

HOW WE DO THIS

13

14



15




16



17


HARD

18


19



20

21

Frames

Waterfall


22

Problem with WPT



23


IS SEEING

24


25



record

26

27


28





REAL USERS


29

Resource Timing API



30


WINDOWONLOAD


31


32

33

34


35



36







37




to loadbull Images

38

CRITICAL REQUESTS


markup itself

39



40



41

42


FIXING IMAGES

43




44



45

46


50kb 380ms to load

FIXING CAROUSELS

47

48


49


Wrong way

50


Right way



IMAGE REUSE

51

52


53



THEMING


54

55



ready

56

FIXING HTML SIZE


57

Our huuuge Nav menu

58


59

60


HTML caching





61

REDIRECTS

very costly

62



63


64



65


66





67

TO SUSTAIN


68



69


70


71


72

Food for thought



instantclickio

73

THANK YOU



74


RENDER

5


RENDER

6



7

8



9

10



11


12

HOW WE DO THIS

13

14



15




16



17


HARD

18


19



20

21

Frames

Waterfall


22

Problem with WPT



23


IS SEEING

24


25



record

26

27


28





REAL USERS


29

Resource Timing API



30


WINDOWONLOAD


31


32

33

34


35



36







37




to loadbull Images

38

CRITICAL REQUESTS


markup itself

39



40



41

42


FIXING IMAGES

43




44



45

46


50kb 380ms to load

FIXING CAROUSELS

47

48


49


Wrong way

50


Right way



IMAGE REUSE

51

52


53



THEMING


54

55



ready

56

FIXING HTML SIZE


57

Our huuuge Nav menu

58


59

60


HTML caching





61

REDIRECTS

very costly

62



63


64



65


66





67

TO SUSTAIN


68



69


70


71


72

Food for thought



instantclickio

73

THANK YOU



74


RENDER

6



7

8



9

10



11


12

HOW WE DO THIS

13

14



15




16



17


HARD

18


19



20

21

Frames

Waterfall


22

Problem with WPT



23


IS SEEING

24


25



record

26

27


28





REAL USERS


29

Resource Timing API



30


WINDOWONLOAD


31


32

33

34


35



36







37




to loadbull Images

38

CRITICAL REQUESTS


markup itself

39



40



41

42


FIXING IMAGES

43




44



45

46


50kb 380ms to load

FIXING CAROUSELS

47

48


49


Wrong way

50


Right way



IMAGE REUSE

51

52


53



THEMING


54

55



ready

56

FIXING HTML SIZE


57

Our huuuge Nav menu

58


59

60


HTML caching





61

REDIRECTS

very costly

62



63


64



65


66





67

TO SUSTAIN


68



69


70


71


72

Food for thought



instantclickio

73

THANK YOU



74



7

8



9

10



11


12

HOW WE DO THIS

13

14



15




16



17


HARD

18


19



20

21

Frames

Waterfall


22

Problem with WPT



23


IS SEEING

24


25



record

26

27


28





REAL USERS


29

Resource Timing API



30


WINDOWONLOAD


31


32

33

34


35



36







37




to loadbull Images

38

CRITICAL REQUESTS


markup itself

39



40



41

42


FIXING IMAGES

43




44



45

46


50kb 380ms to load

FIXING CAROUSELS

47

48


49


Wrong way

50


Right way



IMAGE REUSE

51

52


53



THEMING


54

55



ready

56

FIXING HTML SIZE


57

Our huuuge Nav menu

58


59

60


HTML caching





61

REDIRECTS

very costly

62



63


64



65


66





67

TO SUSTAIN


68



69


70


71


72

Food for thought



instantclickio

73

THANK YOU



74

8



9

10



11


12

HOW WE DO THIS

13

14



15




16



17


HARD

18


19



20

21

Frames

Waterfall


22

Problem with WPT



23


IS SEEING

24


25



record

26

27


28





REAL USERS


29

Resource Timing API



30


WINDOWONLOAD


31


32

33

34


35



36







37




to loadbull Images

38

CRITICAL REQUESTS


markup itself

39



40



41

42


FIXING IMAGES

43




44



45

46


50kb 380ms to load

FIXING CAROUSELS

47

48


49


Wrong way

50


Right way



IMAGE REUSE

51

52


53



THEMING


54

55



ready

56

FIXING HTML SIZE


57

Our huuuge Nav menu

58


59

60


HTML caching





61

REDIRECTS

very costly

62



63


64



65


66





67

TO SUSTAIN


68



69


70


71


72

Food for thought



instantclickio

73

THANK YOU



74


9

10



11


12

HOW WE DO THIS

13

14



15




16



17


HARD

18


19



20

21

Frames

Waterfall


22

Problem with WPT



23


IS SEEING

24


25



record

26

27


28





REAL USERS


29

Resource Timing API



30


WINDOWONLOAD


31


32

33

34


35



36







37




to loadbull Images

38

CRITICAL REQUESTS


markup itself

39



40



41

42


FIXING IMAGES

43




44



45

46


50kb 380ms to load

FIXING CAROUSELS

47

48


49


Wrong way

50


Right way



IMAGE REUSE

51

52


53



THEMING


54

55



ready

56

FIXING HTML SIZE


57

Our huuuge Nav menu

58


59

60


HTML caching





61

REDIRECTS

very costly

62



63


64



65


66





67

TO SUSTAIN


68



69


70


71


72

Food for thought



instantclickio

73

THANK YOU



74

10



11


12

HOW WE DO THIS

13

14



15




16



17


HARD

18


19



20

21

Frames

Waterfall


22

Problem with WPT



23


IS SEEING

24


25



record

26

27


28





REAL USERS


29

Resource Timing API



30


WINDOWONLOAD


31


32

33

34


35



36







37




to loadbull Images

38

CRITICAL REQUESTS


markup itself

39



40



41

42


FIXING IMAGES

43




44



45

46


50kb 380ms to load

FIXING CAROUSELS

47

48


49


Wrong way

50


Right way



IMAGE REUSE

51

52


53



THEMING


54

55



ready

56

FIXING HTML SIZE


57

Our huuuge Nav menu

58


59

60


HTML caching





61

REDIRECTS

very costly

62



63


64



65


66





67

TO SUSTAIN


68



69


70


71


72

Food for thought



instantclickio

73

THANK YOU



74



11


12

HOW WE DO THIS

13

14



15




16



17


HARD

18


19



20

21

Frames

Waterfall


22

Problem with WPT



23


IS SEEING

24


25



record

26

27


28





REAL USERS


29

Resource Timing API



30


WINDOWONLOAD


31


32

33

34


35



36







37




to loadbull Images

38

CRITICAL REQUESTS


markup itself

39



40



41

42


FIXING IMAGES

43




44



45

46


50kb 380ms to load

FIXING CAROUSELS

47

48


49


Wrong way

50


Right way



IMAGE REUSE

51

52


53



THEMING


54

55



ready

56

FIXING HTML SIZE


57

Our huuuge Nav menu

58


59

60


HTML caching





61

REDIRECTS

very costly

62



63


64



65


66





67

TO SUSTAIN


68



69


70


71


72

Food for thought



instantclickio

73

THANK YOU



74


12

HOW WE DO THIS

13

14



15




16



17


HARD

18


19



20

21

Frames

Waterfall


22

Problem with WPT



23


IS SEEING

24


25



record

26

27


28





REAL USERS


29

Resource Timing API



30


WINDOWONLOAD


31


32

33

34


35



36







37




to loadbull Images

38

CRITICAL REQUESTS


markup itself

39



40



41

42


FIXING IMAGES

43




44



45

46


50kb 380ms to load

FIXING CAROUSELS

47

48


49


Wrong way

50


Right way



IMAGE REUSE

51

52


53



THEMING


54

55



ready

56

FIXING HTML SIZE


57

Our huuuge Nav menu

58


59

60


HTML caching





61

REDIRECTS

very costly

62



63


64



65


66





67

TO SUSTAIN


68



69


70


71


72

Food for thought



instantclickio

73

THANK YOU



74

HOW WE DO THIS

13

14



15




16



17


HARD

18


19



20

21

Frames

Waterfall


22

Problem with WPT



23


IS SEEING

24


25



record

26

27


28





REAL USERS


29

Resource Timing API



30


WINDOWONLOAD


31


32

33

34


35



36







37




to loadbull Images

38

CRITICAL REQUESTS


markup itself

39



40



41

42


FIXING IMAGES

43




44



45

46


50kb 380ms to load

FIXING CAROUSELS

47

48


49


Wrong way

50


Right way



IMAGE REUSE

51

52


53



THEMING


54

55



ready

56

FIXING HTML SIZE


57

Our huuuge Nav menu

58


59

60


HTML caching





61

REDIRECTS

very costly

62



63


64



65


66





67

TO SUSTAIN


68



69


70


71


72

Food for thought



instantclickio

73

THANK YOU



74

14



15




16



17


HARD

18


19



20

21

Frames

Waterfall


22

Problem with WPT



23


IS SEEING

24


25



record

26

27


28





REAL USERS


29

Resource Timing API



30


WINDOWONLOAD


31


32

33

34


35



36







37




to loadbull Images

38

CRITICAL REQUESTS


markup itself

39



40



41

42


FIXING IMAGES

43




44



45

46


50kb 380ms to load

FIXING CAROUSELS

47

48


49


Wrong way

50


Right way



IMAGE REUSE

51

52


53



THEMING


54

55



ready

56

FIXING HTML SIZE


57

Our huuuge Nav menu

58


59

60


HTML caching





61

REDIRECTS

very costly

62



63


64



65


66





67

TO SUSTAIN


68



69


70


71


72

Food for thought



instantclickio

73

THANK YOU



74


15




16



17


HARD

18


19



20

21

Frames

Waterfall


22

Problem with WPT



23


IS SEEING

24


25



record

26

27


28





REAL USERS


29

Resource Timing API



30


WINDOWONLOAD


31


32

33

34


35



36







37




to loadbull Images

38

CRITICAL REQUESTS


markup itself

39



40



41

42


FIXING IMAGES

43




44



45

46


50kb 380ms to load

FIXING CAROUSELS

47

48


49


Wrong way

50


Right way



IMAGE REUSE

51

52


53



THEMING


54

55



ready

56

FIXING HTML SIZE


57

Our huuuge Nav menu

58


59

60


HTML caching





61

REDIRECTS

very costly

62



63


64



65


66





67

TO SUSTAIN


68



69


70


71


72

Food for thought



instantclickio

73

THANK YOU



74



16



17


HARD

18


19



20

21

Frames

Waterfall


22

Problem with WPT



23


IS SEEING

24


25



record

26

27


28





REAL USERS


29

Resource Timing API



30


WINDOWONLOAD


31


32

33

34


35



36







37




to loadbull Images

38

CRITICAL REQUESTS


markup itself

39



40



41

42


FIXING IMAGES

43




44



45

46


50kb 380ms to load

FIXING CAROUSELS

47

48


49


Wrong way

50


Right way



IMAGE REUSE

51

52


53



THEMING


54

55



ready

56

FIXING HTML SIZE


57

Our huuuge Nav menu

58


59

60


HTML caching





61

REDIRECTS

very costly

62



63


64



65


66





67

TO SUSTAIN


68



69


70


71


72

Food for thought



instantclickio

73

THANK YOU



74



17


HARD

18


19



20

21

Frames

Waterfall


22

Problem with WPT



23


IS SEEING

24


25



record

26

27


28





REAL USERS


29

Resource Timing API



30


WINDOWONLOAD


31


32

33

34


35



36







37




to loadbull Images

38

CRITICAL REQUESTS


markup itself

39



40



41

42


FIXING IMAGES

43




44



45

46


50kb 380ms to load

FIXING CAROUSELS

47

48


49


Wrong way

50


Right way



IMAGE REUSE

51

52


53



THEMING


54

55



ready

56

FIXING HTML SIZE


57

Our huuuge Nav menu

58


59

60


HTML caching





61

REDIRECTS

very costly

62



63


64



65


66





67

TO SUSTAIN


68



69


70


71


72

Food for thought



instantclickio

73

THANK YOU



74


HARD

18


19



20

21

Frames

Waterfall


22

Problem with WPT



23


IS SEEING

24


25



record

26

27


28





REAL USERS


29

Resource Timing API



30


WINDOWONLOAD


31


32

33

34


35



36







37




to loadbull Images

38

CRITICAL REQUESTS


markup itself

39



40



41

42


FIXING IMAGES

43




44



45

46


50kb 380ms to load

FIXING CAROUSELS

47

48


49


Wrong way

50


Right way



IMAGE REUSE

51

52


53



THEMING


54

55



ready

56

FIXING HTML SIZE


57

Our huuuge Nav menu

58


59

60


HTML caching





61

REDIRECTS

very costly

62



63


64



65


66





67

TO SUSTAIN


68



69


70


71


72

Food for thought



instantclickio

73

THANK YOU



74


19



20

21

Frames

Waterfall


22

Problem with WPT



23


IS SEEING

24


25



record

26

27


28





REAL USERS


29

Resource Timing API



30


WINDOWONLOAD


31


32

33

34


35



36







37




to loadbull Images

38

CRITICAL REQUESTS


markup itself

39



40



41

42


FIXING IMAGES

43




44



45

46


50kb 380ms to load

FIXING CAROUSELS

47

48


49


Wrong way

50


Right way



IMAGE REUSE

51

52


53



THEMING


54

55



ready

56

FIXING HTML SIZE


57

Our huuuge Nav menu

58


59

60


HTML caching





61

REDIRECTS

very costly

62



63


64



65


66





67

TO SUSTAIN


68



69


70


71


72

Food for thought



instantclickio

73

THANK YOU



74



20

21

Frames

Waterfall


22

Problem with WPT



23


IS SEEING

24


25



record

26

27


28





REAL USERS


29

Resource Timing API



30


WINDOWONLOAD


31


32

33

34


35



36







37




to loadbull Images

38

CRITICAL REQUESTS


markup itself

39



40



41

42


FIXING IMAGES

43




44



45

46


50kb 380ms to load

FIXING CAROUSELS

47

48


49


Wrong way

50


Right way



IMAGE REUSE

51

52


53



THEMING


54

55



ready

56

FIXING HTML SIZE


57

Our huuuge Nav menu

58


59

60


HTML caching





61

REDIRECTS

very costly

62



63


64



65


66





67

TO SUSTAIN


68



69


70


71


72

Food for thought



instantclickio

73

THANK YOU



74

21

Frames

Waterfall


22

Problem with WPT



23


IS SEEING

24


25



record

26

27


28





REAL USERS


29

Resource Timing API



30


WINDOWONLOAD


31


32

33

34


35



36







37




to loadbull Images

38

CRITICAL REQUESTS


markup itself

39



40



41

42


FIXING IMAGES

43




44



45

46


50kb 380ms to load

FIXING CAROUSELS

47

48


49


Wrong way

50


Right way



IMAGE REUSE

51

52


53



THEMING


54

55



ready

56

FIXING HTML SIZE


57

Our huuuge Nav menu

58


59

60


HTML caching





61

REDIRECTS

very costly

62



63


64



65


66





67

TO SUSTAIN


68



69


70


71


72

Food for thought



instantclickio

73

THANK YOU



74


22

Problem with WPT



23


IS SEEING

24


25



record

26

27


28





REAL USERS


29

Resource Timing API



30


WINDOWONLOAD


31


32

33

34


35



36







37




to loadbull Images

38

CRITICAL REQUESTS


markup itself

39



40



41

42


FIXING IMAGES

43




44



45

46


50kb 380ms to load

FIXING CAROUSELS

47

48


49


Wrong way

50


Right way



IMAGE REUSE

51

52


53



THEMING


54

55



ready

56

FIXING HTML SIZE


57

Our huuuge Nav menu

58


59

60


HTML caching





61

REDIRECTS

very costly

62



63


64



65


66





67

TO SUSTAIN


68



69


70


71


72

Food for thought



instantclickio

73

THANK YOU



74

Problem with WPT



23


IS SEEING

24


25



record

26

27


28





REAL USERS


29

Resource Timing API



30


WINDOWONLOAD


31


32

33

34


35



36







37




to loadbull Images

38

CRITICAL REQUESTS


markup itself

39



40



41

42


FIXING IMAGES

43




44



45

46


50kb 380ms to load

FIXING CAROUSELS

47

48


49


Wrong way

50


Right way



IMAGE REUSE

51

52


53



THEMING


54

55



ready

56

FIXING HTML SIZE


57

Our huuuge Nav menu

58


59

60


HTML caching





61

REDIRECTS

very costly

62



63


64



65


66





67

TO SUSTAIN


68



69


70


71


72

Food for thought



instantclickio

73

THANK YOU



74


IS SEEING

24


25



record

26

27


28





REAL USERS


29

Resource Timing API



30


WINDOWONLOAD


31


32

33

34


35



36







37




to loadbull Images

38

CRITICAL REQUESTS


markup itself

39



40



41

42


FIXING IMAGES

43




44



45

46


50kb 380ms to load

FIXING CAROUSELS

47

48


49


Wrong way

50


Right way



IMAGE REUSE

51

52


53



THEMING


54

55



ready

56

FIXING HTML SIZE


57

Our huuuge Nav menu

58


59

60


HTML caching





61

REDIRECTS

very costly

62



63


64



65


66





67

TO SUSTAIN


68



69


70


71


72

Food for thought



instantclickio

73

THANK YOU



74


25



record

26

27


28





REAL USERS


29

Resource Timing API



30


WINDOWONLOAD


31


32

33

34


35



36







37




to loadbull Images

38

CRITICAL REQUESTS


markup itself

39



40



41

42


FIXING IMAGES

43




44



45

46


50kb 380ms to load

FIXING CAROUSELS

47

48


49


Wrong way

50


Right way



IMAGE REUSE

51

52


53



THEMING


54

55



ready

56

FIXING HTML SIZE


57

Our huuuge Nav menu

58


59

60


HTML caching





61

REDIRECTS

very costly

62



63


64



65


66





67

TO SUSTAIN


68



69


70


71


72

Food for thought



instantclickio

73

THANK YOU



74



record

26

27


28





REAL USERS


29

Resource Timing API



30


WINDOWONLOAD


31


32

33

34


35



36







37




to loadbull Images

38

CRITICAL REQUESTS


markup itself

39



40



41

42


FIXING IMAGES

43




44



45

46


50kb 380ms to load

FIXING CAROUSELS

47

48


49


Wrong way

50


Right way



IMAGE REUSE

51

52


53



THEMING


54

55



ready

56

FIXING HTML SIZE


57

Our huuuge Nav menu

58


59

60


HTML caching





61

REDIRECTS

very costly

62



63


64



65


66





67

TO SUSTAIN


68



69


70


71


72

Food for thought



instantclickio

73

THANK YOU



74

27


28





REAL USERS


29

Resource Timing API



30


WINDOWONLOAD


31


32

33

34


35



36







37




to loadbull Images

38

CRITICAL REQUESTS


markup itself

39



40



41

42


FIXING IMAGES

43




44



45

46


50kb 380ms to load

FIXING CAROUSELS

47

48


49


Wrong way

50


Right way



IMAGE REUSE

51

52


53



THEMING


54

55



ready

56

FIXING HTML SIZE


57

Our huuuge Nav menu

58


59

60


HTML caching





61

REDIRECTS

very costly

62



63


64



65


66





67

TO SUSTAIN


68



69


70


71


72

Food for thought



instantclickio

73

THANK YOU



74

28





REAL USERS


29

Resource Timing API



30


WINDOWONLOAD


31


32

33

34


35



36







37




to loadbull Images

38

CRITICAL REQUESTS


markup itself

39



40



41

42


FIXING IMAGES

43




44



45

46


50kb 380ms to load

FIXING CAROUSELS

47

48


49


Wrong way

50


Right way



IMAGE REUSE

51

52


53



THEMING


54

55



ready

56

FIXING HTML SIZE


57

Our huuuge Nav menu

58


59

60


HTML caching





61

REDIRECTS

very costly

62



63


64



65


66





67

TO SUSTAIN


68



69


70


71


72

Food for thought



instantclickio

73

THANK YOU



74


REAL USERS


29

Resource Timing API



30


WINDOWONLOAD


31


32

33

34


35



36







37




to loadbull Images

38

CRITICAL REQUESTS


markup itself

39



40



41

42


FIXING IMAGES

43




44



45

46


50kb 380ms to load

FIXING CAROUSELS

47

48


49


Wrong way

50


Right way



IMAGE REUSE

51

52


53



THEMING


54

55



ready

56

FIXING HTML SIZE


57

Our huuuge Nav menu

58


59

60


HTML caching





61

REDIRECTS

very costly

62



63


64



65


66





67

TO SUSTAIN


68



69


70


71


72

Food for thought



instantclickio

73

THANK YOU



74

Resource Timing API



30


WINDOWONLOAD


31


32

33

34


35



36







37




to loadbull Images

38

CRITICAL REQUESTS


markup itself

39



40



41

42


FIXING IMAGES

43




44



45

46


50kb 380ms to load

FIXING CAROUSELS

47

48


49


Wrong way

50


Right way



IMAGE REUSE

51

52


53



THEMING


54

55



ready

56

FIXING HTML SIZE


57

Our huuuge Nav menu

58


59

60


HTML caching





61

REDIRECTS

very costly

62



63


64



65


66





67

TO SUSTAIN


68



69


70


71


72

Food for thought



instantclickio

73

THANK YOU



74


WINDOWONLOAD


31


32

33

34


35



36







37




to loadbull Images

38

CRITICAL REQUESTS


markup itself

39



40



41

42


FIXING IMAGES

43




44



45

46


50kb 380ms to load

FIXING CAROUSELS

47

48


49


Wrong way

50


Right way



IMAGE REUSE

51

52


53



THEMING


54

55



ready

56

FIXING HTML SIZE


57

Our huuuge Nav menu

58


59

60


HTML caching





61

REDIRECTS

very costly

62



63


64



65


66





67

TO SUSTAIN


68



69


70


71


72

Food for thought



instantclickio

73

THANK YOU



74


32

33

34


35



36







37




to loadbull Images

38

CRITICAL REQUESTS


markup itself

39



40



41

42


FIXING IMAGES

43




44



45

46


50kb 380ms to load

FIXING CAROUSELS

47

48


49


Wrong way

50


Right way



IMAGE REUSE

51

52


53



THEMING


54

55



ready

56

FIXING HTML SIZE


57

Our huuuge Nav menu

58


59

60


HTML caching





61

REDIRECTS

very costly

62



63


64



65


66





67

TO SUSTAIN


68



69


70


71


72

Food for thought



instantclickio

73

THANK YOU



74

33

34


35



36







37




to loadbull Images

38

CRITICAL REQUESTS


markup itself

39



40



41

42


FIXING IMAGES

43




44



45

46


50kb 380ms to load

FIXING CAROUSELS

47

48


49


Wrong way

50


Right way



IMAGE REUSE

51

52


53



THEMING


54

55



ready

56

FIXING HTML SIZE


57

Our huuuge Nav menu

58


59

60


HTML caching





61

REDIRECTS

very costly

62



63


64



65


66





67

TO SUSTAIN


68



69


70


71


72

Food for thought



instantclickio

73

THANK YOU



74

34


35



36







37




to loadbull Images

38

CRITICAL REQUESTS


markup itself

39



40



41

42


FIXING IMAGES

43




44



45

46


50kb 380ms to load

FIXING CAROUSELS

47

48


49


Wrong way

50


Right way



IMAGE REUSE

51

52


53



THEMING


54

55



ready

56

FIXING HTML SIZE


57

Our huuuge Nav menu

58


59

60


HTML caching





61

REDIRECTS

very costly

62



63


64



65


66





67

TO SUSTAIN


68



69


70


71


72

Food for thought



instantclickio

73

THANK YOU



74

35



36







37




to loadbull Images

38

CRITICAL REQUESTS


markup itself

39



40



41

42


FIXING IMAGES

43




44



45

46


50kb 380ms to load

FIXING CAROUSELS

47

48


49


Wrong way

50


Right way



IMAGE REUSE

51

52


53



THEMING


54

55



ready

56

FIXING HTML SIZE


57

Our huuuge Nav menu

58


59

60


HTML caching





61

REDIRECTS

very costly

62



63


64



65


66





67

TO SUSTAIN


68



69


70


71


72

Food for thought



instantclickio

73

THANK YOU



74

36







37




to loadbull Images

38

CRITICAL REQUESTS


markup itself

39



40



41

42


FIXING IMAGES

43




44



45

46


50kb 380ms to load

FIXING CAROUSELS

47

48


49


Wrong way

50


Right way



IMAGE REUSE

51

52


53



THEMING


54

55



ready

56

FIXING HTML SIZE


57

Our huuuge Nav menu

58


59

60


HTML caching





61

REDIRECTS

very costly

62



63


64



65


66





67

TO SUSTAIN


68



69


70


71


72

Food for thought



instantclickio

73

THANK YOU



74





37




to loadbull Images

38

CRITICAL REQUESTS


markup itself

39



40



41

42


FIXING IMAGES

43




44



45

46


50kb 380ms to load

FIXING CAROUSELS

47

48


49


Wrong way

50


Right way



IMAGE REUSE

51

52


53



THEMING


54

55



ready

56

FIXING HTML SIZE


57

Our huuuge Nav menu

58


59

60


HTML caching





61

REDIRECTS

very costly

62



63


64



65


66





67

TO SUSTAIN


68



69


70


71


72

Food for thought



instantclickio

73

THANK YOU



74




to loadbull Images

38

CRITICAL REQUESTS


markup itself

39



40



41

42


FIXING IMAGES

43




44



45

46


50kb 380ms to load

FIXING CAROUSELS

47

48


49


Wrong way

50


Right way



IMAGE REUSE

51

52


53



THEMING


54

55



ready

56

FIXING HTML SIZE


57

Our huuuge Nav menu

58


59

60


HTML caching





61

REDIRECTS

very costly

62



63


64



65


66





67

TO SUSTAIN


68



69


70


71


72

Food for thought



instantclickio

73

THANK YOU



74

CRITICAL REQUESTS


markup itself

39



40



41

42


FIXING IMAGES

43




44



45

46


50kb 380ms to load

FIXING CAROUSELS

47

48


49


Wrong way

50


Right way



IMAGE REUSE

51

52


53



THEMING


54

55



ready

56

FIXING HTML SIZE


57

Our huuuge Nav menu

58


59

60


HTML caching





61

REDIRECTS

very costly

62



63


64



65


66





67

TO SUSTAIN


68



69


70


71


72

Food for thought



instantclickio

73

THANK YOU



74



40



41

42


FIXING IMAGES

43




44



45

46


50kb 380ms to load

FIXING CAROUSELS

47

48


49


Wrong way

50


Right way



IMAGE REUSE

51

52


53



THEMING


54

55



ready

56

FIXING HTML SIZE


57

Our huuuge Nav menu

58


59

60


HTML caching





61

REDIRECTS

very costly

62



63


64



65


66





67

TO SUSTAIN


68



69


70


71


72

Food for thought



instantclickio

73

THANK YOU



74



41

42


FIXING IMAGES

43




44



45

46


50kb 380ms to load

FIXING CAROUSELS

47

48


49


Wrong way

50


Right way



IMAGE REUSE

51

52


53



THEMING


54

55



ready

56

FIXING HTML SIZE


57

Our huuuge Nav menu

58


59

60


HTML caching





61

REDIRECTS

very costly

62



63


64



65


66





67

TO SUSTAIN


68



69


70


71


72

Food for thought



instantclickio

73

THANK YOU



74

42


FIXING IMAGES

43




44



45

46


50kb 380ms to load

FIXING CAROUSELS

47

48


49


Wrong way

50


Right way



IMAGE REUSE

51

52


53



THEMING


54

55



ready

56

FIXING HTML SIZE


57

Our huuuge Nav menu

58


59

60


HTML caching





61

REDIRECTS

very costly

62



63


64



65


66





67

TO SUSTAIN


68



69


70


71


72

Food for thought



instantclickio

73

THANK YOU



74

FIXING IMAGES

43




44



45

46


50kb 380ms to load

FIXING CAROUSELS

47

48


49


Wrong way

50


Right way



IMAGE REUSE

51

52


53



THEMING


54

55



ready

56

FIXING HTML SIZE


57

Our huuuge Nav menu

58


59

60


HTML caching





61

REDIRECTS

very costly

62



63


64



65


66





67

TO SUSTAIN


68



69


70


71


72

Food for thought



instantclickio

73

THANK YOU



74




44



45

46


50kb 380ms to load

FIXING CAROUSELS

47

48


49


Wrong way

50


Right way



IMAGE REUSE

51

52


53



THEMING


54

55



ready

56

FIXING HTML SIZE


57

Our huuuge Nav menu

58


59

60


HTML caching





61

REDIRECTS

very costly

62



63


64



65


66





67

TO SUSTAIN


68



69


70


71


72

Food for thought



instantclickio

73

THANK YOU



74



45

46


50kb 380ms to load

FIXING CAROUSELS

47

48


49


Wrong way

50


Right way



IMAGE REUSE

51

52


53



THEMING


54

55



ready

56

FIXING HTML SIZE


57

Our huuuge Nav menu

58


59

60


HTML caching





61

REDIRECTS

very costly

62



63


64



65


66





67

TO SUSTAIN


68



69


70


71


72

Food for thought



instantclickio

73

THANK YOU



74

46


50kb 380ms to load

FIXING CAROUSELS

47

48


49


Wrong way

50


Right way



IMAGE REUSE

51

52


53



THEMING


54

55



ready

56

FIXING HTML SIZE


57

Our huuuge Nav menu

58


59

60


HTML caching





61

REDIRECTS

very costly

62



63


64



65


66





67

TO SUSTAIN


68



69


70


71


72

Food for thought



instantclickio

73

THANK YOU



74

FIXING CAROUSELS

47

48


49


Wrong way

50


Right way



IMAGE REUSE

51

52


53



THEMING


54

55



ready

56

FIXING HTML SIZE


57

Our huuuge Nav menu

58


59

60


HTML caching





61

REDIRECTS

very costly

62



63


64



65


66





67

TO SUSTAIN


68



69


70


71


72

Food for thought



instantclickio

73

THANK YOU



74

48


49


Wrong way

50


Right way



IMAGE REUSE

51

52


53



THEMING


54

55



ready

56

FIXING HTML SIZE


57

Our huuuge Nav menu

58


59

60


HTML caching





61

REDIRECTS

very costly

62



63


64



65


66





67

TO SUSTAIN


68



69


70


71


72

Food for thought



instantclickio

73

THANK YOU



74

49


Wrong way

50


Right way



IMAGE REUSE

51

52


53



THEMING


54

55



ready

56

FIXING HTML SIZE


57

Our huuuge Nav menu

58


59

60


HTML caching





61

REDIRECTS

very costly

62



63


64



65


66





67

TO SUSTAIN


68



69


70


71


72

Food for thought



instantclickio

73

THANK YOU



74

50


Right way



IMAGE REUSE

51

52


53



THEMING


54

55



ready

56

FIXING HTML SIZE


57

Our huuuge Nav menu

58


59

60


HTML caching





61

REDIRECTS

very costly

62



63


64



65


66





67

TO SUSTAIN


68



69


70


71


72

Food for thought



instantclickio

73

THANK YOU



74

IMAGE REUSE

51

52


53



THEMING


54

55



ready

56

FIXING HTML SIZE


57

Our huuuge Nav menu

58


59

60


HTML caching





61

REDIRECTS

very costly

62



63


64



65


66





67

TO SUSTAIN


68



69


70


71


72

Food for thought



instantclickio

73

THANK YOU



74

52


53



THEMING


54

55



ready

56

FIXING HTML SIZE


57

Our huuuge Nav menu

58


59

60


HTML caching





61

REDIRECTS

very costly

62



63


64



65


66





67

TO SUSTAIN


68



69


70


71


72

Food for thought



instantclickio

73

THANK YOU



74

53



THEMING


54

55



ready

56

FIXING HTML SIZE


57

Our huuuge Nav menu

58


59

60


HTML caching





61

REDIRECTS

very costly

62



63


64



65


66





67

TO SUSTAIN


68



69


70


71


72

Food for thought



instantclickio

73

THANK YOU



74

THEMING


54

55



ready

56

FIXING HTML SIZE


57

Our huuuge Nav menu

58


59

60


HTML caching





61

REDIRECTS

very costly

62



63


64



65


66





67

TO SUSTAIN


68



69


70


71


72

Food for thought



instantclickio

73

THANK YOU



74

55



ready

56

FIXING HTML SIZE


57

Our huuuge Nav menu

58


59

60


HTML caching





61

REDIRECTS

very costly

62



63


64



65


66





67

TO SUSTAIN


68



69


70


71


72

Food for thought



instantclickio

73

THANK YOU



74



ready

56

FIXING HTML SIZE


57

Our huuuge Nav menu

58


59

60


HTML caching





61

REDIRECTS

very costly

62



63


64



65


66





67

TO SUSTAIN


68



69


70


71


72

Food for thought



instantclickio

73

THANK YOU



74

FIXING HTML SIZE


57

Our huuuge Nav menu

58


59

60


HTML caching





61

REDIRECTS

very costly

62



63


64



65


66





67

TO SUSTAIN


68



69


70


71


72

Food for thought



instantclickio

73

THANK YOU



74

Our huuuge Nav menu

58


59

60


HTML caching





61

REDIRECTS

very costly

62



63


64



65


66





67

TO SUSTAIN


68



69


70


71


72

Food for thought



instantclickio

73

THANK YOU



74


59

60


HTML caching





61

REDIRECTS

very costly

62



63


64



65


66





67

TO SUSTAIN


68



69


70


71


72

Food for thought



instantclickio

73

THANK YOU



74

60


HTML caching





61

REDIRECTS

very costly

62



63


64



65


66





67

TO SUSTAIN


68



69


70


71


72

Food for thought



instantclickio

73

THANK YOU



74

HTML caching





61

REDIRECTS

very costly

62



63


64



65


66





67

TO SUSTAIN


68



69


70


71


72

Food for thought



instantclickio

73

THANK YOU



74

REDIRECTS

very costly

62



63


64



65


66





67

TO SUSTAIN


68



69


70


71


72

Food for thought



instantclickio

73

THANK YOU



74



63


64



65


66





67

TO SUSTAIN


68



69


70


71


72

Food for thought



instantclickio

73

THANK YOU



74


64



65


66





67

TO SUSTAIN


68



69


70


71


72

Food for thought



instantclickio

73

THANK YOU



74



65


66





67

TO SUSTAIN


68



69


70


71


72

Food for thought



instantclickio

73

THANK YOU



74


66





67

TO SUSTAIN


68



69


70


71


72

Food for thought



instantclickio

73

THANK YOU



74





67

TO SUSTAIN


68



69


70


71


72

Food for thought



instantclickio

73

THANK YOU



74

TO SUSTAIN


68



69


70


71


72

Food for thought



instantclickio

73

THANK YOU



74



69


70


71


72

Food for thought



instantclickio

73

THANK YOU



74


70


71


72

Food for thought



instantclickio

73

THANK YOU



74


71


72

Food for thought



instantclickio

73

THANK YOU



74


72

Food for thought



instantclickio

73

THANK YOU



74

Food for thought



instantclickio

73

THANK YOU



74

THANK YOU



74

Meta Refresh 2014

Technology

Transcript of Meta Refresh 2014