デイトラweb制作上級編 DAY29
nakano
サイトの表示速度を上げよう
サイトの表示スピードに大きくかかわるキャッシュは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で教えていただいたプラグインでは、キャッシュの作成とキャッシュの削除の両方を簡単にすることができます。
やはりプラグインは便利ですね。。。
