WordPressサイトのGoogle Speed Update対策まとめ【サイト高速化】

2017年9月25日 2018年5月29日

サイト高速化はSEOの重要な対策のひとつ。
サイトを速く表示させることで、訪問してくれたユーザーが気持ちよく記事を読んでもらえます。

WEBデザイナー及びコーダーには、高速化をとても求められています。

モバイルファーストという概念から、スマホブラウザでの閲覧をメインに「より軽量なWEBサイトがSEOの評価を得られやすい」と言われています。

そんなWEBサイトのスピードチェックは、Googleが提供する「PageSpeed Insights」というサービスで調べられます。

PageSpeed Insights

とくに何も対策をせずにチェックしてみると、まあ殆どは”Poor”と言われます

PageSpeed Insightsの画面

PageSpeed Insightsで指摘された部分を対応しよう

PageSpeed Insightsの結果が出ると、最適化が可能な内容も同時に表示されます。
この対応を行うことでスコアが良くなっていき、サイト高速化がうまくいっているという指標になります。

それでは、指摘される項目ごとに僕がが実際に行った対応方法を紹介します。

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

キャッシュとは、WEBサイトを構築するHTMLやCSS、Javascript、jpgやpngの画像、映像などのデータを一定期間、保存しておく仕組みのことです。
データをブラウザに保存する(よくキャッシュすると言う)ことで、サーバーからダウンロードする必要がなくなり2回目以降の訪問では表示が高速化するのです。

このキャッシュの設定は.htaccessに以下を追記することで設定可能です。

 

mod_expiresというのは、Apacheのモジュールを使用しています。
さくらサーバーなど一部のレンタルサーバーでは、.htaccessの変更ができない場合があるので、各レンタルサーバーの仕様をは要チェックです。

キャッシュの設定は以下ページを参考にさせていただきました。

.htaccessのmod_expiresでブラウザキャッシュで高速化でSEO対策!

圧縮を有効にする

gzip や deflate を使用してリソースを圧縮することで、ネットワークで送信されるバイト数を減らすことができます。

PageSpeed Insightsの指摘ではこのように説明されています。

具体的な施策は以下のコードを.htaccessに追記します。

 

mod_deflateというのもApacheのモジュールです。

圧縮の設定は以下ページを参考にさせていただきました。

.htaccessのmod_deflateでファイル圧縮送信で高速化でSEO対策!

画像を最適化する

画像に含まれる余計なデータを排除し、圧縮して軽量データに変換する以下のWEBツールを使います。

JPEG 圧縮
Tiny PNG

どちらもブラウザに画像ファイルをドラッグ&ドロップするだけなので、使い方は簡単。
すべての画像を差し替えるのは大変ですが、サイトのグランドデザインで使用している画像くらいは圧縮したほうが良いと思います。

サーバーの応答時間を短縮する

レンタルサーバーの場合、スペックが標準以上あり、速度の速いサーバーに引っ越しするなどを検討する必要があります。
『そこまでするのはちょっと、、、』という事情もあると思うので、サーバーの設定を見直しレスポンスが良くなる方法を調べてみてください。

ロリポップサーバーの場合は、PHP設定で「モジュール版」を選択することで少しだけ速くなります。
※スタンダード、エンタープライズプランのみ

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

ブロックを回避する為のプラグイン「WP Deferred JavaScripts」を入れてみます。

他のプラグインで読み込まれるJSなど、自力で全てのJSをコントロールする事は困難なので、この為のプラグインで対応するのが手っ取り早いです。

WP Deferred JavaScripts

WP Deferred JavaScripts

WP Deferred JavaScriptsは、インストールして有効化するだけでOK。
再度PageSpeed Insightsで調べてみると、このJSに関する部分が表示されなくなっていれば成功です。

しかしスコアが大して変化しなかったり、逆に下がってしまった場合は使わなくても良いと思います。

またSyntax系プラグインが動作しなくなったり、サイトの不具合が起きる様な場合も使用を停止しましょう。
Syntax系プラグインについては、ソースコードを色分け表示するSyntax系プラグイン3選で触れていますのでついでにどうぞ。

関連記事

WordPressでJSを非同期読み込みするasync属性の追加方法

 

キャッシュ系プラグインを入れる

WP Fastest Cacheを導入してみたところ、サイト表示が爆速になりました!

詳しくはこちらの記事をどうぞ。

プラグイン「WP Fastest Cache」でサイト表示速度が大幅改善しました【WordPress】

サイト高速化の施策を色々やってみた結果

サイト高速化対策の結果

モバイルはまだまだですが、パソコンではまあまあ良いスコアになりました。
個人的には.htaccessによるキャッシュデータ圧縮の設定が、サイト高速化の効果が高いと実感しました。

サイトを高速化したからと言え、検索順位が上がるとかアクセスが増えるとかを保証するものではありません。

高速化を行うことでサイト閲覧のストレスをできるだけ排除し、より快適なWEBサイトにすることが結果的にSEO効果があれば良いな、くらいに考えて貰えれば幸いです。

コメント

お気軽にコメントをどうぞ。

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください