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
パフォーマンスを発揮するためのCSS
Search
448jp | OKI Yoshiya
August 30, 2015
Programming
4
1.6k
パフォーマンスを発揮するための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
書く・即・DONEな仕組みをNuxtで作る
448jp
0
260
神速でワイヤーフレームを作るためのライブラリ
448jp
1
750
Figmaで神速ドキュメント作成術
448jp
3
1.9k
今から始めるFigma超入門
448jp
0
1.4k
零細Web制作会社のリモートワーク事情
448jp
0
320
エンジニアに120%意図を伝えるためのAdobe XDデザインテクニック
448jp
2
650
コーディングを神速化するJetBrains IDEのご紹介~基本機能からHTML/CSSまで~
448jp
0
230
Lottieで始めるWebアニメーション入門
448jp
1
530
Figmaが支えるVue Fes Japanのデザイン
448jp
3
5.1k
Other Decks in Programming
See All in Programming
私のEbitengineの第一歩
qt_luigi
0
450
事業フェーズの変化に対応する 開発生産性向上のゼロイチ
masaygggg
0
190
はじめてみよう量子プログラミング
itokoichi01
0
110
Jakarta EE meets AI
ivargrimstad
1
450
Why Prism?
kddnewton
4
1.7k
Using Livebook to build and deploy internal tools @ ElixirConf 2024
hugobarauna
0
250
【TID2024】模擬講義:プログラマと一緒にゲームをデザインしてみよう!
akatsukigames_tech
0
620
Prolog入門
qnighy
4
1k
Crafting Cross-Platform Adventures: Building a Game Engine with Kotlin Multiplatform
dwursteisen
0
100
Rechartsで楽にゴリゴリにカスタマイズする!
10tera
1
170
Ruby Parser progress report 2024
yui_knk
2
230
Kotlin 2.0が与えるAndroid開発の進化
masayukisuda
1
370
Featured
See All Featured
Debugging Ruby Performance
tmm1
72
12k
Automating Front-end Workflow
addyosmani
1365
200k
The Straight Up "How To Draw Better" Workshop
denniskardys
230
130k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
663
120k
Build The Right Thing And Hit Your Dates
maggiecrowley
30
2.3k
The Brand Is Dead. Long Live the Brand.
mthomps
53
38k
Pencils Down: Stop Designing & Start Developing
hursman
119
11k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
41
6.5k
Why Our Code Smells
bkeepers
PRO
334
56k
What’s in a name? Adding method to the madness
productmarketing
PRO
21
3k
The Invisible Side of Design
smashingmag
295
50k
Learning to Love Humans: Emotional Interface Design
aarron
270
40k
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)