Leverage browser caching external files

12
votes

I used google pagespeed Insights to test the performance of my nodejs website. For some of external files it is saying to leverage browser caching but I don't know how to do this ?

Leverage browser caching

Setting an expiry date or a maximum age in the HTTP headers for static resources instructs the browser to load previously downloaded resources from local disk rather than over the network. Leverage browser caching for the following cacheable resources:

http://maps.googleapis.com/…kwPPoBErK_--SlHZI28k6jjYLyU&sensor=false (30 minutes)

http://www.google-analytics.com/analytics.js (2 hours)

Anyone please help me on this.

2
node.jsgoogle-maps-api-3expressbrowser-cachepagespeed
Its ironic that google pagespeed complains about resources downloaded from google server... - Vishwanath
Google can't cache their APIs for too long, they would never be able to push new versions or fixes... don't take pagespeed like a bible. Besides, the load of these files occurs on their servers, not yours :) - Mike Gleason jr Couturier
Too long??? 30 minutes, 2 hours... That really doesnt help.. Load or not but performance degrades if user is gonna be there for more than 30 mins.. And how can you say that if they cant increase the time period to something like 6 hours or a day.. That will not allow them to push new updates.. Do you really need update hourly? - Vishwanath
I ended up serving all css and js files from my server rather than CDN/Google. Got 100/100 on page speed with that approach :) - electronix384128

2 Answers

5
votes

One solution is to reverse proxy the Google resources. Then you can add Cache-Control and other caching headers. If you're using Apache you can accomplish it as follows in your httpd.conf file:

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>

The drawbacks of this are that:

  • You'll funnel a lot of additional traffic through your servers.
  • Obviously updates made by Google will take longer to appear for the user's of your site.
3
votes

If you don't have access to httpd.conf file as rudolfv's answer there are several options here:

  1. the easiest one is you could copy its content each day to make sure your up to date
  2. we can employ the powers of cron, there is nice sample script using php posted here

  3. use a php script to generate the google analytics script on every request on the fly:

        $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);

  4. use the power of .htaccess if your hosting provider allowing mod_headers & mod_proxy

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