【特集】WordPress高速化への挑戦!

ブラウザのキャッシュを活用する-たったの5分で改善する方法!!

休日を読書で過ごす女性

GoogleのPageSpeed Insightsで

「ブラウザのキャッシュを活用する」の改善を指摘されたとき、

どう対応すればいいのでしょうか。

やり方はすごく簡単なんですが、それを知らないとものすごく悩むわけです。

 

だから、

ここでまずやり方を知ってしまいましょう。

理屈はその後で・・・。

PageSpeed Insightsで指摘されたこと

まずは、事象の確認です。

WordPressの高速化をしようとしてPageSpeed Insightsで分析した結果、

スコアと共にいろいろ指摘事項が出てきます。

 

「ブラウザのキャッシュを活用する」では、こんな風に指摘されます。

これをどうやって改善すればよいのでしょうか?

ブラウザのキャッシュを活用するの指摘

「ブラウザのキャッシュを活用する」の指摘事項

.htaccessファイルにコードを追記する

その改善方法というのは、

.htaccessファイルの末尾に下記のコードをコピペすることです。


#ブラウザキャッシュの設定
<IfModule mod_expires.c>
ExpiresActive On
xpiresDefault "access plus 1 seconds"
ExpiresByType text/css "access plus 1 weeks"
ExpiresByType text/javascript "access plus 1 weeks"
ExpiresByType image/gif "access plus 1 weeks"
ExpiresByType image/jpeg "access plus 1 weeks"
ExpiresByType image/png "access plus 1 weeks"
ExpiresByType image/svg+xml "access plus 1 weeks"
ExpiresByType application/pdf "access plus 1 weeks"
ExpiresByType application/javascript "access plus 1 weeks"
ExpiresByType application/x-javascript "access plus 1 weeks"
ExpiresByType application/x-shockwave-flash "access plus 1 weeks"
ExpiresByType application/x-font-ttf "access plus 1 weeks"
ExpiresByType application/x-font-woff "access plus 1 weeks"
ExpiresByType application/x-font-opentype "access plus 1 weeks"
ExpiresByType application/vnd.ms-fontobject "access plus 1 weeks"
</IfModule>

 

.htaccessファイルは、ルートフォルダにあります。

エックスサーバーであれば、public_htmlの直下です。

サブディレクトリやサブドメインのブログならば、それぞれのフォルダの直下にあります。

 

.htaccessファイルにコードを入れるだけで、スコアが5点~10点くらい上がります。

ちなみに高速化のチューニングを一通りしている当サイトのスコアは、こちらです。

PageSpeed Insightsスコア-モバイル
PageSpeed Insightsスコア-パソコン

 

モバイルもパソコンも91点ですので良好です。

ちなみに冒頭に紹介した”「ブラウザのキャッシュを活用する」の指摘事項”は、

当サイトの現在の状態です。

 

”はてな”のJavaScriptだけが対策できていませんが、他は指摘されていません。

上記コードを入れるだけで指摘事項が大幅に削減できるのです。

ブラウザのキャッシュを活用するとは?

対策の方法がわかったところで、ブラウザのキャッシュを活用するとはどういうことか

説明しておきたいと思います。

 

ブラウザでブログにアクセスしたとき、スクリプトや画像など様々なものを読み込みます。

初めてアクセスしたブログは、それらすべてをサーバーから取得してブラウザに表示します。

しかし、ブログの画像というのはアクセスするたびに変わるものではありませんよね?

 

もし、また同じブログにアクセスしたとき同じ画像であれば、

わざわざ取得しなくても前に読みこんだ画像を使うことができれば

サーバーから読み込む必要がありません。

 

読み込む必要がなければ、その分読み込み時間が短くできますね。

つまり、ブログの表示速度が速くなるということにつながるのです。

 

同じリソースはサーバーから読み込まずに

前に読みこんだ時の情報を使う仕組みのことを「キャッシュ」と言います。

キャッシュを活用することで、無用な読み込み時間を省くことができるのです。

 

先に挙げたコードは、キャッシュの有効期間を設定しています。

例えば、7行目は”GIF画像を最終アクセスから1週間有効にする”という意味です。

 

1週間有効とあるので、ブラウザは最後に読み込んでから1週間以内は

前に読み込んだ画像を使い、サーバーから新たに取得しません。

1週間を過ぎると、必ずサーバーから新たに取得します。

 

ということは、

頻繁に変わるものは、短めの期間を設定して、

それほど変わらないものは、長めの期間を設定しておけば、

サーバーへのアクセスを最小限に抑えつつ、ブログを最新状態で見せることができるのです。

 

PageSpeed Insightsのスコアは、

このキャッシュの有効期間の設定をしているかどうかを評価しているのです。

設定がされていない場合に、「ブラウザのキャッシュを活用する」という指摘が出る

というわけなのです。

【広告】

設定が有効になっていることを確認するには?

先のコードを追加した後、その設定が有効になっているか確認するためには

何をチェックしておけばよいでしょうか?

これは、コードを追加する前と後で指摘事項が変化することを見るべきです。

指摘される数が減るとともにスコアも上がりますので、必ずチェックしましょう。

 

もう1つは、

PageSpeed Insightsが出すブラウザのキャッシュを活用するという指摘の中で

”有効期限が指定されていません”という表記がないか確認することです。

キャッシュを設定すると有効期限が表示されるように変わります。

 

もし、”有効期限が指定されていません”という表記が残っている場合は、

コードの設定が有効になっていないか、

あるいは、動的に読み込む画像等で.htaccessファイルの設定が及ばない

リソースである可能性があります。

これについては、また別の記事で説明します。

まとめ

今回は、ブラウザのキャッシュを活用するというGoogleの指摘への

改善方法を説明しました。

.htaccessファイルに上に掲載したコードをそのままコピペするだけでOKです。

 

改善できたら、どうして改善できたのかその仕組みも理解しておいてください。

そうすれば、何をどう制御すれば結果が変わるのかがわかるようになります。

【広告】

関連記事

  1. ごめん、待たせちゃった・・・

    deflateを使用してリソースを圧縮する方法!WordPressが劇的に高速化!!

  2. SNSで流れてきた商品をポチろうか悩んでいる女子

    ブログの表示速度を遅くしないための広告の貼り方とは!?

  3. イケメンにフィッシュオン!

    WordPress高速化のための最適なJPEG/PNG/GIF使い分けはこれだ!!

  4. ランタンを見つめる文学美女

    WordPress最適化をした結果PageSpeed Insightsスコアはどう変化したのか!?

  5. 目を閉じるたびに思い出す

    PageSpeed Insightsの点数を90点以上にした5つの改善を紹介!!

コメント

  • トラックバックは利用できません。

  • コメント (0)

  1. この記事へのコメントはありません。

WordPressテーマ「MAG(TCD036)」

人気記事

  1. 目を閉じるたびに思い出す
  2. はい、正解は私でした
  3. 休日を読書で過ごす女性
  4. ごめん、待たせちゃった・・・
  5. 指をさすビジネスウーマン
  6. イケメンにフィッシュオン!
  7. 「いいね!」するビジネスウーマン
  8. 「問い合わせ先はコチラ!」と告知する地方局のアナウンサー
  9. スマホで健康管理を行う意識の高い女性
  10. すべてを許したくなるエンジェル笑顔

広告




おすすめ記事

  1. 「OK、そういうこと!」と締めくくるキラキラ女子 賢威7を使ってココが良かったと思う3つのこと(投稿画面編)
  2. ランタンを見つめる文学美女 WordPress最適化をした結果PageSpeed Insightsスコアはど…
  3. SNSで流れてきた商品をポチろうか悩んでいる女子 ブログの表示速度を遅くしないための広告の貼り方とは!?
  4. はい、正解は私でした 賢威7サイトタイトルとトップページタイトルの違いを易しく説明します!!
  5. 目を閉じるたびに思い出す PageSpeed Insightsの点数を90点以上にした5つの改善を紹介!!…
  6. メモを取る女性 お名前.comからエックスサーバーへのドメイン移管手続き備忘録
  7. すべてを許したくなるエンジェル笑顔 WordPressで投稿済みの記事を一括置換できるSearch Regexの使い…

特集記事

  1. 休日を読書で過ごす女性 ブラウザのキャッシュを活用する-たったの5分で改善する方法!!
  2. SNSで流れてきた商品をポチろうか悩んでいる女子 ブログの表示速度を遅くしないための広告の貼り方とは!?
  3. ごめん、待たせちゃった・・・ deflateを使用してリソースを圧縮する方法!WordPressが劇的に高速化…
  4. イケメンにフィッシュオン! WordPress高速化のための最適なJPEG/PNG/GIF使い分けはこれだ!…
  5. 目を閉じるたびに思い出す PageSpeed Insightsの点数を90点以上にした5つの改善を紹介!!…
  6. 「いいね!」するビジネスウーマン WordPress高速化!全画像を一括圧縮するEWWW Image Optimi…
  7. 指をさすビジネスウーマン HTML・JavaScript・CSSを縮小するAutoptimizeの使い方と…
PAGE TOP