Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Design for loading
Search
Swwweet
June 20, 2014
Design
5
430
Design for loading
Presentation by @htmlboy and at WebVisions Barcelona, on June 2014.
Swwweet
June 20, 2014
Tweet
Share
More Decks by Swwweet
See All by Swwweet
Wonders from the Full Stack Fest website
swwweet
1
260
How to be the best web designer in the world.
swwweet
6
1.1k
Mobile First: as difficult as doing things right
swwweet
219
8.8k
One Size Fits None
swwweet
12
780
One Size Fits None - From the Front 2013
swwweet
2
630
Responsively Responsive
swwweet
23
1.5k
La letra con píxel entra
swwweet
0
1k
The future of code
swwweet
4
480
RWD: Dealing with navigation
swwweet
5
410
Other Decks in Design
See All in Design
Web 組版の課題とその解法
yamatoiizuka
0
150
デザイナー採用 3社目で学び中のこと / Learnings of Designer Recruitment | Yasuhiro Yokota
yasuhiroyokota
1
1.4k
メドレーという会社と デザインチームのひみつ/About Medley design team
medley
0
740
Sci-Fi: Descenso
elrtovar
0
200
企業やプロダクトにおける "らしさ"を分析する | UXリサーチャー/デザイナーはもっとAIを触って欲しいシリーズ
iflection
0
220
0→1でデザイナーは何とむきあうのか? / 0→1 Meetup 〜多様な0→1フェーズにおけるデザイナーの働き方〜 / Yasuhiro Yokota
yasuhiroyokota
1
350
エムスリー株式会社 デザイングループ紹介資料 / m3design-team-profile
m3designer
0
800
コラボレーションを小さくはじめ、大きく広める - 相互理解のためのデザイン&開発交流会, Friends of Figma Tokyo by Yasuhiro Yokota
yasuhiroyokota
2
1.5k
Chatwork プロダクトデザイン部 組織紹介(デザイナー向け)
chatwork_hr
1
520
Designing UIs without a UI designer
strongeron
0
240
Minuto de Aventura
olgastoryboard
0
110
私の困りごとと解決案 / My issues and proposed solutions
kubosho
1
190
Featured
See All Featured
4 Signs Your Business is Dying
shpigford
178
21k
Automating Front-end Workflow
addyosmani
1362
200k
RailsConf 2023
tenderlove
16
720
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
78
15k
YesSQL, Process and Tooling at Scale
rocio
166
14k
VelocityConf: Rendering Performance Case Studies
addyosmani
321
23k
Designing on Purpose - Digital PM Summit 2013
jponch
113
6.6k
GraphQLの誤解/rethinking-graphql
sonatard
59
9.6k
Testing 201, or: Great Expectations
jmmastey
33
6.9k
Fashionably flexible responsive web design (full day workshop)
malarkey
399
65k
The Brand Is Dead. Long Live the Brand.
mthomps
52
36k
Building an army of robots
kneath
301
42k
Transcript
DESIGN FOR LOADING Javier Usobiaga @htmlboy
None
@HTMLBOY Swwweet.com
How much time does a website need to be
loaded?
How much does it weigh?
THE PROBLEM
“We've remade the Internet in our image… Obese.” –
Jason Grigsby –
The average webpage was 1.46MB in June 2013.
Mostly images. Source: httparchive.org
The average webpage in June 2014 is 1.78MB.
Mostly images. Source: httparchive.org
None
milwaukeepolicenews.com 7MB
grolsch.com 25MB
moto.oakley.com 85MB
Just because we can, it doesn’t mean we should.
None
None
74% of mobile users won’t wait longer than 5 seconds
for a page to load. Source: bit.ly/5secondsmobile
20€/month for 1GB
85MB = 1.70€ 20€/month for 1GB
US roaming: 10€/MB
85MB = 850€ US roaming: 10€/MB
None
None
Consider performance as a design principle.
Set a performance budget.
“Don't make more than 20 http requests.”
“Make the page weigh less than 300KB.”
“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 –
How much time does a website need to be
loaded?
None
How much time does a van need to hit
the water when falling from a bridge?
None
INCEPTION TIME
INCEPTION TIME when milliseconds become hours (or never)
How much time does a website need to be
loaded?
How much time does a website need to look
loaded?
Perceived performance
DESIGN FOR LOADING: JS & NAVIGATION
Performance 101: JS belongs at the end of the HTML
“We don't have any non-JavaScript users… No, all your
users are non-JS while they're downloading your JS.” – Jake Archibald –
No JS = No navigation
JS folding = visual glitch
None
None
<div class=container> <header> <!- -Logo and headings- -> </header> <nav>
<!- -Navigation links- -> </nav> <section class=content> <!- -Err… content- -> </section> </div>
.container{display: table;} ! nav{display: table-footer-group;}
None
None
css-tricks.com/snippets/css/a-guide-to-flexbox
DESIGN FOR LOADING: WEB FONTS
FOUT Flash Of Unstyled Text
None
None
None
Consider not using web fonts for body copy.
Choose a fallback with a similar x height.
None
None
Use JS to control the inbetween stages.
github.com/typekit/webfontloader
.wf-loading .wf-active .wf-inactive .wf-<familyname>-<fvd>-loading .wf-<familyname>-<fvd>-active .wf-<familyname>-<fvd>-inactive
Add a timeout to trigger rendering of at least one
font.
WebFontConfig = { google: { families: ['Droid Sans'] }, timeout:
2000 };
Consider a lazy load on the first visit, and
display only cached webfonts.
DESIGN FOR LOADING: IMAGES
The average webpage in June 2014 is 1.78MB.
Mostly images.
Optimize images: ImageOptim JpegMini SVGO
addyosmani.com/blog/image-optimization-tools
Regular JPEG
Progressive JPEG
But… what happens before the image is downloaded?
FOLOI Flash Of Lack Of Images (duh)
No image = visual glitch
span.main-image{ display: block; min-height: 500px; background: #EEE; }
Min-height = no glitch
DESIGN FOR LOADING: GOING FURTHER
Conditionally load, or avoid: secondary assets third-party content iframes social
plugins
Consider plain links instead of social plugins/iframes.
https://twitter.com/intent/tweet? url=http://bit.ly/ ancientMistery&text=What+is+your+sound? &via=htmlboy Twitter:
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+:
Maybe inline critical CSS/JS?
None
None
WRAPPING UP
loading
Browsers won’t wait for every file to be loaded.
Accept that, and design also for loading.
THANKS! @htmlboy ·
[email protected]