PageSpeed Insightsを改善するにはフォントも画像もとにかくサイズを減らすべし

シェアする：

更新日時：2020年7月17日

この記事をおすすめしたい人

  • PageSpeed Insightsで高得点目指している人
  • ネットでPageSpeed Insightsの改善方法探したけど何故か改善しない人
  • つまりオレ

何も知らない超初心者が脱WordPressしたくてNuxt.jsでサイト構築していくシリーズです。

前回、「静的出力だから爆速！」予定のNuxt.jsのはずが、PageSpeed Insights(以下PSI)で計測すると思ったほどのスコアが出なかった話をしました。

無理矢理高得点取るためにWebフォントの削除、JavaScriptの削除を行いましたが、これでは本末転倒です。

PSIの点数は気になってる人多いと思うんですよね。 ですがネットで調べてそれを取り入れてみても…。

なんで改善せえへんねん！！

って思ってる人多いんじゃないかと思います。
オレだけ？

なので今回は、ネットで調べたけどPSIスコアが改善しなかったけど、もっかい読み直して妥協せず取り組んだらかなりの高得点が取れた話をしたいと思います。

WordPressの上でな！

※ このブログはWordPress製です

実験開始時のスコア

何も考えずに作ったままPSIに突っ込んだ時のスコアです。

減点内容は以下の通り。

  • Webフォントの読み込みがレンダリングを妨害している
  • Nuxt.jsが読み込むJavaScriptに未使用部分があるので減らしなさい
  • 使用していないCSS(Webフォント)を削除しなさい
  • 画像のファイルサイズが大きすぎるので減らしなさい

Webフォントの問題はちょっとヘビーなので、いったんWebフォントは外したまま実験を続けます。

画像の最適化

「JPEG 2000/JPEG XR/WebPなどの次世代フォーマットを使いなさい」と指摘されていました。

この中ではWebPかなーと考えているんですが、WebPはSafariで表示できません。

他のも普及率がいまいちで、「これ使っとけば安心！」みたいなのがありません。

安心、それはJPEGのことです。

新しいもの好きの僕としては是非ともどれか試したかったんですが、この状況ではねー。

別のアプローチを考えます。

JPEG画像の圧縮率を上げた

Web用の画像はいつも画質60で書き出していたんですが、思い切って30まで下げてみました。

この結果、一番大きい画像のサイズが103KBから64KBまで減少。

その他も出力後の画質を確認しながら画質30で変換していきました。 だいたい2～4割くらい小さくなるようです。

背景画像はそんなに画質いらないと思うので、思い切って画質10とかもありかもしれないです。 その場合103KBが32KBまで減りました。

ただ、JPEGの癖なのか、画質を下げすぎると変な模様が浮き出てきたりします。 画質を下げるときは出力結果を確認しながら調整した方がよさそう。

サイズ(幅/高さ)の最適化

横着せずに配置場所に応じて画像サイズの最適化を行いました。

事前に表示サイズが確定している場合にはそのサイズに合わせ、レスポンシブ用にsrcset指定など。

とてもめんどくさいです。

PNGは極力使わない、使う場合はしっかり圧縮

PNGはファイルサイズが大きいので基本使わないようにしていますが、JPEGでは透過画像が扱えないのでその場合だけやむなくPNGです。

「透過ならPNG！」と思考停止はせずに、どうしても透過にせざるを得ない箇所だけに限定してPNGを使うようにしました。

最後に、出力したPNGをTinyPNGにかけて圧縮！
だいたいインデックスカラーというのになるので、思っている以上にサイズが減ります。

SafariがWebP対応するらしい！！

次期Safariのβ版のリリースノートにこう書いてあります。

Added WebP image support.

これが正式にリリースされればWebP一択でやりやすくなりますね！！

画像の最適化の結果

おおぉ！！？

Webフォント未使用とは言え、劇的に改善しました。

画像の最適化はとても大事。

JavaScriptは入れたままなんですが、怒られなくなりましたね。

何故でしょう…。 累計で一定以上超えると警告とかそんな感じなんでしょうか。

残った課題は、リクエスト数を減らしなさいとか、最大コンテンツの描画を速くしなさいとか、そんな感じです。

試しにJavaScriptを外してみた

上の状態からJavaScriptの読み込みをやめてみました。

！？！？！？

とうとう100点でました。

Webフォントなし、JavaScriptなし、画像の最適化あり、です。

やはりJavaScriptの減点分はけっこう大きいので、本当に必要なものだけを使った方がいいんでしょうね…。

Webフォント込みで高得点を目指す

Webフォントは見た目の問題もありますが、全ての端末でフォントを統一できるという点が非常に大きいと思っています。

どうにか入れたいので、試行錯誤してみます。

まずはスタイルシートで読み込み

一番一般的なやり方ですね。

以下、「Noto Sans JP」を例に。
Noto Sans JPは16pt以下とかの小さいサイズでも綺麗に表示してくれるのが気に入っています。 


<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP" rel="stylesheet">

このままだとPSIに「ウェブフォント読み込み中のテキストの表示」と怒られるので、読み込むまではデフォルトフォントを使う指定をつけます。 


<link href="https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap" rel="stylesheet">

この状態でPSIの結果がコレ↓。

93点のHTMLに1行足しただけでほぼ半壊です。

スタイルシートをHTMLに組み込んでみた

WebフォントのスタイルシートをNuxt.jsのプロジェクトに組み込み、<head>内の<style>タグに挿入してみます。

期待している効果としては、「外部サイトに通信しなくて済む」「無駄な改行・空白のサイズを減らせる」です。

結果↓。

わずかに上昇していますが、PSIは通信状態によってか、計測毎に微妙にスコアが変わるので1点差は誤差でしょう。

@font-faceを使う

Googleからダウンロードしてきたフォントを自分のサーバに上げて、CSSの@font-faceで読み込む方法です。

ダウンロードしてきたフォントには拡張子otfやらeot、woff、woff2と何種類もあり、フォントの太さ(regularやboldなど)も含めるとものすごい数になります。

欲をかいて複数指定したりはせず、Googleのスタイルシートに習い、拡張子「woff2」、太さ「Regular」の1点だけ読み込みます。 


@font-face {
  font-family: 'Noto Sans JP';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: local('Noto Sans Japanese Regular'), local('NotoSansJapanese-Regular'), url(~assets/noto-sans-jp-v25-japanese_latin-regular.woff2) format('woff2');
}

結果↓。

かなりよくなりました。

Webフォントのサブセット化

こちらでフォントのサブセット化という話を見つけました。

フォントファイルから使わない文字を省くことでファイルサイズ減少を狙うみたいです。

「フォントに格納する文字」が明示されていないので困りましたが、こちらのサイトで一覧が挙がっていたので使わせていただきました。

さっそくやってみると、Noto Sans JPの場合4.26MBが473KBにまで(－89％)、M PLUS 1pの場合4.32MBが353KBにまで(－92％)減らすことができました。

さっそくこの状態でPSIに突っ込んでみると…。

すごい！！

残すエラーが「使用していない JavaScript の削除」だけだったので、JavaScriptオフにしてみると…。

！？！？！？

JavaScriptは省いたといえど、Webフォントありで99点にまでなりました。

これまでの実験結果から見るに、「Webフォントがダメ」なんじゃなくて「ファイルサイズがでかいとダメ」という印象を受けます。

まとめ

画像もWebフォントも(たぶんJavaScriptも)とにかくサイズが大きいから減点されるんだ！
手抜きせずサイズダウンを図るべし。

画像についてはこれ↓をチェックすべし。

  • ちょっとの画質ダウンは妥協して、圧縮率を上げるべし
  • 大きさは横着せずジャストサイズに調整すべし
  • PNGは極力使わない
  • SafariのWebP対応を待て！もうすぐだ！

Webフォントについてはこれ↓をチェックすべし。

  • そのWebフォント本当に必要？
  • 必要なら@font-faceでdisplay: swapにすべし
  • かなりめんどくさいけどサブセット化してサイズダウンを図るべし
  • そのWebフォント本当に必要？(2回目)

Nuxt.jsが静的HTMLだからと言って手を抜いていいわけではないみたいです。 Core Web Vitalsとかいう新しい指標も来るみたいですし、今のうちから高速表示させる方法に慣れておきたいですね！

最終的にもうちょっと画像を最適化して93点までいきました。

以上、WordPressからお届けしました！

PageSpeed Insightsの目次

シェアする：
PageSpeed Insights