Pagespeed Insight で Lighthouse が利用されるように。表示速度は、より重要度を増す方向に。スコアアップした方法を公開しました。

Googleが提供するPagespeed Insightは、2018年11月14日から分析エンジンを監査ツールの Lighthouse に変更することを発表しています。Pagespeed Insightは多くのウェブ担当者の方が利用しているので、UIの変更などもあり気になっている方も多いのではないでしょうか。

そもそもPagespeed Insightとは?という方もいらっしゃるので、おさらいしていきます。

Pagespeed Insightとは

ウェブページの表示に関するパフォーマンスを点数化してくれます(100点満点)。また、改善できる箇所については、そのアドバイスもしてくれます。項目は固定化されており、項目ごとに改修を行うことで「スコアアップ=パフォーマンス向上」という流れになります。

利用するには

2018-12-04-psi-lighthouse-03.jpgPagespeed Insightの画面。非常にシンプルで操作に迷うことはありません。

利用するのは非常に簡単で、2ステップで完了します。パフォーマンスチェックしたいURLを入力欄にいれ、「分析」ボタンをクリックするだけです。あとは待つだけでレポートが完成します。

アイデアマンズブログをチェックしてみた結果

先週くらいにLighthouseを利用してコツコツとスコアアップをしていました。Pagespeed Insightでは計測していなかったので、今回チェックしてみました。対象はトップページです。

  • サーバ: AWS EC2 / nginx
  • CDN: 未導入
  • ページ表示: 静的配信

2018-12-04-psi-lighthouse-01.jpgPCはなんと100点満点。コツコツとやった苦労が実りました。

2018-12-04-psi-lighthouse-02.jpgスマホ表示は76点。まだまだ改善するポイントがあります。

PCでは100点が取れています。Lighthouseでは主にモバイルブラウザでの評価なので、PCでの評価は気にしていませんでした。でも、100点満点は気持ちいです。スマートフォン表示は、76点でした。あれ?Lighthouseでは92点だったのに...。もしかすると、回線環境に依存するのかもしれません。作業場所の回線はそこそこ高速回線(下り80Mbps、上り200Mbps)なので、ローカルで実行するLighthouseの場合はスコアがいいのかな。。。

2018-12-04-psi-lighthouse-04.jpgLighthouseでの結果は、Performanceが92点。PWAなどのスコアも今後改善予定。

パフォーマンス向上のために実施した改修ポイント

スコアアップってどうやるの?というのが最も気になるところだと思います。しかし、スコアアップは「これをやれば良い」という項目は提示されるものの「自分のサイトでどのように実施するのか」は十人十色です。「これやればいいよ!」というのは、あまり通用しません。というのも、ウェブサイトのデザインは同じではなく、フロントエンドの実装も個別だからです。なので、「これやればいいよ」というのはできるケースとできないケースが存在します。

多くのサイトでチェックしたほうが良いことをまとめていきます。

ウェブフォントのダウンロード量(+40点)

ウェブフォントは比較的重いです。しかし、多くの提供元で軽く読み込める方法が提供されています。また、ウェブフォントではなくフォントファイルをサーバに配置し、直接読み込ませているかもしれません。

アイデアマンズブログでは、NotoSansからM Plusに変更しました。どちらもGoogleFontを利用していましたが、これにより40点アップしました。

ソーシャルメディアのソーシャルプラグインの削除(+10点)

ウェブサイトに「いいね!」してくれた数を表示できるソーシャルプラグインですが、これが重いです。特にファーストビューにある場合は、かなりパフォーマンスに影響が出てしまいます。アイデアマンズブログでは、詳細ページの「いいね数」はマーケティングの都合で重要視しているので外しませんでしたが、トップページは思い切って削除しました。これにより10点アップしています。

画像遅延読み込み

Lazyloadなどの画像遅延読み込みの導入です。アイデアマンズブログでは、シックス・アパート社が提供するオウンドメディアのテーマ「Rimo」をカスタマイズして利用しています。非常に使いやすいテーマですし、オウンドメディアを始めるにはぴったりです。

ただ、画像遅延読み込みはついていません。ぜひ導入しましょう。

画像軽量化も重要です

アイデアマンズブログでは、自動の画像軽量化ツール「LightFile」が動いています。そのため、画像は常に軽量化された状態となっており、LighthouseやPagespeed Insightでも該当する項目をほぼ気にすることはありませんでした。さらに、WebP対応もできているので、画像周りに関してはほぼやることがないレベルに仕上がっています。

多くのウェブサイトは、まず画像軽量化と画像遅延読み込みを行うことが多いと思います。画像軽量化は、ぜひ自動でできるものを選択してください。手動での運用は限界があり、必ず未処理のファイルがでてきてしまいます。

JPGの軽量化は、LightFile | 画像最適化でページ表示を高速に!

JPGの最適化は、LightFile | 画像の最適化でページ表示を高速に!

自動でJPEGファイルを容量削減し、表示の高速化/転送量の削減を実現します。

月額1万円から利用できる高性能な画像軽量化ツール「LightFile」は、大手アパレルメーカーやメディアサイトなどで利用されています。特に画質の良さには定評があります。

最後に

パフォーマンスのスコアアップは、ウェブサイトに来てくれる人を待たせることなく情報を提供できるためにあります。しかし、スコアが出る以上、スコアアップを究極に目指すことも楽しくてよいと思います。点数のためにコンテンツが疎かになることもないはずですし、スコアアップは必ずよい結果に結びつくと思います。

関連情報

画像軽量化に関して気になっている方は、以下のフォームからお気軽にリクエストください。無料で画像軽量化のレポートを私がお送りします!

メール無料相談

お聞きになりたいことはありませんか? この記事の筆者 グロースハッカー能勢 がまずはメールで疑問やお悩みを伺います! フォームよりお気軽にお寄せください。

  • PageSpeed Insightsのスコアを上げたい。
  • PageSpeed Insightsのスコアの目標を設定したい。
  • PageSpeed Insightsの採点ロジックを知りたい。

前へ前へ

月刊アイデアマンズブログ 2018年11月の人気ブログ記事は?MTDDC Meetup TOKYO 2018ではスポンサーとセッション登壇を行いました。

次へ次へ

ランキング30位まで表示可能に!人気ランキングウィジェット「Ranklet」の有料版がちょこっと機能アップしました!