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
510
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
340
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.8k
One Size Fits None
swwweet
12
860
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
株式会社バクタム 会社説明資料
bactum
0
270
街・都市という眼差し。まちづくりにおける規範と実践
sakamon
0
110
新しいデザインの難しさ(公開版) / Difficulties in the New Design (public ver.)
usagimaru
1
790
デフォルトの16:9(960*540px)のケース / Google Slide Size Test
arthur1
0
3.1k
Saudade typeface
tiagoporto
0
340
共通認識のためのユーザビリティテスト by AIエージェント - Accelerating Value Delivery
gakuoya
1
700
AIの実践とコミュニケーションデザインの意義 / AI practice and the significance of communication design
bebe
0
710
デザインから開発まで一貫したデザインシステムを構築するベストプラクティス / Best Practices for Building a Consistent Design System from Design to Development
lycorptech_jp
PRO
0
410
教育分野に強いUIデザイナー / 山口哲弘ポートフォリオ
t2yamaguchi429
0
610
AI時代に、僕たちデザイナーはどう歩むか
kazuhirokimura
0
330
Goodpatch Tour💙 / We are hiring!
goodpatch
31
870k
デザインの意思決定を加速するワークショップ設計 / Workshop design to accelerate design decision-making
lycorptech_jp
PRO
0
360
Featured
See All Featured
Building Applications with DynamoDB
mza
95
6.5k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Faster Mobile Websites
deanohume
308
31k
Stop Working from a Prison Cell
hatefulcrawdad
271
21k
A Tale of Four Properties
chriscoyier
160
23k
Visualizing Your Data: Incorporating Mongo into Loggly Infrastructure
mongodb
47
9.6k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
marcduiker
30
2.2k
[Rails World 2023 - Day 1 Closing Keynote] - The Magic of Rails
eileencodes
35
2.5k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Code Reviewing Like a Champion
maltzj
524
40k
Save Time (by Creating Custom Rails Generators)
garrettdimon
PRO
31
1.3k
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]