デイトラweb制作上級編 DAY29

サイトの表示速度を上げよう

サイトの表示スピードに大きくかかわるキャッシュは2種類

ブラウザキャッシュ

サーバーキャッシュ

ブラウザキャッシュ

ブラウザキャッシュ
→ サーバーから一度受け取ったコンテンツをブラウザ側で一時保存

ブラウザキャッシュの流れ

1. デバイスを使ってユーザーがURLを入力

2. ブラウザがURLをもとにコンテンツをリクエスト

3. サーバーがURLの情報をもとにPHPやデータベースを活用し、レスポンス用のコンテンツを送信

4. ブラウザがコンテンツを受け取って表示される
→ 手元のPCに一時保存される(キャッシュ


※コンテンツの中身はCSSやJavaScript、画像など

2回目以降は手元のPC(ブラウザ)に保存されているため、サーバーにコンテンツをリクエストする必要がない

→ サイトの表示スピードアップ!

サーバーキャッシュ

引用元:キャッシュとは?Webサイト高速化にかかせない機能をご紹介!

サーバーキャッシュ
→ 最適化されたCSS(JavaScript)ファイルをあらかじめサーバーに一時保存

ページキャッシュ(サーバーキャッシュ)
→ 最適化されたHTMLファイルをあらかじめサーバーに一時保存

ページキャッシュは動的なページから静的なHTMLファイルを生成するため、

PHPやデータベースを動かさずにHTMLファイルを取得し素早く表示できる!

※HTMLファイルはページそのもの

プラグイン「Autoptimize」をインストール

サーバーキャッシュを作成するプラグイン

JavaScriptの設定

CSSの設定

画像の設定

それ以外はそのまま

dev > wp-content > cache の中に autoptimize が追加される

※注意点

dev > wp-content > themes > tf30 のcssファイルを修正しても反映されないこともある

その時は autoptimize のキャッシュを削除すれば更新が反映される

プラグイン「WP Super Cache」をインストール

ページキャッシュを作成するプラグイン

初期設定だと「キャッシング停止」にチェックがついているため、キャッシング利用にチェックする

※注意点

お問い合わせ系のプラグインとの相性が悪いため、送信できないといった不具合が起きる

そのため、高度な設定 > 除外する URL 文字列 からスラッグ名を指定してキャッシュしないようにする

スラッグ名は投稿(固定ページ)のクイック編集から確認できる

まとめ

今回は主にキャッシュについて学びました。

前にもキャッシュについて少し触れていましたが、もっと細かいところについて学習しました。

DAY29で教えていただいたプラグインでは、キャッシュの作成とキャッシュの削除の両方を簡単にすることができます。

やはりプラグインは便利ですね。。。

コメントを残す

メールアドレスが公開されることはありません。