How do I add the an expires header for external URL components as suggested by GTmetrix and YSlow?

Question

I am trying to decrease the loading time of my website which is hosted in Bluehost. So when I check the performance scores via GTmetrix under YSlow section it mention to "Add expire headers" for four static components as below.

Add Expires headers

There are 4 static components without a far-future expiration date.

    https://www.googletagmanager.com/gtag/js?id=UA-49812165-2
    https://www.google-analytics.com/analytics.js
    https://www.trustedsite.com/rpc/ajax?do=tmjs-visit&host=surf2ship.com&rand=1565102041274
    https://cdn.ywxi.net/meter/surf2ship.com/105.png

So to have a better answer for this I have google the issue and below links were studied

1. moz.com post which is published on 2012
2. Stackoverflow post - Add Expires headers - which is published on 2013

All of above pages explain how to add expire headers for common file types. For a example see below .htaccess file. It specify all common formats rather than specifying a exact source.

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

How to add Expire headers for a specific url? Like for https://www.google-analytics.com/analytics.js

This is my current scores for the site

Solution 1

As @Evgeniy has already covered in his answer, in order to add HTTP response headers to resources external to your site, you need to copy these resources locally - to a server that you control - so you can send the HTTP response header as part of the HTTP response.

However, whether you should do this or not is another matter and each instance should be assessed individually. Serving a resource "locally" from your application server may not improve visitors performance. It can also reduce functionality should the apparent "static" resource be updated or if third party cookies are being used (which may or may not be desirable).

The results from GTmetrix (and other "performance" tools) should be seen as "advisory" only. A place from which to start your own site analysis. You should not implement the suggestions blindly without first assessing the implications. It is not necessarily wrong to not have "a far-future expiration date". Implementing features to simply satisfy the "automated performance tool report" is wrong.

do I have to add expire headers for other links that I have mentioned in the question.

1. https://www.googletagmanager.com/gtag/js?id=UA-49812165-2
2. https://www.google-analytics.com/analytics.js

Note that, as mentioned in comments, these resources are not without Expires headers (and more importantly the Cache-Control: max-age header), it's just that they are not what you might call "far-future". The gtag/js file is cached for 15 mins and analytics.js is cached for a "reasonable" 2 hours. Coupled with the fact that these same resources are used by many other websites then they are probably already cached by the time the visitor hits your site and the cache time might even be sufficiently long enough for these resources to remain cached for the duration of the user's visit (and if they continue to browse other websites in other tabs then the resources will get cached again anyway).

Google serves these resources pre-gzipped from a fast CDN, so it's unlikely you will be able beat the initial download time by hosting it on your own server.

StackExchange (generally considered to do the right thing when it comes to SEO/performance) requests analytics.js directly from Google (at the URL above) and does not copy it locally.

Google themselves do not recommend serving these files locally. However, Google doesn't state "performance" as the main reason:

Referencing the JavaScript file from Google's servers ensures that you get access to new features and product updates as they become available, giving you the most accurate data in your reports.

Once you go the route of serving these files locally, then maintenance can be more of an issue. For those using WordPress, there are plugins available that specifically help with automating the process of checking for updates.

3. https://www.trustedsite.com/rpc/ajax?do=tmjs-visit&host=surf2ship.com&rand=1565102041274

This doesn't appear to be a static resource! (Maybe GTmetrix is fooled by the text/javascript response?) The response varies between requests and sets a (3rd party) cookie for 6 days. Copying this locally and caching would serve no purpose and possibly break functionality. (Or maybe you don't need it at all?)

4. https://cdn.ywxi.net/meter/surf2ship.com/105.png

Served from Amazon CloudFront CDN and gzip'd. Whilst the Expires header is expired! The Cache-Control: public, max-age=86400 header ensures that all remotely mainstream browsers will cache this resource for 1 day.

Conclusion

IMO you are unlikely to benefit from copying locally and caching any of these "resources". It is more work and could even make performance worse for your users; not better. GTmetrix (and other "tools") are meant as a guide only. Real-world user performance is what really matters.

Solution 2

No, you aren't able to manage headers of files you don't host by your own. The single way to manage headers of those files you mentioned (google analytics and so on) is to host them locally. In this case you must manage their updates too.

In general you can match files in htaccess with their file types, like this:

<IfModule mod_expires.c>
# Enable expirations
ExpiresActive On
# Default directive
ExpiresDefault "access plus 1 month"
# Javascript
ExpiresByType application/javascript "access plus 1 year"
</IfModule>

But if you want to set header for certain file, use filesmatch directive, like

 <FilesMatch "^(googleanalytics.js)$">
        FileETag None
        Header set Cache-Control "max-age=604800, public, must-revalidate"
        Header set Expires "Thu, 31 Dec 2020 20:00:00 GMT"
    </FilesMatch>

Solution 3

See the solution here, which is working very well for me.

Comments

[Stephen Ostermiller]

See also How do I expire by type in .htaccess for remote loaded Google fonts? and Would changing the expiry header for analytics.js from Google Analytics mess things up?

[MrWhite]

Note that the results/suggestions from these performance tools are only advisory. This doesn't necessarily mean the suggestions should be implemented. YMMV. GTMetrix does seem to flag analytics.js as an issue. But Google's recommendation is to keep it as it is. support.google.com/analytics/answer/1032389?hl=en

[Nipun Tharuksha]

@MrWhite do you mean that no need to store it in my server and no need to add expire dates?

[MrWhite]

Yes, that is Google's recommendation. Google does already set an Expires (and crucially Cache-Control: max-age) header - it's just that they aren't "far-future" - which would seem to be intentional. (Note that Google uses content negotiation and sends a pre-gzip'd response if accepted - are you doing this?) Hosting the file locally does (slightly) increase load on your server and will not necessarily improve download performance due to the browsers number-of-connections-per-host limitation (as well as your server's).

[Nipun Tharuksha]

@MrWhite well explained and thanks. If possible could you please let me know do I have to add expire headers for other links that I have mentioned in the question.

[Nipun Tharuksha]

thanks for the help. Yeah you are correct. Also one more issue for me. If I host them in my own server and then how can I write in my .htaccess file.Just imagine I have a js file named googleanalytics.js and then could you please tell me how to link it in the .htaccess file.

[Nipun Tharuksha]

Once again thanks for this clear answer. I have two more things to be cleared .If possible could you please update your answer with how should I use FilesMatch if my googleanalytics.js saved in public html/js/googleanalytics.js and could you please mention for how many days it is good to set expire dates for a above links. It would be a great help if you could update your answer with that. Thanks

[MrWhite]

Hosting these files locally will not necessarily improve performance for your site visitors (Google's servers are fast and make use of CDNs). Hosting these files locally also means you need to manually update these files should they change. In fact, Google recommends not to store these files locally.

[MrWhite]

"how should I use FilesMatch if my googleanalytics.js saved in..." - FilesMatch references the filename only, not the file path, so there is nothing to change. However, if you are targeting a single file then you should probably be using the simpler Files directive instead - which does not use a regex.

[MrWhite]

Note that hardcoding the Expires header in .htaccess can be problematic, unless you are setting essentially infinite expiry times. Although the Cache-Control: max-age header will take priority in all modern browsers.

[Nipun Tharuksha]

This is what exactly I wanted. Thank you very much for consuming your valuable time for this. Once again thanks.

[Nipun Tharuksha]

Thanks its very usefull

[dan]

Answers here are required to be more than just links since they often can become unavailable in the future. Can you summarize the important content from this link, or include it as a quote? Thanks.