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.7k
パフォーマンスを発揮するための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
290
Webデザイナーが押さえておきたいエンジニアとの連携ポイント
448jp
0
3.7k
合意形成のためのFigma活用術
448jp
0
120
書く・即・DONEな仕組みをNuxtで作る
448jp
0
370
神速でワイヤーフレームを作るためのライブラリ
448jp
1
850
Figmaで神速ドキュメント作成術
448jp
3
2.4k
今から始めるFigma超入門
448jp
0
1.6k
零細Web制作会社のリモートワーク事情
448jp
0
420
エンジニアに120%意図を伝えるためのAdobe XDデザインテクニック
448jp
2
750
Other Decks in Programming
See All in Programming
技術同人誌をMCP Serverにしてみた
74th
1
450
Google Agent Development Kit でLINE Botを作ってみた
ymd65536
2
210
Railsアプリケーションと パフォーマンスチューニング ー 秒間5万リクエストの モバイルオーダーシステムを支える事例 ー Rubyセミナー 大阪
falcon8823
4
1k
Java on Azure で LangGraph!
kohei3110
0
170
Is Xcode slowly dying out in 2025?
uetyo
1
240
Create a website using Spatial Web
akkeylab
0
310
たった 1 枚の PHP ファイルで実装する MCP サーバ / MCP Server with Vanilla PHP
okashoi
1
220
20250628_非エンジニアがバイブコーディングしてみた
ponponmikankan
0
530
イベントストーミング図からコードへの変換手順 / Procedure for Converting Event Storming Diagrams to Code
nrslib
1
550
『自分のデータだけ見せたい!』を叶える──Laravel × Casbin で複雑権限をスッキリ解きほぐす 25 分
akitotsukahara
1
590
システム成長を止めない!本番無停止テーブル移行の全貌
sakawe_ee
1
150
datadog dash 2025 LLM observability for reliability and stability
ivry_presentationmaterials
0
340
Featured
See All Featured
How to Think Like a Performance Engineer
csswizardry
24
1.7k
RailsConf 2023
tenderlove
30
1.1k
Speed Design
sergeychernyshev
32
1k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
233
17k
Optimizing for Happiness
mojombo
379
70k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
44
2.4k
The Language of Interfaces
destraynor
158
25k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
How GitHub (no longer) Works
holman
314
140k
Unsuck your backbone
ammeep
671
58k
Testing 201, or: Great Expectations
jmmastey
42
7.6k
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
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)