利用浏览器缓存外部文件答案

【问题标题】：Leverage browser caching external files利用浏览器缓存外部文件
【发布时间】：2014-10-18 06:23:43
【问题描述】：

我使用 google pagespeed Insights 来测试我的 nodejs 网站的性能。对于某些外部文件，它说要利用浏览器缓存，但我不知道该怎么做？

利用浏览器缓存

在静态资源的 HTTP 标头中设置过期日期或最长期限会指示浏览器从本地磁盘而不是通过网络加载以前下载的资源。将浏览器缓存用于以下可缓存资源：

http://maps.googleapis.com/…kwPPoBErK_--SlHZI28k6jjYLyU&sensor=false（30 分钟）

http://www.google-analytics.com/analytics.js（2 小时）

请任何人帮助我。

【问题讨论】：

讽刺的是，google pagespeed 抱怨从 google 服务器下载的资源...
Google 不能将他们的 API 缓存太久，他们将永远无法推送新版本或修复……不要像圣经一样把页面速度当作圣经。此外，这些文件的负载发生在他们的服务器上，而不是你的 :)
太长了？？？ 30 分钟，2 小时......这真的没有帮助.. 加载与否，但如果用户要在那里超过 30 分钟，性能会降低.. 如果他们不能将时间段增加到 6 之类的时间，你怎么能说几个小时或一天.. 这将不允许他们推送新的更新.. 你真的需要每小时更新一次吗？
我最终从我的服务器而不是 CDN/Google 提供所有 css 和 js 文件。使用这种方法获得 100/100 的页面速度:)

标签： node.js google-maps-api-3 express browser-cache pagespeed

【解决方案1】：

一种解决方案是反向代理 Google 资源。然后您可以添加 Cache-Control 和其他缓存标头。如果你使用的是 Apache，你可以在你的 httpd.conf 文件中完成它：

ProxyRemote http://www.google-analytics.com http://yourinternalproxy:yourport

<Location /analytics.js>
  ProxyPass http://www.google-analytics.com/analytics.js
  ProxyPassReverse http://www.google-analytics.com/analytics.js
  Header set Cache-Control "max-age=86400"
</Location>

这样做的缺点是：

您将通过您的服务器汇集大量额外流量。
显然，Google 所做的更新需要更长的时间才能显示给您网站的用户。

【讨论】：

还有一个缺点，如果用户在访问不同的网站后已经缓存了分析（这几乎可以肯定，考虑到它的受欢迎程度），你就无法利用这个事实它已经在缓存中。

【解决方案2】：

如果您无法以rudolfv's answer 的身份访问 httpd.conf 文件，这里有几个选项：

最简单的方法是您可以每天复制其内容以确保您的内容是最新的
我们可以利用 cron 的力量，有一个很好的示例脚本使用 php 发布 here

使用 php 脚本即时针对每个请求生成 google 分析脚本：

    $context = stream_context_create(['http' => ['Content-Type' => 'text/javascript', 'enable_cache' => true, 'enable_optimistic_cache' => true, 'read_cache_expiry_seconds' => 86400,]]);      
    echo file_get_contents("http://www.google-analytics.com/analytics.js", false, $context);

如果您的托管服务提供商允许 mod_headers 和 mod_proxy，请使用 .htaccess 的强大功能

    RewriteEngine On        
    Header set Cache-Control "max-age=86400"        
    RewriteRule ^js/analytics.js http://www.google-analytics.com/analytics.js [P]

【讨论】：