WordPressならブラウザキャッシュを設定してページ表示速度を高速化する方法

ブラウザキャッシュを設定してWordPressを高速化!
The following two tabs change content below.
ソルティー

塩畑 貴志(ソルティー)ともうします。

中学の頃、完全に記憶喪失になり、普通のレールに乗ることが夢に。しかし、社会人になってからADHDと分かり、組織にうまく染まれず、行き着いたのがフリーランスという道でした。

ブログで大事にしてることは『ブログ』を一つの作品として発信し、どんなに辛いことがあっても見本になれる生き方を見せることです。

その他詳しいプロフィールはこちらをご覧ください

どうも、ソルティーです!

 

みなさん、学校のテストはいつも何点取っていましたか?

私はいつも100点……!と言いたいところですが、いつも80点取るのがやっと。

学校の勉強は苦手でした。

ですが、WordPressでは表示速度スコアというのは非常に大事!なるべくならこの点数を改善していきましょう!

 

さて、今回はページ表示速度高速化 第二弾!

ブラウザキャッシュを組み込む方法です。

第一弾はこちら

Gzip圧縮による設定です。やってない方はこちらも効果が高いのでやってみてくださいね。

 

この設定することで、読み込みスピードが改善され、ユーザーに優しい作りになりますよ。

カンタンなのでぜひやってみましょう!

 

スポンサーリンク

キャッシュとは

キャッシュとはお金のこと……ですが、ここで言うキャッシュはページの再読み込みを防ぐ、表示高速化の仕組みのことです。

キャッシュを設定していない場合、ページのデータを読み込まれる度に作るようになってしまい、動作が遅くなります。

キャッシュがないと都度作るので遅くなる

 

しかし、キャッシュを設定しておけば、一度読み込んだ時に作っておいたデータを残しておけるので、まったく同じデータを要求された時、すでに作ってあるデータを提供でき、表示速度の改善が期待できます。

WordPressとブラウザキャッシュ:キャッシュがあると、データはすぐ渡される

 

キャッシュの種類について

一口にキャッシュと言っても、実はいろいろなキャッシュがあります。

先程の画像ではサーバーがキャッシュデータを渡していましたが、これはページキャッシュと言います。

ブラウザキャッシュ

Safari、Google Chromeなどインターネットを閲覧するブラウザのキャッシュデータ。ブラウザキャッシュがあれば、もう一度同じページを開く時の時間が短くなる。

ページキャッシュ

サーバー側で保持しているキャッシュデータ。設定した期間キャッシュデータを保持し、キャッシュしておくことで生成の時間がなくなる。

データベースキャッシュ

データベースの返答結果のキャッシュデータ。一般的には記事情報を保持することが可能。

オブジェクトキャッシュ

PHPなどのプログラミング言語に使う変数のキャッシュデータ。キャッシュしておくとプログラムの工数が少なくなる。

 

今回設定するのは1のブラウザキャッシュです。

ブラウザキャッシュを設定しよう

ブラウザキャッシュは何も設定しないままでは有効になりません。

しかし、コピペするだけでカンタンに設定できるので、ぜひやってみましょう!

.htaccessの設定

ブラウザキャッシュはサーバー側で設定をするので、.htaccessファイルにて設定を行います。

ウェブサイトの肝となるファイルなので、編集の際はバックアップを取り、十分に気をつけながら設定するようにしてください

編集作業は自己責任でお願いします

 

私はエックスサーバーで行っています。

エックスサーバーのFTPの設定方法が分からない方はこちらをチェックしてみましょう。

あわせて読みたい

FTPソフトの設定について

もし、他のサーバーであっても、[レンタルサーバー名 FTP]で検索すれば出てきます。

 

まず、FTPソフトで.htaccessを探しましょう。

[サイト名フォルダ] → [public_html]にあります。

WordPressとブラウザキャッシュ:public_htmlに.htaccessファイルがある

この.htaccessをダウンロードし、下記のコードをファイルの一番下にコピペしましょう!
※不安なら書き込む前の.htaccessをバックアップしておきましょう。

コピペでOKです。

 

このコードでは、ブラウザキャッシュだけでなく、フォントもキャッシュしています。

ブラウザの保持期間を自分で設定したい人は…

daysは日、weeksは週、yearは年の単位でキャッシュを保持する期間を設定します。

あまりに短いとpagespeedで警告が出ますので、少し長めにします。

長すぎても新しいデータがキャッシュされなくなってしまうので、大体1週間くらいが良いかと思います。

 

ちなみに text/javascript の一文は昔のブラウザにも対応するために記述しています。

コードを書き込んだら保存して、.htaccessをサーバにアップロードしましょう!

 

サイト表示速度のスコアを確認

ここでサイト表示速度のスコアを確認できます。

 

ぐにらぼはキャッシュをしたことによって……

3点アップ!

キャッシュをして3点アップ!

※サイトによって効果は違います

 

学校でのテストは80点でダメダメでしたが、Google PageSpeedスコアでは85点を目標にしてみましょう!

まとめ

こういう設定はコピペで簡単に設定できる上に効果が高いので、ぜひ取り組んでみてください。

生成動作が抑制されることでサーバの負荷も軽減でき、優しいサイト作りができます。

 

ちなみにこういう高速化設定は一気に取り組むよりも、一つずつ確実に改善を図っていきましょう。

なぜかというと、ミスをした時にどこが間違っていたのか分かりにくくなってしまうからです。

ではでは!

この記事はぐにらぼで掲載していた記事を移転し、Pasolack用に加筆・修正したものです






▼SNSでみんなに教えるとちょっぴり世界が幸せになります▼



ソルティーを応援する

\ この記事が気に入ったなら /
クリエイターを応援する

応援していただけるとこれからの励みになります!これからも良い『作品』を書き続けるために応援よろしくお願いいたします!






ペルソナ作成ワークシート

\ 自分らしくビジネスを上昇させるワークシート 無料配布中 /
ビジネスモデル構築シート

「誰のために」「何のために」「なぜ?」この3つを明確にするワークシートを無料で配布中です。もちろん、ブログ構築にも使えるように工夫してあります。






初心者向けWordPressの作り方マニュアル

\ WordPressが分からない初心者の方、コチラですよー! /
WordPressの作り方マニュアル

コンセプトは『誰でも迷わずに成果が出るブログを』。初心者でも迷わずにWordPressを作れるマニュアルを用意しました。読み進めるだけでWordPressを使った、SEO対策が済んだブログができあがります。




ABOUTこの記事をかいた人

ソルティー

塩畑 貴志(ソルティー)ともうします。

中学の頃、完全に記憶喪失になり、普通のレールに乗ることが夢に。しかし、社会人になってからADHDと分かり、組織にうまく染まれず、行き着いたのがフリーランスという道でした。

ブログで大事にしてることは『ブログ』を一つの作品として発信し、どんなに辛いことがあっても見本になれる生き方を見せることです。

その他詳しいプロフィールはこちらをご覧ください