Reduce CSS,
Offload to the server,
Unblock Javascript,
Question everything.
Slide 64
Slide 64 text
Do I really need ___________ ?
Bootstrap
Slide 65
Slide 65 text
Do I really need ___________ ?
jQuery
Slide 66
Slide 66 text
Do I really need ___________ ?
Ember
Slide 67
Slide 67 text
Do I really need ___________ ?
Backbone
Slide 68
Slide 68 text
What’s the least amount needed
to paint above the fold?
The fold
Slide 69
Slide 69 text
The fold hides all slowness.
Slide 70
Slide 70 text
It’s the same image
Why not load an image once?
Slide 71
Slide 71 text
Is responsive design slower?
Slide 72
Slide 72 text
thepaintdrop.com ... 492kb
Slide 73
Slide 73 text
status.heroku.com ... 190kb
Slide 74
Slide 74 text
trello.com ... ~400kb
Slide 75
Slide 75 text
instragram ... ~600kb
Slide 76
Slide 76 text
These are first
load problems.
Slide 77
Slide 77 text
Delays cause user confusion
and cost us revenue.
Down with the spinners.
Slide 78
Slide 78 text
The Lobster Parable
Ladies and gentlemen: the story you are about to
hear is true. Only the names have been changed...
Slide 79
Slide 79 text
No content
Slide 80
Slide 80 text
Iowa
Slide 81
Slide 81 text
No content
Slide 82
Slide 82 text
No content
Slide 83
Slide 83 text
If there is a delay, animate or
provide feedback.
Slide 84
Slide 84 text
Let’s talk about the
client side.
Slide 85
Slide 85 text
Client side is slow on first load
1 second
Slide 86
Slide 86 text
If implemented poorly, can
be slow subsequently.
Slide 87
Slide 87 text
Turbolinks
Slide 88
Slide 88 text
Turbolinks noun
A ruby gem for speeding up
your internet pages
Slide 89
Slide 89 text
Javascript
+ pushState
= Turbo Boost
Also known as PJAX
Slide 90
Slide 90 text
How to use it
gem 'turbolinks'
Gemfile
//= require turbolinks
application.js
Slide 91
Slide 91 text
Use these as well...
page:fetch // Fires when starting to fetch page
page:receive // Fires when page received not parsed
page:change // Fires when page is parsed and changed
page:load // Fires when all done
Turbolinks Events
Slide 92
Slide 92 text
Built in cache
page:change // Fires when page is changed from cache
page:restore // Fires when all done
Turbolinks Cache Events
Turbolinks saves last 10 pages