Have fast, performant, and successful web pages is a great Challenge. There are many layers involved and all of them have to work together. In this talk I presented at FIBAlumni with collaboration of COEINF and the video recording is at http://media.fib.upc.edu/fibtv/streamingmedia/view/22/1400 (in Catalan). It shows how all parts are involved in the success of web pages from the server up to the human brain and perception. It introduces metrics and ways to effectively calculate and measure objectively the impact of the actions taken in the optimisation and also some ways to detect ways to optimise websites.

1. FASTER WEB PAGES
@drpicox

2. WHAT PEOPLE SAYS…
➤ Google: 2% slower = 2% less searching per user
➤ Yahoo: 400 milliseconds faster = 9% more traffic
➤ AOL: Faster pages = more page views
➤ Amazon: 100 milliseconds faster = 1% more revenue
➤ Aberdeen Group: 1 second slower = 11% fewer page views,
7% less conversion
➤ Google uses website speed in search ranking.

3. EXAMPLES
https://www.soasta.com/blog/mobile-web-performance-monitoring-conversion-rate/

4. EXAMPLES
https://www.soasta.com/blog/mobile-web-performance-monitoring-conversion-rate/

5. ROI CURVE
Performance
Painfully
slow
user quits
Bearable
user persists
Smooth
user delight
Smooth
ROI?
Success

6. ROI CURVE
Performance
Success
Smooth
user delight
Too slow
Diminishing ROI

7. MAKING FOCUS
Wetware
processor
Silicon
processor
Input
sensors:
Sound, Light
Touch, Smell
...

8. MAKING FOCUS
Wetware
processor
Silicon
processor
+ Perceived
Performance
User Experience

9. https://paulbakaus.com/tutorials/performance/the-illusion-of-motion/
WETWARE SPECS
24 FPS (~40 ms) Minimum stutter-free animation
60 FPS (~16 ms) Silky smooth experience
1+ ms jitter Audible sound discontinuity

10. WETWARE SPECS
Delay User reaction
0 - 100 ms Instant
100 - 300 ms Slight perceptible delay
300 - 1000 ms Task focus, perceptible delay
1000+ ms Mental context switch
10,000+ ms+ I'll come back later...
https://hpbn.co/primer-on-web-performance/#anatomy-of-a-modern-web-application

11. SLOW
https://www.youtube.com/watch?v=vOvQCPLkPt4&t=56

12. NOT SLOW
1000 ms50 ms16 ms100 ms

13. NOT SLOW 100 ms
Delay User reaction
0 - 100 ms Instant
100 - 300 ms Slight perceptible delay
Response

14. NOT SLOW 16 ms Animation

15. NOT SLOW Idle50 ms

16. NOT SLOW Load
(including mobile)
1000 ms

17. LETS DO
THE JOB

18. GLOBAL PICTURE
Server Internet Browser

19. SERVER
➤ Load Balancers
➤ Caches
➤ Application Servers
➤ Databases
➤ Queues
➤ …
➤ Should respond in 200 ms

20. INTERNET - SPEED OF LIGHT
You need CDNs

21. INTERNET - SPEED CONTROL
➤ Server is only allowed to send 4 segments (cwnd = 4),
once are acked, then it can double.

22. INTERNET - SPEED CONTROL
➤ First 11Kb are critical.
➤ 50Kb is almost 800 ms.

23. INTERNET - CONNECTION ANATOMY

24. INTERNET - BANDWIDTH VS LATENCY
➤ Bandwidth: How many data can we transfer at once.
(or, how big the pipe is)
➤ Latency: How much takes the first byte to travel.
(or, how long the pipe is)

25. INTERNET - BANDWIDTH VS LATENCY
index css, js, jpg ajax jpg
Baseline

26. INTERNET - BANDWIDTH VS LATENCY
index css, js, jpg ajax jpg
Infinite
Bandwidth
Baseline

27. INTERNET - BANDWIDTH VS LATENCY
index css, js, jpgajax jpg
Infinite
Bandwidth
Zero
Latency
Baseline

28. INTERNET - BANDWIDTH VS LATENCY

29. INTERNET - LAST MILE
https://hpbn.co/mobile-networks/

30. INTERNET - LAST MILE
https://hpbn.co/mobile-networks/

31. BROWSER
➤ Cache
➤ Max connections limit
➤ Resource priority
➤ CSS
➤ JS
➤ Pre-render
➤ Memory bounds
➤ User perception

32. BROWSER - CONNECTIONS LIMIT
http://www.browserscope.org/network/test

33. BROWSER - CONNECTIONS LIMIT

34. BROWSER - TYPICAL RECIPES
➤ Use always gzip
➤ Concatenate and minimise CSS and JS files
➤ Move CSS files top the top
➤ Move JS files to the bottom of the body

35. NOT SLOW Load
(including mobile)
1000 ms
Server: 200ms
Network: 800ms
Doing things: ???

36. “Lo que no puede ser,
no puede ser,
y además es imposible.
-Rafael Gómez Ortega "El Gallo"
What cannot be, cannot be, and besides is impossible.

37. LOAD
PERCEPTION

38. “Believe nothing.
Measure everything.
-David Rodenas

39. METRICS
➤ Load Time
➤ DOM Content Ready
➤ Finish

40. METRICS

41. METRICS

42. METRICS
➤ Load Time
➤ DOM Content Ready
➤ Finish

43. KEEP USER ENGAGED

44. CRITICAL PATH

45. METRICS
We need to see…

46. FILM STRIP
https://www.webpagetest.org/result/170502_7V_1H1Y/

47. FILM STRIP - FIRST MEANINGFUL PAINT
https://www.webpagetest.org/result/170502_7V_1H1Y/

48. VISUAL PROGRESS
https://www.webpagetest.org/result/170502_7V_1H1Y/

49. ALTERNATE FILMSTRIP

50. ALTERNATE PROGRESS

51. VISUAL PROGRESSES COMPARISON

52. VISUAL PROGRESSES COMPARISON - II

53. VISUAL PROGRESSES DIFFERENCE

54. VISUAL PROGRESSES COMPETITION

55. VISUAL PROGRESSES

56. VISUAL PROGRESSES

57. WEBPAGETEST.ORG

58. WEBPAGETEST.ORG
https://www.webpagetest.org/result/170504_96_K6K/

59. SPEED INDEX

60. SPEED INDEX

61. SPEED INDEX

62. SPEED INDEX
https://timkadlec.com/2014/01/fast-enough/#comment-1200946500

63. DIAGNOSIS
We need to understand…

64. WATERFALL
https://www.webpagetest.org/result/170504_NP_K6Y/1/details/#waterfall_view_step1

65. WATERFALL DISEASES
Slow
Backend

66. WATERFALL DISEASES
Blocking
Resource

67. WATERFALL DISEASES
Large
Resources

68. WATERFALL DISEASES
Slow
Initial
Paint

69. BONUS
CONTENT

70. “Believe nothing.
Measure everything.
-David Rodenas

71. “JAVASCRIPT MUST BE AT THE END OF THE BODY”

72. WEBPAGETEST.ORG
https://www.webpagetest.org/result/170504_NP_K6Y/

73. ACCELERATED MOBILE PAGES PROJECT
https://www.ampproject.org/

74. PROGRESSIVE WEB APPS
https://developers.google.com/web/progressive-web-apps/

75. ISOMORPHIC WEB
https://medium.com/airbnb-engineering/isomorphic-javascript-the-future-of-web-apps-10882b7a2ebc

76. RESOURCES
➤ Introducing RAIL: A User-Centric Model For Performance by Paul Irish & Paul Lewis
https://www.smashingmagazine.com/2015/10/rail-user-centric-model-performance/
➤ Delivering the goods by Paul Irish https://docs.google.com/presentation/d/
1MtDBNTH1g7CZzhwlJ1raEJagA8qM3uoV7ta6i66bO2M/present
➤ Measure Performance with the RAIL Model by Meggin Kearney https://
developers.google.com/web/fundamentals/performance/rail
➤ Performance on RAILs by Paul Lewis https://www.youtube.com/watch?
v=uJMA2n4RL6s
➤ Browser Rendering Optimization : Building 60 FPS Web Apps By Paul Lewis & Cameron
Pittman classroom.udacity.com/courses/ud860/lessons/4138328558/concepts/
41570785750923
➤ Chemin critique du rendu by Ilya Grigorik https://developers.google.com/web/
fundamentals/performance/critical-rendering-path
➤ Rendering Performance by Paul Lewis https://developers.google.com/web/
fundamentals/performance/rendering

77. YOUR TURN!