サイトを運営している方なら、Googleが提供している「Consle Search」などをサービス使って、サイトのエラー等のチェックを行っていると思いますが、Googleでは「Page Speed Insights」というサイトの表示速度を測定してくれる無料のサービスも提供しています。
このサービスでサイトを測定すると１００点満点で評価結果を出力してくれる上に、改善点なども指摘してくれます。
サイトの応答速度によって、サイト自体の離脱率も変わるそうなので、サイト運営者なら把握しておきたいところですね。
しかも、この表示速度は、Googleの評価にも影響を与えているようなので、アクセスアップを目指すなら、コンテンツの充実も大切ですが、サイト自体のメンテンスも大切なんじゃないかと思います。
今回は、私が運営するWordPressのサイトを修正をして効果のあった方法をご紹介したいと思います。
まず、はじめに「Page Speed Insights」で自分のサイトの表示速度を測定してみましょう。下記のアドレスからアクセスできます。
ちなみに、”filter_third_party_resources=true”のパラメータを入れてアクセスすると外部リソースを対象外にして測定してくれます。
外部リソースについては、対策のしようがありませんので、このパラメータをつけて、本来のサイトの表示速度を測定しています。
外部リソースも含めて測定したい方は、このパラメータを外してアクセスしてください。
サイトの使い方は、測定したいアドレスを入力するだけなのでとても簡単です。
皆さんのサイトは、何点ぐらいだったでしょうか。
ちなみに９０点を超えると、PCやスマホのアイコンが緑のチェックマークに変わりますので、ここが合格ラインなのではないかと思います。
それでは、早速９０点を目指して対策をしていきましょう。
「Page Speed Insights」は、下記のような改善を指摘するメッセージが表示されます。
- 表示可能コンテンツの優先順位を決定する
- ブラウザのキャッシュを活用する
- 圧縮を有効にする
- CSS を縮小する
- HTML を縮小する
- JavaScript を縮小する
- サーバーの応答時間を短縮する
- スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する
- リンク先ページのリダイレクトを使用しない
- 画像を最適化する
以上の項目がチェックされ、改善を考慮すべきと判断されたファイル名が指摘事項として出力されます。
以下で、点数アップに効果のあった方法をこのメッセージごとにご紹介していきます。
サーバーの応答時間を短縮する
これの対策については、レンタルサーバーで運用されている方は対策のしようはないと思います。
もっと早いサーバーに引っ越したほうがいいですね。
後の項目でも書きますが、「wpXクラウド
」では、キャッシュ機能とページの最適化プラグインが標準を標準で使うことができるのでおすすめの高速レンタルサーバーです。
画像を最適化する
最適化の対象となったファイルを下記のサイトで最適化して、再アップロードするだけで改善できます。
このサイトの詳しい使い方は、「https://gigazine.net/news/20140527-compressor/」で解説されていますのでご参考までに。
また、このサイトで最適化してもサイズの変わらないファイルは、無償で利用できる高機能な画像編集・処理ソフト「GIMP」を使って上書きで保存するとファイルサイズが小さくなりました。
ダウンロード先：https://www.forest.impress.co.jp/library/software/gimp/
圧縮を有効にする、ブラウザのキャッシュを活用する
レンタルサーバーで「.htaccess」の編集が可能であれば、下記を追加することで改善できます。
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE text/text text/html text/plain text/xml text/css application/x-javascript application/javascript text/javascript
</IfModule>
<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>
ただし、レンタルサーバーが「mod_deflate」、「mod_expires」に対応していないと使えませんので注意してください。
先におすすめした「wpXクラウド」は両方とも、使うことができます。
また、「.htaccess」ファイルは、WordPressの設定等、重要なものが書かれていますので、最悪WordPress自体が動かなくなる可能性がありますので、修正には十分に注意しておこなってください。
JavaScript を縮小する・CSS を縮小する・HTML を縮小する
WordPressには「Autoptimize」という素晴らしいプラグインがありますので、こちらを利用します。
追加方法は、WordPressの管理画面から
「プラグイン」→「新規追加」→「Autoptimize」で検索→インストール
でOKです。
設定については、それぞれの環境によって違ってくるかと思いますが私的には以下の項目を有効化しました。
HTML Options
Optimize HTML Code?
JavaScript Options
Optimize JavaScript Code?
CSS Options
Optimize CSS Code?
Generate data: URIs for images?
Remove Google Fonts?
Also aggregate inline CSS?
Inline all CSS?
Cache Info
Save aggregated script/css as static files?
スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSS を排除する
これが一番、サイトの運営上厄介な、項目だと思います。
なぜなら、他の項目にも影響を与えますが、アフィリエイト広告を張っていると必ず、ここで引っかかると思います。
アフィリエイト広告の中でも、「Google Adsense」は非同期（async）設定をすることで、対応可能ですので比較的簡単でした。
「Amazon」は、バナー広告はソース自体が「iframe」で作られているので、こちらも問題なしだと思います。
また、ウィジット広告の場合は、スクリプトの部分を「footer.php」の「</html>タグ」以下に書き、読み込み部分のみを表示させたい場所に書くことで、比較的簡単に対応できると思います。
私が問題だったのは「A8.net」と「楽天アフィリエイト」です。
一番簡単なのは、これらの広告を削除すればいいのですが、それではサイト運営のやる気が半減してしまいますので、削除しない方向でやります。（賛否両論ありますが、私はアフィリエイトは、モチベーションの一つとしてとても重要だと思います。高額でなくても１円でも収益があると嬉しくなるのがいいと思っています）
まずは、「楽天アフィリエイト」。
こちらは、「楽天Webサービス」で提供しているAPIを利用すると楽天ウィジットを使わなくても商品の紹介ができます。
もちろん、「Page Speed Insight」にも引っかかりませんし、表示自体が高速になります。
ただ、使用するには、PHPコードを組んだり、SDKをセットアップしたりと少し面倒なので、後日、コードを交えながらご紹介いたします。
次に、「A8.net」です。
こちらは、「Amazonアソシエイト」と同じ方式で、「iframe」化してあげることで、対応できます。
「A8.net」のコードを貼ったHTMLファイルを作り、これを「iframe」で読み込んで表示させてあげます。
もしかしたら、この方法で「楽天アフィリエイト」の方も対応可能かもしれませんが、私は「A8.net」のみにしました。
それ以外のスクリプトの対策として、
「function.php」に以下を追記します。
function dequeue_devicepx() {
wp_dequeue_script( ‘devicepx’ );
}
add_action( ‘wp_enqueue_scripts’, ‘dequeue_devicepx’, 20 );
「WordPress」標準で読み込まれている絵文字のスクリプトなどは使っていなければ停止します。
こちらも、「function.php」に以下を追記します。
remove_action( ‘wp_head’, ‘print_emoji_detection_script’, 7 );
remove_action( ‘wp_print_styles’, ‘print_emoji_styles’ );
テーマなどで読み込まれている場合は、そのテーマ等で読み込まれている部分をコメントアウトか「remove_action」で削除してください。
「bizvektor」のテーマでは、テーマフォルダ/function.phpに記載されています。
そして、「font-awesome.min.css」スクリプトの読み込みを「footer.php」の「</html>タグ」の下に移動します。
このスクリプトはIE8でもHTML5に対応できるようにするプラグインなのでIE8を使っている人に最新のIEにアップデートしてもらうメッセージを表示させ、サイトのIE8対応はやめることにして、このスクリプトの読み込みを止めることで対応します。
その他の対策
「wpXクラウド」では、サーバーの設定画面から以下の機能を使うことができますので、有効化すると一段と効果があがりました。
「キャッシュ設定」・・・WordPressのサイトページを初回アクセスの際にキャッシュしておき、2回目以降のアクセス時にキャッシュページを表示することで、サイトを高速表示する仕組みが標準で備わっています。
「mod_pagespeed設定」・・・拡張モジュール「mod_pagespeed」を使用することによりWebサイトのコンテンツを最適化し、表示速度の向上および転送量の軽減を図ります。
どちらの機能も、「wpXクラウド」であれば、インストール等の手間なく、使うことができますので、とても便利です。
以上の対策をほどこし、私の場合は、９７点まで点数をあげることができました。
サイトのレイアウトや内容によって、色々違いはありますが、なんとか中身を削らずに、合格点まで持って行くことは可能だと思いますので、参考にしてみてください。
ちなみに私のサイトでは、広告は「Google Adsense」、「Amazonアソシエイト」、「楽天アフィリエイト」、「A8.net」の全てを配置し、WordPressのプラグインを２８個使用して、この点数を出せています。
