[WP].htaccessを使って表示速度を改善する方法

photo by Robert Couse-Baker

ブログの表示速度を気にしているというツイートを見かけることがあります。

私が実際に行っている表示速度改善手順とともに、少しだけ言いたいことを書かせてもらいたいと思います。

ズバーッと書いてます。ちょっと誤解を招く可能性が高くて怖いんですが、あくまでも私の考え方です。必ずしも正解ではないのでご注意ください。

スポンサーリンク

WordPressの表示速度って何？

手順に入る前に、概念的な話を少しだけ。

表示速度と言っても2種類あります。

1. 機械的に計測される表示速度（スコア）
2. 体感的な表示速度

機械的に計測される表示速度というのは「Page Speed Insight」や「GTmetrix」に代表されるWebサイトの速度測定サイトによるスコアです。

「表示速度を気にしている＝スコアを上げたい」というブロガーさんにはっきり言います。時間のムダです。

大事なのは体感的な表示速度です。つまり、ページにアクセスして実際に表示されるまでどれぐらいの時間がかかるのか。気にするならこっちです。

.htaccessを使ったスコア改善案

なんていきなり辛口でスタートしましたが、今回紹介するのはスコア改善方法ですﾍ(ﾟ∀ﾟﾍ)ｱﾋｬ

ただ体感的な速度にも影響はあるので、スコア改善だけが目的にはならないはず。

あと私はプラグインが嫌いです。プラグインなしで実装できるものは出来るだけプラグインに頼りたくないという人です。理由は簡単で裏で何してるかわかんないから。

なので今回はプラグインには頼らずにルートフォルダにある「.htaccess」というファイルに数行追加してスコアを改善してみたいと思います。

.htaccessでgzip圧縮を有効にする

表示速度というのは結局のところ、サーバーとの通信が一番のボトルネックになります。サーバーとの通信を減らすことで表示速度が改善されます。

gzip圧縮というのは、まぁ圧縮です。ファイルを圧縮することでサーバーとの通信量を減らすことができます。ただgzipにはちょっとだけ難点があって、ブラウザとサーバーがgzipに対応している必要があります。

ブラウザについては最近のブラウザなら大丈夫です。最近っていうかIE4から対応してるらしいので、対応してないブラウザを探す方が大変かもしれません。

gzipを使う方法は2つあって、サーバーで一括操作する方法と、一つ一つのファイルをgzipで手動圧縮してアップする方法があります。

私はものぐさなので一括で。一括の場合はサーバーで「mod_deflate」を使える必要があります。

2014/12/29現在、さくらインターネットとエックスサーバーは使えるのを確認してます。他のサーバーは知らないです。調べてください。

ソースコード

場所は先頭にでも書いておいてください。WordPressを使用している場合は先頭に「# BEGIN WordPress」の表記があるはず。その直前にコピペでいいと思います。

解説

すいません、この辺あまり詳しくないです。

一応いじっていいのは5行目。gzip圧縮しないファイルを指定しています。このソースだと「.ico」アイコンファイルです。他にも圧縮したくないファイルがあるなら「|」で繋げれば大丈夫です。

例：icoとgifとswfを圧縮させない場合

.htaccessでキャッシュを有効にする

続いてはキャッシュの有効化です。

キャッシュとはなんぞや？って方に簡単に説明すると、一度見たファイルはPCに保存しておいて、2回目見に来たときはサーバではなくそっちを見に行くって機能です。

gzipのとこでも書きましたが、表示速度というのは結局のところ、サーバーとの通信が一番のボトルネックです。キャッシュを使うことでサーバーとの通信が減って早く表示されるって寸法です。

.htaccessでキャッシュを有効にする場合はサーバーで「mod_expires」を使える必要があります。

2014/12/29現在、さくらインターネットとエックスサーバーは使えるのを確認してます。他のサーバーは知らないです。調べてください。

ソースコード

場所は上で紹介したgzip有効化のソースの下にでも書いてください。「# BEGIN WordPress」の直前です。

解説

まずは1～3行目を見て行きましょう。

1行目でキャッシュするファイルの種類を指定します。今回のソースでいくと「.gif」「.jpg」「.jpeg」「.png」「.ico」を指定しています。すべて画像ファイルですね。

2行目でキャッシュの有効期限を秒で指定します。2,592,000秒＝43,200分＝720時間＝30日。つまり約1ヶ月間キャッシュを保持するよう指定しています。

3行目は見ての通り。<Files>タグを閉じて終了です。

1～3行目でやっているのは画像ファイルは1ヶ月間キャッシュしといてねっていう設定になります。

4～6行目もほぼ同じですがファイルの種類、有効期限が異なります。

こちらは「.css」「.js」「.html」「.gz」を1週間キャッシュしろって感じです。あ、gzってのがさっきgzipで圧縮したファイルです。

体感速度を改善する方法

ちょっとおまけで書いておきます。

アクセスしても真っ白なまま何も表示されないページ。結構待つと表示されるんだけど、あれって体感的には遅く感じますよね。

逆にアクセスしてすぐに表示されるけど、ステータスバーに「ページを表示しています」って出てたり、上のアイコンがクルクル回ってるページ。これはあんまりストレス感じないですよね？

サイトにアクセスしたときにブラウザはソースを上から読んでいきます。その際にcssとかjsとか他のファイルを読みに行くと、読み終わるまでそこで一旦止まります。

つまりめちゃくちゃ大きいjsファイルが頭の方にあると、何にも表示できないまま止まります。jsの読み込みは必ずしも最初にする必要はありません。最後においてもいいんです。

って書くと何も考えずにjsを全部最後に置いて「動かねーよ！」ってクレームになるので書くの迷ったんですが、そういうテクニックもあるよって話。

通信速度が遅かった昔はそういったテクニックを駆使して、少しでもユーザーさんに早くページを見せたい！ってがんばったもんです。インターレースGIFなんてまさにそうです。今は使われないですけど(´･ω･`)ｼｮﾎﾞｰﾝ

まとめ

一応今回のテクニックはこのブログでも採用しています。

が、あえて改善前後のスコアを書いていません。正直スコアにはあんまり意味がないと思っているからです。

ぶっちゃけ表示されるまでにめちゃくちゃ時間がかかる！見てられない！ってレベルじゃなかったら問題ないと思います。Page Speed Insightで20以下とか極端な数字じゃなければ。

スコアを上げることに躍起になるよりも、自分の時間、家族との時間、素晴らしい記事を書く時間にあてて欲しいと思っています。

以上、あめたま（@ametama_l2l）でした。