Site performance is really about rendering. When, where and how fast your web page or application renders is critical. These provide insights into the member experience. After all, that's the goal - provide a great member experience. Using Webpagetest with help from Chrome's DevTools Timeline, we'll use visualization progression charts and explore this aspect of site performance.

2. TheShapeofSpeed
By Oliver Tse
January 6, 2016

3. WhoAmI?
OliverTse
WebDeveloper

4. MainObjective

5. Seriously…

6. Broader,whenyouwalkout…grok
● “Render first. JavaScript second.”
● Reduce render time and create a better experience.
● When, what and how much you render is very important

7. Whatwe’lltalkabout
1. All rendering
2. Chart parts
3. Flat
4. Cache is king
5. JavaScript
6. Fix-a-flat
7. Comparing

8. 1
Allrendering

11. Performanceishowmuch,howfastandwhenapagerenders

12. Itbeganwithaman
namedPat

13. 2008
PatrickMeenan(andAOL)giveusWebpagetest

18. Webpagetestinfo/parameters
● Synthetic testing
● Only looks at above-the-fold
● Private instance of webpagetest.org
● 5 “first time” runs
● Chrome ( latest )
● Cable 5/1 mbps 28ms RTT

19. 2
Chartparts

20. Yahoo!

21. Plateaus
Valleys
Cliffs
Hills

23. Plateaus

24. flatareas

25. Theyoccurbecauseofactivitiesinthemainthread and
assetsdownloading

26. norenderingchangesoccursatplateaus
important...

28. Valleys

29. dips

30. Whatwasthereisvisuallynomore

31. Nowyouseeit

32. Nowyoudon’t!

33. whatyoujustsawwasreflow*
*
Bad

34. Cliffs

35. steep.Tall.

36. Followsaplateau.
fastrender

38. Hills

39. Progressiverendering

40. Smallpartialrenderings
images,contentanimatingin

42. Togoandfeelfast
Avoidvalleys,longplateaus.

43. 3
Flat

44. “Plateausoccurbecauseof activitiesinthemainthread and
assetsdownloading”

47. Beforefirstrender,Jobsgetsassets...
● 1 HTML
● 2 images
● 2 stylesheets
● 12 JavaScript files

50. Whataboutthemainthread?

53. Firstplateauisaboutdownloading

54. Subsequentplateau

61. ForJobs,it’sJavaScript

64. Butsubsequentplateausaren’talwaysaboutJavaScript

70. Here,imagesimpactplateau

73. 4.
Cacheisking

77. Cachedpageisalwaysfaster
forfirstrender

78. Fewerrequests
Shorterfirstplateau

79. ForJobsandtheEngineeringBlog,
80%and68%fewerrequests

80. 5.
JavaScript

89. WhenyouhaveJavaScriptdependencies,
cachingwon’tshortenthesecondplateau

90. So,whatdowedo?

91. “Timeslicedrendering”
-GarrisShipon

92. Groupblocksofworkintosmallchunksoftime

93. ● OptimisticUIPattern
● Google’sRAIL’s“Idle”

94. “Whenevertheusertakesanaction,youneedtofirstupdate
yourUItomakethingslookfast,thensendarequesttothe
servertodothatmodificationontherealdatabase.”
-OptimisticUIPattern

95. Google’sRAIL

96. “Completethatworkin50ms”orless
-GoogleRAIL

97. Benefits
● Responsive UI
● Progressive rendering

99. “Renderfirst. JavaScriptsecond.”
-SteveSouders

100. 6.
Fix-a-flat

101. PYMK

106. Homepage

110. Stuffthat’llgethills
● Animations
● Deferred images
● Progressive images
● Time-sliced rendering

111. Comparing

112. browsers

114. versions

116. internationals

118. Thankyou!

119. Questions?
otse@linkedin.com

120. References
RAIL
http://www.smashingmagazine.com/2015/10/rail-user-centric-model-performance/
Optimistic UI
http://info.meteor.com/blog/optimistic-ui-with-meteor-latency-compensation