初心者の為のWEB開発

WEB必須知識!キャッシュのクリアやスーパーリロードのショートカット紹介

※当サイトはPR(プロモーション)を含みます。

キャッシュクリアやスーパーリロード 初心者の為のWEB開発
ファズ
ファズ

Hello!ファズです

今回は豆知識編ですね!

さっそくですが、

  • WEBページを作ってたらページが更新できない
  • ブログを更新してもテキストがかわらない
  • 画像を差し替えたのに変わらない

WEBに関わったことがある方なら一度は経験したことがあるのではないでしょうか?

実はこれ、ブラウザが優秀しすぎて起こる事象で、たくさんのページを見たり、頻繁にcssなどを変更すると遭遇することがあるもの。

結論

結論を言うとこれはブラウザに保管した一時データ「キャッシュ」の悪い影響が出てしまっている状態で、最新の情報が読み込めていない状態。

ですが、本来キャッシュはページを高速に読み込ませるためにめちゃくちゃ役立つ機能。

ではこういう不具合にあった場合どうしたらいいのか?

今回はキャッシュのクリア方法やショートカットで出来る便利なスーパーリロードについて紹介します!

ファズ

Hello!ファズです。

◆仕事関連 WEB制作4年:「WordPress/WEB制作」
◆インドア趣味:アニメ好き歴10年/ガンプラ購入数十種以上!
◆生活品:ソイプロテイン常用2年、試した数十数種

↑インドア多趣味の実際に試した内容の記事を紹介していきます。

※当サイトはリンクフリーですが「出展元」として記載をお願いします!

ファズをフォローする
wordpressのおすすめテーマ
WordPressのテーマ選びでお悩みの方必見!

【初心者におすすめの記事】

◆おすすめ有料テーマが知りたい
◆「集客」や「収益」をあげたい
◆テーマを選ぶポイントが知りたい
◆初心者でも使いやすいテーマが知りたい

キャッシュについておさらい

そもそもの原因、簡単にキャッシュについておさらい!

キャッシュはページの再訪問や更新の際、WEBページの表示速度を一気に向上させることができる仕組み。

この機能を有効にすることで訪問したユーザーの待機時間をなくし、ストレスを感じさせない・・いわゆるユーザーフレンドリーなサイトへ近づけることができます。

このキャッシュには2種類あり、

  • ブラウザキャッシュ
  • ページキャッシュ

があります。

ですが、蓄積しすぎたり、頻繁に更新を行なう場合うまくデータを更新することができなくなることがあります。

それぞれ簡単にどういったものなのかお伝えします。

ブラウザキャッシュとは

ブラウザキャッシュとは、ブラウザの履歴機能の中にある「一時的にデータを保存」できる機能があり、ユーザーはブラウザを通して再訪問・アクセスすることで恩恵を得ることができます。

一般的に言われるキャッシュはこのブラウザキャッシュを指すことが多く、ブラウザがデフォルト設定のままであれば、サイトに訪問することで自動的にキャッシュを蓄積します。

削除方法も履歴から任意で削除できるので、クリアすることは難しくありません。

ページキャッシュとは

WordPressで生成したデータをサーバー上に残すことで、ユーザー側からのリクエストを短縮する仕組み。

基本的にな考え方は同じですが、データを保存する場所に違いがあります。

手動やショートカットキーで削除できるブラウザキャッシュとは異なり、

  • 専用のプラグイン
  • サーバー機能
  • WordPressのテーマ機能
  • コードを追記

上記のような方法が選択できます。

サーバー設定やプラグイン、テーマの設定など様々な方法がありますが、いずれも自動的にできるものではありません。

キャッシュを削除するにも手動で行なう必要があるので若干手間がかかると言えます。

キャッシュやクリアの方法

ここからはブラウザキャッシュのクリア方法を解説!

1番よく利用する方法なので、できればショートカットキーは覚えておくと、htmlやcssをいじりたい時に便利ですよ。

PC版Chromeでキャッシュをクリアする方法

  1. ブラウザ右上の三点をクリックして表示項目から「履歴」にカーソルを合わせる
  2. 隣に項目が出るので「履歴」を選択
  3. 閲覧履歴データから「閲覧履歴データの削除」を選択
  4. 閲覧履歴データの削除設定が開くので、「閲覧履歴」と「キャッシュされた画像とファイル」にチェック
  5. データを削除して完了
  • STEP01
    ブラウザ右上の三点をクリック

    クリックすると表示項目から「履歴」にカーソルを合わせる

    ブラウザの三点リーダー画像
  • STEP02
    「履歴」を選択

    表示された「履歴」項目にカーソルを合わせると左に項目が出るので、そこで一番上にある「履歴」を選択

    chromeの履歴ボタンの画像
  • STEP03
    閲覧履歴データから「閲覧履歴データの削除」を選択
    閲覧履歴削除ボタンの写真
  • STEP04
    閲覧履歴データの削除設定が開くので、「閲覧履歴」と「キャッシュされた画像とファイル」にチェック
    chromeのキャッシュ削除設定写真
  • STEP05
    データを削除して完了

流れはこんな感じ!

④のチェック項目には「Cookie」に関するものもありますが、こちらはパスワードの保管設定にも影響し、消すと面倒なことも。

例えば、ブラウザに記憶させているパスワードがクリアされるなど。

チェックを入れるかどうかは任意で決めてください!

MAC Safariでキャッシュをクリアする方法

まずはSafariブラウザを開いた時メニューバーに「開発」が表示されているか確認してみてください。

もし表示されていなければ、以下の方法で表示させることができます。

  1. Safariブラウザを開く
  2. メニューバー「Safari」から「設定」を選択
  3. 「設定」項目から「詳細」を選択
  4. 下部の「メニューバーに開発メニューを表示」にチェックを入れてください。
  • STEP01
    Safariブラウザを開く
  • STEP02
    メニューバー「Safari」から「設定」を選択
    safariの設定写真
  • STEP03
    「設定」項目から「詳細」を選択
  • STEP04
    下部の「メニューバーに開発メニューを表示」にチェックを入れてください。
    safariの詳細設定画像

メニューバーに「開発」が表示されていればキャッシュをクリアできる状態です。

safariの開発項目にあるキャッシュを空にするボタン

あとは開発」メニューから「キャッシュを空にする」を選択したら完了!

これだけ!

特に難しいことはないと思います。

EdgeやFirefoxなどはChromeの設定に近いので、同じ様にいじってみてください!

簡単便利!PC版スーパーリロード

いやいや、キャッシュ消すのなんやかんやめんどいなっ!

なんて方もいると思います。

そんな方にはこちら!「スーパーリロード」をおすすめ!!

スーパーリロードとは、ブラウザに一時保存されたデータを使わず、サーバーから新しいデータをロードする機能。

クリアとは違いますが、この方法でもデータ更新の場合は有効なことが多いです。

別の読み名として「強制再読み込み・フルリロード・強制リロード・ハード再読み込み・強制リフレッシュ」など色々呼び方があるようです。

スーパーリロードの方法

スーパーリロードのやり方は主に2つ!

  • ショートカットキーで行なう
  • ブラウザのボタン操作で行なう

基本的にはこの2つの方法ででき、誰でも簡単にできます。

PC版 Chromeショートカットキーの方法

【Windows版】

  • Shift + F5
  • Ctrl + F5
  • Ctrl + Shift + R

【MAC版】

  • Cmd + Shift + R

PC版 Chromeのボタン操作で行なう方法

【Windows版】

  • Shift + ブラウザ更新ボタン
  • Ctrl + ブラウザ更新ボタン
  • 「検証」を表示した状態で更新ボタン長押しで「ハード再読み込み」

【検証の表示方法】
① 右クリック > 検証かF12(ファンクションキー+12)
② F12(ファンクションキー+12)

ちなみに、F12や「検証」でデベロッパーツールを表示した状態で「キャッシュの消去とハード際読み込み」を使うとキャッシュの削除も同時にできるので便利!

【MAC版

  • Shift + ブラウザ更新ボタン

プラグインでページキャッシュを削除する

ページキャッシュを有効にしている方向けに簡単な消去方法。

おすすめするのは下記のプラグインを使用すること。

  • WP Super Cache
  • WP Fastest Cash
  • W3 Total Cache

【簡単プラグインの入れ方】ワードプレスを機能拡張するメリットと注意点

インストールするとダッシュボードの「設定」や「メニュー」に各プラグインの設定項目が追加されているので、簡単に利用できます!

①「WP Super Cache」の設定とキャッシュ削除

【WP Super Cache 有効化STEP】

  • インストールする
  • 有効化されていないので「設定」から選択
  • 「キャッシング利用 (推奨)」にチェックを入れて「ステータス」を更新
  • キャッシュのテストをしてタイムスタンプが一致していればOK
  • キャッシュを削除

「WP Super Cache」は他にも詳細オプションが豊富なので、気になる方は調べて使い倒してみてください。

【①インストールする】

WP Super Cacheの説明手順①

WordPressダッシュボードから「プラグインを新規追加」から検索してインストール。

【②「設定」からWP Super Cacheを選択】

WP Super Cacheの説明手順②

インストール時点では有効化されていません。↑赤枠にあるように有効化メッセージが表示されます。

【③「キャッシング利用 (推奨)」にチェックを入れて「ステータス」を更新】

WP Super Cacheの説明手順③

設定に追加されている「WP Super Cache」から設定を変更。

【④キャッシュのテストをしてタイムスタンプが一致していればOK】

WP Super Cacheの説明手順④

設定を「キャッシング利用(推奨)」に変更して、「ステータス」を保存。

【⑤キャッシュを削除】

WP Super Cacheの説明手順⑤

「キャッシュをテスト」で問題なければサーバー上にキャッシュデータが入っているので、「キャッシュを削除」ボタンで簡単にクリアにすることができます。

②「WP Fastest Cash」の設定とキャッシュ削除

【WP Fastest Cash 有効化STEP】

  • 公式サイトでプラグインをダウンロード
  • 「プラグインを新規追加」でアップロードして有効化
  • ダッシュボードメニューにある「WP Fastest Cash」から設定
  • 設定項目から最低限の項目にチェックと日本語選択
  • submitで設定を保存

【①公式サイトでプラグインをダウンロード】

プラグインの公式サイトからプラグインをダウンロードする必要があります。

出展:WordPress org WP Fastest Cache

【②WordPressのダッシュボードから「プラグインを新規追加」でアップロードして有効化】

プラグインをダッシュボードからアップロードしてインストールすると有効化できるようになります。

インストール方法は下記記事を参考にご覧ください。

【簡単プラグインの入れ方】ワードプレスを機能拡張するメリットと注意点

【③ダッシュボードメニューにある「WP Fastest Cash」から設定】

ダッシュボードにある左側メニューに項目が追加されるので、こちらをクリックしてください。

【④設定項目から最低限の項目にチェックと日本語選択】

チェック項目と言語選択ができるので、両方とも設定しておきます。

インストール時点で日本語の可能性はありますが、念のため日本語に設定しておくのが無難ですね!

設定できたら「submit」を押して保存。初期設定はこれで完了。

【⑤submitで設定を保存】

④の設定でキャッシュはするようになっているので、削除したい時は「キャッシュを削除」タブを選択、「すべてのキャッシュを選択」をクリックして完了!

②「W3 Total Cache」の設定とキャッシュ削除

【W3 Total Cache 有効化STEP】

  • プラグインから「W3 Total Cache」をインストールして有効化
  • ダッシュボードメニューから「パフォーマンス」を設定
  • セットアップガイドを「スキップ」して「一般」
  • 「ページキャッシュ」を有効化
  • 「一般」から「ページキャッシュ」に移動し、チェックを入れて「設定を保存」
  • ページキャッシュを削除

【①WordPressのダッシュボードメニューからプラグイン > 「新規プラグインを追加」から「W3 Total Cache」を検索してインストール後、有効化】

「新規プラグインを追加」から検索。

インストール時にプラグインは有効化させますが、この時点では設定もしておらず、ページキャッシュはされていません。

【②ダッシュボードメニューに「パフォーマンス」が追加されているので選択】

【③セットアップガイドが表示されるので、「スキップ」して「一般」から「ページキャッシュ」を有効化】

セットアップガイドを見ないという方は「スキップ」を選択して設定に進んでください。

【④「一般」から「ページキャッシュ」項目に移動し、チェックを入れて「設定を保存」】

デフォルトだと「ページキャッシュ」項目にチェックが入っていないので、ここにチェックを入れて有効化させて右上の「設定を保存」をクリック。

【⑤ページキャッシュさせる内容を設定】

最低限必要な項目にチェックをいれて「設定を保存」。

これでページキャッシュの設定は完了!

【⑥ページキャッシュを削除

「パフオーマンス」や「一般」から「すべてのキャッシュを空にする」からキャッシュする内容を選択。

【選択できる空にする内容】

  • ページキャッシュを空にする
  • オペコードキャッシュを空にする

キャッシュのクリアやスーパーリロードまとめ

以上、キャッシュのクリアやスーパーリロードの方法を解説しました!

キャッシュって大事なんですが、クライアントに確認してもらう時なんかに更新されないなど起こるとほんとに面倒なんですよね。

最初から確認の時最初からシークレットモードを使っていればいいと思うんですが・・これが中々難しい。

そんな時に今回紹介したクリアやショートカット方法は大変役立つと思うので、知っておいて損はないと思います!

ファズ
ファズ

今回はこんな感じ!またねっ

コメント

タイトルとURLをコピーしました