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

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

PageSpeed Insights、Lighthouse の使用を開始しました | Googleウェブマスター向け公式ブログ

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

Pagespeed Insightとは

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

PageSpeed Insights について

利用するには

Pagespeed Insightの画面。非常にシンプルで操作に迷うことはありません。

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

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

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

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

PCはなんと100点満点。コツコツとやった苦労が実りました。

スマホ表示は76点。まだまだ改善するポイントがあります。

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

Lighthouseでの結果は、Performanceが92点。PWAなどのスコアも今後改善予定。

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

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

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

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

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

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

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

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

画像遅延読み込み

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

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

オウンドメディアにぴったりな Movable Type 用テーマ「Rimo」を公開しましたの巻 [ほぼ週刊SA]

画像軽量化も重要です

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

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