Enviar pesquisa
Carregar
5分で詰め込む フロントエンド最適化
•
Transferir como PPTX, PDF
•
2 gostaram
•
3,784 visualizações
Shohei Tai
Seguir
第2回 teratail Meetup "集まっtail"でのLTです。 フロントエンドの高速化を図る手法をいくつかご紹介しています。
Leia menos
Leia mais
Tecnologia
Denunciar
Compartilhar
Denunciar
Compartilhar
1 de 32
Baixar agora
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
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
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
スタートアップ向け!1人日でできるサービスの高速化方法と成果
スタートアップ向け!1人日でできるサービスの高速化方法と成果
Koichiro Sumi
エンジニアによるグロースハック〜SEO編〜
エンジニアによるグロースハック〜SEO編〜
ssuser73d5e4
Mais conteúdo relacionado
Mais procurados
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
Mais procurados
(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
ネットスーパー
ネットスーパー
Semelhante 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
Semelhante 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
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 do Editor
結局これなんですよね。 案件や環境に依存してしまう。あとお金! そもそも実際に動いてるサイトに対してサーバとかを触ってしまうのはリスクが大きいですよね。
ハイパフォーマンスWebサイというオライリーの本にも書いてあります。 Webでの待ち時間の8割がフロントエンドに費やされているという話があります。
勘違いされがちなのですが、実はHTML5以前でも省略できます。 liタグとかoptionタグとかは効果絶大です。
一番手っ取り早いのはインラインでJSやCSSを書いてしまうことです でも弊害があります。
じゃあこれって結局どうすればいいのかと リクエストは減らせばいい?外部ファイル化
cdnjs.comやGoogleのヘルプページなどでも使われていたりします。
headの上部にひたすら羅列することで効果を発揮します。 ここで指定するドメインは何でも良いです。 画像でもCSSでもJSでも、外部に読みに行っているものを指定すると効果的です。 これ、ウォーターフローが結構面白くなるのでお見せしたかったのですが、 ウォータフローをキャプチャするサイトが障害で取れなかったのでお見せできませんでした。。
フロントエンドの最適化は検証されて、データのある手法が他にもたくさんあるので、非常に奥が深いです。 色々試してみてください。
Baixar agora