SANGOカスタマイズ – サイトの表示速度を大幅に改善(速く)する方法について

サイトの表示速度を大幅に改善

WordPressテーマ「SANGO」のカスタマイズ、第5弾は「WEBサイトの表示速度を大幅に改善する方法」について。

SANGOに変えてからというもの、表示速度の低下に悩まされています。

こう書くと「SANGO=遅い」と誤解を生みそうなので、初めに言っておきたいのですが、SANGOに問題はありません。悪いのは、ぼくです 笑

プラグインの入れすぎ、カスタマイズしすぎ、画像の使いすぎ etc., etc…

原因をあげればキリが無いのですが、ひとつずつ精査していくのは、正直ダルいってことで、簡単 かつ 一気に改善できる方法が無いか色々調べました。

行き着いた答えは…

.htaccessを利用してブラウザのキャッシュを有効にすること。

MEMO

キャッシュというのは、一度訪れたサイトの画像やHTMLファイルなどをパソコンの中に一時保存することで、2回目以降の訪問時、サーバーを介すことなく、訪れたサイトが表示される仕組みのことです。

↓キャッシュの仕組み

キャッシュの説明

サイトの表示速度を計測してくれる「PageSpeed Insights」で調べると、SANGOでは「ブラウザのキャッシュが有効化されていない」ことが分かります。

ブラウザキャッシュが無効

ブラウザのキャッシュが有効化されていない…

このままでも問題は無いですが、キャッシュを有効化することにより、表示速度が改善されます。

ぼく

当然「PageSpeed Insights」の点数もめっちゃ上がる!

 

方法は簡単…ですがッ!!!

.htaccessに記述する内容を間違えると、「500エラー」でサイトが表示されなくなるのでご注意を。

500 error Internal Server Error

記述を間違えるとこうなる…

 

それでは、詳しい手順を書いていきます。

ぼく

大前提として、ファイルの送受信を行う「FTPソフト」とソースコードを編集する「テキストエディタ」が必要です。

FTPソフト(無料) FFFTP(Windows)
Cyberduck(Mac)
テキストエディタ(無料) サクラエディタ(Windows)
Sublime Text(Mac)

 

.htaccessでキャッシュの有効期限を設定する方法

ルートディレクトリの中にある「.htaccess」ファイルにコードを記述します。

.htaccessの格納場所

ぼく

Macの場合、初期状態では「.htaccessファイル」は表示されません。下記の記事を参考にして、表示させてください。

↓記述する内容は以下の通り

ぼく

ここに行き着くまでめっちゃ時間かかった…参考にした記事は「こちら」。

「14 days」とか「1 month」の箇所がキャッシュを保存する期間です。

こちらは適宜、自由に設定していただければと思います。(但し、期限を長くしすぎると、ページを更新したとしても、更新内容が反映されなくなる可能性もあります。)

 

↓記述後、「PageSpeed Insights」を確認すると…

ブラウザキャッシュを有効化

ぼく

Twitterやアナリティクスなど、外部サービスのリソースは一部残っているものの、”ほぼほぼ”改善されました。

↓どれくらい速くなったかですが…

PageSpeed Insightsの評価が大幅に改善

ぼく

15点UP!!

ぼく

ただ、モバイルの点数はそれほど上がらなかったです…(1、2点程)

 

↓サイトの平均読み込み時間も…

平均読み込み時間が大幅に改善

改善前後_1週間のデータで比較。

ぼく

大幅に改善!!

ぼく

…とはいえ、12秒。クソ遅い…

 

まぁ、こんな感じで、「.htaccess」ファイルに数行コードを追記するだけで、表示速度が簡単に改善します。

サイトの表示速度を上げることは、ユーザーの離脱を防ぐことにも繋がりますし、

何よりグーグルが「2018年7月」からサイトの表示速度が検索順位に影響することを公式サイトで明示しています。

ページの読み込み速度をモバイル検索のランキング要素に使用します

Google フレンドリーなサイト制作・運営に関するウェブマスター向け公式情報

やらない理由はないですね。

そんな感じで。終わりッ!

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください