Google Developer では無料サービスの1つとして「PageSpeed Insights」という「ウェブページのコンテンツを解析し、ページの読み込み時間を短くするための修正方法を提案してくれるツール」が提供されています。
PageSpeed Insights でサイトの読み込み速度を検証
当の「PageSpeed Insights」ページの結果
ちなみに当の「PageSpeed Insights」のページもチェックできて、このような結果が出ています。
モバイル96点、パソコン97点という、ほぼ満点の結果です。さすがですね。
点数を気にし過ぎないように
しかし、Google の作ったウェブページであっても「修正を考慮」「修正が必要」と提案されるので、一般のサイトで検証してみて、多少の注意喚起があったとしてもそこまで過敏に反応する必要はないでしょう。
またレンタルサーバーが遅延の原因となっていることもありますので、サイト管理者にはどうすることもできない場合もあります。
ツールを活用する理由
しかし、ウェブページの表示速度はSEO的にも重視されています。表示するのがあまりに遅いと、サイト訪問者に不利益なだけでなく、サイト全体の評価を下げてしまいかねません。ウェブページの読み込み時間を短くすることは、管理者の側にとっても、サイト訪問者にとってもメリットがあることなので、ぜひ活用したいところです。
よくある「修正が必要」項目
さて、こちらでサイトの表示速度をしらべてみると、よく出てくるのが「スクロールせずに見えるコンテンツのレンダリングブロックJavaScript / CSS を排除する」でしょう。
修正が必要な箇所を具体的にファイル名で教えてくれるのでわかりやすいですね。ピンポイントで問題点がわかります。以下、見ていきましょう。
問題点の修正方法を具体的に提案してくれる
「レンダリングブロック JavaScript を削除してください」
プラグインが原因なことはよくあります。Amazon や楽天のスクロールするタイプのアフィリエイト広告や、WordPress テーマに含まれるものも多いです。
「次のスクリプトの非同期バージョンを使用してください」
こちらはGoogle AdSense の広告で表示される場合が多いようですね。
「次のCSS 配信を最適化してください」
自分でCSS を変更している場合だけでなく、やはりプラグインを指摘される場合が多いです。
ベストな方法を見つけるのは難しい
細かい設定をやりだしたらきりがありません。たとえばレンタルサーバーの性能を考慮したり、ウェブページのソースコードを修正したり、プログラムを変えたり、ファイルを圧縮したり、いろいろできます。キャッシュ系プラグインを比較検証してみたり、たとえばコンテンツデリバリーネットワーク（CDN）なら「CloudFlare」がありますね。
でも、どのように組み合わせたらベストの効果が出てくるのか、なかなかすぐにはわかりません。
ソースコードを書き換えたりするのは多少の専門的な知識が必要です。また、キャッシュ系プラグインをインストールして有効化したら、他のプラグインと競合してウェブページの表示がおかしくなったり、画面が真っ白になってログインできなくなった、ということもあります。
WordPress 初心者にとっては、できるだけカンタンに、すぐに出来て、ある程度は効果のある方法を試してみたいものです。
すぐに出来るカンタンな修正方法
ということで、あまり難しくなく、プラグインのインストールやソースコードのコピー＆ペーストでできる修正方法にしてみました。方法は3つです。
- Google AdSense広告を「非同期」にする
- WordPressプラグインを導入する
- 「.htaccess」ファイルの記述を追加する
以下、その手順です。
Google AdSense広告を「非同期」にする
こちらはGoogle AdSense を導入しているサイト向けになります。「非同期」の広告コードを取得して書き換えるだけです。
まずログインして「広告の設定」をクリックします。「広告ユニット」が並んでいるところの「コードを取得」を選んでください。
すると「広告を作成しました」というウィンドウが出るので「コードタイプ」を「非同期」に変更してください。
あとはウェブページのGoogle AdSense 広告のコードを書き換えるだけです。
WordPress プラグインを導入する
導入するプラグインは2つです。どちらもインストールして有効化するだけで、とくに設定は要りません。
JavaScript 対策
「Asynchronous Javascript」はファイルを非同期で読み込んでくれます。
CSS 対策
「Autoptimize」はJavaScript やCSS、HTML をまとめて、小さくしてくれます。設定画面で3つの変更ができます。
ただしウェブページによっては表示がおかしくなることがあります。上のプラグインでJavaScript 対策をしているので、わたしは「Optimize CSS Code?」にだけチェックを入れて機能させています。これで不具合もなくなりました。
【追記】その他の人気プラグイン
以下のプラグインも利用者が多いみたいです。
- WP Deferred Javascripts （遅延ロード）
- Async JS and CSS （非同期・ファイルの圧縮など多機能）
また、PageSpeed Insights の指摘とは直接関わってこないかもしれませんが、スクロールして画像が表示されるときになったら読み込むLazy Load 系プラグインは、サイト全体の高速化に役立ちます。
多くのサイトで紹介されている「Lazy Load」は2年以上更新がないので使っていません。このような警告が出ていました（2014年11月現在）。
This plugin hasn’t updated in over 2 years. It may no longer be maintained or supported and may have compatibility issues when used with more recent versions of WordPress. （このプラグインは2年以上更新していません。もはやメンテナンスもサポートもされておらず、最近のWordPress バージョンでは互換性の問題があるかもしれません。）
ほかの多くのプラグインでもそうですが、この警告が出ているプラグインにはセキュリティ上の問題があるかもしれないので、利用する際にはご注意ください。
「.htaccess」ファイルの記述を追加する
こちらは少しだけ難しくなります。JavaScript やCSS などのファイルの有効期限を設定して、サイト訪問者のブラウザにキャッシュを利用する方法です。WebサーバーでApache モジュールの「mod_expires」を使います。
単純な設定を追加するだけで高い効果が期待できますが、「.htaccess」ファイルに直接記述するので、わからなければやらなくてもかまいません。
こちらのサイトを参考にしました。
WordPressサイト用の.htaccess例 | dogmap.jp
以下を追加します。
<ifModule mod_expires.c> ExpiresActive On ExpiresDefault "access plus 1 seconds" ExpiresByType text/html "access plus 1 seconds" ExpiresByType image/gif "access plus 2592000 seconds" ExpiresByType image/jpeg "access plus 2592000 seconds" ExpiresByType image/png "access plus 2592000 seconds" ExpiresByType image/x-icon "access plus 2592000 seconds" ExpiresByType text/css "access plus 604800 seconds" ExpiresByType text/javascript "access plus 604800 seconds" ExpiresByType application/x-javascript "access plus 604800 seconds" ExpiresByType application/x-shockwave-flash "access plus 216000 seconds" </ifModule> |
数字はサイトに合わせて変更してください。
GoogleはJavaScript を1週間（604,800秒）に設定するよう推奨しているそうです。それ以下の時間だと、また「修正が必要」と表示されます。
「mod_deflate」はレンタルサーバーによっては使えない場合があります。追加してサイトを見てみると「503」が表示されるかもしれません。
「mod_expires」だけなら多くのレンタルサーバーで利用できるので、 上記の箇所だけを追加するのはおすすめです。
他にも方法はたくさんある
今回は「スクロールせずに見えるコンテンツのレンダリングブロックJavaScript / CSS を排除する」に限定しています。しかも、すぐにできる方法だけです。
細かい設定にこだわるなら、さらに効果的で効率的な方法があるはずです。しかし、それをやるにはもう少し知識が必要になってきますので、WordPress 初心者としては、これくらいで妥協しました。
また何か見つけたら書いてみます。
【追記】
こちらの記事も書きました。
WordPressでレンダリングを妨げる JavaScript を削除する簡単な方法のまとめ | かっぱのWordPress入門ブログ
WordPressでCSSの配信を最適化するために簡単にできることのまとめ | かっぱのWordPress入門ブログ