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
240
神速でワイヤーフレームを作るためのライブラリ
448jp
1
710
Figmaで神速ドキュメント作成術
448jp
3
1.7k
今から始めるFigma超入門
448jp
0
1.4k
零細Web制作会社のリモートワーク事情
448jp
0
310
エンジニアに120%意図を伝えるためのAdobe XDデザインテクニック
448jp
2
630
コーディングを神速化するJetBrains IDEのご紹介~基本機能からHTML/CSSまで~
448jp
0
220
Lottieで始めるWebアニメーション入門
448jp
1
500
Figmaが支えるVue Fes Japanのデザイン
448jp
3
5.1k
Other Decks in Programming
See All in Programming
Rubyのパフォーマンスプロファイリングの改善 / Enhancing performance profiling for Ruby
osyoyu
1
410
3 Effective Rules for Success with Signals in Angular
manfredsteyer
PRO
0
120
iOSアプリでクリップボードにコピーしたことをユーザーに伝えるちょうど良いフィードバックを探す
ski
0
100
みんなのオブザーバビリティプラットフォームを作ってるんだがパフォーマンスがやばい #mackerelio #srenext
ne_sachirou
0
370
TiDB Serverless ~理想のServerless DBを考える~
soso_15315
1
160
Product Management LT会_クアンド新家
shinshin
0
250
開発部に不満を持っていたCSがエンジニアにジョブチェンしてわかった「勝手に諦めない」ことの大切さ
sakuraikotone
28
16k
AWS初心者ってどうやってAWSを学ぶ?〜アプリエンジニアがやってよかったアーキテクチャ学習方法〜
yamanashi_ren01
0
190
Polarsの成長: v0.14からv1.0までの変遷と今後の展望
zerebom
1
350
スクラムマスターって孤独じゃないですか?
yoshitaroyoyo
1
140
DynamoDB コスト最適化っぽいことの基本 with Terraform
kuro_kurorrr
2
250
DMMプラットフォームにおけるTiDBの導入から運用まで
pospome
7
3k
Featured
See All Featured
Building Flexible Design Systems
yeseniaperezcruz
323
37k
Being A Developer After 40
akosma
72
580k
GraphQLとの向き合い方2022年版
quramy
36
13k
For a Future-Friendly Web
brad_frost
173
9.2k
The Language of Interfaces
destraynor
151
23k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
26
2.1k
Fontdeck: Realign not Redesign
paulrobertlloyd
79
5.1k
What's new in Ruby 2.0
geeforr
338
31k
Designing for Performance
lara
604
67k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
360
22k
Build your cross-platform service in a week with App Engine
jlugia
227
17k
Adopting Sorbet at Scale
ufuk
71
8.8k
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)