Posted at

サイトの速度改善をしたい?それChromeのAuditsで(だいたい)できるよ!

More than 1 year has passed since last update.

GDG DevFest Tokyo 2018で聞いたお話を忘れないうちに備忘録もかねて:relaxed:


Webサイトのパフォーマンス改善:airplane:

フロントエンドのパフォーマンス測定ってどうやってます?

PageSpeed Insightsを使ったり色々なWebサービスを使ったり、あるいはnpmでツールを入れてみたりしていると思います。

なんですが、このあたりの調査ってGoogleChromeの開発者ツール、Auditsのタブから(だいたい)できちゃいます!

image.png

開発者ツールのこの項目から実行できるので、「Run Audits」を押してぜひ実行してみましょう!


Auditsで調べられるもの

image.png

QiitaのTOPページをAuditsしてみた結果です!


  • パフォーマンス

  • PWA

  • アクセスのしやすさ

  • ベストプラクティスに則っているか

  • SEOへの考慮

Auditsのタブからlighthouseが起動されて、上記の項目をチェックしてくれます!

どういうチェックが走るのか、というのはこのページに全部書いてあります!

画像が最適化されてないとか、jsがレンダリングブロックを発生させてしまっているとかでしょうか、

そういうチェック対象の一覧と対策方法が書いてあるので、これを見ればだいたい解決できてしまいます!


Performanceが100点の最強のサイト

パフォーマンス改善をする上で中々100点って取りにくいのです。

GoogleのTOPページでも77点だったりするので:pensive:

そんな中、100点を叩き出すサイトを見つけたので貼っておきます:v:

image.png

image.png

SIMPLE IS BEST!!