Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
パフォーマンスを発揮するためのCSS
448jp | OKI Yoshiya
August 30, 2015
Programming
4
1.3k
パフォーマンスを発揮するためのCSS
Back to Basics CSS発表資料
448jp | OKI Yoshiya
August 30, 2015
Tweet
Share
More Decks by 448jp | OKI Yoshiya
See All by 448jp | OKI Yoshiya
零細Web制作会社のリモートワーク事情
448jp
0
98
エンジニアに120%意図を伝えるためのAdobe XDデザインテクニック
448jp
2
430
コーディングを神速化するJetBrains IDEのご紹介~基本機能からHTML/CSSまで~
448jp
0
92
Lottieで始めるWebアニメーション入門
448jp
1
240
Figmaが支えるVue Fes Japanのデザイン
448jp
3
4.5k
Vue Fes Japan 2018のデザインを支えたAdobe XD
448jp
2
1.4k
Dreamweaverで学ぶ、「いい感じ」にするための実践CSSテクニック
448jp
3
1.7k
君は極寒の大地を生き延びられるか
448jp
2
580
"いい感じ"にするためのイージング
448jp
1
1k
Other Decks in Programming
See All in Programming
[RailsConf 2022] The pitfalls of realtime-ification
palkan
0
220
Update from the Elixir team - 2022
whatyouhide
0
200
Reactでアプリケーションを構築する多様化
sakito
4
3.4k
The future of trust stores in Python
sethmlarson
0
180
Git Rebase
bkuhlmann
7
1k
Kotlin KSP - Intro
taehwandev
1
490
【Qiita Night】新卒エンジニアによるSwift6与太予想
eiji127
0
180
Kotlin 最新動向2022 #tfcon #techfeed
ntaro
1
1.1k
モデリングの費用対効果
masuda220
PRO
3
850
Quartoを使ってみませんか / quarto_get_started
s_uryu
2
320
About Type Syntax Proposal
quramy
1
1.2k
NieR Re[in]carnationにおけるUnityアニメーション活用術
applibot
1
600
Featured
See All Featured
jQuery: Nuts, Bolts and Bling
dougneiner
56
6.4k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
1
240
Gamification - CAS2011
davidbonilla
75
3.9k
4 Signs Your Business is Dying
shpigford
169
20k
Git: the NoSQL Database
bkeepers
PRO
415
59k
Building Adaptive Systems
keathley
25
1.1k
Product Roadmaps are Hard
iamctodd
34
6.1k
Web Components: a chance to create the future
zenorocha
303
40k
Testing 201, or: Great Expectations
jmmastey
21
5.4k
Build your cross-platform service in a week with App Engine
jlugia
219
17k
Building an army of robots
kneath
299
40k
Practical Orchestrator
shlominoach
178
8.6k
Transcript
パフォーマンスを 発揮するためのCSS 2015.8.30 (Sun) 沖 良矢(世路庵) Back to Basics CSS
@ DMM.comラボ
自己紹介 OKI Yoshiya • 世路庵(せろあん) • インタラクションデザイナー • フリーランス8年目 KAMABOKO
ROAD TO 1000 (2015) lynda.com 日本語版 トレーナー (2015) Web Designing 連載 (2009~2015)
話すこと 1. パフォーマンスとは 2. 改善の手法 3. なぜ必要なのか?
パフォーマンスとは What is performance ? 1.
パフォーマンスとは 読み込み 速度 実行速度 パフォー マンス 読み込み開始から 表示されるまでの 時間 機能や演出を実行
するときの時間 重さ
改善の手法 Improvement methods 2.
読み込み速度 HTTPリクエスト数の軽減 ファイルの結合/不要ファイル の削除 CSSスプライト サーバー/回線の増強
ファイルサイズの軽量化 ファイルの最適化/圧縮 gzip 演出による擬似的な軽量化 実行速度 FPSの安定化 描画負荷の軽減 GPUの利用 不要な要素の削除 演出の迅速化 改善例
Premature optimization is the root of all evil. (早まった最適化は諸悪の根 源である)
Donald Knuth 引用:Loadmaster CC 表示-継承 2.5 https://ja.wikipedia.org/wiki/%E3%83%89%E3% 83%8A%E3%83%AB%E3%83%89%E3%83%BB% E3%82%AF%E3%83%8C%E3%83%BC%E3%82% B9#/media/File:KnuthAtOpenContentAlliance.jpg
読み込み速度 HTTPリクエスト数の軽減 ファイルの結合/不要ファイル の削除 CSSスプライト サーバー/回線の増強
ファイルサイズの軽量化 ファイルの最適化/圧縮 gzip 演出による擬似的な軽量化 実行速度 FPSの安定化 描画負荷の軽減 GPUの利用 不要な要素の削除 演出の迅速化 改善例 自動化できるところは自動化!
レンダリングの流れ HTML (タグスープ) DOM レンダーツリー レイアウト (リフロー) ペイント CSS CSSOM
レンダーツリー 要素に変更が加わると、レイアウトまたはペイントから再実行される。
レイアウトに影響を及ぼすプロパティ width height padding margin
display border-width position top/right/left/bottom font-size float text-align overflow font-weight font-family line-height vertical-align clear white-space min-height など
ペイントに影響を及ぼすプロパティ color border-style visibility background
text-decoration background-image background-position background-repeat background-size outline outline-color outline-style outline-width border-radius box-shadow text-shadow など
動的な変更でもパフォーマンスの高いプロパティ opacity(透明度) transform translate(位置) scale(拡大率)
rotate(回転) GPUが利用されるため高速
その他、すぐできそうなこと ローディングなど使い終わった要素をdisplay: none 初期表示命の場合は「クリティカルCSS」もお勧め (自動化可能。詳しくはググってね)
なぜ必要なのか? Why we need for better performance ? 3.
読み込み時間が0.1秒遅くなる と、売上が1%低下する。 Amazon
速ければ速いほどいい? The faster is good ? 引用:Marcus Pink CC BY
2.0 https://www.flickr.com/photos/51775268@N00/5406005088/
2001 2015 amazon.co.jp
時代や状況によって、 求められるパフォーマンスは千差万別 By times and circumstances, required performance changes. 引用:alexkerhead
CC BY 2.0 https://www.flickr.com/photos/26354629@N02/2783514026/
パフォーマンス改善におけるポイント まず実装優先 必要に応じて明確なパフォーマンス目標を設定する FPS/ 時間/ ファイルサイズ/ 対象機種(特にモバイル) ツールで計測しながら最適化する その情報/機能はユーザーにとって本当に必要か
http://ceroan.jp/ 2015.8.30 (Sun)