ホーム > SEO > Search Console > モバイル > ブラウザのキャッシュを活用する
目次 | 元のページ 前のページ | 次のページ サイトマップ | ページEND

モバイル ユーザビリティ ブラウザのキャッシュを活用する


Google Search Console モバイル ユーザビリティ



ウェブサイトのモバイル フレンドリー 度について、下枠左側の 「 モバイル フレンドリー テスト 」 にて、URLを指定して、ページ毎に確認することができます

検出された問題の詳細については、同様に、下枠右側の 「 PageSpeed Insights 」 で確認します


モバイル フレンドリー 度確認 検出された問題の詳細確認
モバイル フレンドリー テスト PageSpeed Insights




モバイル ユーザビリティの問題 対処法 ブラウザのキャッシュを活用する



「 mod_expires 」 (Expires ヘッダー) 設定方法



ルートディレクトリに、ファイル名 「 .htaccess 」( パーミッション(属性値) : 644 : 通常のhtmlファイルと同じ)を作成し、以下枠内を記述します

「 mod_expires 」の設定内容は、配置したディレクトリ配下にも継承されます


項目 内容 補足
ファイル名 .htaccess 先頭は 「  」 (ドット)
パーミッション
(属性値)
644 通常のhtmlファイルと同じ
記述例 ExpiresActive On
ExpiresByType text/html "access plus 1 days"
ExpiresByType text/css "access plus 1 days"
ExpiresByType image/gif "access plus 1 weeks"
ExpiresByType image/png "access plus 1 weeks"
ExpiresByType image/jpeg "access plus 1 weeks"
ExpiresByType image/pdf "access plus 1 weeks"
ExpiresByType application/x-shockwave-flash "access plus 1 weeks"
ExpiresByType application/rss+xml "access plus 1 weeks"
ExpiresByType application/x-javascript "access plus 1 weeks"
書式 ExpiresByType ファイルタイプ名 "(access|modification) plus N (minutes|days|weeks|months|years|)"




モバイル ユーザビリティの問題 ブラウザのキャッシュを活用する 設定前後の比較 設定の効果



PageSpeed Insights 」 の「 修正を考慮:ブラウザのキャッシュを活用する 」 での、ブラウザキャッシュ設定前後の当サイトのトップページ、効果比較表です


全項目 "access plus 1 weeks" 設定
設定前 http://abhp.net/img/TopPage_Tytle_000001.gif(有効期限が指定されていません)
http://abhp.net/img/TopPage_Tytle_000002.gif(有効期限が指定されていません)
http://platform.twitter.com/widgets.js (30 分)
http://st.shinobi.jp/…ices/admaxdsp/static/javascripts/trac.js (30 分)
https://apis.google.com/js/api.js (30 分)
https://apis.google.com/js/platform.js (30 分)
http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js (60 分)
https://oauth.googleusercontent.com/…e:rpc:shindig.random:shindig.sha1.js?c=2 (60 分)
https://pagead2.googlesyndication.com/pagead/osd.js (60 分)
http://www.google-analytics.com/analytics.js (2 時間)
http://cdn-ak.b.st-hatena.com/…27f0bec3bfa0736c1f3315f1d829a2ae45c8dd90 (10.3 時間)
設定後 http://platform.twitter.com/widgets.js (30 分)
http://st.shinobi.jp/…ices/admaxdsp/static/javascripts/trac.js (30 分)
https://apis.google.com/js/api.js (30 分)
https://apis.google.com/js/platform.js (30 分)
http://gum.criteo.com/…sync?c=1&r=2&j=OX_idp_criteo_cb482607700 (60 分)
http://mathid.mathtag.com/d/i.js (60 分)
http://ox-d.openx.jp/w/1.0/jstag (60 分)
http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js (60 分)
https://oauth.googleusercontent.com/…e:rpc:shindig.random:shindig.sha1.js?c=2 (60 分)
https://pagead2.googlesyndication.com/pagead/osd.js (60 分)
http://www.google-analytics.com/analytics.js (2 時間)
http://cdn-ak.b.st-hatena.com/…79ad2285399bf3e11d4fb03a5709474001ba5fa0 (7.5 時間)
http://cdn-ak.b.st-hatena.com/…27f0bec3bfa0736c1f3315f1d829a2ae45c8dd90 (7.5 時間)
効果 "access plus 1 weeks" 設定
当サイトのファイルである下記が消えていますので、キャッシュ設定されたことが確認できます
http://abhp.net/img/TopPage_Tytle_000001.gif(有効期限が指定されていません)
http://abhp.net/img/TopPage_Tytle_000002.gif(有効期限が指定されていません)
他のファイルは、当サイトページに貼り付けてある広告、および、SNSアイコンで、当サイトの設定では手出しできません
"access plus 1 days" 設定
全項目 「1 weeks」を「1 days」に変更してみると、下記の様に修正を求めるメッセージが出ました
http://abhp.net/img/TopPage_Tytle_000001.gif (24 時間)
http://abhp.net/img/TopPage_Tytle_000002.gif (24 時間)


全項目 "access plus 1 days" 設定
設定後 http://platform.twitter.com/widgets.js (30 分)
http://st.shinobi.jp/…ices/admaxdsp/static/javascripts/trac.js (30 分)
https://apis.google.com/js/platform.js (30 分)
https://apis.google.com/js/rpc:shindig_random.js?onload=init (30 分)
http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js (60 分)
https://pagead2.googlesyndication.com/pagead/osd.js (60 分)
http://www.google-analytics.com/analytics.js (2 時間)
http://abhp.net/img/TopPage_Tytle_000001.gif (24 時間)
ExpiresByType text/html のみ "access plus 1 days" 設定
他項目 "access plus 1 weeks" 設定
設定後 http://platform.twitter.com/widgets.js (30 分)
http://st.shinobi.jp/…ices/admaxdsp/static/javascripts/trac.js (30 分)
https://apis.google.com/js/platform.js (30 分)
https://apis.google.com/js/rpc:shindig_random.js?onload=init (30 分)
http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js (60 分)
https://pagead2.googlesyndication.com/pagead/osd.js (60 分)
http://www.google-analytics.com/analytics.js (2 時間)
ExpiresByType text/html と ExpiresByType text/css のみ "access plus 1 days" 設定
他項目 "access plus 1 weeks" 設定
設定後 http://platform.twitter.com/widgets.js (30 分)
http://st.shinobi.jp/…ices/admaxdsp/static/javascripts/trac.js (30 分)
https://apis.google.com/js/platform.js (30 分)
https://apis.google.com/js/rpc:shindig_random.js?onload=init (30 分)
http://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js (60 分)
https://pagead2.googlesyndication.com/pagead/osd.js (60 分)
http://www.google-analytics.com/analytics.js (2 時間)
効果 当サイトのファイルである下記が消えていますので、キャッシュ設定されたことが確認できます
http://abhp.net/img/TopPage_Tytle_000001.gif (24 時間)
他のファイルは、当サイトページに貼り付けてある広告、および、SNSアイコンで、当サイトの設定では手出しできません

テキスト項目である、ExpiresByType text/html と ExpiresByType text/css は、"access plus 1 days" 設定にしても、修正を求めるメッセージが出ませんので、両項目だけは、"access plus 1 days" 設定で問題ないようです




モバイル ユーザビリティの問題 ブラウザのキャッシュを活用する 参考情報



.htaccessにて設定をする


ExpiresActive On
ExpiresByType image/gif "access plus 1 days"
ExpiresByType image/jpeg "access plus 1 days"
ExpiresByType image/png "access plus 30 days"
ExpiresByType application/x-shockwave-flash "access plus 1 years"
ExpiresByType application/rss+xml "access plus 30 minutes"
ExpiresByType application/x-javascript "access plus 20 days"
ExpiresByType text/html "modification plus 15 minutes"
ExpiresByType text/css "access plus 20 days"

はじめの行はmod_expiresを使用するという宣言になります。
ExpiresActive On
使用の宣言に続き、以下のような感じに設定をしていきます
ExpiresByType ファイルタイプ "(access|modification) plus N (minutes|days|weeks|months|years|)"

【負荷対策】Apacheのモジュールmod_expiresでキャッシュを利用する - エーエイチレフ linuxサーバー技術情報 」 より





転送と有効範囲


.htaccess をWebサーバへ転送する際はアスキーモードで転送します。転送後は .htaccess のパーミッションを "644(rw-r--r--)" に設定します。ただし、共有サーバでは、"604(rw----r--)" の場合もあります。

.htaccess の設定は、配置したディレクトリ以下に対して有効になります。そのため、Webサイト全体に対して設定を有効にしたい場合は、ルートディレクトリに配置しましょう。階層別に分けて配置した場合、より深い階層に配置した .htaccess の設定が優先されます。

.htaccessの書き方 murashun.jp 」 より





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


このルールは、サーバーからのレスポンスに明示的なキャッシュ ヘッダーが含まれていないことや、リソースが短時間のみキャッシュされるよう指定されていることを PageSpeed Insights が検出した場合にトリガーされます。

概要


静的なリソースをブラウザでキャッシュすると、ユーザーがサイトに複数回アクセスした場合に時間を節約できます。キャッシュ ヘッダーは小さなサブセット(画像など)だけでなく、キャッシュできる静的なリソースにすべて適用されます。キャッシュできるリソースには、JS ファイル、CSS ファイル、画像ファイル、その他のバイナリ オブジェクト ファイル(メディア ファイル、PDF など)があります。一般に HTML は静的ではないため、デフォルトではキャッシュ可能と見なさないようにしてください。サイトの HTML にとってどのようなキャッシュ ポリシーが適しているか検討する必要があります。

推奨される解決方法


サーバーでブラウザのキャッシュを有効にします。静的なリソースのキャッシュの有効期間は 1 週間以上にしてください。広告やウィジェットなどのサードパーティ リソースの場合は、キャッシュの有効期間を 1 日以上にします。キャッシュ可能なすべてのリソースで、次のような設定をおすすめします:
•Expires を 1 週間以上、できれば最大で 1 年間先に設定します(より広くサポートされているため、Cache-Control: max-age よりも Expires をおすすめします)。RFC のガイドラインに違反するので、1 年以上先には設定しないでください。
•リソースの変更時期が正確にわかっている場合は、短い有効期間を設定してもかまいません。ただし、すぐに変更される可能性があるものの、変更時期がわからない場合は、長い有効期間を設定して、URL フィンガープリント(後述)を使用してください。

Expires ヘッダーと Cache-Control: max-age ヘッダー


これらのヘッダーでは、ウェブ サーバーから新しいバージョンが提供されているかどうか確認せずに、ブラウザでキャッシュ済みのリソースを使用できる期間を指定します。無条件で適用される「強いキャッシュ ヘッダー」です。設定後にリソースがダウンロードされると、有効期限や最大期間に達するかユーザーがキャッシュを消去するまで、ブラウザはそのリソースに対する GET リクエストを発行しません。

Last-Modifed ヘッダーと ETag ヘッダー


これらのヘッダーでは、キャッシュする目的で、ファイルが同じかどうかをブラウザが判断する方法を指定します。Last-Modified ヘッダーでは、日付を使用します。ETag ヘッダーでは、リソースを一意に識別する値を使用します(ファイルのバージョンやコンテンツ ハッシュが一般的です)。Last-Modified は、ブラウザがキャッシュからアイテムを取得するかどうかを判断する際にヒューリスティック(経験則)を適用するという意味で、「弱い」キャッシュ ヘッダーです。

これらのヘッダーを使用すると、ブラウザでは、ユーザーが明示的にページを再読み込みした場合に条件付きの GET リクエストを発行することで、キャッシュ済みリソースを効率的に更新できます。条件付きの GET では、サーバーでリソースが変更されていない限り、完全なレスポンスは返されないため、完全な GET よりも待ち時間が短くなります。

どちらのキャッシュ ヘッダーを使用すべきか


キャッシュできるすべてのリソースで、Expires と Cache-Control: max-age のいずれか、Last-Modified と ETag のいずれかを指定することが大切です。Expires と Cache-Control: max-age の両方、または Last-Modified と ETag の両方を指定すると冗長になります。

URL フィンガープリントの使用


ときどき変更されるリソースの場合、サーバー上でリソースが変更され、サーバーがブラウザに新しいバージョンが提供されたことを通知するまで、ブラウザでリソースをキャッシュしておくことができます。リソースの各バージョンに一意の URL を指定すると、この方法を実現できます。たとえば、「my_stylesheet.css」というリソースがあるとします。このファイル名を「my_stylesheet_fingerprint.css」に変更できます。リソースが変更されると、フィンガープリントも変更されるため、URL も変わります。URL が変更されるとすぐに、ブラウザはリソースの再取得を強制されます。フィンガープリントを使用すると、頻繁に変更されるリソースでも、有効期限をそれより先の方の日付に設定できるようになります。

フィンガープリントの一般的な方法として、ファイルのコンテンツのハッシュをコード化した 128 ビットの 16 進数が使用されます。

もう 1 つの方法は、アプリケーションの新しいバージョンごとに新しいリリース ディレクトリを作成して、各バージョンのすべてのアセットをバージョン別のディレクトリに格納することです。この方法にはバージョン間でアセットに変更がない場合でも、URL が変わるため再ダウンロードが強制されるという欠点があります。コンテンツ ハッシュを使用するとこの問題の影響を受けなくなりますが、やや複雑になります。

ブラウザのキャッシュを活用する    PageSpeed Insights    Google Developers 最終更新日: 4月 11, 2014 」 より





Google Search Console Google AdSense 等 Googleで使用、表示される日時について


Google Search Console Google AdSense 等 Googleで使用、表示される日時は、Google アメリカ本社のある「アメリカ合衆国 カリフォルニア州 マウンテンビューアンフィシアターパークウェイ1600番」の時間である「ロサンゼルス時間」(タイムゾーンの名称 「アメリカ合衆国 太平洋時間」)になっています
日本との時差は、「-16」で、日本の方が、16時間進んでいます (日本で日付が変わっても、現地で日付が変わるのは 16 時間後です)

日本時間に置き換えたい時は、Google Search Console で表示される日時に、16 時間足すことにより求められます
例えば、、Google Search Consoleでの表示時間、「2014.4.27 0:00」 は、日本時間、「2014.4.27 16:00」のことになります

目次 | 元のページ 前のページ | 次のページ サイトマップ | ページTOP
ホーム > SEO > Search Console > モバイル > ブラウザのキャッシュを活用する
   

© 2014 abhp.net All Rights Reserved.

関連情報サイト


 はじめる - ウェブマスター向けモバイルガイド
 遂にさくらのレンタルサーバでmod_expiresが使用可能に!さっそく試してみた
 【負荷対策】Apacheのモジュールmod_expiresでキャッシュを利用する - エーエイチレフ linuxサーバー技術情報
 .htaccessの書き方 murashun.jp

コンテンツ一覧

ページTOP
ページTOP
ページTOP
ページTOP