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
Performance talk @wearearchitect
Search
Adam Onishi
October 10, 2013
Technology
0
79
Performance talk @wearearchitect
Quick performance talk for the Developer Dejeuner at Architect
Adam Onishi
October 10, 2013
Tweet
Share
More Decks by Adam Onishi
See All by Adam Onishi
Help! My client is a WebPerf meetup!
onishiweb
2
230
Help! My client is a WebPerf meetup!
onishiweb
0
330
Design Systems and Web Components
onishiweb
1
290
Planes, Trains, and CSS Components London CSS
onishiweb
1
150
Planes, Trains, and CSS Components
onishiweb
6
470
Best viewed with - Velocity Amsterdam 2015
onishiweb
3
3.1k
Trophy Winning Teams - Web Dev Conf 2015
onishiweb
0
230
Trophy Winning Teams - Drupal Con 2015
onishiweb
0
68
Best viewed with... SOTB5
onishiweb
1
180
Other Decks in Technology
See All in Technology
DBのスキルで生き残る技術 - AI時代におけるテーブル設計の勘所
soudai
PRO
54
21k
NewSQLや分散データベースを支えるRaftの仕組み - 仕組みを理解して知る得意不得意
hacomono
PRO
3
190
AI エージェントと考え直すデータ基盤
na0
17
5.7k
TableauLangchainとは何か?
cielo1985
1
120
60以上のプロダクトを持つ組織における開発者体験向上への取り組み - チームAPIとBackstageで構築する組織の可視化基盤 - / sre next 2025 Efforts to Improve Developer Experience in an Organization with Over 60 Products
vtryo
2
500
20250707-AI活用の個人差を埋めるチームづくり
shnjtk
6
4k
関数型プログラミングで 「脳がバグる」を乗り越える
manabeai
2
210
ABEMAの本番環境負荷試験への挑戦
mk2taiga
5
330
赤煉瓦倉庫勉強会「Databricksを選んだ理由と、絶賛真っ只中のデータ基盤移行体験記」
ivry_presentationmaterials
2
390
2025-07-06 QGIS初級ハンズオン「はじめてのQGIS」
kou_kita
0
180
United Airlines Customer Service– Call 1-833-341-3142 Now!
airhelp
0
170
Enhancing SaaS Product Reliability and Release Velocity through Optimized Testing Approach
ropqa
1
240
Featured
See All Featured
Art, The Web, and Tiny UX
lynnandtonic
299
21k
We Have a Design System, Now What?
morganepeng
53
7.7k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
8
700
Raft: Consensus for Rubyists
vanstee
140
7k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
29
9.6k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
60k
Site-Speed That Sticks
csswizardry
10
690
Code Reviewing Like a Champion
maltzj
524
40k
Why You Should Never Use an ORM
jnunemaker
PRO
58
9.4k
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
32
2.4k
Transcript
Performance ...For dummies?
*
Why Performance?
(2012) Speed
3G = 7.2Mb MAx!! Are you mobile?
4G = 8-12Mb Not consistently Are you mobile?
74% of mobile web users will leave a site if
it takes longer than 5 seconds to load. - Brad Frost Are you mobile?
What happened?
The Catalysts!
And this!
testing performance
Google Page Speed
Google Page Speed
Dev tools
Dev tools
Dev tools
Dev tools
Dev tools
Browsers
Render process
Parse Render process
Render process
“document.write()” that nasty bastard! - Patrick Hamann Are you mobile?
layout Render process
Render process
Paint Render process
Render process
https://vimeo.com/69385032 Jake archibald
Performance-y stuff
HTTP Requests CSS & JS Image compression HTTP Compression Browser
Caching Be aware of your assets Performance
Http requests
http requests
Make fewer requests... http requests
MAXIMISE Parallelisation http requests
Keep alive connection http requests
Prefetching <link rel="dns-prefetch" href="//bar.foo.com"> http requests
Resource prefetching http requests
Keep CSS on the same domain http requests
CSS & JS
CSS at the top... JS at the bottom! CSS &
JS
Harry’s rules... (@csswizardry) CSS & JS
The controversial bit... CSS & JS
CSS and the critical path... CSS & JS
Inline your critical CSS CSS & JS
CSS & JS
CSS & JS
Optimise images
ImageOptim & JPEGmini Optimising images
Spriting Optimising images
HTTP Compression
HTML5 Boilerplate compression
Browser caching
The fastest HTTP request is the one not made -
Someone? browser caching
HTML5 Boilerplate browser caching
be aware of your assets
assets
last points...
Tools!!
tools tools
https://developers.google.com/events/io/sessions/325206725 tools
grunt tools
Concatenation Compression Image Optimisation and more... tools
Compass tools
Final points...
Performance should be taken into account from day one! bored
now?
Get developers involved early in the process bored now?
That’s all folks!