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.8k
パフォーマンスを発揮するための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
人はなぜコミュニティとつながると幸せを感じるのか
448jp
3
310
Webデザイナーが押さえておきたいエンジニアとの連携ポイント
448jp
0
3.8k
合意形成のためのFigma活用術
448jp
0
130
書く・即・DONEな仕組みをNuxtで作る
448jp
0
390
神速でワイヤーフレームを作るためのライブラリ
448jp
1
860
Figmaで神速ドキュメント作成術
448jp
3
2.5k
今から始めるFigma超入門
448jp
0
1.7k
零細Web制作会社のリモートワーク事情
448jp
0
430
エンジニアに120%意図を伝えるためのAdobe XDデザインテクニック
448jp
2
760
Other Decks in Programming
See All in Programming
Constant integer division faster than compiler-generated code
herumi
2
700
コンテキストエンジニアリング Cursor編
kinopeee
1
710
20250808_AIAgent勉強会_ClaudeCodeデータ分析の実運用〜競馬を題材に回収率100%の先を目指すメソッドとは〜
kkakeru
0
210
管你要 trace 什麼、bpftrace 用下去就對了 — COSCUP 2025
shunghsiyu
0
470
MCPで実現するAIエージェント駆動のNext.jsアプリデバッグ手法
nyatinte
7
900
LLMOpsのパフォーマンスを支える技術と現場で実践した改善
po3rin
8
990
技術的負債で信頼性が限界だったWordPress運用をShifterで完全復活させた話
rvirus0817
1
2.1k
CSC305 Summer Lecture 05
javiergs
PRO
0
110
Nuances on Kubernetes - RubyConf Taiwan 2025
envek
0
200
レガシープロジェクトで最大限AIの恩恵を受けられるようClaude Codeを利用する
tk1351
3
1.2k
Namespace and Its Future
tagomoris
6
460
TanStack DB ~状態管理の新しい考え方~
bmthd
2
340
Featured
See All Featured
Imperfection Machines: The Place of Print at Facebook
scottboms
268
13k
YesSQL, Process and Tooling at Scale
rocio
173
14k
Java REST API Framework Comparison - PWX 2021
mraible
33
8.8k
Statistics for Hackers
jakevdp
799
220k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
8
900
Designing Dashboards & Data Visualisations in Web Apps
destraynor
231
53k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.8k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Producing Creativity
orderedlist
PRO
347
40k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
PRO
183
54k
Navigating Team Friction
lara
189
15k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
367
26k
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)