WordPressの表示速度を改善してみる

 調べ物をしていて Google などの検索結果から目的の Web サイトに移動したとき、なかなか表示されなくてイライラしたこと、ありませんか?自分のブログが訪問してくれた人にそういう思いをさせていたら心配で夜も眠れない Naokix でっす。嘘です。昨日12時間寝てました。

 なかなか表示されない Web ページは直帰率の悪化にもつながり、SEO 的にあまりよろしくありません。サイト表示が2秒遅いだけで直帰率は50%増加するなどという話もありますので、表示速度を改善してユーザービリティを向上させるようにしましょう。

サイト表示が2秒遅いだけで直帰率は50%増加! DeNA事例から学ぶWebの自動最適化手法/日本ラドウェア | 【レポート】Web担当者Forumミーティング 2014 Spring | Web担当者Forum

測定方法

  Web ページの表示速度を測定してくれる Web サービスはいくつかありますが、管理人が使っているのはこちらです。

PageSpeed Insights

20150908_1

「ウェブページの URL を入力」のところに自分のブログの URL をコピペして「分析」ボタンを押せば測定してくれます。当ブログのスコアを晒してみせましょう。

20150908_2

ブログを立ち上げたばかりの頃はは90点ぐらいだったんですがね・・・。WordPress のプラグインを追加したりしたので、速度低下したようです。Google によればスコア85点以上がパフォーマンスの高いページだそうなので、PageSpeed Insights の指摘に従って表示速度の改善をしていきたいと思います。

プラグイン「Autoptimize」

 今これをいれてブログの運営してます。Autoptimize は HTML、CSS、JavaScriptを縮小してブログを高速化してくれるプラグインです。こちらからダウンロードできます。

Autoptimize ≪ WordPress Plugins

試しにこのプラグインを外して速度を測ってみると、

20150908_3

79→71点と悪化します。サイトによって効果に違いがあるようですが、ほとんど設定することなく導入できるので非常に便利なのです。

 欠点がありまして、HTML のスペースや改行を圧縮により削除してしまうので、Web サイトの HTML ソースが非常に読みにくくなります。HTML の圧縮だけ解除する設定もできますので、ご自分のブログに合わせた設定をお試しください。

 また一部の JavaScript が動作しなくなることがあるようなので、その場合は JavaScript の圧縮を解除してください。

圧縮を有効にする

 gzip や deflate を利用し HTML、CSS、JavaScript などを圧縮することで、ネットワークで送信されるバイト数が減り、表示速度の改善をするものです。.htaccess ファイルを編集します。ただし、この方法では画像を圧縮することはできません。

 レンタルサーバーによっては mod_deflate が入っていないため、圧縮が有効にならない場合があるようです。その場合はレンタルサーバーの設定をいじらなければならないようです。当ブログはエックスサーバーで運用していますが、エックスサーバーでは問題なく動作しました。

 さて、編集する .htaccess ファイルですが、エックスサーバーの場合、public_html フォルダの下にあります。編集する前に .htaccess ファイルはバックアップをとっておいたほうがよいでしょう。

20150908_4

.htaccess ファイルに以下のソースを追記します。

アップロードして上書きし、再度速度を測定します。

20150908_5

79→80点へ。gzip による圧縮とは、度々繰り返される文字列を置き換える手法なので、文字数の少ないトップページではあまり効果がなかったかもしれません。文字の多いコンテンツページなら表示速度アップに効果があるはず。

 ただ、当ブログではアイコンフォントを使用しているため、これだけでは「圧縮を有効にする」をクリアすることができません。次のソースを .htaccess ファイルに追記します。

Web ページを更新し、きちんと表示されることを確認してください。

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

 画像、CSS、JavaScript ファイルなどのデータをブラウザ側に保存、すなわちキャッシュして、ブログに再度訪れてくれたリピーターさんの表示速度をアップする方法です。.htaccess ファイルに次のソースを追記します。

なんかコメントの英語がおかしいような。それはともかく、当ブログではこれだけの記述でクリアすることができました。他のサイトを参考にすると JavaScript や XML に対してもいろいろ書いてあるんだけど大丈夫なんでしょうか、わかりません。

20150908_6

これだけはどうしても残ってしまうのですが、analytics.js は Google のサーバーから送信されるものであり、キャッシュできるのは自分のサーバーから送信したものだけなので、こちらではどうすることもできません。このままになります。

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

 上で述べましたが、当ブログは Autoptimize プラグインを導入していますので、Autoptimize を入れる前にはわらわらとあったレンダリングをブロックする JavaScript と CSS がこれだけ整理されています。

20150908_7

残ったのは Autoptimize が作成したふたつの CSS ファイルですが、数百行はありそうな CSS ファイルがスペースや改行を削除されたもので、CSS のインライン化ができそうにはありません。

 そこであちこちで紹介されていた、レンダリングをブロックしている js・css ファイルを wp_footer(); へ吐き出してくれるプラグイン「Async JS and CSS」をインストールしてみたのですが、画像を遅延読み込みしてくれるプラグイン「BJ Lazy Load」とは相性が悪いよ、という評判を裏切らずに画像を表示してくれなくなったので、やむなく Async JS and CSS を外すことにしました。

 Autoptimize をインストールすることで表示速度が上がったことは間違いないので、Autoptimize が作成した CSS についてはそのままにしておくことにしました。いつかなんとかしたい。

画像を最適化する

 プラグイン「EWWW Image Optimizer」を使って画像の一括圧縮をしておきました。こちらで操作方法を解説してくれています。

EWWW Image Optimizer の設定方法と使い方

WordPressの画像をリサイズして自動で圧縮する方法

最後に

 まだ改善の余地がありそうなのですが、とりあえずここまで。なんとか Google の言う85点はクリアすることができました。

20150908_8

 今回はモバイル対応をまったく考えていませんが、今後はモバイルでの表示が検索順位に関係してくるようなアナウンスを Google が発表しているので、早めに何とかしたいと思います。

「役に立った」と思ったら、記事のシェアをお願いします。

スポンサーリンク

Comment

コメント認証制です。反映されるまで時間が掛かる場合があります。
URLの記入はhttpのhを抜いて下さい(宣伝対策です)。
連続でコメントするとスパム扱いになる場合があります。
しばらく待ってからコメントしてください。

CAPTCHA


Si prega di attivare i Javascript! / Please turn on Javascript!

Javaskripta ko calu karem! / Bitte schalten Sie Javascript!

S'il vous plaît activer Javascript! / Por favor, active Javascript!

Qing dakai JavaScript! / Qing dakai JavaScript!

Пожалуйста включите JavaScript! / Silakan aktifkan Javascript!

TOP