Googleの提供するPageSpeed Insightsを参考にして、Webサイトを高速化したときにやったこと

こんにちは、ライターのモリイです。

Googleが提供しているPageSpeed Insightsというサービスがあります。これは、ウェブページのコンテンツを解析してページの読み込み速度を測定し、速度の改善策を提案してくれるサービスです。

たかがページの読み込み時間、と侮ることはできません。
読み込み時間が短くなることで、

• Googleに評価される。
• ユーザーにストレスをあたえない。

というメリットがあり、Google検索での順位をあげるためや、ユーザに離脱されないためにも重要な要素となります。今回は、このツールを使ってサイトの読み込みスピードを実際に上げてみようと思います。

ページの読み込みスピードを分析してみる

画面中央のフォームにサイトのURLを入力し、「分析」をクリックします。

モバイルで読み込んだ場合と、パソコンで読み込んだ場合の両方で、スコアと改善内容が表示されます。

【スコア】

【改善内容】

真っ赤っ赤です。全然ダメですね……反省です。ここから心機一転し、改善に取り組みます。

ツールから提案された修正項目は以下になります。

1. 画像を最適化する
2. スクロールせずに見えるコンテンツのレンダリングをブロックしているJavaScript/CSS を排除する
3. ブラウザのキャッシュを活用する
4. HTML,CSS,JavaScriptを縮小する

あまり馴染みのない項目もありますが、やっていきましょう。

実際に改善してみよう

各提案にはGoogleから推奨される解決方法が記載されています。順番にやっていきます。

1. 画像を最適化する

Googleは、「画像に適切なフォーマットと圧縮を選ぶことで、データ サイズを大きく削減できます」と言っています。そこで、画像圧縮ツールを使用し、画像のサイズを小さくしましょう。

「でも、画像加工ソフトを持っていない」という方もいるかもしれません。その場合はWebサービスを使いましょう。

例えば、pngファイルであれば、ドラッグ・アンド・ドロップするだけの「TinyPNG」が便利です。

jpegファイルであれば、「JPEGmini」なんていかがでしょうか。

また、以下のような画像圧縮プラグインを利用することもできます。

EWWW Image Optimizer

https://wordpress.org/plugins/ewww-image-optimizer/

（使い方の詳細については、日本語解説記事もあります）

これでだいぶページが軽くなりました。それでは、次に行きます。

2. スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する

GoogleはJavaScriptについて、2通りの解決方法を推奨しています。

1. 小さな JavaScript をインライン化する

これは、外部スクリプトの内容が小さい場合はHTMLに直接記述することでJavaScriptの読み込みを減らしてページの表示を速くするというものです。残念ながら今回は対応できそうなものがなかったので実行はしませんでした。

1. JavaScript の読み込みを遅らせる

これはHTMLのscript要素にasync属性を記述するというものです。これによってJavaScriptを非同期で読み込むことができます。

今回は上記の内容に加え、JavaScriptをwp_footer()内で呼び出すようにしました。
本来であればwp_head()内で読み込まれることが多いかと思いますが、wp_enqueue_scriptを実行する際に、パラメーターの最後にtrueを記述することでwp_footer()内で呼び出すようにしています。ただし、利用状況によってレイアウトが崩れたり、思った挙動がされなくなることがありますので、1つ1つ確認して実装しましょう。

またプラグインを利用することで、実装することもできます。

Asynchronous Javascript

https://wordpress.org/plugins/asynchronous-javascript/

次は、CSS配信の最適化を行います。
Googleは、次の3つの解決方法を推奨しています。

1. 小さな CSS ファイルのインライン化

先ほどのJavaScriptの例と同じように、HTMLに直接記述をすることで読み込みするファイルを減らすというものです。これはすぐ出来ますね。

1. 大きなデータ URI をインライン化しない

小さなCSSファイルをインライン化すると読み込みファイルを減らすことができますが、データ量の多いものをインライン化するとスクロールせずに見える範囲のCSSのサイズが大きくなり、読み込み時間が遅くなってしまいます。

1. CSS 属性をインライン化しない

コードの不要な重複につながる場合があるため、HTML要素にCSS属性（< p style=…> など）をインライン化するのはできるだけ避けてください。

例によって、プラグインを利用することで、実装することもできます。

Async JS and CSS

https://wordpress.org/plugins/async-js-and-css/

（使い方の詳細は日本語解説記事で）

3. ブラウザのキャッシュを活用する

これについては、.htaccessを設置してブラウザキャッシュを設定することにより解決できます。
.htaccessは、設置したディレクトリ以下に適用されます。弊社の場合はWordPressインストール時に展開されたディレクトリ内に置きました。

.htaccess内に以下の内容を記載してください。

<ifModule mod_expires.c>
ExpiresActive On
ExpiresByType text/css “access plus 15 days”
ExpiresByType image/gif “access plus 10 days”
ExpiresByType image/jpg “access plus 10 days”
ExpiresByType image/jpeg “access plus 10 days”
ExpiresByType image/png “access plus 10 days”
ExpiresByType application/x-javascript “access plus 10 days”
ExpiresByType text/x-javascript “access plus 1 month”
ExpiresByType application/javascript “access plus 1 month”
ExpiresByType application/x-javascript “access plus 1 month”
ExpiresByType text/js “access plus 1 month”
ExpiresByType text/javascript “access plus 1 month”
ExpiresByType application/x-shockwave-flash “access plus 1 month”
</ifModule>

なお、Apacheのモジュール「mod_expires」に対応している必要があります。
また、記述する期間はサイトの運用状況によって変更が必要になります。キャッシュ系のプラグインは、扱いが難しいので推奨はいたしません。

4. HTML,CSS,JavaScriptを縮小する

Googleからは余分なスペース、改行、インデントなどの不要なバイトを取り除くことが必要だと言われています。

Webサービスで実装できるものがあります。

Refresh-SF

http://gpbmike.github.io/refresh-sf/

対象ファイルをドラッグ・アンド・ドロップして、右上のJavascript・CSS・HTMLの該当するボタンをクリックします。

改善してみた結果

スコアは上がりましたが、Googleはスコア85以上がパフォーマンスの高いページだと言っているので、まだまだ改善が必要ですね。

まとめ

上記以外にも改善方法はあるかと思います。またサイトの運用状況によっては変更することで不具合が出ることもありますし、必ずしも全ての項目を修正できるとは限らないと思います。

ただ、できる範囲で少しでもページの読み込み速度を速くすることができればいいと思います。

みなさんも試してみてはいかがでしょうか。

【Webサイト運用は、Googleのツールでもっと賢く。】

※ Google Analyticsの「ベンチマーク機能」で競合サイトと自社サイトを比較しよう

※ Googleアナリティクスで効率的にデータ解析ができる「インテリジェンスイベント」の使い方

※ GoogleアナリティクスとAdSenseやAdWordsなどの外部ツールを連携してみよう

※ セグメントやオリジナルのレポートを作成してGoogleアナリティクスを活用しよう

※ クリック率UP!? ディスプレイ広告を改善するターゲティング設定