How to setup caching & GZIP compression in Apache Web Server with .htaccess
Improve the performance of your website with caching and compression
Compression and caching are the most common measures to improve loading time of your web page. Google uses compression and caching as key factors when evaluating a web page.
We will be using the popular Apache Web Server (used by Heroku and many more) in this tutorial. First, we will enable GZIP compression. Then, we will make our web page cache static assets. To enable caching and compression, we use the .htaccess file. If there is no such file, just create it (notice there is nothing before the dot!).
How to enable GZIP in Apache Web Server
GZIP compression saves bandwidth and greatly improves downloading of text files (read: HTML, CSS, JavaScript, fonts). The greater the files are, the greater the improvements will be.
# GZIP compression for text files: HTML, CSS, JS, Text, XML, fonts
<IfModule mod_deflate.c>
AddOutputFilterByType DEFLATE application/javascript
AddOutputFilterByType DEFLATE application/rss+xml
AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
AddOutputFilterByType DEFLATE application/x-font
AddOutputFilterByType DEFLATE application/x-font-opentype
AddOutputFilterByType DEFLATE application/x-font-otf
AddOutputFilterByType DEFLATE application/x-font-truetype
AddOutputFilterByType DEFLATE application/x-font-ttf
AddOutputFilterByType DEFLATE application/x-javascript
AddOutputFilterByType DEFLATE application/xhtml+xml
AddOutputFilterByType DEFLATE application/xml
AddOutputFilterByType DEFLATE font/opentype
AddOutputFilterByType DEFLATE font/otf
AddOutputFilterByType DEFLATE font/ttf
AddOutputFilterByType DEFLATE image/svg+xml
AddOutputFilterByType DEFLATE image/x-icon
AddOutputFilterByType DEFLATE text/css
AddOutputFilterByType DEFLATE text/html
AddOutputFilterByType DEFLATE text/javascript
AddOutputFilterByType DEFLATE text/plain
AddOutputFilterByType DEFLATE text/xml
</IfModule>How to cache assets in Apache Web Server
Assets can be scripts, stylesheets and images. Images usually comprise the most size of web pages, especially if they are large and uncompressed. Caching is useful when some content does not change rarely or at all(e.g. images). Remember that you need to invalidate the cache or reduce the cache duration if you update these files regularly. On the other hand, you can increase cache duration if you do not update your assets often. You can also use several rules for caching instead of one global rule: e.g. cache images for 1 month and cache scripts for two days.
# Cache files of the following types for 1 week
<FilesMatch "\.(ico|pdf|flv|jpg|jpeg|png|gif|js|css|swf|svg)$">
Header set Cache-Control "max-age=604800, public"
</FilesMatch>How to check if caching and compression work
Open your browser development tools and go to the network area. You can see the compressed size of the fetched resources like scripts (some browsers also show the uncompressed size for comparison sake) and whether the content-encoding is set to GZIP. You can also use this online tool to check how much bandwidth is saved using GZIP.
Conclusion
Thank you for reading this article about setting up GZIP compression and caching on Apache Web Server using the .htaccess file. Do you have further improvements to share? Leave a comment below.
