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.
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
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.
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?
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!
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.
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.
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
56. Optimising the Critical
Rendering
Path
Optimizing the dependency graph between HTML,
CSS, and JavaScript.
https://developers.google.com/web/fundamentals/
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/
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).
64.
65.
66.
67.
68.
69.
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