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

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

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

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

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

 

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

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

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

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

 

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

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

 第一弾はこちら

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

[relation head="あわせて読みたい" link="https://pasolack.com/seo/gzip/" text="ページ表示速度の高速化をしてSEO対策!Gzip圧縮の設定" color="yellow"]

 

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

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

 

キャッシュとは

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

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

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

 

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

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

 

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

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

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

ブラウザキャッシュ

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

ページキャッシュ

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

データベースキャッシュ

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

オブジェクトキャッシュ

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

 

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

 

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

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

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

.htaccessの設定

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

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

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

 

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

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

[relation head="あわせて読みたい" link="https://www.xserver.ne.jp/manual/man_ftp_setting.php" text="FTPソフトの設定について" color="yellow"]

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

 

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

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

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

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

コピペでOKです。

 

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

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

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

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

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

 

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

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

 

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

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

[relation head="紹介" link="https://developers.google.com/speed/pagespeed/insights/" text="Google PageSpeed" color="green"]

 

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

3点アップ!

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

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

 

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

まとめ

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

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

 

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

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

ではでは!

[relation head="あわせて読みたい" link="https://pasolack.com/wordpress/autoptimize/" text="第三弾:HTML、JavaScriptの圧縮" color="yellow"]
 この記事はぐにらぼで掲載していた記事を移転し、Pasolack用に加筆・修正したものです
関連キーワード
関連コンテンツ

この記事が気に入ったら
フォローしよう

最新情報をお届けします

Twitterでフォローしよう