-
kimukou2628
- 2217
- 0
- 0
- 0
![](https://s.togetter.com/static/web/img/placeholder.gif)
登壇終わりました!ありがとうございました! #DevFest18 twitter.com/d_date/status/…
2018-09-01 12:11:49![](https://s.togetter.com/static/web/img/placeholder.gif)
In-App Messagingめっちゃ簡単にモーダル作れるみたい #Firebase #DevFest18 pic.twitter.com/rChN3RXkfd
2018-09-01 12:13:08![](https://pbs.twimg.com/media/Dl-kBQVU4AAdaJj.jpg:medium)
![](https://s.togetter.com/static/web/img/placeholder.gif)
このあと12:50から発表する「Angularの最新情報」のスライドです。知っておきたいAngularの最新トピックスを詰め込みました。ルームA+Bでお待ちしてます〜 slides.com/laco/devfest-t… #DevFest18 #DevFest18AB
2018-09-01 12:15:56![](https://s.togetter.com/static/web/img/placeholder.gif)
#DevFest18 「FlutterPluginの作り方」のセッションに来ていただいた方ありがとうございました!!何か疑問点等ありしたら気軽に聞いていただけますと答えます。
2018-09-01 12:19:31![](https://s.togetter.com/static/web/img/placeholder.gif)
#DevFest18 と #iosdc 両方にご参加していて、かつiOSDCの懇親会のチケットを持っている方にご連絡です。懇親会チケットの受付は15時までとなっています。15時までの発見をお願いいたします🙇♂️
2018-09-01 12:20:56![](https://s.togetter.com/static/web/img/placeholder.gif)
ご参加頂いた皆様、ありがとうございました。最後駆け足でしたが、Webのパフォーマンスに興味をもっていただけたでしょうか?何点がパフォーマンス改善のポイントをお伝えしましたが、こちらで振り返りたいと思います。 #DevFest18 #PerfMatters
2018-09-01 12:27:19![](https://s.togetter.com/static/web/img/placeholder.gif)
まずはLighthouseです。v3.0からAuditの項目が増えて非常に使いやすくなったので、是非ともお試しください。 developers.google.com/web/tools/ligh… #DevFest18 #PerfMatters
2018-09-01 12:27:20![](https://s.togetter.com/static/web/img/placeholder.gif)
「なるべく軽く、そして同じものは送らいない」コードのminifyや圧縮は必須で行ってください。MinifyはUglifyJSなどのモジュールを使ってみてもいいですし、CDNの機能をレバレッジするのもいいと思います。 github.com/mishoo/UglifyJS #DevFest18 #PerfMatters
2018-09-01 12:27:20![](https://s.togetter.com/static/web/img/placeholder.gif)
JavaScriptは最もコストがかかるリソースです。ダウンロードだけでなく実行までにParse/Compileも必要。大きなバンドルはCode Splitしましょう。本日はDynamic importを使ったcodesplitをお見せしましたが、詳しい話はこちらをご確認ください。 developers.google.com/web/fundamenta… #DevFest18 #PerfMatters
2018-09-01 12:27:20![](https://s.togetter.com/static/web/img/placeholder.gif)
画像は圧縮 & LazyLoadしてください。圧縮はCDNをレバレッジしてもimageminなどのモジュールを使うのもありです。@addyosmani のEssential Image Optimizationは非常に勉強になります。 images.guide #DevFest18 #PerfMatters
2018-09-01 12:27:21![](https://s.togetter.com/static/web/img/placeholder.gif)
スクロールに応じたLazyLoadは本日はIntersection Observerを利用しましたが、lazysizesなどのライブラリを利用するのもよしです。カルーセルは意外と盲点です。First Viewに必要な分だけに絞るとこれまたよしです。 developer.mozilla.org/en-US/docs/Web… github.com/aFarkas/lazysi… #DevFest18 #PerfMatters
2018-09-01 12:27:21![](https://s.togetter.com/static/web/img/placeholder.gif)
link rel=preload, preconnect, prefetchなどを使ってブラウザに何を早めに届けてほしいかをお伝え下さい。こちら非常に強力なWeb APIなので以下をご参照のこと。 medium.com/reloading/prel… #DevFest18 #PerfMatters
2018-09-01 12:27:22![](https://s.togetter.com/static/web/img/placeholder.gif)
Web Fontのコントロールもfont-displayを使うと簡単にできます!パフォーマンスを考慮してfont-display:optionalで100ms以内にWeb Fontが落とせなければ(=Service Worker等キャッシュしてない限りは)システムフォントを使うという戦略もありです。 developer.mozilla.org/en-US/docs/Web… #DevFest18 #PerfMatters
2018-09-01 12:27:22![](https://s.togetter.com/static/web/img/placeholder.gif)
Render Blocking Scriptsはasyncかdeferしましょう。AsyncとDeferの違い含めローディングまわりのTipsはこちらの動画で非常に楽しく勉強できます! youtu.be/vAgKZoGIvqs #DevFest18 #PerfMatters
2018-09-01 12:27:23![](https://s.togetter.com/static/web/img/placeholder.gif)
また、DevtoolsのCode CoverageやCritialを使うと、表示エリアでに使用されているCSSのみを確認・抜き出すことができます。「最低限」をインライン化してFirst contentful/meaningful paintを最適化しましょう! github.com/addyosmani/cri… #DevFest18 #PerfMatters
2018-09-01 12:27:23![](https://s.togetter.com/static/web/img/placeholder.gif)
本日のフォローアップとして是非ともこちらの動画を参照いただけますともろもろ理解が深まるかと思います。是非ともみんなでパフォーマンス改善に燃えましょう!本日はありがとうございました!! youtube.com/watch?v=Mv-l3-… #DevFest18 #PerfMatters
2018-09-01 12:27:24