How To: Enable compression and leverage browser caching with Apache Server

---

---

Looking for ways to improve Podcastpedia.org‘ mobile user-friendliness, I have discovered Google’s PageSpeed Insights . After analyzing the home page, a podcast’s page (The Naked Scientists Podcast – Stripping Down Science), an episode page and scoring an average of 70 out of 100 (even worse on mobile) two points needed urgent fixing:

1. Enabling compression

Compressing resources with gzip or deflate will reduce the number of bytes sent over the network at the expense of slightly increased CPU utilization. Smaller files also mean less bandwidth used and faster transfer time. At Google’s recommendation I have enabled file compression on the Apache web server, for which you have to use the mod_deflate module.

1.1 Enable mod_deflate on GoDaddy

To enable mod_deflate on a GoDaddy Virtual Private Server account, you have to use Easy Apache and the same procedure as in Troubleshooting WordPress installation on GoDaddy VPS. You need to check the Deflate option at step number 5. Exhaustive Options List and recompile the Apache Server.

To verify the module mod_deflate is active run the following command on CentOS

httpd -M | grep deflate_module

1.2 Configure mod_deflate

After researching the web and the Apache website, the best solution for my needs came from HowToUnix.info – it’s similar with Apache’s suggestion and it also verifies if the different modules are active. By adding the suggested configuration

<IfModulemod_mime.c>
 AddType application/x-javascript .js
 AddType text/css .css
</IfModule>
<IfModulemod_deflate.c>
  AddOutputFilterByType DEFLATE text/css application/x-javascript text/x-component text/html text/richtext image/svg+xml text/plain text/xsd text/xsl text/xml image/x-icon application/javascript
<IfModulemod_setenvif.c>
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
 </IfModule><IfModulemod_headers.c>
  Header append Vary User-Agent env=!dont-vary
 </IfModule></IfModule>

to the virtual host configuration the html, css, xml and javascript files were compressed and an 10% score improvement on PageSpeed Insights was achieved for all the tested pages.

Note: The same problem held true for Codepedia.org, but for that I modified the .htaccess file from my root directory and got the same impact:

####################
# GZIP COMPRESSION #
####################
SetOutputFilter DEFLATE
AddOutputFilterByType DEFLATE text/html text/css text/plain text/xml application/x-javascript application/x-httpd-php
BrowserMatch ^Mozilla/4 gzip-only-text/html
BrowserMatch ^Mozilla/4\.0[678] no-gzip
BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
BrowserMatch \bMSI[E] !no-gzip !gzip-only-text/html
SetEnvIfNoCase Request_URI \.(?:gif|jpe?g|png)$ no-gzip
Header append Vary User-Agent env=!dont-vary

2. Leveraging browser caching

The second point was enabling browser caching for static resources, which can save a user time if they visit your site more than once. You can do that by configuring the Expires and Cache-control HTTP headers with Apache web server.

First I checked if the mod_expires and mod_headers modules are active on Apache modules by issuing httpd -M

All I had to do next is adding the following to the virtual host configuration for Podcastpedia.org, and to .htaccess for Codepedia.org:

# Feed
  ExpiresByType application/atom+xml      "access plus 10 hours"
  ExpiresByType application/rss+xml       "access plus 10 hours"

# Favicon (cannot be renamed)
  ExpiresByType image/x-icon              "access plus 1 week"

# 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"
  ExpiresByType image/png                 "access plus 1 month"
  ExpiresByType video/mp4                 "access plus 1 month"
  ExpiresByType video/ogg                 "access plus 1 month"
  ExpiresByType video/webm                "access plus 1 month"
  ExpiresByType application/x-shockwave-flash "access plus 1 month"

# HTC files  (css3pie)
  ExpiresByType text/x-component          "access plus 1 month"

# Webfonts
  ExpiresByType application/vnd.ms-fontobject "access plus 1 month"
  ExpiresByType application/x-font-ttf    "access plus 1 month"
  ExpiresByType application/x-font-woff   "access plus 1 month"
  ExpiresByType font/opentype             "access plus 1 month"
  ExpiresByType image/svg+xml             "access plus 1 month"

# CSS and JavaScript
  ExpiresByType application/javascript    "access plus 1 week"
  ExpiresByType text/css                  "access plus 1 week"
  ExpiresByType application/x-javascript  "access plus 1 week"

</IfModule>
<IfModule mod_headers.c>
        <FilesMatch "\\.(ico|jpg|jpeg|png|gif|swf)$">
                Header set Cache-Control "max-age=2678400, public"
        </FilesMatch>
        <FilesMatch "\\.(css)$">
                Header set Cache-Control "max-age=604800, public"
        </FilesMatch>
        <FilesMatch "\\.(js)$">
                Header set Cache-Control "max-age=604800, private"
        </FilesMatch>
        <FilesMatch "\\.(x?html?|php)$">
                Header set Cache-Control "max-age=60, private, must-revalidate"
        </FilesMatch>
                Header unset ETag
                Header unset Last-Modified
</IfModule>

This basically sets expiration dates for the different types of files. The result was another 10% improvement on PageSpeed Insights score.

Well, that’s it… Two small steps, I had no clue about until now, that boosted both the website’s performance and the PageSpeed Insights scores on Mobile and Desktop.

If you notice any room for improvement, please contact us or leave a message.

If you liked this, please show your support by helping us with Podcastpedia.org

We promise to only share high quality podcasts and episodes.

References

• https://www.apache.org
• PageSpeed Insights
• https://howtounix.info/howto/Apache-gzip-compression-with-mod_deflate
• https://stackoverflow.com/questions/2676744/set-http-caching-expiration-recommended-by-google-pagespeed
• https://stackoverflow.com/questions/2932890/http-cache-control-max-age-must-revalidate
• https://betterexplained.com/articles/how-to-optimize-your-site-with-http-caching/