These are the slides from my talk at Form, Function, Class in Manila, Philippines on November 8th, 2014. Building better and faster websites is about why we need to better understand who for and how we are building sites and what approaches can help us to create faster and better overall experiences that will eventually result in happier users.

1. Building Faster
(& Be!er) Sites
Holger Bartel | @foobartel | FFCPH 8/11/2014

2. Performance is a thing.

3. Slow is Bad!
Nobody likes to wait. Also not for your site to load.

4. Expectations
Users expect sites to load in ~2-3 seconds…

5. Expectations
Users expect sites to load in ~2-3 seconds…
That’s the definition of ‘fast’
We’re even aiming to deliver something in even less

6. Expectations
50% of people say they'll abandon a page that takes
longer than 4 seconds to load

7. Expectations
Depending on location and what the user is used to
this might be slightly longer
More than 6 seconds for sure is pushing it and people
will leave

8. Faster is Be!er!

9. Faster is Be!er!
Why?

10. The Real World
(and why you should care)

11. 40% of surveyed online shoppers will
abandon a page that takes more than 3
seconds to load.
— Akamai (2009)

12. Speeding up a fundraising site by 60%
increased donations by 14%.
— Kyle Rush, Obama Campaign (2012)

13. Adding half a second to a search results
page can decrease traffic and ad
revenues by 20 percent
— Google

14. Every additional 100 milliseconds of load time
decreased sales by 1 percent.
— Amazon

15. Global Network Speed

16. Global Broadband
Download: 21.3Mbps
Global Mobile:
Download: 10.9Mbps
http://www.netindex.com

17. Top 20 Countries Broadband Download 2012 - 2014
http://www.netindex.com

18. November 2014
Philippines
Download: 3.49Mbps (Mobile roughly the same)
Indonesia
Download: 5.27Mbps (Mobile 2.67Mbps)
USA
Download: 31.3Mbps (Mobile 13.33Mbps)
http://www.netindex.com

19. Too good to be true…?

20. 3G, Edge, GPRS
http://en.wikipedia.org/wiki/Intercity-Express#mediaviewer/File:SiemensVelaroD-InnoTrans2010.jpg

21. 3G, Edge, GPRS,
offline…

22. Faster is Be!er!

23. Progressive
Enhancement

24. Because before thinking about making your
site fast, we want to make sure it loads in the
first place.

25. (Responsive) Web Design
The idea of one web for everyone
is one of our main goals.
We just have to figure out how to best do it,
so eventually it will work well for everybody.

26. 2012 - 2014
http://httparchive.org/interesting.php

27. RWD Lessons
Working with the unknowns
(Try to) Make the best assumptions

28. Assumptions
We tried media queries & viewport sizes
But: You could be mobile on Wifi or with a laptop
tethering EDGE in the jungle
How do we find out what our users want
in their current environment?

29. Faster is Be!er!

30. Le!ing go…
Just like we did with pixel-perfect design, we have to
let go of the idea of the same experience for all
browsers and all users.

31. …to progress
Progressive Enhancement rather is about making
core functionality available to everyone.
Everything on top of that is the ‘enhancement’ part.

32. Every website is responsive from the start.
Everything else on top of it, is how we
brake the base feature.
http://en.wikipedia.org/wiki/Tightrope_walking
It’s easy!

35. It’s all here already.

36. Start simple and look at the bigger picture.
Give users a great experience in its simplest form.
Then progressively enhance to deliver be"er
experiences.

37. Performance is Design

38. Performance is Design
Design is Performance

39. Performance is Design
Design is Performance
Design directs Performance

40. “Performance is a compromise
between design and performance.
You can only be as fast as the
design allows.”
— Ian Feather

41. Breaking Silos
Collaboration & communication between designers
and developers nowadays is essential and more
important than ever before.

42. Get designs into the browser as soon as
possible, so you, your team and your client can
get a be"er feel for what it will be like in the
real world.

43. Ask yourself:
What's the gain?
What do you want to achieve?

44. A carousel with 7 images -
is it really worth the load
time or just pre"y to look
at?

45. Whereas it's questionable
if images 3-7 will be seen
in the first place.

46. “If images would be render
blocking we'd probably think
twice about them.”
— Jake Archibald

47. Performance Budgets
http://timkadlec.com/2013/01/setting-a-performance-budget/

48. Building for
Performance

49. Rendering Pages

50. Render-Tree Construction,
Layout & Paint
Waiting for DOM and CSSOM to build the render tree.
Render tree contains nodes to render the page.
Layout computes the exact position and size.
Paint turns the render tree into pixels on screen.

51. Render Blocking CSS
Waiting for CSS
Avoids “Flash of Unstyled Content” (FOUC)

52. Render Blocking JavaScript
The parser has to stop for scripts before continuing to parse
HTML.
JavaScript can query and modify DOM and CSSOM.
JavaScript blocks DOM construction unless explicitly
declared as async.

53. Loading JavaScript
Every request fetched inside of HEAD, will postpone
the rendering of the page

54. Limit HTTP Requests
Every request takes roughly ~200ms
Avoid unnecessary redirects

55. Critical Rendering
Path
Critical Resource
Critical Path Length
Critical Bytes

56. Optimising the Critical
Rendering
Path
Optimizing the dependency graph between HTML,
CSS, and JavaScript.
https://developers.google.com/web/fundamentals/

57. Optimising the Critical
Rendering
Path
=
Ge!ing stuff on the
screen fast

58. Navigation Timing API
domLoading: this is the starting timestamp of the entire
process - start parsing the first received bytes of the HTML
document
domContentLoaded: marks the point when both the DOM is
ready and there are no stylesheets that are blocking
JavaScript execution
loadEvent: as a final step in every page load the browser
fires an “onload” event

59. Without CSS & JS
https://developers.google.com/web/fundamentals/

60. With CSS & JS
https://developers.google.com/web/fundamentals/

61. To get stuff on the
screen fast…

62. Minimize the number of critical resources.
Minimize the number of critical bytes.
Minimize the critical path length.
A critical resource is a resource that can
block initial rendering of a page.

63. Analyze and characterize: number of
resources, bytes, length.
Minimize number of critical resources.
Optimize order of remaining critical resources
being loaded: download critical assets as
early as possible.
Optimize the number of critical bytes to
reduce the download time (number of
roundtrips).

70. The low hanging fruit
Put your JavaScript files at the bo"om
Optimize your images
Concatenate files
Minimize files
Far future expires headers for caching
Google Page Speed
YSlow

71. Perceived Performance
Fastclick
Polyfill to remove click delays on browsers with touch
UIs

72. Taming Framework
Overhead

73. Frameworks
B

74. Kill The Lazy Developer In
You
It’s so easy to choose a framework like Bootstrap &
plug in a li"le jQuery…

75. Don’t trade Performance
for a Framework
Do you really need all that stuff?
No?
Do something about it then!

76. CSS Spring Cleaning
CSS SPRING CLEANING

77. Just Like With Other
Stuff

78. Too Much Overhead:
15.689 CSS rules

79. Missedin-HKG.com
Built with Foundation 5 as an MVP
Uses jQuery, jQuery UI, Vanilla JS
& various Grunt tasks

82. Development
CSS File Size: 88Kb
JS File Size: 213Kb
Production
CSS File Size: 3.8Kb
JS File Size: 54.3Kb

83. Tools

84. Code Guide
Standards for developing flexible, durable, and
sustainable HTML and CSS.
http://mdo.github.io/code-guide/

85. Cross-Browser Testing
VirtualBox
Modern.ie
Browserstack.com
Sauce Labs

86. Device Testing
Adobe Edge Inspect
Ghostlab
BrowserSync!

87. 6 Weeks
=
428 Different Devices

88. http://opensignal.com/reports/2014/android-fragmentation/

89. Testing on Real Devices
opendevicelab.com
Photo: @viljamis http://devicelab.fi

90. Performance Testing
http://www.webpagetest.org

91. Performance Testing
http://tools.pingdom.com/fpt/
https://developers.google.com/speed/pagespeed/
https://developer.yahoo.com/yslow/

92. Chrome Dev Tools

93. Perf-Tooling Today
http://perf-tooling.today

94. With achieving fast page load time,
people can quickly use your site and
accomplish what they want.

95. People will appreciate it and end up
being happier users.

96. Happier users mean be!er
conversion rates.
Be!er conversion rates can be
increased revenue, more signups,
returning visits, or downloads.

97. So…
Faster is Be!er!

98. Thanks!
Holger Bartel | @foobartel | FFCPH 8/11/2014