ブラウザのキャッシュとは

私ははてなブログをしています。
GoogleのPage Speed Insightsでブログの速度を調べたところ、モバイルが50/100で、パソコンが86/100でした。
モバイルの修正が必要というところを見てみたら、
「スクロールせずに見えるコンテンツのレンダリングをブロックしている JavaScript/CSSを排除する」
「ブラウザのキャッシュを活用する」
と書いてありました。
調べてみても改善の仕方が良く分かりません。
詳しい人、教えて下さい。

No.2 ベストアンサー 回答者： torayoshi 回答日時： 2016/09/10 22:34

「キャッシュ」

ブラウザは過去にアクセスしたサイトを記憶する機能があります。
そのサイトに再アクセスした時、記憶してる情報と比較して、
更新されてたらサイトを読み込んで、更新されてなかったら「キャッシュ」から読み込みます。
サイトを読み込むより「キャッシュ」から読み込む方が高速なので、
「それを活用しなさい」ということです。
だけど、「キャッシュ」の方を先に読み込んでしまうと、
更新されていても更新前の古い情報が表示されてしまうので良くありません。
これらはブラウザでは規定でその両方を比較して新しい方を表示するようにしてるので、
特に気にしなくて良いです。

「～JavaScript/CSSを排除する」
サイトにはJavaScriptやCSS等が使われてるのが一般的です。
動きのある効果やより見栄えが良いようにするために使われてます。
しかしこれらをすべて無条件に読み込んでしまうと、セキュリティの関係で危険な場合があります。
なので、ブラウザはそういった怪しそうな動的コンテンツ（JavaScriptなど）をブロックする場合があります。
これが読み込みを遅くする原因の一つになる時があるので、「排除しなさい」ということなんです。
でも、無料のブログなんかでは広告を表示するためにこれらの動的コンテンツを多用しています。
ブログ運営会社はこの広告が出ないようにされると困るので、
出ないように出来ないような工夫をしてます。
だから実際には修正は、ほぼ対策なしと思って良いです。

この回答へのお礼

詳しい説明ありがとうございます。

お礼日時：2016/09/11 23:33

No.1 回答者： t_fumiaki 回答日時： 2016/09/10 22:21

「JavaScript/CSSを排除する」と言うのは、javaやcssを外部ファイル化してるから、そのファイルを読むのに時間が掛る、と言う意味。

つまり、htmlソース内に組み込め、と言う意味で、折角外部ファイル化している意味が無い。
そういう事はお構い無しに言ってるので、気にしない方が良い。
ドーシテモやりたいなら、cssを全てhtml内へ入れる。

「ブラウザのキャッシュを活用する」は、ブラウザのキャッシュメモリに保存させ、一々サーバからアクセスしないで、各自の端末のキャッシュから表示すると速いという意味です。

改善しても素晴らしい結果になる訳では無いし、キャッシュに常駐させると、サーバで修正しても各端末には反映されない不都合(キャッシュをみるんだから）もある。

ドーしてもやりたいなら、サーバに.htaccess　と言う拡張子だけのファイルを置いて、サーバの動きを制御する。

つまり、各パソコンに対してキャッシュ依頼をする。
----------------------------------------------------------------
下が.htaccessの例
max-ageはキャッシュ有効時間(秒)
必要なものを｜区切りで指定する。

#サーバのキャッシュを有効にする（画像の場合）
<Files ~ ".(gif|jpe?g|png|ico|otf|ttf|eot|woff)$">
Header set Cache-Control "max-age=604800, public"
</Files>

#サーバのキャッシュを有効にする（ファイルの場合）
<Files ~ ".(css|js|gz)$">
Header set Cache-Control "max-age=604800, public"
</Files>

この回答へのお礼

詳しい説明ありがとうございます。

お礼日時：2016/09/11 23:34