速度調査結果
ワンコロワンコロ

サイトスピードの評価散々でしたね


ぷに侍ぷに侍

散々だったね。


ワンコロワンコロ

高速化対応するんですよね


ぷに侍ぷに侍

うん、とりあえずブラウザキャッシュ使うように設定します

前回の記事

 アラフォー探偵団
サイトスピードを計測してくれる無料サービスを使って問題点を洗い出す
なんか私達のサイトって動き遅くないですか？まぁ、特に何の対策もしてないからねあんまり遅いとユーザーさんが離脱しちゃうんで対策しましょーまずは現状を把握して対策方法を教えてもらいましょうかサイトを運営する上できちんと対策しなければいけないことの一つ...

で、このサイトの速度チェックをしたところ、

まがりなりにも「現役SE」が運営しているサイトにも関わらず、「PageSpeed Insights」での採点結果が「43点」というスコアを叩き出してしまいました。

ちょっとこのままだとプロとしてのプライドが砕けそうなので、早々にサイト高速化対応をすることにしました。

この記事ではエックスサーバーで構築したWordPressのブログサイトをブラウザキャッシュ（以後キャッシュと記載）を使うように設定変更を行う方法を解説します
スポンサーリンク

目的と期待する効果

ユーザービリティーを向上させることによって、検索流入してきたユーザーさんにストレスを感じさせること無くサイトを閲覧してもらうことを目的としています。
また、Google先生が「サイトの表示速度は大事よ」と名言しているので、SEOにもよい効果を及ぼすことを期待しています。





キャッシュとは

インターネット界隈における「キャッシュ」について、初心者の方にもわかりやすく例えるとするならば「データの一時保存機能」です。
パソコンやスマホからサイトを閲覧すると、意識している人はあまりいませんが、ダウンロードという行為・イベントが必ず発生しています。
キャッシュという仕組みは、一度アクセスした時のデータをパソコンやスマホのブラウザに一定期間保存しておき、次に同じページにアクセスするときに、あらたにダウンロードをするのではなく、ブラウザ内に保存したデータを表示させるようにする仕組みです。

エックスサーバーでキャッシュの設定を変更する

サーバー内に存在する「.htaccess」というファイルを編集すると、画像やCSS等のデータのキャッシュ期間を指定することが可能です。

それぞれのデータは拡張子毎に指定できますので、頻繁に変更が加わるCSSファイルはキャッシュの期間を短く指定したり、逆にキャッシュを持たないように設定することも可能です。

.htaccessはレンタルサーバー会社や契約しているプラン毎に設定の可否が異なりますので、設定の可否をご確認ください。

私が借りているエックスサーバーでは.htaccessの編集、設定変更は可能です。

サーバーパネルから編集する

多くのケースでは「.htaccess」ファイルの編集はFTPで一度ファイルをダウンロードし、ローカル環境で変更した後再度アップするという方法を取りますが、

エックスサーバーではサーバーパネルと呼ばれる管理コンソールから簡単に設定変更をすることが可能です。

スポンサーリンク

1．サーバーパネルにログインする

https://www.xserver.ne.jp/login_server.php
上記URLにアクセスし、サーバーID・サーバーパスワードを入力し、ログインボタンを押す。

※サーバーID、パスワードについては契約時に登録した情報を入力してください。

ログインが正常に完了したら「設定対象ドメイン」という箇所の下にあるプルダウンメニューから、設定変更したいドメインを選択し、「設定する」を押してください。

2．「.htaccess」の編集画面へ移動する

画面上部の現在の設定対象ドメインという箇所を見て、
先程のプルダウンメニューで選択したドメインが表示されていることを確認し、
「.htaccess編集」をいう箇所をクリックしてください。

編集画面へ

「この機能は上級者向けの機能です」と表示されますが、無視してください。
その後、下図赤枠で表示された「.htaccess編集」というタブをクリックしてください。

注意画面

3．現在のデータをバックアップする

「メモ帳」を開き、下図赤枠内の内容を全てコピーして保存してください。
※「.htaccess20180101」と言うように、設定変更した日付をファイル名につけると、問題が発生したときに「いつのデータに戻すか」という判断の役に立ちます。

設定コピー

4．「.htaccess」を編集する。
以下のコードを編集画面の一番下に貼り付け、「.htaccessを編集する（確認）」ボタン押す

私が設定した内容を下に記載しておきますので、参考にしてください。
※サイトを構築中ということもあり、若干キャッシュの期間は短め設定です。

このようになりますので、「.htaccessを編集する（確定）」ボタンを押してください。

編集画面

これにて設定は完了です。

結果

PageSpeed Insightsで再び計測してみました。

結果

・編集前：43ポイント
・編集後：42ポイント
まさかのポイントが一点下がるという悲しい結果。

（実は倍近い80になっていました。）

↓↓↓詳細はコチラ↓↓↓

 アラフォー探偵団
エックスサーバーの.htaccessを編集したら爆速になっていた（キャッシュ強すぎ）
はい、SE失格の筆者でございます。以前記載したエックスサーバー高速化についての記事の最後にまさかのポイントが一点下がるという悲しい結果。と記載しましたが、超久々に「PageSpeed Insights」で速度を計測したところ80点って出ました・・・へ！？私あれ以降、Web...

原因：設定が効いていないのはこいつだ

詳細を開き、理由を確認してみたところ、悪さをしている原因がわかりました。

https://blog.with2.net/img/banner/c/banner_1/br_c_9314_1.gif（有効期限が指定されていません）

ぷに侍ぷに侍

外部サイトじゃん orz

これはブログランキングへの誘導バナーです。
↓コレです。


アラフォー日記ランキング

被リンク対策の一貫と、「もしかしてアクセス流れてくるかな」という淡い希望を込めて設置しましたが、サイトスピードという点においてはマイナス要素として上げられてしまっております。
とりあえず少々様子見とします。

少なくともその他の画像データ等は設定したとおりキャッシュの保持期間について結果が反映されていたので、良しとしておきます。

・・・中途半端な結果だ（泣）

いやいや、私の勘違というかアホさのせいで、実際はめっちゃ向上されていました。

 アラフォー探偵団
エックスサーバーの.htaccessを編集したら爆速になっていた（キャッシュ強すぎ）
はい、SE失格の筆者でございます。以前記載したエックスサーバー高速化についての記事の最後にまさかのポイントが一点下がるという悲しい結果。と記載しましたが、超久々に「PageSpeed Insights」で速度を計測したところ80点って出ました・・・へ！？私あれ以降、Web...

もうアホかと、、、