How To Add Expires Header and leverage browser caching

Learn How To Add Expires Header in Cloudflare and leverage browser caching in WordPress also in Apache and Nginx

What are expires headers?

Expires headers notify the user whether they should ask the server for a particular file, or whether they should pull it from the user cache.

The whole idea behind Expires Headers is not only to minimize the load of web updates (constantly copying the same file while it is unmodified is wasting precious load time), but also to reduce the amount of web HTTP queries.

Your browser is responsible for interacting with the web server when you visit a website to access all of the files needed. It then compiles certain files for web page view. As web pages are richer in graphics and text, more and more files are being moved between the web server and your computer.

In the past you’d have an HTML file and maybe a few photos to use on your website, but many new websites might have 50 + files to pass every page. The files themselves can be an immense improvement in load on their own, so you need to make a request on each file and even though the requests are fractions of a second, they will quickly add up.

How do expires headers work?

Expires Headers are relatively straightforward in their manner of operating. They notify the user how long it takes to save a file in the cache and they don’t need to save the file again for future page views and visits. You are correct to believe for a first time user that Expires Headers would not increase page speed because this tourist will have to access all the files for the first time. Using Expires Headers helps cut down on load times for guests returning.

You may set different file headers to Dates, or even file forms. Then when the user arrives at the website it will see when the different types of files were last accessed. If it was recently it will show them from the archive, it will update the newest edition from the web server if you haven’t accessed the site in a moment.

The aim is to set late expiry dates for things on the website that don’t change (logo, colours, etc). Set short periods of expiry for items which change periodically.

Why are expires header important?

It is necessary to add Expires Headers to reduce HTTP requests and reduce the time it takes for the server to communicate with the user. It also allows the users to reuse the cache files that have been saved in the browser to reduce the amount of downloaded files they require.

You can set up expires header by Leveraging browser caching

What is browser caching?

Every time a web page is loaded by a browser it must download all the web files to display the page properly. It includes all the files from Xml, CSS, JavaScript and.

Some pages may consist of only a few files and be small in size-perhaps a few kilobytes. There might be plenty of files for others, though, and they will add up to being multiple megabytes wide. For example Twitter.com is 3 MB+.

The problem here is two folds.

These wide files take longer to load, which can be especially frustrating if you are on a sluggish internet (or mobile device) connection.
Each file allows an individual request to the server. The more requests the website handles at the same time, the more research it has to do, just to reduce the page load further.
By storing some of these files locally in the user’s browser, browser caching can help. Their first visit to your site will take the same time to load, but when that user revisits your website, refreshes the page, or even moves to another page of your site, they already have some of the files that they need locally.

It ensures that the amount of data to be accessed by the user’s browser is small, and less requests will be made to the website. The Outcome? Site load times decreased.

Why is browser caching important?

Browser caching functions by labeling some pages, or sections of pages, as required to be restored at different intervals. For eg, the logo on your website would probably not change from day to day. We will inform the user’s browser to view this image just once a week by caching this logo file. Any further download of the logo image will be needed for each visit the user makes within one week.

By asking the browser to save these files and not open them until you return, the webserver saves your users time and the bandwidth of your web server.
The key explanation why browser caching is relevant is that it reduces the demand on your web server, effectively reducing the users’ demand time.

Need help optimizing your site? feel free to contact me

How to fix the error in Gtmetrics to Leverage browser caching and Add Expires headers for external JavaScript requests

For this, you can solve the problem by using FLYING SCRIPTS plugin to load external .js files on user interaction. Here is how I made my site faster by optimizing Google Adsense ads.