【所要時間5分】.htaccessを編集してWordPressを高速化する方法

ここ最近、ブログの読み込み速度が非常に遅くなってきておりまして。このままだとGoogleから嫌われてしまうので、本腰を入れて改善していくことにしました。

改善点は多いのですが、まずは効果の高い部分から潰していくことにしました。ということで、今回は「.htaccessファイルの修正」で速度を改善する方法を紹介したいと思います。

手順はとても簡単で、所要時間もわずか5分。コードを書くのが苦手な人にも取り食いやすい内容だと思うので、WordPressを使っている人はぜひお試しを。

GTmetrixで現在のパフォーマンスをチェック

まずは現在のWebサイトがどのくらいのパフォーマンスなのかを調べてみます。今回は「GTmetrix」という計測サイトで調べてみることにしました。

website-performance-up-20161115-1

絶望的なパフォーマンスの低さ。

この「PageSpeed Score」という数字が100%に近ければ近いほど読み込み速度が早いということになります。私のWebサイトは全Webサイト平均71%を下回る49%でした。

ちなみに「YSlow Score」という指標もありますが、これはまた別途説明したいと思います。まあ、いずれにしろこちらのスコアも低いので、改善しないとダメなことには変わりないのですが。

リコメンドより優先度の高いものをピックアップ

分析した結果に対するリコメンド(解決方法)が一覧で表示されるので、この中から優先度が高いものから解決していくことでパフォーマンスは改善します。

website-performance-up-20161115-2

今回は「Leverage browser caching」という部分の問題を解決していきます。この項目をクリックすると、対象となるコンテンツのURLとともに、次のように表記されています。

Leverage browser caching for the following cacheable resources:

訳すると「以下のリソースはブラウザキャッシュができる」になります。

毎回表示されるような画像やcssなどは、Webサイトを最初に開いた時に保存しておけば、毎回読み込まなくてもよくなるので、読み込み速度が早くなるというわけです。

.htaccessファイルにキャッシュ定義を追記する

今回行ったのは「.htaccess」というファイルにキャッシュの定義を記載するという対応です。このファイルの場所や編集方法が分からないという方は、レンタルサーバー会社のヘルプページを参照下さい。

ちなみに私が利用しているwpXの場合は「サーバーの管理」から「.htaccessの編集」を選択して編集するだけなので楽チンです。実際に追記したのはこちらの内容になります。

<IfModule mod_expires.c>
ExpiresActive on
ExpiresByType image/png “access plus 1 months”
ExpiresByType image/jpeg “access plus 1 months”
ExpiresByType image/gif “access plus 1 months”
ExpiresByType text/css “access plus 1 months”
ExpiresByType text/javascript “access plus 1 months”
ExpiresByType application/x-javascript “access plus 1 months”
ExpiresByType application/x-shockwave-flash “access plus 1 months”
ExpiresDefault “access plus 1 days”
</IfModule>

 

こちらはキャッシュの有効期限を書いたものになります。ファイルの種類とキャッシュの有効期限をセットします。例えば「access plus 1 months」は「アクセス時から1ヶ月間」という具合ですね。

たったこれだけで作業は完了ですが、くれぐれもファイルのバックアップはお忘れなく。記述をミスしてしまうとサーバーエラーになってしまうのでご用心下さい。

パフォーマンスの再チェック結果は・・・?

というとで早速チェック。

website-performance-up-20161115-3

49%→77%へと大幅に改善しました!

数字だけではなく実際に読み込んだ際も「早くなった」と実感できるほどの効果がありました。効果抜群なのでまだの方はぜひお試し下さい。

wp-dark-hi-1024x768

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です