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
500
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
330
How to be the best web designer in the world.
swwweet
6
1.2k
Mobile First: as difficult as doing things right
swwweet
223
9.7k
One Size Fits None
swwweet
12
850
One Size Fits None - From the Front 2013
swwweet
2
710
Responsively Responsive
swwweet
23
1.6k
La letra con píxel entra
swwweet
0
1.1k
The future of code
swwweet
4
580
RWD: Dealing with navigation
swwweet
5
500
Other Decks in Design
See All in Design
無自覚なランクとその影響を紐解くワークショップ / Unpacking Unconscious Privilege Workshop
spring_aki
4
290
教育分野に強いUIデザイナー / 山口哲弘ポートフォリオ
t2yamaguchi429
0
410
ポートフォリオ_藤田歩希(ほまれ)
akifujita_homarecreate
0
600
Мышление дизайнера историями. Как текстовые модели человеческого поведения помогают проектировать
ashapiro
0
270
デフォルトの16:9(960*540px)のケース / Google Slide Size Test
arthur1
0
2.9k
株式会社バクタム 会社説明資料
bactum
0
240
CIRCULAR ECONOMY + SERVICES
jmanooch
0
110
なぜプレイドにデザインエンジニアが必要だったのか?
t32k
0
510
Light My Fire/ハートに火をつけるコミュニティ
kgsi
1
130
Hybrid NW Infra Design Review: Classic Pattern including Outposts & Route 53 Profile
ichichi
2
670
生成AIを活用した組み込みSW設計書検索システム開発
licux
7
1.1k
事例で学ぶ!今日から使えるWebサービスUI改善ポイント
ncdc
0
160
Featured
See All Featured
Statistics for Hackers
jakevdp
799
220k
Large-scale JavaScript Application Architecture
addyosmani
512
110k
It's Worth the Effort
3n
185
28k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
281
13k
Testing 201, or: Great Expectations
jmmastey
42
7.6k
RailsConf 2023
tenderlove
30
1.1k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
The Pragmatic Product Professional
lauravandoore
35
6.7k
Done Done
chrislema
184
16k
VelocityConf: Rendering Performance Case Studies
addyosmani
331
24k
Optimizing for Happiness
mojombo
379
70k
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]