最近ブログの高速化をいろいろ試していました。
その中で、見た目を特に変更することなく簡単にできて効果も高い高速化手段を自分なりに見つけたのでまとめてみます。
2010年からは、Googleの検索結果でも表示スピードが評価され、順位に反映されています。とは言ってもこの場合、上位20%の位置にいる速いサイトの順位が上がるというものですが、訪問者にとっても、ページの読み込み速度が速い方が良いのは間違いありません。
そんなわけで、いろいろ試した結果、簡単かつ効果のあった「減らす」設定を5つまとめてみました。
作業時間で言えば15分もあればできるので、「自分のブログの表示が遅いな…」なんて思っている人は、試してみてください。
目次
今回行う5つの減らす
photo by Alan Cleaver
今回は、高速化するために以下の5つのことを行います。最低限これだけはやっておきたいという設定です。
- ブログで使っている全ての画像サイズを減らす
- ブラウザキャッシュの設定をして再訪問の負担を減らす
- リソース（HTML、CSS、JavaScriptなど）を圧縮することで転送サイズを減らす
- リソースを縮小することでリクエスト数を減らす
- 大きなファイルを別の場所に置くことでサーバーの負荷を減らす
いろいろなものを減らしていくことでブログの高速化を図りたいと思います。
どれも一つ一つは、さほど難しい設定ではないので、作業時間で言えば15分で行えると思います。
結局、どれも突き詰めていけばサーバーと通信の負担を減らすことにはなるのですが、これらの「減らす」設定を行うことでブログのダイエットを行いサーバーが動きやすい状態を作ると考えてください。
1.ブログで使用している画像のサイズを減らす
ここではブログで使われている画像をロスレス圧縮して画像の最適化を行います。
画像の最適化を簡単に説明すると、ブログで使っている画像の画質は保ったまま圧縮して転送サイズを減らすことで、ブログの表示スピードを速くします。
今回それを行うのに、Wordpressプラグインの「EWWW Image Optimizer」を使います。
EWWW Image Optimizerの設定
「EWWW Image Optimizer」をインストールします。
「設定→EWWW Image Optimizer」から「EWWW Image Optimizer Settings」画面を表示し、「Remove metadata」にチェックを入れてください。
これは、画像のExif情報（撮影情報）を取り除く設定をして、さらに画像をスリムにします。
画像を圧縮する情報を取得するために「メディア→Bulk Optimize」に移動し「Import images」ボタンを押してください。
あとは一括で画像をロスレス圧縮します。
再び「メディア→Bulk Optimize」に移動し「Start optimizing」ボタンを押してください。
この作業は、画像の数によっては時間がかかるため、あとはブラウザのタブを開いたまま放置します。
その間に他の作業を行ってしまいましょう。
画像の最適化と効果については、以下に詳しく書いています。
参考 画像を最適化（ロスレス圧縮）してWordPressブログを高速化する方法
2.ブラウザキャッシュを設定して再訪問の負担を減らす
photo by Ramesh NG
ブラウザキャッシュを設定することによって、各種画像、CSS、JavaScript、WEBフォントなどがブラウザに一時的に保存されます。
訪問者は、次回訪問以降、使っているブラウザのファイルを、利用することでサーバーの負担を減らすとともに、ページの表示が速くなります。
ブラウザキャッシュの設定は、次回の「リソースの圧縮」と同時に行えるため、ここでやり方は書かず後述します。
ブラウザキャッシュの設定と効果については、以下に詳しく書いています。
参考 ブラウザキャッシュの設定をしてWordPressブログの表示スピードを上げる方法
3.リソースを圧縮することで転送サイズを減らす
photo by Sharon Drummond
リソースの圧縮転送とは、サーバー側で、リソース（HTML、CSS、JavaScript、XML、WEBフォントファイルなど）を圧縮してから送り、ブラウザ側で展開して表示させます。そうすることによって、少しでも転送サイズを少なくし、通信の負担を減らすことで高速化します。
ブラウザキャッシュとリソース圧縮の設定
一つ前の項の「ブラウザキャッシュの設定」と、今回の「リソースの圧縮転送」は、サーバー側の「.htaccessファイル」を編集することで設定できます。
.htaccessファイルを編集するには、FTPソフトなどを用いてください。サーバーにあるファイルを直接編集するには、以下の方法も使えます。
参考 サーバー上のWordPressテーマファイルを直接、手持ちの使い慣れたエディターで編集する方法
.htaccessファイルは、Wordpressをインストールしたフォルダに作成します。もう既にある場合は、既存のファイルを編集します。
もう既に.htaccessファイルがある場合は、必ずバックアップを取って、もし不具合が出た場合は、それで復元してください。
.htaccessがない場合は「.htaccess」というファイルを作成し以下を記入してください。既にある場合は既存のコードのあとに追記してください。
僕の場合は、XSERVERのドメイン配下の「public_html」にある.htaccessファイルを開き追記しました。
#フォントのcontent-typeの追加 AddType application/vnd.ms-fontobject .eot AddType application/x-font-ttf .ttf AddType application/x-font-opentype .otf AddType application/x-font-woff .woff AddType image/svg+xml .svg #ブラウザキャッシュの設定 ExpiresActive On ExpiresByType text/css "access plus 1 weeks" ExpiresByType image/gif "access plus 1 weeks" ExpiresByType image/jpeg "access plus 1 weeks" ExpiresByType image/png "access plus 1 weeks" ExpiresByType application/x-javascript "access plus 1 weeks" #フォント ExpiresByType application/vnd.ms-fontobject "access plus 1 year" ExpiresByType application/x-font-ttf "access plus 1 year" ExpiresByType application/x-font-opentype "access plus 1 year" ExpiresByType application/x-font-woff "access plus 1 year" ExpiresByType image/svg+xml "access plus 1 year" #圧縮の設定 AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/x-javascript #フォント AddOutputFilterByType DEFLATE application/x-font-ttf application/x-font-opentype image/svg+xml
テキストをコピペするだけの作業なので、1分もかかりません。
※頻繁にCSSファイルを更新する人は、「ExpiresByType text/css “access plus 1 weeks” 」の部分を「1 days」にするか、先頭に#（シャープ）を記入してコメントアウトしてください。
リソースの圧縮転送と効果については以下に詳しく書いています。
参考 リソースを圧縮して転送サイズを減らしブログを高速化する方法
4.リソースを縮小することでリクエスト数を減らす
リソース（HTML、CSS、JavaScript）を縮小するということは、ソースコード内に含まれる余分なスペースや改行を取り除いて、さらに転送サイズを減らすということです。さらに、複数あるCSS、JavaScriptファイルを一つにまとめることで、リクエストを減らし、さらに高速化を図ります。
リソースを縮小するには、いろいろなプラグインでできますが、今回は「Autoptimize」プラグインを使った方法を紹介したいと思います。
Autoptimizeの設定
まずは、Autoptimizeプラグインをインストールして有効化してください。
インストールしたら「設定」をクリックして設定画面に移ります。
「Autoptimize Settings」ページで以下のようにチェックをつけます。
使用しているプラグインや、外部ツールなどによっては、JavaScriptを縮小化すると正常に動作しないものもありますので、もしブログの動作確認をして異常があるようなら「Optimize JavaScript Code?」のチェックを外してください。
その他の項目でも、異常があるようなら、チェックをオン/オフしながら動作を確認してください。
問題がないようでしたら、これでリソースの縮小化設定は終了です。
リソースの縮小と効果については以下に詳しく書いています。
参考 HTML、CSS、JavaScriptを縮小してWordPressブログを高速化する方法
5.大きなファイルを別においてサーバーの負担を減らす
photo by Kamyar Adl
最後はCDN（コンテンツ・デリバリ・ネットワーク）を用いた方法です。
CDNとは、コンテンツデリバリネットワークの略で、、画像や音楽のようなファイルサイズの大きいデジタルコンテンツを、配信するため最適化されたネットワークです。
閲覧者とサーバーの間にCDNを置いて、そこに大きなファイルのキャッシュが作成されることで、画像などはCDNから、HTMLは自前のサーバーから、と負荷を分散することで表示速度改善を図るためのものです。
ここではそのCDNを利用するために、「Jetpack by WordPress.com」というプラグインの機能の一つ「Photon」を利用したいと思います。
「Photon」の設定方法
JetPackは、wordpress.comを運営しているautomattic社のプラグインなので安心して使うことができます。
設定などもとても簡単で主な手順は以下です。
- 「wordpress.com」のアカウントを持っていない場合は取得。
- 「Jetpack by WordPress.com」プラグインのインストール。
- 「Photon」機能をONにする。
3から説明します。
まずは、Wordpress管理画面から、「Jetpack→設定」に移動します。
Jetpackの機能一覧が表示されるので、その中にある「Photon」のところにマウスオーバーし、「有効化」してください。
これで、CDNがもう使えるようになっています。これも簡単ですね。
ただ、CDNが必要なのは、アクセスの多いブログでサーバーに負荷がかかっている場合や、弱いサーバに限ると思います。強いサーバーを使っていて、アクセスが一日に5000以下であれば、特別設定することもないかもしれません。
これらの、CDNについてと効果の程は、以下に詳しく書いています。
参考 手軽に使えるCDN、Wordpress「Photon」プラグインを使ってブログを高速化
これら5つの設定前と設定後の効果
さて、上記で行ってきた設定をする前と、した後ではどのように変わったでしょうか？
PageSpeed InsightsとGTmetrixとWebsite speed testで、設定前後のスコアを計測してみました。
PageSpeed Insights
設定前
設定後
スコアが、61→81まで改善しました。「修正が必要」と出ていたのが全て「修正を考慮」の範囲内で収まりました。（提案が残るのは、外部ツールなどが設定していないファイルを使っているためがほとんどです。）
本来なら、もう少しスコアも上がるところなんですが、僕の使っているXSERVERのレンタルスペースは、共用しているところに負荷の高いサイトがあるのか、他のXSERVERにあるサイトと比べて応答時間が遅くて、これ以上はどうにもなりませんでした。
GTmetrix
設定前
設定後
これは元々、もそれほど悪くはありませんが、さらに状態は良くなりました。
スピードグレードは84%（B）→94（A）に、YSlowスコアは64％（D）→71（C）になりました。
注目すべきは、ページのトータルサイズが1.44MB→0.84MBになったことです。トータルのリクエスト数も118→71まで減りました。ダイエット成功です。
ページ読み込み時間も一応減ってますが、これは計測する時間帯が違っているので、参考記録みたいなもんだと思います。
Website Speed Test
設定前
設定後
これも元々そんなに悪くないけど、グレードが81→87に。
こちらもページサイズが1.4MB→0.73MBに。リクエスト数も132→79に減少しています。
まとめ
今回のブログの高速化で、完璧とはいかないまでも最低限のことは出来たと思います。
今回行った作業をおさらいすると
- EWWW Image Optimizerプラグインで画質を保ったまま画像を圧縮
- ブラウザキャッシュとリソース圧縮の設定を.htaccessにコピペで記入
- Autoptimizeプラグインでリソースの縮小
- Photonプラグインを用いてCDNの設定（負荷のかかってないサーバーでは設定の必要なし）
たったこの四つの作業だけです。一つ一つもそれほど難しいわけではないので、手軽にある程度の効果は出せると思います。
もし、wordpressブログの高速化を考えているのであれば試してみて下さい。
