GDG DevFest Tokyo 2018で聞いたお話を忘れないうちに備忘録もかねて
Webサイトのパフォーマンス改善
フロントエンドのパフォーマンス測定ってどうやってます?
PageSpeed Insightsを使ったり色々なWebサービスを使ったり、あるいはnpmでツールを入れてみたりしていると思います。
なんですが、このあたりの調査ってGoogleChromeの開発者ツール、Auditsのタブから(だいたい)できちゃいます!
開発者ツールのこの項目から実行できるので、「Run Audits」を押してぜひ実行してみましょう!
Auditsで調べられるもの
QiitaのTOPページをAuditsしてみた結果です!
- パフォーマンス
- PWA
- アクセスのしやすさ
- ベストプラクティスに則っているか
- SEOへの考慮
Auditsのタブからlighthouseが起動されて、上記の項目をチェックしてくれます!
どういうチェックが走るのか、というのはこのページに全部書いてあります!
画像が最適化されてないとか、jsがレンダリングブロックを発生させてしまっているとかでしょうか、
そういうチェック対象の一覧と対策方法が書いてあるので、これを見ればだいたい解決できてしまいます!
Performanceが100点の最強のサイト
パフォーマンス改善をする上で中々100点って取りにくいのです。
GoogleのTOPページでも77点だったりするので
そんな中、100点を叩き出すサイトを見つけたので貼っておきます
SIMPLE IS BEST!!