Add Expires Headers External Resources WordPress

Every website is using external JavaScript files. They are required for example when using Google Analytics, or an ad provider like BuySellAds. In order to leverage browser caching and optimize your website speed, it is recommended that you add expire headers to your scripts, which you can’t do on external files.

In this article, I’ll show you how to dynamically import external JavaScript or CSS files into your own site for better performance.

Expires headers allow a web developer to tell the browser whether a resource on a website needs to be requested from the source or if it can be fetched from the browser’s cache. Usually, website static resources like s or .pdf documents have expires headers, which results in the browser storing those resources in its cache. When a visitor comes back to your site, the browser fetches the resource from its own cache instead of requesting it from your server with an HTTP request.

Therefore, when you add expires headers to your site, it will enhance the load time of your page, and provide a better user experience to the website visitors.

In Apache, expires headers are generally set in the .htaccess file. For reference, here is the part I use in one of my site’s .htaccess file:

As you can see, the code above is pretty self-explanatory. Basically, for each filetype (/jpg, /gif, text/css, etc) we specify for how long the resources should be cached. “Access plus 1 month” means that the resources of the specified filetype will be cached for 1 month after being first accessed.

On line 13, you’ll notice the ExpiresDefault directive. This directive sets the default algorithm for calculating the expiration time for all documents in the affected realm. It can be overridden on a type-by-type basis by the ExpiresByType directive.

When using an external service as such as Google Analytics, you are often required to include external JavaScript files into your own website.

While this isn’t a problem per se, you obviously don’t have as much control over those files than over files hosted on your own server. This is especially problematic since you should always set an expire header to static files in order to leverage browser caching and optimize your website speed.

But external JavaScript and CSS files aren’t hosted on your server. It is therefore not possible to simply add expires headers using your .htaccess file.

How to Test Expires Headers with Terminal

If you prefer testing expires headers with a more technical option, you can make a curl request in Terminal to a static asset on your site, and inspect the HTTP headers directly. For example, if your expires or cache-control rule covers CSS files, you can make a curl request like the one below.

In our case, the curl request to the style.min.css file provides the response below.

As you can see, the response includes an expires and cache-control headers. Specifically, the cache-control header shows a max-age of 315360000 seconds, which indicates an expiration time of one year.

Want to know how we increased our traffic over 1000%?

Join 20,000+ others who get our weekly newsletter with insider WordPress tips!

You can adjust the expiration times for different types of files as needed.

Expires headers are rules that let web browsers know whether to load a web page resource like s from the visitor’s browser cache or from your server. These can help improve the performance of your site.

FAQ

How do I add expired headers in WordPress?

How to Add Expires Headers With . htaccess on Apache Web Server
  1. Connect to your server using FTP in your preferred FTP client.
  2. Locate the . htaccess file in the root folder.
  3. Download a backup copy of the . htaccess file to your local computer. …
  4. Add the code snippet below near the top of the file.

How do I add expired headers in cPanel?

The expires header is an HTTP header that indicates whether it is possible to obtain information on request from the browser cache or if you need to access the server since the page option in the cache is already outdated. This header contains the date and time until the page is available in the browser cache.

Does response header expire?

Procedure
  1. Log in to the cPanel account for your website.
  2. Click on the File Manager icon under the Files section.
  3. In the upper right corner of File Manager, click on the Settings button.
  4. Put a check next to “Show hidden files” if it is not already checked and click Save.

Related Posts