web-dev-qa-db-ja.com

ブラウザのキャッシュを活用する-サードパーティのリソース

PageSpeed Insightsのガイドラインに基づいてWebサイトを最適化しています。そして、ポイントの1つは、ブラウザーのキャッシュを活用することです。

enter image description here そして、この場合-サードパーティのリソース-Google AnalyticsやTag Managerなど。

私はすでにこのコードを.htaccessファイルに追加しました。

# Expires headers
<IfModule mod_expires.c>
ExpiresActive on

ExpiresDefault                          "access plus 2 days"

# cache.appcache needs re-requests in FF 3.6
ExpiresByType text/cache-manifest       "access plus 0 seconds"

# Your document html
ExpiresByType text/html                 "access plus 0 seconds"

# Data
ExpiresByType text/xml                  "access plus 0 seconds"
ExpiresByType application/xml           "access plus 0 seconds"
ExpiresByType application/json          "access plus 0 seconds"

# Feed
ExpiresByType application/rss+xml       "access plus 1 hour"
ExpiresByType application/atom+xml      "access plus 1 hour"

# Favicon (cannot be renamed)
ExpiresByType image/x-icon              "access plus 1 week"

# Media: images, video, audio
ExpiresByType image/gif                 "access plus 1 month"
ExpiresByType image/png                 "access plus 1 month"
ExpiresByType image/jpeg                "access plus 1 month"
ExpiresByType video/ogg                 "access plus 1 month"
ExpiresByType audio/ogg                 "access plus 1 month"
ExpiresByType video/mp4                 "access plus 1 month"
ExpiresByType video/webm                "access plus 1 month"

# HTC files
ExpiresByType text/x-component          "access plus 1 month"

# Webfonts
ExpiresByType application/x-font-ttf    "access plus 1 month"
ExpiresByType font/opentype             "access plus 1 month"
ExpiresByType application/x-font-woff   "access plus 1 month"
ExpiresByType application/x-font-woff2  "access plus 1 month"
ExpiresByType image/svg+xml             "access plus 1 month"
ExpiresByType application/vnd.ms-fontobject "access plus 1 month"

# CSS and JavaScript
ExpiresByType text/css                  "access plus 1 year"
ExpiresByType application/javascript    "access plus 1 year"

</IfModule>

このコードに何を追加する必要がありますか？また、GoogleアナリティクスとGoogleタグマネージャーのブラウザキャッシュの推奨期間はどのくらいですか？

cachegoogle-pagespeed
2
Kristina J.

@TimFountainが言うように、第三者から提供されるリソースを「制御することはできません」。リクエストはyourサーバーではなく、サードパーティのサーバーに送られます-したがって、yourサーバーは、サードパーティのリソースが要求されたときに処理されることはありません。

Google AnalyticsとTag Managerは、Googleのサーバーから提供されます。 GoogleのみがGoogleのサーバーを制御します！

ただし、Googleがこれらのリソースをキャッシュしないことを決定した場合、キャッシュしないことを選択した非常に良い理由があるかもしれません。すべてをキャッシュする必要はありません。

これらの「Google」リソースにキャッシュを実装しようとすると（おそらく、代わりに独自のサーバーからこれらのリソースを提供することで-推奨されません）-PageSpeedテストを満たす一方で、ユーザーエクスペリエンスと分析データに悪影響を及ぼす可能性があります。 PageSpeedツールはガイドのみです。推奨事項を盲目的に受け入れないでください。

StatckOverflowに関するこの質問では、特にGoogle AnalyticsとPageSpeed Insightsについて説明しています。

4
MrWhite

Htaccessルールは、サーバーから提供されるアセットにのみ影響します。サードパーティのサーバーから提供されるアセットのキャッシュに影響を与えるためにできることは何もありません-これらを制御することはできません。

2
Tim Fountain

私は1年後に返信しているので、その時までに、あなたはすでにこの問題を修正しているかもしれません。

私も同じポイントを獲得していましたが、それはGoogleアナリティクスとタグマネージャー以外のサードパーティのリソースに関するものです。

この問題を解決するために、Leverage Browser Cachingを適用し、さらにリソースの優先順位付け方法も適用しました。ここに簡単な説明があります。

4つのリソースの優先順位付け方法があります。

Preload<link rel="preload">は、現在のナビゲーションの一部としてリソースが必要であり、できるだけ早く取得を開始する必要があることをブラウザに通知します。

<link rel="preload" as="script" href="super-important.js">
<link rel="preload" as="style" href="critical.css">

PreConnect<link rel="preconnect">は、ページが別のOriginへの接続を確立することを意図しており、プロセスを開始することをブラウザに通知します出来るだけ早く。

<link rel="preconnect" href="https://example.com">

dns-prefetch実際には、接続に関連する別の<link>タイプがあります：<link rel="dns-prefetch">。これはDNSルックアップのみを処理するため、<link rel="preconnect">の小さなサブセットですが、ブラウザーのサポートが広くなっているため、Niceフォールバックとして機能する可能性があります。まったく同じ方法で使用します。

<link rel="dns-prefetch" href="https://example.com">

Prefetch<link rel="prefetch">は<link rel="preload">や<link rel="preconnect">とは少し異なり、何かを作ろうとしないクリティカルはより速く発生します。代わりに、機会があれば、重要ではない何かを早く発生させようとします。

これは、将来のナビゲーションまたはユーザーインタラクションの一部として必要になると予想されるリソース（たとえば、ユーザーが期待するアクションを実行した場合に後で必要になる可能性があるもの）をブラウザーに通知することによって行われます。 これらのリソースは、現在のページの読み込みが完了し、利用可能な帯域幅がある場合、Chromeで最も低い優先度で取得されます。

<link rel="prefetch" href="page-2.html">

あなたの問題について、他の重要ではないCSS、JSリソースがある場合、、HTMLで<rel=prefetch>を使用することができます。

ここから詳細を読むことができます： リソースの優先順位付け–ブラウザを助けてもらう

1
Bhargav Joshi