Enviar búsqueda
Cargar
5分で詰め込む フロントエンド最適化
•
2 recomendaciones
•
3,784 vistas
Shohei Tai
Seguir
第2回 teratail Meetup "集まっtail"でのLTです。 フロントエンドの高速化を図る手法をいくつかご紹介しています。
Leer menos
Leer más
Tecnología
Denunciar
Compartir
Denunciar
Compartir
1 de 32
Descargar ahora
Descargar para leer sin conexión
Recomendados
UXを向上させる サイト高速化テクニック
UXを向上させる サイト高速化テクニック
Shohei Tai
Web表示速度とgtmetrixスコアの矛盾
Web表示速度とgtmetrixスコアの矛盾
Katsuhisa Ogawa
5分でわかるPhalconPHP
5分でわかるPhalconPHP
Shohei Tai
Cake Php開発事例
Cake Php開発事例
柴田 篤志
3流プログラマーから見たPhalconとWISP
3流プログラマーから見たPhalconとWISP
YamaYamamoto
CakePHP PHP Framework
CakePHP PHP Framework
ryota ichie
Livlisのcakephp事例
Livlisのcakephp事例
Masahiro Saito
Cakephp Ajax
Cakephp Ajax
mick
Más contenido relacionado
La actualidad más candente
YAPC::Asia 2012 CPANに恩返ししよう
YAPC::Asia 2012 CPANに恩返ししよう
azuma satoshi
ウェブアプリケーションのパフォーマンスチューニング
ウェブアプリケーションのパフォーマンスチューニング
Yasuhiro Onishi
PHPerがgolangでもがいてる話@第1回 関西Golang勉強会
PHPerがgolangでもがいてる話@第1回 関西Golang勉強会
Keisuke Utsumi
Html5nagoya5 ablogcms
Html5nagoya5 ablogcms
Kazumich YAMAMOTO
ASP.NET パフォーマンス改善
ASP.NET パフォーマンス改善
Joni
Csawわーくしょっぷ(仮)
Csawわーくしょっぷ(仮)
Takamasa Maeda
AmazonインスタントストアのアフィリエイトとSEO対策
AmazonインスタントストアのアフィリエイトとSEO対策
新潟コンサルタント横田秀珠
Yeoman RIAビルドツール超入門
Yeoman RIAビルドツール超入門
Masakazu Muraoka
CakePHP × 国産! baserCMS3の深化と今後の拡がり
CakePHP × 国産! baserCMS3の深化と今後の拡がり
Daisuke Abe
LancersのCakePHPバージョンアップ施策について
LancersのCakePHPバージョンアップ施策について
Shigemasa Akiyama
PHPアプリの品質を(ある程度)保つために出来る事 〜組織編〜
PHPアプリの品質を(ある程度)保つために出来る事 〜組織編〜
Katsuhiro Miura
アプリのテストを書かなければならないと分かっているけども、書けていない人たちへ
アプリのテストを書かなければならないと分かっているけども、書けていない人たちへ
Tomohiro Yamasaki
アプリケーション開発目線から考える テストの書き方について
アプリケーション開発目線から考える テストの書き方について
bitbank, Inc. Tokyo, Japan
40
40
Shiho Sue
Abc words20130615
Abc words20130615
Toshihiro Yoshiura
NativeAppに近付ける manifest.json
NativeAppに近付ける manifest.json
ssuser7cbba6
PHP7で変わること ——言語仕様とエンジンの改善ポイント
PHP7で変わること ——言語仕様とエンジンの改善ポイント
Yoshio Hanawa
プロト〜サービスアウトまでの開発支援ツールの作り方〜CrystalFantasia〜
プロト〜サービスアウトまでの開発支援ツールの作り方〜CrystalFantasia〜
Keisuke Utsumi
Java web application testing
Java web application testing
Tokuhiro Matsuno
ネットスーパー
ネットスーパー
Solur
La actualidad más candente
(20)
YAPC::Asia 2012 CPANに恩返ししよう
YAPC::Asia 2012 CPANに恩返ししよう
ウェブアプリケーションのパフォーマンスチューニング
ウェブアプリケーションのパフォーマンスチューニング
PHPerがgolangでもがいてる話@第1回 関西Golang勉強会
PHPerがgolangでもがいてる話@第1回 関西Golang勉強会
Html5nagoya5 ablogcms
Html5nagoya5 ablogcms
ASP.NET パフォーマンス改善
ASP.NET パフォーマンス改善
Csawわーくしょっぷ(仮)
Csawわーくしょっぷ(仮)
AmazonインスタントストアのアフィリエイトとSEO対策
AmazonインスタントストアのアフィリエイトとSEO対策
Yeoman RIAビルドツール超入門
Yeoman RIAビルドツール超入門
CakePHP × 国産! baserCMS3の深化と今後の拡がり
CakePHP × 国産! baserCMS3の深化と今後の拡がり
LancersのCakePHPバージョンアップ施策について
LancersのCakePHPバージョンアップ施策について
PHPアプリの品質を(ある程度)保つために出来る事 〜組織編〜
PHPアプリの品質を(ある程度)保つために出来る事 〜組織編〜
アプリのテストを書かなければならないと分かっているけども、書けていない人たちへ
アプリのテストを書かなければならないと分かっているけども、書けていない人たちへ
アプリケーション開発目線から考える テストの書き方について
アプリケーション開発目線から考える テストの書き方について
40
40
Abc words20130615
Abc words20130615
NativeAppに近付ける manifest.json
NativeAppに近付ける manifest.json
PHP7で変わること ——言語仕様とエンジンの改善ポイント
PHP7で変わること ——言語仕様とエンジンの改善ポイント
プロト〜サービスアウトまでの開発支援ツールの作り方〜CrystalFantasia〜
プロト〜サービスアウトまでの開発支援ツールの作り方〜CrystalFantasia〜
Java web application testing
Java web application testing
ネットスーパー
ネットスーパー
Similar a 5分で詰め込む フロントエンド最適化
スタートアップ向け!1人日でできるサービスの高速化方法と成果
スタートアップ向け!1人日でできるサービスの高速化方法と成果
Koichiro Sumi
エンジニアによるグロースハック〜SEO編〜
エンジニアによるグロースハック〜SEO編〜
ssuser73d5e4
⑮jQueryをおぼえよう!その1
⑮jQueryをおぼえよう!その1
Nishida Kansuke
これだけは抑えたいSEOの技術要件
これだけは抑えたいSEOの技術要件
ナイル株式会社
Yahoo!検索のパフォーマンス向上策全て見せます
Yahoo!検索のパフォーマンス向上策全て見せます
Yahoo!デベロッパーネットワーク
爆速フレームワークでREST APIを作った話
爆速フレームワークでREST APIを作った話
Shohei Tai
ボクたちのWWW Webクリエイターのこれからを考える
ボクたちのWWW Webクリエイターのこれからを考える
Masakazu Muraoka
Web Site Optimization for Beginners
Web Site Optimization for Beginners
masaaki komori
ウェブパフォーマンスの基礎とこれから
ウェブパフォーマンスの基礎とこれから
Hiroshi Kawada
歴史あるWebサービスに携わって2年半の間に起きた事やった事
歴史あるWebサービスに携わって2年半の間に起きた事やった事
Masataka Kono
第2回勉強会資料 岩本(配布用)
第2回勉強会資料 岩本(配布用)
Takahisa Iwamoto
スマホ向けWebアプリ開発で使えるフロントエンド高速化手法
スマホ向けWebアプリ開発で使えるフロントエンド高速化手法
Eiji Kodama
AMP & PWA
AMP & PWA
Shigeru Kondoh
スマートフォンサイト制作 よくあるトラブルと 解決方法・回避方法
スマートフォンサイト制作 よくあるトラブルと 解決方法・回避方法
Maboroshi.inc
5分でわかるphalcon php
5分でわかるphalcon php
Yusaku Kinoshita
クリエイターじゃなくてもできるWebサイト表示速度改善方法(事例のこぼれ話のおまけつき)
クリエイターじゃなくてもできるWebサイト表示速度改善方法(事例のこぼれ話のおまけつき)
Yuriko Kamimori
LT13(前半)Workshipにおけるレコメンドエンジン実装
LT13(前半)Workshipにおけるレコメンドエンジン実装
GIG inc.
ペアプロはリモートでもできる!
ペアプロはリモートでもできる!
Tatsuya Deguchi
Practical migration from JSP to Thymeleaf
Practical migration from JSP to Thymeleaf
Toshiki Iga
2479
2479
schoowebcampus
Similar a 5分で詰め込む フロントエンド最適化
(20)
スタートアップ向け!1人日でできるサービスの高速化方法と成果
スタートアップ向け!1人日でできるサービスの高速化方法と成果
エンジニアによるグロースハック〜SEO編〜
エンジニアによるグロースハック〜SEO編〜
⑮jQueryをおぼえよう!その1
⑮jQueryをおぼえよう!その1
これだけは抑えたいSEOの技術要件
これだけは抑えたいSEOの技術要件
Yahoo!検索のパフォーマンス向上策全て見せます
Yahoo!検索のパフォーマンス向上策全て見せます
爆速フレームワークでREST APIを作った話
爆速フレームワークでREST APIを作った話
ボクたちのWWW Webクリエイターのこれからを考える
ボクたちのWWW Webクリエイターのこれからを考える
Web Site Optimization for Beginners
Web Site Optimization for Beginners
ウェブパフォーマンスの基礎とこれから
ウェブパフォーマンスの基礎とこれから
歴史あるWebサービスに携わって2年半の間に起きた事やった事
歴史あるWebサービスに携わって2年半の間に起きた事やった事
第2回勉強会資料 岩本(配布用)
第2回勉強会資料 岩本(配布用)
スマホ向けWebアプリ開発で使えるフロントエンド高速化手法
スマホ向けWebアプリ開発で使えるフロントエンド高速化手法
AMP & PWA
AMP & PWA
スマートフォンサイト制作 よくあるトラブルと 解決方法・回避方法
スマートフォンサイト制作 よくあるトラブルと 解決方法・回避方法
5分でわかるphalcon php
5分でわかるphalcon php
クリエイターじゃなくてもできるWebサイト表示速度改善方法(事例のこぼれ話のおまけつき)
クリエイターじゃなくてもできるWebサイト表示速度改善方法(事例のこぼれ話のおまけつき)
LT13(前半)Workshipにおけるレコメンドエンジン実装
LT13(前半)Workshipにおけるレコメンドエンジン実装
ペアプロはリモートでもできる!
ペアプロはリモートでもできる!
Practical migration from JSP to Thymeleaf
Practical migration from JSP to Thymeleaf
2479
2479
Último
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
arts yokohama
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
ssuser539845
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
Matsushita Laboratory
20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdf
Ayachika Kitazaki
2024 04 minnanoito
2024 04 minnanoito
arts yokohama
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
Shumpei Kishi
2024 03 CTEA
2024 03 CTEA
arts yokohama
2024 01 Virtual_Counselor
2024 01 Virtual_Counselor
arts yokohama
What is the world where you can make your own semiconductors?
What is the world where you can make your own semiconductors?
Industrial Technology Research Institute (ITRI)(工業技術研究院, 工研院)
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
ssuser370dd7
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
Tetsuya Nihonmatsu
Último
(11)
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdf
2024 04 minnanoito
2024 04 minnanoito
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
2024 03 CTEA
2024 03 CTEA
2024 01 Virtual_Counselor
2024 01 Virtual_Counselor
What is the world where you can make your own semiconductors?
What is the world where you can make your own semiconductors?
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
5分で詰め込む フロントエンド最適化
1.
最適化はここまでしないと気が済ま ない
2.
5分で詰め込む フロントエンド最適化手法 泰昌平 (@stai0823)
3.
自己紹介 泰 昌平 ファンチーム株式会社 Webエンジニア ダーツとバイクが好き 最近はCakePHPとPhalconをやっています フロントのjavascriptが大好物
4.
今日はフロントエンドを高速化する テクニックについてお話しします。
5.
どうしてフロントエンド?
6.
・サーバのスペックを上げる ・高速な言語に変える ・高速なフレームワークに変える 高速化する方法はいくらでもある。
7.
案件や環境に依存してしまう!
8.
1.バックエンドの最適化よりも 高速化が期待できる 1.比較的少ない工数で高速化が図れる 2.モバイルでの表示速度を大幅に改善できる フロントエンドの最適化を知っている と
9.
実際にやった事を紹介していきます
10.
・HTML5を使用する ・省略可能タグは必ず省略 ・minifyする ・レンダリングブロックの回避 ・リクエストの削減 ・dnsプリフェッチ機能 ・gzip圧縮 ・CDNを利用する 具体的になにをやったか
11.
・HTML5を使用する ・省略可能タグは必ず省略 ・minifyする ・レンダリングブロックの回避 ・リクエストの削減 ・dnsプリフェッチ機能 ・gzip圧縮 ・CDNを利用する 具体的になにをやったか _人人人人人人_ > 5分の限界 <  ̄Y^Y^Y^Y^Y^Y^ ̄
12.
HTML5でマークアップ
13.
もはやド定番ですが、最適化の観点でいうと ・省略可能な属性が追加 ・以前よりもタグをシンプルに記述できる HTML5でマークアップ ※ここは軽く流していきます
14.
<!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">
15.
省略可能タグを徹底
16.
<html>,</html>,<head>,</head>,<body>, </body>,</li>,</dt>,</dd>,</p>,</option>, </thead>,<tbody>,</tr>,</td>,</th> などなど。。 結構いっぱい省略できる
17.
minify
18.
・無駄なスペース・改行コード・コメントを全て消してお く →Google Closure Compiler →YUI
Compressor ・プラグイン・ライブラリも必ずminifyされたものを使う ・フレームワークなどを使用しているのであれば、View出 力の際に処理を加える minifyをしよう
19.
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の場合
20.
リクエストを減らす
21.
HTMLにインラインで記述する! JSやCSSへのリクエストを最小限に! →HTMLのファイルサイズが増大 →ソースが混在し、管理が難しくなる →キャッシュが使えなくなる
22.
・リクエストを減らす? ・外部ファイル化してキャッシュす る? どっちがベス ト?
23.
疑問に思ったら teratail!
24.
https://teratail.com/questions/15358
25.
・外部ファイル化はキャッシュされるため速くなる ・ただし、初回はガッツリ読み込みに行くので遅くなる Q.JSの外部ファイル化は本当に速い?
26.
ベストアンサーに選ばれた回答
27.
・一般的にはリクエストは少ないほうが良い ・外部ファイル化はケースバイケース。 →保守性を重視する場合は外部ファイル化 →アクセス数が多いサイトはインラインに記述する場合も ある ベストアンサー
28.
dns-prefetchを使う
29.
DNSプリフェッチ ・DNSの名前解決を事前に行うよう強制できる ・HEADタグの上部にprefetch用のタグを埋め込む ・実質、外部のリソースを読みに行っている箇所全てに有 効
30.
<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> 書き方
31.
いかがでしたでしょうか
32.
ご清聴ありがとうございま した
Notas del editor
結局これなんですよね。 案件や環境に依存してしまう。あとお金! そもそも実際に動いてるサイトに対してサーバとかを触ってしまうのはリスクが大きいですよね。
ハイパフォーマンスWebサイというオライリーの本にも書いてあります。 Webでの待ち時間の8割がフロントエンドに費やされているという話があります。
勘違いされがちなのですが、実はHTML5以前でも省略できます。 liタグとかoptionタグとかは効果絶大です。
一番手っ取り早いのはインラインでJSやCSSを書いてしまうことです でも弊害があります。
じゃあこれって結局どうすればいいのかと リクエストは減らせばいい?外部ファイル化
cdnjs.comやGoogleのヘルプページなどでも使われていたりします。
headの上部にひたすら羅列することで効果を発揮します。 ここで指定するドメインは何でも良いです。 画像でもCSSでもJSでも、外部に読みに行っているものを指定すると効果的です。 これ、ウォーターフローが結構面白くなるのでお見せしたかったのですが、 ウォータフローをキャプチャするサイトが障害で取れなかったのでお見せできませんでした。。
フロントエンドの最適化は検証されて、データのある手法が他にもたくさんあるので、非常に奥が深いです。 色々試してみてください。
Descargar ahora