23
21

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Posted at

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!!

23
21
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
23
21

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?