Slide 1
Slide 1 text
No content
Slide 2
Slide 2 text
FASTER
RESPONSIVE
WEBSITES
Slide 3
Slide 3 text
This talk is not about
How to build a rocket-ship
with Javascript
Slide 4
Slide 4 text
This talk is about
Techniques to make our
websites faster
Slide 5
Slide 5 text
THE PROBLEM
Slide 6
Slide 6 text
“75% of mobile users
will leave the site if it
takes more than 5
seconds to load.
http://www.digitalmall.us/1150/smartphone-users-frustrated-with-mobile-web-experience/
Slide 7
Slide 7 text
No content
Slide 8
Slide 8 text
“Today the average
website is 1.7MB
httparchive.org/interesting.php
Slide 9
Slide 9 text
http://httparchive.org/interesting.php?a=All&l=Oct%201%202013&s=Top1000
AVG. SITE
0
1
2
<1mb
2011
1.5mb
2013
2mb
2015
AVG. SITE
0
1
2
AVG. SITE
0
1
2
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
No content
Slide 12
Slide 12 text
“87% of mobile users
expect sites to load
at least as fast, or
faster than on their
desktop.
http://www.strangeloopnetworks.com/web-performance-infographics/
Slide 13
Slide 13 text
No content
Slide 14
Slide 14 text
No content
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
LET’S START WITH A
PAGE BUDGET
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
Example:
Less than 3 seconds
to see something.
Slide 19
Slide 19 text
Example:
Not bigger than 1MB.
Slide 20
Slide 20 text
Example:
No more than 20 requests.
Slide 21
Slide 21 text
Now try to stick to it.
(good luck!)
Slide 22
Slide 22 text
USING ONLINE TOOLS SUCH AS
WEBPAGETEST.ORG
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
No content
Slide 25
Slide 25 text
Coffee image
Slide 26
Slide 26 text
No content
Slide 27
Slide 27 text
– Paul Lewis
“The Speed Index is the
average time at which
visible parts of the page
are displayed.
http://aerotwist.com/blog/my-performance-audit-workflow/
Slide 28
Slide 28 text
– Paul Lewis
“Paul Irish has, in the
past, recommended a goal
of less than 1,000.
http://aerotwist.com/blog/my-performance-audit-workflow/
Slide 29
Slide 29 text
Filmstrip
Slide 30
Slide 30 text
OLD-SCHOOL IS STILL COOL
PROGRESSIVE ENHANCEMENT
Slide 31
Slide 31 text
No content
Slide 32
Slide 32 text
– Jake Archibald
“All your users are non-JS
while they're downloading
your JS.
https://twitter.com/jaffathecake/status/207096228339658752
Slide 33
Slide 33 text
Twitter.com dropped initial
page load to 1/5th
by moving rendering to server.
https://blog.twitter.com/2012/improving-performance-twittercom
Slide 34
Slide 34 text
Airbnb experimented serving
real HTML instead of JS and
it felt 5x quicker.
http://nerds.airbnb.com/weve-launched-our-first-nodejs-app-to-product/
Slide 35
Slide 35 text
No content
Slide 36
Slide 36 text
http://www.flickr.com/photos/not-so-much/2819702177/
Slide 37
Slide 37 text
TV
FRIDGE CAR
Slide 38
Slide 38 text
MOBILE-LAST
Slide 39
Slide 39 text
Breakpoints are
enhancements
Slide 40
Slide 40 text
MOBILE-FIRST
Slide 41
Slide 41 text
DELAY LOAD OF
SECONDARY CONTENT
Slide 42
Slide 42 text
Core content
Secondary
Secondary
Slide 43
Slide 43 text
Core content
Secondary
Secondary
Slide 44
Slide 44 text
Core content
Secondary
Secondary
Slide 45
Slide 45 text
var deferred = $.get("/partial");
!
deferred.done(function (html) {
$wrapper.html(html);
});
Slide 46
Slide 46 text
Real life example:
Press Jack - article
nav / next article
Slide 47
Slide 47 text
Lazy load
images
Slide 48
Slide 48 text
No content
Slide 49
Slide 49 text
https://github.com/
sakabako/scrollMonitor
Slide 50
Slide 50 text
var watcher = scrollMonitor.create(context, offset);
!
watcher.enterViewport(loadImages);
Slide 51
Slide 51 text
Slide 52
Slide 52 text
Slide 53
Slide 53 text
OPTIMISING
RESPONSIVE IMAGES
Slide 54
Slide 54 text
Biggest performance hit
69% of mobile web traffic
Slide 55
Slide 55 text
Serve images in the
correct sizes. Please.
Slide 56
Slide 56 text
CSS background images
Slide 57
Slide 57 text
.thing {
background-image: url('images/small.png');
}
!
@media (min-width: 30em) {
.thing {
background-image: url('images/medium.png');
}
}
Slide 58
Slide 58 text
Note:
Not for content images
Slide 59
Slide 59 text
Proposed
spec
Slide 60
Slide 60 text
Slide 61
Slide 61 text
http://ericportis.com/posts/2014/srcset-sizes/
Slide 62
Slide 62 text
Available images and their width
Breakpoints in CSS and image width relative to the viewport
Slide 63
Slide 63 text
http://responsiveimages.org
Slide 64
Slide 64 text
No content
Slide 65
Slide 65 text
https://github.com/
scottjehl/picturefill
Version 2.0
Slide 66
Slide 66 text
front-end & back-end
Javascript
Slide 67
Slide 67 text
Slide 68
Slide 68 text
var imageWidth = image.offsetWidth * window.devicePixelRatio;
!
var src = “http://hej.se/image.jpg?w=“ + imageWidth;
!
image.setAttribute("src", src);
Slide 69
Slide 69 text
Check browser for size and capabilities
Slide 70
Slide 70 text
Check browser for size and capabilities
Request CDN
Slide 71
Slide 71 text
Do we have this image?
Check browser for size and capabilities
Request CDN
Slide 72
Slide 72 text
Return the image
Do we have this image?
Check browser for size and capabilities
Request CDN
Slide 73
Slide 73 text
Prepare the image
Return the image
Do we have this image?
Check browser for size and capabilities
Request CDN
Slide 74
Slide 74 text
Prepare the image
Return the image
Return the image
Do we have this image?
Check browser for size and capabilities
Request CDN
Slide 75
Slide 75 text
No content
Slide 76
Slide 76 text
THE AWESOMENESS OF
SCALE VECTOR GRAPHICS
Slide 77
Slide 77 text
No content
Slide 78
Slide 78 text
SVG
4KB
uncompressed
PNG
10KB
uncompressed
Slide 79
Slide 79 text
And it’s only
markup text
Slide 80
Slide 80 text
Summary
!
!
!
!
!
Slide 81
Slide 81 text
Summary
Be aware. Set a "budget".
!
!
!
Slide 82
Slide 82 text
Summary
Be aware. Set a "budget".
Progressive Enhancement is still cool.
!
!
!
!
Slide 83
Slide 83 text
Summary
Be aware. Set a "budget".
Progressive Enhancement is still cool.
Prioritise loading of content with JS.
!
!
!
!
Slide 84
Slide 84 text
Summary
Be aware. Set a "budget".
Progressive Enhancement is still cool.
Prioritise loading of content with JS.
Images are the biggest hit.
!
!
!
Slide 85
Slide 85 text
Summary
Be aware. Set a "budget".
Progressive Enhancement is still cool
Prioritise loading of content with JS.
Images are the biggest hit.
SVGs are awesome.
!
!
Slide 86
Slide 86 text
Summary
Be aware. Set a "budget".
Progressive Enhancement is still cool
Prioritise loading of content with JS.
Images are the biggest hit.
SVGs are awesome.
!
!
Slide 87
Slide 87 text
Think and prioritise
performance
from day one.
Slide 88
Slide 88 text
“Measure. Treat performance
as a core part of your site’s
quality and don’t ship without
understanding and accepting
it’s performance.
http://www.guypo.com/mobile/performance-implications-of-responsive-design-book-contribution/
Slide 89
Slide 89 text
There are techniques
Slide 90
Slide 90 text
We need to care more
Slide 91
Slide 91 text
No content
Slide 92
Slide 92 text
Takk
!
!
http://twitter.com/14islands
!
http://facebook.com/14islands