Would you like to learn how to configure Apache Browser Caching feature? In this tutorial, we are going to show you all the steps required to configure the Apache Browser Caching feature on a computer running Ubuntu Linux.
• Ubuntu version: 18.04
Hardware List:
The following section presents the list of equipment used to create this WordPress tutorial.
Every piece of hardware listed above can be found at Amazon website.
WordPress Playlist:
On this page, we offer quick access to a list of videos related to WordPress installation.
Don't forget to subscribe to our youtube channel named FKIT.
WordPress Related Tutorial:
On this page, we offer quick access to a list of tutorials related to WordPress installation.
Tutorial - Apache Browser Caching Configuration
First, you need to install the Apache web server.
On the Linux console, use the following commands to install Apache.
# apt-get update
# apt-get install apache2
Now, you need to enable the following Apache modules:
• mod_headers
• mod_expires
Use the following commands to enable mod_headers and mod_expires.
# a2enmod headers
# a2enmod expires
# systemctl restart apache2
Edit the apache2.conf configuration file.
# vi /etc/apache2/apache2.conf
At the end of the file, enter the desired Browser Caching Configuration.
As an example, here is our configuration.
<IfModule mod_expires.c>
ExpiresActive On
FileETag None
ExpiresDefault "access plus 14 days"
ExpiresByType image/jpg "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType text/css "now plus 1 month"
ExpiresByType image/ico "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 month"
ExpiresByType text/html "access plus 1 days"
</IfModule>
To activate the new configuration, you need to restart Apache.
# systemctl restart apache2
Keep in mind that you need to specify the desired amount of Browser caching time to fit your needs.
Testing - Apache Browser Caching Configuration
To test our Browser cache configuration, let's create a basic HTML page with an image
# cd /var/www/html
# wget https://techexpert.tips/wp-content/uploads/2017/12/TechExpert-Logo-Small.png
# vi test.html
Here is the content of the test.html file.
<html>
<body>
<h1>TEST header</h1><br>
<img src="TechExpert-Logo-Small.png">
</body>
</html>
Install the required software to test the Apache Browser Caching feature.
# apt-get update
# apt-get install wget curl
Use the following command to test the Browser caching feature to HTML documents using WGET.
Keep in mind that you need to change 200.200.200.200 to your server IP address.
# wget -S http://200.200.200.200/test.html
Here is the Browser Caching configuration result before our configuration:
HTTP request sent, awaiting response...
HTTP/1.1 200 OK
Date: Fri, 14 Dec 2018 16:58:36 GMT
Server: Apache/2.4.29 (Ubuntu)
Last-Modified: Fri, 14 Dec 2018 16:19:49 GMT
ETag: "64-57cfdcce7b707"
Accept-Ranges: bytes
Content-Length: 100
Vary: Accept-Encoding
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Content-Type: text/html
Length: 100 [text/html]
Here is the Browser Caching configuration result after our configuration:
HTTP request sent, awaiting response...
HTTP/1.1 200 OK
Date: Fri, 14 Dec 2018 17:05:04 GMT
Server: Apache/2.4.29 (Ubuntu)
Last-Modified: Fri, 14 Dec 2018 16:19:49 GMT
Accept-Ranges: bytes
Content-Length: 100
Cache-Control: max-age=86400
Expires: Sat, 15 Dec 2018 17:05:04 GMT
Vary: Accept-Encoding
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Content-Type: text/html
Length: 100 [text/html]
Saving to: ‘test.html.3’
As you can see, our configuration specifies one day cache for HTML documents.
• ExpiresByType text/html "access plus 1 days"
The WGET result shows that the HTML file will be kept until tomorrow.
• Expires: Sat, 15 Dec 2018 17:05:04 GMT
Use the following command to test the Browser caching feature to PNG images using CURL.
# curl -svo /dev/null http://200.200.200.200/TechExpert-Logo-Small.png
Here is the Browser Caching configuration result before our configuration:
* TCP_NODELAY set
* Connected to 34.220.19.99 (34.220.19.99) port 80 (#0)
> GET /TechExpert-Logo-Small.png HTTP/1.1
> Host: 34.220.19.99
> User-Agent: curl/7.58.0
> Accept: */*
>
< HTTP/1.1 200 OK
< Date: Fri, 14 Dec 2018 17:24:32 GMT
< Server: Apache/2.4.29 (Ubuntu)
< Last-Modified: Sat, 24 Nov 2018 02:49:53 GMT
< ETag: "483-57b60277af640"
< Accept-Ranges: bytes
< Content-Length: 1155
< Content-Type: image/png
<
{ [1155 bytes data]
Here is the Browser Caching configuration result after our configuration:
* TCP_NODELAY set
* Connected to 34.220.19.99 (34.220.19.99) port 80 (#0)
> GET /TechExpert-Logo-Small.png HTTP/1.1
> Host: 34.220.19.99
> User-Agent: curl/7.58.0
> Accept: */*
>
< HTTP/1.1 200 OK
< Date: Fri, 14 Dec 2018 17:18:04 GMT
< Server: Apache/2.4.29 (Ubuntu)
< Last-Modified: Sat, 24 Nov 2018 02:49:53 GMT
< Accept-Ranges: bytes
< Content-Length: 1155
< Cache-Control: max-age=2592000
< Expires: Sun, 13 Jan 2019 17:18:04 GMT
< Content-Type: image/png
<
{ [1155 bytes data]
As you can see, our configuration specifies one month cache for PNG images.
• ExpiresByType image/png "access plus 1 month"
The CURL result shows that the PNG file will be kept until January 13.
• Expires: Sun, 13 Jan 2019 17:18:04 GMT
