.htaccessをカスタマイズしてサイトの読み込み速度を向上しよう

speedometer-153399_1280

前回のエントリーではサイトの読み込み速度を測定してみました。

そこでダメ出しを貰った部分を改善するべく、出来る範囲であの手この手を尽くして頑張ってみたいと思います。

スポンサーリンク

出来そうな事だけでも改善してみよう!

そこで今回は、当サイトで利用させていただいているWordPressテーマ「WpTHK」のカスタマイザー内「高速化用 htaccess」に記述されている内容を実際に.htaccessに追記して、サイトの読み込み速度向上を図ってみたいと思います。

「高速化用 htaccess」の内容

  • ETags(Configure entity tags) を無視する設定
  • Enable Keep-Alive を設定
  • MIME Type 追加
  • プロクシキャッシュの設定 (画像とフォントをキャッシュ)
  • ブラウザキャッシュの設定
  • Gzip圧縮の設定

「何が何だか わからない…」という部分もあるので、一応ざっくりとでも内容を理解しておいた方が良いと思いググっていたら、「WpTHK」作者さんのページにたどり着きました。出来れば自分なりに理解して概要を書きたいと思っていましたが、ヘタな文章で説明するよりも直接そちらを参照していただいた方が確実かと思います。べ、別に手抜きじゃないんだからね?

改訂版への追記がされているように、過去の記事への配慮も忘れない辺りがさすがだと思いました。こういうところは私もぜひ見習いたいものです。

サイト表示速度改善!劇的ビフォーアフター?

それでは上記の修正を当サイトの.htaccessに…いや、やっぱりいきなりは危険なので、まずはテスト用のサイトで試してからにした方がいいと私の本能がそう告げているので、ここは素直に従ってみる事にします。

まずはテスト用サイトの測定から

こちらが無料レンタルサーバーのウェブクロウで作成したテスト用サイトの測定結果になります。

テスト用サイト 表示速度測定結果 [修正前]

当サイトと同じテーマにプラグインをいくつかインストール済み、エントリーは1件も無い状態のサイトですが「MOBILE FRIENDLINESS」以外は偶然?当サイトと同じ数値になりました。

.htaccessを実際に修正してみよう

更新時に注意する点としては、元々あった内容を消さずに追記するという事なので、そこだけ注意して更新してみたいと思います。

と言ってもやる事は簡単で「高速化用 htaccess」に記述されている内容をコピペして貼り付けるだけの簡単なお仕事です。

超絶にスピードアップしたように見えた…が

では再び例の「Mobile Website Speed Testing Tool」とやらで測定してみましょう。さすがにこれだけの事で劇的に改善されるとは思っていませんが、それでもちょっとは期待していいよね?

テスト用サイト 表示速度測定結果 [修正後?]

「すごく…速いです」

なぜか「MOBILE FRIENDLINESS」はガタっと下がりましたがこの数値はマジでスゴイです、予想の遥か斜め上を行く上々の結果と…

いやいやいや、無い、それは無い、たぶんコレあかんやつや…

テスト用サイトを確認してみると

ごらんの有様だよ!

テスト用サイト 表示速度向上失敗

見事にやらかしてしまいましたが、まだ慌てるような時間じゃない…とりあえず落ち着いて追記した部分を削除して考えてみる事にしましょう。一体何がダメだったのか…手順に間違いは無かったはずなので、そうなると思い当たるのはもうアレしかありません。

レンタルサーバーの仕様を確認してみよう

あったあった、ありました、原因はこれですね。

以下のディレクティブが利用制限に引っかかったようです。

  • AddType
  • AddOutputFilterByType

そんなわけで、利用制限に引っかかる部分を外すとこんな感じに。

  • ETags(Configure entity tags) を無視する設定
  • Enable Keep-Alive を設定
  • MIME Type 追加
  • プロクシキャッシュの設定 (画像とフォントをキャッシュ)
  • ブラウザキャッシュの設定
  • Gzip圧縮の設定

残念ながらGzip圧縮は使えないようですが、この内容でいく事にします。キャッシュ関係のプラグインは出来れば使いたくなかったので、これだけでも十分ありがたいです。

ちなみに、この利用制限に関してはXdomainでも同じでした。当サイトはXdomainなのでウェブクロウと同様の修正になりますね。

では気を取り直して再測定してみます

ん?うーん…まぁいいか。

テスト用サイト 表示速度測定結果 [修正後]

想定した結果では無いどころか、むしろ若干スコアが落ちたような気もしますが、エラーは出なくなったのでテストとしてはこれでよしとします。テスト用に即席で準備したようなサイトでは無く、実際に運用しているサイトなら何らかの結果は出るのではないかと期待する事にしましょう。

当サイトに反映してみた結果…

ぶっつけ本番はやめて事前にテスト環境で確認したおかげで危機を回避する事が出来ました。それでは気を取り直して今度こそ本番行ってみたいと思います…

当サイトの読み込み速度測定結果 [修正後]

速くなりましたね!僅かですがモバイルスピードもアップして何とか赤点を解消する事が出来たようです。

  • MOBILE FRIENDLINESS(変わらず)
  • MOBILE SPEED(62 → 67)
  • DESKTOP SPEED(77 → 84)

根拠は特にありませんが、無料レンタルサーバーにしては結構いい線行ってるのではないかと思います。えぇ、根拠はありませんけど。

GTmetrixでも測定してみました

先日はすっかり忘れてましたが「GTmetrix」でも測定してみました。

当サイトの読み込み速度測定結果 [GTmetrix]

こちらもなかなかの結果となりました、さすがです。

GTmetrix | Website Speed and Performance Optimization

サイトの表示速度改善に関してはひとまずここまで

速さを追求すればもう少し何とか出来そうな感じですが、私の場合まだまだ他にもやるべき事はたくさんありますので、サイトの表示速度改善に関して今回のところはひとまずここまでにしたいと思います。

今回のエントリーでは「.htaccessを修正」とかサラっと書いちゃってましたが、その修正方法まで言及した方が良かったような気もしますので、.htaccessの修正方法に関してはまた改めて別のエントリーで紹介する事にいたします。

この記事が気に入ったら
いいね!しよう

最新情報をお届けします

スポンサーリンク
トップへ戻る