PageSpeed Insightsについて

サイト制作やSEOを生業にしている人なら利用したことがあるであろう

「PageSpeed Insights(ページスピードインサイト)」。

マイナーチェンジはちょこちょこと繰り返していたものの、2018年11月頃から評価方式が特段に厳しくなり、製作中のサイトでもその影響を受け、日々改善の道を探っています。

いくつかの方法を試して、少しずつスコアを伸ばすことに成功にしたので、その方法について書いていきたいと思います。

PageSpeed Insightsを使ってみる

「PageSpeed Insights(ページスピードインサイト)」はGoogleによるサイト（ブログ）の高速最適化診断サービス。

ページの読み込み時間を短くするための方法を提案してくれるツールです。

使い方はとても簡単です。

テキストボックスに調べたいURLを打ち込むだけで、数秒待てばスコアを表示してくれます。早速サイトのURLを入れると…

何も対策していないとこんな点数になってしまいました。この結果の点数の通り、体感でもあまり軽いとは言えない。

早急に改善が必要です。

PageSpeed Insightsの評価の改善方法

ここで出てくるスコアの数値は、「表示スピードの順位」とされています。

スピードの指標は、

100人が競争した時に例えて、1位相当が100点、2位相当が99点、、

という統計的な数値になっているそうです。

統計なら別に正確無比な情報じゃないし、、、という考え方もありますし、気にしすぎてもできることがなくなってしまい、より良いサイトにならないケースもあります。

ですが、

SEO観点で見てもここで低すぎるスコアのサイトが上位を占める

ということは多くありません。良いスコアであることに越したことはないのです。

テキストメインのブログサイトのテーマでは形も決まっていますし高得点は出しやすいようですが、オリジナルのテーマでは色んな効果や編集箇所が多くなればなるほど、サイトは重たくなりがちです。WordPressのプラグインで簡単にできるものもあれば、テーマの中のphpファイルを編集しなくてはならないものもあります。

出来るだけ現状のサイトの構成やデザインを変えずにどこまでできるか。以下の事をしました。

iframeで読んでいるGoogle Mapを遅延読み込みさせてみる

どこから手を付けて行こうか…と思っていた時に、PageSpeed Insightsの結果画面の「次世代フォーマットでの画像の配信」という項目に、これを見つけました。

Google Mapは公式でURLをコピーするだけで地図を表示してくれて便利なのですが、読み込むまで少しだけ時間がかかる事があります。

iframeの特性上、外部サイトから拾ってきて出力をするというのは当然時間がかかります。YOUTUBEなどを埋め込む場合でも同様です。

これを最初から読み込まず、遅延読み込みにできないか？と考えました。

このサイトでは既に「lozad.js」というjsライブラリを使って、画像を遅延読み込みをする記述は作ってありました。

lazyloaderなど、WordPressプラグインで簡単にできるものもいくつかありますし、jQueryで簡単にできるものも結構あるのですが、lozad.jsは「Intersection Observer API」というのを使用していて、SEO的にも有利だという情報があったのでこちらで実装しました。

実装も割と簡単にできますし、これから遅延読み込みを実装する方にはかなりオススメのjsライブラリですよ。実装方法などはこちらの記事などを参考にしてみました。

IntersectionObserverベースな、遅延読み込みライブラリのLozad.jsを紹介する

設定が済めば、あとはclassとsrc属性を変更するのみ。結果はこちら。

モバイルが11、パソコンが9 とそれなりの評価を出してくれました。

少し読み込みのタイミングを遅らせるだけでスコア的にも表示速度的にもアップしてくれるのは助かりますね。

レンダリングを妨げるJavascriptにasync属性を付与する

次にやったのは「レンダリングを妨げるリソースの除外」という項目にあるJavascriptの除外です。

…jquery/jquery.js?ver=1.12.4-wp

…jquery/jquery-migrate.min.js?ver=1.4.1

など大きなデータ量を持っているJavascriptファイルがいくつかありました。これはプラグインや自分で足したものではなく、WordPressが自動的に呼び出すファイルです。

場所はwp_headの中にあるようです。これをfunctions.phpに以下の記述を追加して改善を計ります。

これは

if ( strpos( $url, '○○○.js' ) ) return $url;

にあたるJavascriptファイル以外をすべてasync属性を付与して、非同期処理にする、というものです。Javascriptの処理のタイミングをずらし、他の処理が完了した段階で呼び出し元に通知し時間の掛かる処理の結果を待たずにすぐ次の処理を実行できる仕組みというのが非同期処理です。

除外対象になっているjsは、当初はjQuery.min.jsとjQuery.jsだけでしたが残る2つ(使用しているプラグインに含まれるjs)のエラーが出てしまい、実際に動かなくなってしまった為、この2つも除外対象にしました。その結果がこちら。

更にモバイルが9、パソコンが一気に15伸びました！大部分の機能にかかわってくるjQueryの影響は大きいようです。

プラグイン「Autoptimize」を使用する

遅延読み込み、Javascriptファイルの非同期の次は、CSSです。CSSは文字列だけとはいえ、レスポンシブサイトのための上書きが多かったり、外部ファイルとしてフォントアイコンを使ったりしている場合も多いので意外とページの読み込みに負担がかかっているケースが多いです。

一列にまとめて圧縮するイメージでminify化すると幾分負荷を下げることができます。これは自力でやることもできますが、cssファイルの数が多ければ多いほど管理は大変です。

そこで有名プラグイン、「Autoptimize」を使用してみます。設定方法は以下。

１.  画面上部の「高度な設定を表示」をクリック。Javascriptオプション、CSSオプション、HTMLオプションなどが開きます。

２.  Javascriptオプションの「JavaScript コードの最適化」にチェックを入れる。

３.  CSSオプションの「CSS コードを最適化」「Aggregate CSS-files?」「インラインの CSS を連結」「すべての CSS をインライン化」にチェックを入れる。

４.  HTMLオプションの「HTML コードを最適化」にチェックを入れる。

５.  「変更を保存してキャッシュを削除」をクリック。

以上で大丈夫です。２の「インラインの CSS を連結」「すべての CSS をインライン化」の2つに関してはCSSの優先順位や書き方が甘いとスタイル崩れの原因となるので充分に注意してください。その結果がこちら。

モバイルが8あがり、パソコンは1下がった…？？でも、モバイルの方では確実に成果があったので、パソコンの方は誤差だと信じて…最後にもう一つだけやってみました。

出力される画像のサイズをきっちり決める

今までの中でもしかしたら一番基本的な事かもしれません。

商品名やブログのアイキャッチなどの画像。

例えば、縦300px × 横300px の画像が表示される場所。ここはサイトの構造上、極端なサイズの画像を入れてしまっても縦300px × 横300pxのサイズにCSSによってリサイズされて表示されるように設定はしてあります。

ですが、やはり大きい画像になればなるほどその分データ量は増えていきます。大きかったり小さかったりの画像をCSSである種無理矢理該当のサイズに見えるようにしていても、その分のデータ量を受信しているのは変わらないからです。しかし小さい画像ばかりでは何がなんだかわからなくなってきます。なので、大きいサイズの画像を設定したとしても、

あらかじめ指定したサイズの画像が生成

されて、それが使われるように記述を変えました。また、以下をfunctions.phpに追加します。

これでこれ以降にメディアに追加した画像はa、b、c、d、eのそれぞれのサイズが今後追加された時に生成されるようになります。ですがこのままでは、既に追加してある画像に関しては生成されないようです。また一から全部入れ直さなければいけないのか…というところで、「AJAX Thumbnail Rebuild」というプラグインを知りました。

このプラグインを有効化後、管理画面の「ツール」→「Rebuild Thumbnail」にいくと先程の記述したサイズの画像が再生成できるようになっています。再生成が完了後、出力される画像のサイズが変わって指定したサイズに変更されました。

※画像を出力するphpの記述は「サイズaを出力する、サイズbを出力する」などに書き直さなくてはなりませんが…

これを踏まえて、また計測した結果がこちら。

モバイル、パソコン共に1のみあがりました。あとから考えると、デモ製作中に仮で入れていた画像にさほど極端なサイズのものがなかったので、大きく縮小できたわけではなかった、という結論になりました。

大は小を兼ねる！として大きいサイズの画像をたくさん使用している方にはこれはかなり有効だと思います。

まとめ

ここまでの経過としては

モバイルが29、パソコンが23

スコアをあげることができ、実際の体感でも改善前に比べると軽くなりました。普通に閲覧する分には何も問題はなさそうです。ですが、まだまだ改善方法はありそうです。次回は更に高得点を目指します。