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
5分で詰め込む フロントエンド最適化
Search
泰 昌平@ShoheiTai
September 10, 2015
Programming
0
110
5分で詰め込む フロントエンド最適化
第2回 集まっtail LT:5分
Webの高速化についてお話させていただきました。
フロントエンドを中心としたパフォーマンス改善になります。
泰 昌平@ShoheiTai
September 10, 2015
Tweet
Share
More Decks by 泰 昌平@ShoheiTai
See All by 泰 昌平@ShoheiTai
現地チームの心理的安全性から全く違う結論に行き着いた話
shoheitai
0
160
DX企業CTOとして考える技術への向き合い方
shoheitai
0
940
LT20回以上やって、やっと学んだLTの技術
shoheitai
1
130
WSOの現状とすすめかた
shoheitai
0
780
今こそ始めるWSO - Web高速化の現状と対策テクニック
shoheitai
2
920
“超効率化” で生き残る 2018 #innocafe
shoheitai
2
360
LTを続けてLT文化の素晴らしさを感じた話 #集まっtail
shoheitai
1
5.4k
Drupal8のConfigurationManagementで心が折れた話 #drupalstudy
shoheitai
1
610
もうこわくない!エンジニアを巻き込むコミュニケーション #PRLT
shoheitai
3
3.1k
Other Decks in Programming
See All in Programming
TFLintカスタムプラグインで始める Terraformコード品質管理
bells17
2
170
作って理解するGOCACHEPROG / Go Conference 2025(Workshop)
mazrean
0
100
タスクの特性や不確実性に応じた最適な作業スタイルの選択(ペアプロ・モブプロ・ソロプロ)と実践 / Optimal Work Style Selection: Pair, Mob, or Solo Programming.
honyanya
3
170
技術的負債の正体を知って向き合う / Facing Technical Debt
irof
0
170
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
aokswork3
0
240
「ちょっと古いから」って避けてた技術書、今だからこそ読もう
mottyzzz
11
6.7k
スマホから Youtube Shortsを見られないようにする
lemolatoon
27
32k
XP, Testing and ninja testing ZOZ5
m_seki
3
670
登壇は dynamic! な営みである / speech is dynamic
da1chi
0
340
Things You Thought You Didn’t Need To Care About That Have a Big Impact On Your Job
hollycummins
0
230
オープンソースソフトウェアへの解像度🔬
utam0k
15
2.9k
開発生産性を上げるための生成AI活用術
starfish719
3
1.1k
Featured
See All Featured
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
870
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
9
590
BBQ
matthewcrist
89
9.8k
What’s in a name? Adding method to the madness
productmarketing
PRO
24
3.7k
What's in a price? How to price your products and services
michaelherold
246
12k
GraphQLの誤解/rethinking-graphql
sonatard
73
11k
Reflections from 52 weeks, 52 projects
jeffersonlam
353
21k
Site-Speed That Sticks
csswizardry
12
900
Making the Leap to Tech Lead
cromwellryan
135
9.6k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
20
1.2k
Writing Fast Ruby
sferik
629
62k
Six Lessons from altMBA
skipperchong
29
4k
Transcript
最適化はここまでしないと気が済まない
5分で詰め込む フロントエンド最適化手法 泰昌平 (@stai0823)
自己紹介 泰 昌平 ファンチーム株式会社 Webエンジニア ダーツとバイクが好き 最近はCakePHPとPhalconをやっています フロントのjavascriptが大好物
今日はフロントエンドを高速化する テクニックについてお話しします。
どうしてフロントエンド?
・サーバのスペックを上げる ・高速な言語に変える ・高速なフレームワークに変える 高速化する方法はいくらでもある。
案件や環境に依存してしまう!
1. バックエンドの最適化よりも 高速化が期待できる 2. 比較的少ない工数で高速化が図れる 3. モバイルでの表示速度を大幅に改善できる フロントエンドの最適化を知っていると
実際にやった事を紹介していきます
・HTML5を使用する ・省略可能タグは必ず省略 ・minifyする ・レンダリングブロックの回避 ・リクエストの削減 ・dnsプリフェッチ機能 ・gzip圧縮 ・CDNを利用する 具体的になにをやったか
・HTML5を使用する ・省略可能タグは必ず省略 ・minifyする ・レンダリングブロックの回避 ・リクエストの削減 ・dnsプリフェッチ機能 ・gzip圧縮 ・CDNを利用する 具体的になにをやったか _人人人人人人_
> 5分の限界 <  ̄Y^Y^Y^Y^Y^Y^ ̄
HTML5でマークアップ
もはやド定番ですが、最適化の観点でいうと ・省略可能な属性が追加 ・以前よりもタグをシンプルに記述できる HTML5でマークアップ ※ここは軽く流していきます
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <script type="text/javascript"></script> <link
rel="stylesheet" type="text/css" href="style.css"> 例えば・・ <!DOCTYPE html> <script></script> <link rel="stylesheet" href="style.css">
省略可能タグを徹底
<html>,</html>,<head>,</head>,<body>, </body>,</li>,</dt>,</dd>,</p>,</option>, </thead>,<tbody>,</tr>,</td>,</th> などなど。。 結構いっぱい省略できる
minify
・無駄なスペース・改行コード・コメントを全て消しておく →Google Closure Compiler →YUI Compressor ・プラグイン・ライブラリも必ずminifyされたものを使う ・フレームワークなどを使用しているのであれば、View出力の 際に処理を加える minifyをしよう
class AppHelper extends Helper { public function afterLayout($layoutFile) { parent::afterLayout($layoutFile);
if($this->_View) { //出力するソースのタブ・スペース・改行を削除する $this->_View->output = str_replace(array("\n", "\t", ' '), '', $this->_View->output); } } } CakePHPの場合
リクエストを減らす
HTMLにインラインで記述する! JSやCSSへのリクエストを最小限に! →HTMLのファイルサイズが増大 →ソースが混在し、管理が難しくなる →キャッシュが使えなくなる
・リクエストを減らす? ・外部ファイル化してキャッシュする? どっちがベスト?
疑問に思ったらteratail!
https://teratail.com/questions/15358
・外部ファイル化はキャッシュされるため速くなる ・ただし、初回はガッツリ読み込みに行くので遅くなる Q.JSの外部ファイル化は本当に速い?
ベストアンサーに選ばれた回答
・一般的にはリクエストは少ないほうが良い ・外部ファイル化はケースバイケース。 →保守性を重視する場合は外部ファイル化 →アクセス数が多いサイトはインラインに記述する場合もある ベストアンサー
dns-prefetchを使う
DNSプリフェッチ ・DNSの名前解決を事前に行うよう強制できる ・HEADタグの上部にprefetch用のタグを埋め込む ・実質、外部のリソースを読みに行っている箇所全てに有効
<head> <meta charset=”UTF-8”> <!-- 出来る限りheadの上部に配置する --> <link rel="dns-prefetch" href="//www.google-analytics.com"> <link
rel="dns-prefetch" href="//www.googletagmanager.com"> <title>DNSプリフェッチ</title> </head> 書き方
いかがでしたでしょうか
ご清聴ありがとうございました