SlideShare una empresa de Scribd logo
1 de 32
Descargar para leer sin conexión
最適化はここまでしないと気が済ま
ない
5分で詰め込む
フロントエンド最適化手法
泰昌平 (@stai0823)
自己紹介
泰 昌平
ファンチーム株式会社 Webエンジニア
ダーツとバイクが好き
最近はCakePHPとPhalconをやっています
フロントのjavascriptが大好物
今日はフロントエンドを高速化する
テクニックについてお話しします。
どうしてフロントエンド?
・サーバのスペックを上げる
・高速な言語に変える
・高速なフレームワークに変える
高速化する方法はいくらでもある。
案件や環境に依存してしまう!
1.バックエンドの最適化よりも
高速化が期待できる
1.比較的少ない工数で高速化が図れる
2.モバイルでの表示速度を大幅に改善できる
フロントエンドの最適化を知っている
と
実際にやった事を紹介していきます
・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>
書き方
いかがでしたでしょうか
ご清聴ありがとうございま
した

Más contenido relacionado

La actualidad más candente

YAPC::Asia 2012 CPANに恩返ししよう
YAPC::Asia 2012 CPANに恩返ししようYAPC::Asia 2012 CPANに恩返ししよう
YAPC::Asia 2012 CPANに恩返ししようazuma satoshi
 
ウェブアプリケーションのパフォーマンスチューニング
ウェブアプリケーションのパフォーマンスチューニングウェブアプリケーションのパフォーマンスチューニング
ウェブアプリケーションのパフォーマンスチューニングYasuhiro Onishi
 
PHPerがgolangでもがいてる話@第1回 関西Golang勉強会
PHPerがgolangでもがいてる話@第1回 関西Golang勉強会PHPerがgolangでもがいてる話@第1回 関西Golang勉強会
PHPerがgolangでもがいてる話@第1回 関西Golang勉強会Keisuke Utsumi
 
ASP.NET パフォーマンス改善
ASP.NET パフォーマンス改善ASP.NET パフォーマンス改善
ASP.NET パフォーマンス改善Joni
 
Csawわーくしょっぷ(仮)
Csawわーくしょっぷ(仮)Csawわーくしょっぷ(仮)
Csawわーくしょっぷ(仮)Takamasa Maeda
 
Yeoman RIAビルドツール超入門
Yeoman RIAビルドツール超入門Yeoman RIAビルドツール超入門
Yeoman RIAビルドツール超入門Masakazu Muraoka
 
CakePHP × 国産! baserCMS3の深化と今後の拡がり
CakePHP × 国産! baserCMS3の深化と今後の拡がりCakePHP × 国産! baserCMS3の深化と今後の拡がり
CakePHP × 国産! baserCMS3の深化と今後の拡がりDaisuke Abe
 
LancersのCakePHPバージョンアップ施策について
LancersのCakePHPバージョンアップ施策についてLancersのCakePHPバージョンアップ施策について
LancersのCakePHPバージョンアップ施策についてShigemasa Akiyama
 
PHPアプリの品質を(ある程度)保つために出来る事 〜組織編〜
PHPアプリの品質を(ある程度)保つために出来る事 〜組織編〜PHPアプリの品質を(ある程度)保つために出来る事 〜組織編〜
PHPアプリの品質を(ある程度)保つために出来る事 〜組織編〜Katsuhiro Miura
 
アプリのテストを書かなければならないと分かっているけども、書けていない人たちへ
アプリのテストを書かなければならないと分かっているけども、書けていない人たちへアプリのテストを書かなければならないと分かっているけども、書けていない人たちへ
アプリのテストを書かなければならないと分かっているけども、書けていない人たちへTomohiro Yamasaki
 
アプリケーション開発目線から考える テストの書き方について
アプリケーション開発目線から考える テストの書き方についてアプリケーション開発目線から考える テストの書き方について
アプリケーション開発目線から考える テストの書き方についてbitbank, Inc. Tokyo, Japan
 
NativeAppに近付ける manifest.json
NativeAppに近付ける manifest.jsonNativeAppに近付ける manifest.json
NativeAppに近付ける manifest.jsonssuser7cbba6
 
PHP7で変わること ——言語仕様とエンジンの改善ポイント
PHP7で変わること ——言語仕様とエンジンの改善ポイントPHP7で変わること ——言語仕様とエンジンの改善ポイント
PHP7で変わること ——言語仕様とエンジンの改善ポイントYoshio Hanawa
 
プロト〜サービスアウトまでの開発支援ツールの作り方〜CrystalFantasia〜
プロト〜サービスアウトまでの開発支援ツールの作り方〜CrystalFantasia〜プロト〜サービスアウトまでの開発支援ツールの作り方〜CrystalFantasia〜
プロト〜サービスアウトまでの開発支援ツールの作り方〜CrystalFantasia〜Keisuke Utsumi
 
Java web application testing
Java web application testingJava web application testing
Java web application testingTokuhiro Matsuno
 
ネットスーパー
ネットスーパーネットスーパー
ネットスーパーSolur
 

La actualidad más candente (20)

YAPC::Asia 2012 CPANに恩返ししよう
YAPC::Asia 2012 CPANに恩返ししようYAPC::Asia 2012 CPANに恩返ししよう
YAPC::Asia 2012 CPANに恩返ししよう
 
ウェブアプリケーションのパフォーマンスチューニング
ウェブアプリケーションのパフォーマンスチューニングウェブアプリケーションのパフォーマンスチューニング
ウェブアプリケーションのパフォーマンスチューニング
 
PHPerがgolangでもがいてる話@第1回 関西Golang勉強会
PHPerがgolangでもがいてる話@第1回 関西Golang勉強会PHPerがgolangでもがいてる話@第1回 関西Golang勉強会
PHPerがgolangでもがいてる話@第1回 関西Golang勉強会
 
Html5nagoya5 ablogcms
Html5nagoya5 ablogcmsHtml5nagoya5 ablogcms
Html5nagoya5 ablogcms
 
ASP.NET パフォーマンス改善
ASP.NET パフォーマンス改善ASP.NET パフォーマンス改善
ASP.NET パフォーマンス改善
 
Csawわーくしょっぷ(仮)
Csawわーくしょっぷ(仮)Csawわーくしょっぷ(仮)
Csawわーくしょっぷ(仮)
 
AmazonインスタントストアのアフィリエイトとSEO対策
AmazonインスタントストアのアフィリエイトとSEO対策AmazonインスタントストアのアフィリエイトとSEO対策
AmazonインスタントストアのアフィリエイトとSEO対策
 
Yeoman RIAビルドツール超入門
Yeoman RIAビルドツール超入門Yeoman RIAビルドツール超入門
Yeoman RIAビルドツール超入門
 
CakePHP × 国産! baserCMS3の深化と今後の拡がり
CakePHP × 国産! baserCMS3の深化と今後の拡がりCakePHP × 国産! baserCMS3の深化と今後の拡がり
CakePHP × 国産! baserCMS3の深化と今後の拡がり
 
LancersのCakePHPバージョンアップ施策について
LancersのCakePHPバージョンアップ施策についてLancersのCakePHPバージョンアップ施策について
LancersのCakePHPバージョンアップ施策について
 
PHPアプリの品質を(ある程度)保つために出来る事 〜組織編〜
PHPアプリの品質を(ある程度)保つために出来る事 〜組織編〜PHPアプリの品質を(ある程度)保つために出来る事 〜組織編〜
PHPアプリの品質を(ある程度)保つために出来る事 〜組織編〜
 
アプリのテストを書かなければならないと分かっているけども、書けていない人たちへ
アプリのテストを書かなければならないと分かっているけども、書けていない人たちへアプリのテストを書かなければならないと分かっているけども、書けていない人たちへ
アプリのテストを書かなければならないと分かっているけども、書けていない人たちへ
 
アプリケーション開発目線から考える テストの書き方について
アプリケーション開発目線から考える テストの書き方についてアプリケーション開発目線から考える テストの書き方について
アプリケーション開発目線から考える テストの書き方について
 
40
4040
40
 
Abc words20130615
Abc words20130615Abc words20130615
Abc words20130615
 
NativeAppに近付ける manifest.json
NativeAppに近付ける manifest.jsonNativeAppに近付ける manifest.json
NativeAppに近付ける manifest.json
 
PHP7で変わること ——言語仕様とエンジンの改善ポイント
PHP7で変わること ——言語仕様とエンジンの改善ポイントPHP7で変わること ——言語仕様とエンジンの改善ポイント
PHP7で変わること ——言語仕様とエンジンの改善ポイント
 
プロト〜サービスアウトまでの開発支援ツールの作り方〜CrystalFantasia〜
プロト〜サービスアウトまでの開発支援ツールの作り方〜CrystalFantasia〜プロト〜サービスアウトまでの開発支援ツールの作り方〜CrystalFantasia〜
プロト〜サービスアウトまでの開発支援ツールの作り方〜CrystalFantasia〜
 
Java web application testing
Java web application testingJava web application testing
Java web application testing
 
ネットスーパー
ネットスーパーネットスーパー
ネットスーパー
 

Similar a 5分で詰め込む フロントエンド最適化

スタートアップ向け!1人日でできるサービスの高速化方法と成果
スタートアップ向け!1人日でできるサービスの高速化方法と成果スタートアップ向け!1人日でできるサービスの高速化方法と成果
スタートアップ向け!1人日でできるサービスの高速化方法と成果Koichiro Sumi
 
エンジニアによるグロースハック〜SEO編〜
エンジニアによるグロースハック〜SEO編〜エンジニアによるグロースハック〜SEO編〜
エンジニアによるグロースハック〜SEO編〜ssuser73d5e4
 
⑮jQueryをおぼえよう!その1
⑮jQueryをおぼえよう!その1⑮jQueryをおぼえよう!その1
⑮jQueryをおぼえよう!その1Nishida Kansuke
 
これだけは抑えたいSEOの技術要件
これだけは抑えたいSEOの技術要件これだけは抑えたいSEOの技術要件
これだけは抑えたいSEOの技術要件ナイル株式会社
 
爆速フレームワークでREST APIを作った話
爆速フレームワークでREST APIを作った話爆速フレームワークでREST APIを作った話
爆速フレームワークでREST APIを作った話Shohei Tai
 
ボクたちのWWW Webクリエイターのこれからを考える
ボクたちのWWW Webクリエイターのこれからを考えるボクたちのWWW Webクリエイターのこれからを考える
ボクたちのWWW Webクリエイターのこれからを考えるMasakazu Muraoka
 
Web Site Optimization for Beginners
Web Site Optimization for BeginnersWeb Site Optimization for Beginners
Web Site Optimization for Beginnersmasaaki komori
 
ウェブパフォーマンスの基礎とこれから
ウェブパフォーマンスの基礎とこれからウェブパフォーマンスの基礎とこれから
ウェブパフォーマンスの基礎とこれからHiroshi Kawada
 
歴史あるWebサービスに携わって2年半の間に起きた事やった事
歴史あるWebサービスに携わって2年半の間に起きた事やった事歴史あるWebサービスに携わって2年半の間に起きた事やった事
歴史あるWebサービスに携わって2年半の間に起きた事やった事Masataka Kono
 
第2回勉強会資料 岩本(配布用)
第2回勉強会資料 岩本(配布用)第2回勉強会資料 岩本(配布用)
第2回勉強会資料 岩本(配布用)Takahisa Iwamoto
 
スマホ向けWebアプリ開発で使えるフロントエンド高速化手法
スマホ向けWebアプリ開発で使えるフロントエンド高速化手法スマホ向けWebアプリ開発で使えるフロントエンド高速化手法
スマホ向けWebアプリ開発で使えるフロントエンド高速化手法Eiji Kodama
 
スマートフォンサイト制作 よくあるトラブルと 解決方法・回避方法
スマートフォンサイト制作  よくあるトラブルと 解決方法・回避方法スマートフォンサイト制作  よくあるトラブルと 解決方法・回避方法
スマートフォンサイト制作 よくあるトラブルと 解決方法・回避方法Maboroshi.inc
 
5分でわかるphalcon php
5分でわかるphalcon php5分でわかるphalcon php
5分でわかるphalcon phpYusaku Kinoshita
 
クリエイターじゃなくてもできるWebサイト表示速度改善方法(事例のこぼれ話のおまけつき)
クリエイターじゃなくてもできるWebサイト表示速度改善方法(事例のこぼれ話のおまけつき)クリエイターじゃなくてもできるWebサイト表示速度改善方法(事例のこぼれ話のおまけつき)
クリエイターじゃなくてもできるWebサイト表示速度改善方法(事例のこぼれ話のおまけつき)Yuriko Kamimori
 
LT13(前半)Workshipにおけるレコメンドエンジン実装
LT13(前半)Workshipにおけるレコメンドエンジン実装LT13(前半)Workshipにおけるレコメンドエンジン実装
LT13(前半)Workshipにおけるレコメンドエンジン実装GIG inc.
 
ペアプロはリモートでもできる!
ペアプロはリモートでもできる!ペアプロはリモートでもできる!
ペアプロはリモートでもできる!Tatsuya Deguchi
 
Practical migration from JSP to Thymeleaf
Practical migration from JSP to Thymeleaf Practical migration from JSP to Thymeleaf
Practical migration from JSP to Thymeleaf Toshiki Iga
 

Similar a 5分で詰め込む フロントエンド最適化 (20)

スタートアップ向け!1人日でできるサービスの高速化方法と成果
スタートアップ向け!1人日でできるサービスの高速化方法と成果スタートアップ向け!1人日でできるサービスの高速化方法と成果
スタートアップ向け!1人日でできるサービスの高速化方法と成果
 
エンジニアによるグロースハック〜SEO編〜
エンジニアによるグロースハック〜SEO編〜エンジニアによるグロースハック〜SEO編〜
エンジニアによるグロースハック〜SEO編〜
 
⑮jQueryをおぼえよう!その1
⑮jQueryをおぼえよう!その1⑮jQueryをおぼえよう!その1
⑮jQueryをおぼえよう!その1
 
これだけは抑えたいSEOの技術要件
これだけは抑えたいSEOの技術要件これだけは抑えたいSEOの技術要件
これだけは抑えたいSEOの技術要件
 
Yahoo!検索のパフォーマンス向上策全て見せます
Yahoo!検索のパフォーマンス向上策全て見せますYahoo!検索のパフォーマンス向上策全て見せます
Yahoo!検索のパフォーマンス向上策全て見せます
 
爆速フレームワークでREST APIを作った話
爆速フレームワークでREST APIを作った話爆速フレームワークでREST APIを作った話
爆速フレームワークでREST APIを作った話
 
ボクたちのWWW Webクリエイターのこれからを考える
ボクたちのWWW Webクリエイターのこれからを考えるボクたちのWWW Webクリエイターのこれからを考える
ボクたちのWWW Webクリエイターのこれからを考える
 
Web Site Optimization for Beginners
Web Site Optimization for BeginnersWeb Site Optimization for Beginners
Web Site Optimization for Beginners
 
ウェブパフォーマンスの基礎とこれから
ウェブパフォーマンスの基礎とこれからウェブパフォーマンスの基礎とこれから
ウェブパフォーマンスの基礎とこれから
 
歴史あるWebサービスに携わって2年半の間に起きた事やった事
歴史あるWebサービスに携わって2年半の間に起きた事やった事歴史あるWebサービスに携わって2年半の間に起きた事やった事
歴史あるWebサービスに携わって2年半の間に起きた事やった事
 
第2回勉強会資料 岩本(配布用)
第2回勉強会資料 岩本(配布用)第2回勉強会資料 岩本(配布用)
第2回勉強会資料 岩本(配布用)
 
スマホ向けWebアプリ開発で使えるフロントエンド高速化手法
スマホ向けWebアプリ開発で使えるフロントエンド高速化手法スマホ向けWebアプリ開発で使えるフロントエンド高速化手法
スマホ向けWebアプリ開発で使えるフロントエンド高速化手法
 
AMP & PWA
AMP & PWAAMP & PWA
AMP & PWA
 
スマートフォンサイト制作 よくあるトラブルと 解決方法・回避方法
スマートフォンサイト制作  よくあるトラブルと 解決方法・回避方法スマートフォンサイト制作  よくあるトラブルと 解決方法・回避方法
スマートフォンサイト制作 よくあるトラブルと 解決方法・回避方法
 
5分でわかるphalcon php
5分でわかるphalcon php5分でわかるphalcon php
5分でわかるphalcon php
 
クリエイターじゃなくてもできるWebサイト表示速度改善方法(事例のこぼれ話のおまけつき)
クリエイターじゃなくてもできるWebサイト表示速度改善方法(事例のこぼれ話のおまけつき)クリエイターじゃなくてもできるWebサイト表示速度改善方法(事例のこぼれ話のおまけつき)
クリエイターじゃなくてもできるWebサイト表示速度改善方法(事例のこぼれ話のおまけつき)
 
LT13(前半)Workshipにおけるレコメンドエンジン実装
LT13(前半)Workshipにおけるレコメンドエンジン実装LT13(前半)Workshipにおけるレコメンドエンジン実装
LT13(前半)Workshipにおけるレコメンドエンジン実装
 
ペアプロはリモートでもできる!
ペアプロはリモートでもできる!ペアプロはリモートでもできる!
ペアプロはリモートでもできる!
 
Practical migration from JSP to Thymeleaf
Practical migration from JSP to Thymeleaf Practical migration from JSP to Thymeleaf
Practical migration from JSP to Thymeleaf
 
2479
24792479
2479
 

Último

2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~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全国大会シンポジウム)IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)ssuser539845
 
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdfTaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdfMatsushita Laboratory
 
20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdf20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdfAyachika Kitazaki
 
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見Shumpei Kishi
 
2024 01 Virtual_Counselor
2024 01 Virtual_Counselor 2024 01 Virtual_Counselor
2024 01 Virtual_Counselor arts yokohama
 
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法情報処理学会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へ「今からでも間に合う」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~2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
2024 02 Nihon-Tanken ~Towards a More Inclusive Japan~
 
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
IFIP IP3での資格制度を対象とする国際認定(IPSJ86全国大会シンポジウム)
 
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdfTaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
TaketoFujikawa_台本中の動作表現に基づくアニメーション原画システムの提案_SIGEC71.pdf
 
20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdf20240326_IoTLT_vol109_kitazaki_v1___.pdf
20240326_IoTLT_vol109_kitazaki_v1___.pdf
 
2024 04 minnanoito
2024 04 minnanoito2024 04 minnanoito
2024 04 minnanoito
 
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
持続可能なDrupal Meetupのコツ - Drupal Meetup Tokyoの知見
 
2024 03 CTEA
2024 03 CTEA2024 03 CTEA
2024 03 CTEA
 
2024 01 Virtual_Counselor
2024 01 Virtual_Counselor 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?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技術によって実現するための課題と解決方法情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
情報処理学会86回全国大会_Generic OAMをDeep Learning技術によって実現するための課題と解決方法
 
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
「今からでも間に合う」GPTsによる 活用LT会 - 人とAIが協調するHumani-in-the-Loopへ
 

5分で詰め込む フロントエンド最適化

Notas del editor

  1. 結局これなんですよね。 案件や環境に依存してしまう。あとお金! そもそも実際に動いてるサイトに対してサーバとかを触ってしまうのはリスクが大きいですよね。
  2. ハイパフォーマンスWebサイというオライリーの本にも書いてあります。 Webでの待ち時間の8割がフロントエンドに費やされているという話があります。
  3. 勘違いされがちなのですが、実はHTML5以前でも省略できます。 liタグとかoptionタグとかは効果絶大です。
  4. 一番手っ取り早いのはインラインでJSやCSSを書いてしまうことです でも弊害があります。
  5. じゃあこれって結局どうすればいいのかと リクエストは減らせばいい?外部ファイル化
  6. cdnjs.comやGoogleのヘルプページなどでも使われていたりします。
  7. headの上部にひたすら羅列することで効果を発揮します。 ここで指定するドメインは何でも良いです。 画像でもCSSでもJSでも、外部に読みに行っているものを指定すると効果的です。 これ、ウォーターフローが結構面白くなるのでお見せしたかったのですが、 ウォータフローをキャプチャするサイトが障害で取れなかったのでお見せできませんでした。。
  8. フロントエンドの最適化は検証されて、データのある手法が他にもたくさんあるので、非常に奥が深いです。 色々試してみてください。