Link
Embed
Share
Beginning
This slide
Copy link URL
Copy link URL
Copy iframe embed code
Copy iframe embed code
Copy javascript embed code
Copy javascript embed code
Share
Tweet
Share
Tweet
Slide 1
Slide 1 text
DESIGN FOR LOADING Javier Usobiaga @htmlboy
Slide 2
Slide 2 text
No content
Slide 3
Slide 3 text
@HTMLBOY Swwweet.com
Slide 4
Slide 4 text
How much time does a website need to be loaded?
Slide 5
Slide 5 text
How much does it weigh?
Slide 6
Slide 6 text
THE PROBLEM
Slide 7
Slide 7 text
“We've remade the Internet in our image… Obese.” – Jason Grigsby –
Slide 8
Slide 8 text
The average webpage was 1.46MB in June 2013. Mostly images. Source: httparchive.org
Slide 9
Slide 9 text
The average webpage in June 2014 is 1.78MB. Mostly images. Source: httparchive.org
Slide 10
Slide 10 text
No content
Slide 11
Slide 11 text
milwaukeepolicenews.com 7MB
Slide 12
Slide 12 text
grolsch.com 25MB
Slide 13
Slide 13 text
moto.oakley.com 85MB
Slide 14
Slide 14 text
Just because we can, it doesn’t mean we should.
Slide 15
Slide 15 text
No content
Slide 16
Slide 16 text
No content
Slide 17
Slide 17 text
74% of mobile users won’t wait longer than 5 seconds for a page to load. Source: bit.ly/5secondsmobile
Slide 18
Slide 18 text
20€/month for 1GB
Slide 19
Slide 19 text
85MB = 1.70€ 20€/month for 1GB
Slide 20
Slide 20 text
US roaming: 10€/MB
Slide 21
Slide 21 text
85MB = 850€ US roaming: 10€/MB
Slide 22
Slide 22 text
No content
Slide 23
Slide 23 text
No content
Slide 24
Slide 24 text
Consider performance as a design principle.
Slide 25
Slide 25 text
Set a performance budget.
Slide 26
Slide 26 text
“Don't make more than 20 http requests.”
Slide 27
Slide 27 text
“Make the page weigh less than 300KB.”
Slide 28
Slide 28 text
“1. Optimize an existing feature or asset. 2. Remove an existing feature or asset. 3. Don’t add the new feature or asset.” – Steve Souders –
Slide 29
Slide 29 text
How much time does a website need to be loaded?
Slide 30
Slide 30 text
No content
Slide 31
Slide 31 text
How much time does a van need to hit the water when falling from a bridge?
Slide 32
Slide 32 text
No content
Slide 33
Slide 33 text
INCEPTION TIME
Slide 34
Slide 34 text
INCEPTION TIME when milliseconds become hours (or never)
Slide 35
Slide 35 text
How much time does a website need to be loaded?
Slide 36
Slide 36 text
How much time does a website need to look loaded?
Slide 37
Slide 37 text
Perceived performance
Slide 38
Slide 38 text
DESIGN FOR LOADING: JS & NAVIGATION
Slide 39
Slide 39 text
Performance 101: JS belongs at the end of the HTML
Slide 40
Slide 40 text
“We don't have any non-JavaScript users… No, all your users are non-JS while they're downloading your JS.” – Jake Archibald –
Slide 41
Slide 41 text
No JS = No navigation
Slide 42
Slide 42 text
JS folding = visual glitch
Slide 43
Slide 43 text
No content
Slide 44
Slide 44 text
No content
Slide 45
Slide 45 text
Slide 46
Slide 46 text
.container{display: table;} ! nav{display: table-footer-group;}
Slide 47
Slide 47 text
No content
Slide 48
Slide 48 text
No content
Slide 49
Slide 49 text
css-tricks.com/snippets/css/a-guide-to-flexbox
Slide 50
Slide 50 text
DESIGN FOR LOADING: WEB FONTS
Slide 51
Slide 51 text
FOUT Flash Of Unstyled Text
Slide 52
Slide 52 text
No content
Slide 53
Slide 53 text
No content
Slide 54
Slide 54 text
No content
Slide 55
Slide 55 text
Consider not using web fonts for body copy.
Slide 56
Slide 56 text
Choose a fallback with a similar x height.
Slide 57
Slide 57 text
No content
Slide 58
Slide 58 text
No content
Slide 59
Slide 59 text
Use JS to control the inbetween stages.
Slide 60
Slide 60 text
github.com/typekit/webfontloader
Slide 61
Slide 61 text
.wf-loading .wf-active .wf-inactive .wf---loading .wf---active .wf---inactive
Slide 62
Slide 62 text
Add a timeout to trigger rendering of at least one font.
Slide 63
Slide 63 text
WebFontConfig = { google: { families: ['Droid Sans'] }, timeout: 2000 };
Slide 64
Slide 64 text
Consider a lazy load on the first visit, and display only cached webfonts.
Slide 65
Slide 65 text
DESIGN FOR LOADING: IMAGES
Slide 66
Slide 66 text
The average webpage in June 2014 is 1.78MB. Mostly images.
Slide 67
Slide 67 text
Optimize images: ImageOptim JpegMini SVGO
Slide 68
Slide 68 text
addyosmani.com/blog/image-optimization-tools
Slide 69
Slide 69 text
Regular JPEG
Slide 70
Slide 70 text
Progressive JPEG
Slide 71
Slide 71 text
But… what happens before the image is downloaded?
Slide 72
Slide 72 text
FOLOI Flash Of Lack Of Images (duh)
Slide 73
Slide 73 text
No image = visual glitch
Slide 74
Slide 74 text
span.main-image{ display: block; min-height: 500px; background: #EEE; }
Slide 75
Slide 75 text
Min-height = no glitch
Slide 76
Slide 76 text
DESIGN FOR LOADING: GOING FURTHER
Slide 77
Slide 77 text
Conditionally load, or avoid: secondary assets third-party content iframes social plugins
Slide 78
Slide 78 text
Consider plain links instead of social plugins/iframes.
Slide 79
Slide 79 text
https://twitter.com/intent/tweet? url=http://bit.ly/ ancientMistery&text=What+is+your+sound? &via=htmlboy Twitter:
Slide 80
Slide 80 text
http://www.facebook.com/sharer.php? u=http://bit.ly/ancientMistery&t=What+is +your+sound? Facebook: https://plus.google.com/share? url=http://bit.ly/ancientMistery Google+:
Slide 81
Slide 81 text
Maybe inline critical CSS/JS?
Slide 82
Slide 82 text
No content
Slide 83
Slide 83 text
No content
Slide 84
Slide 84 text
WRAPPING UP
Slide 85
Slide 85 text
loading
Slide 86
Slide 86 text
Browsers won’t wait for every file to be loaded.
Slide 87
Slide 87 text
Accept that, and design also for loading.
Slide 88
Slide 88 text
THANKS! @htmlboy ·
[email protected]