Home  »  ArticlesGuides   »   How to Enable Gzip Compression on Your Website

How to Enable Gzip Compression on Your Website

No one in their right mind enjoys the experience of being tormented by a slow-loading website and that is why we cannot help but help out with a guide on gzip compression.

You as the website developer would be most concerned in keeping visitors on your website knowing they have short attention spans. Visitors to are notorious for abandoning websites if the page does not load in a few seconds in the least so this puts a lot of pressure on the developer to ensure this does not happen.

There are several ways to make your website run faster but this one method of gzip compression returns great rewards of up to 70% response size all for relatively little effort. I say little effort on the server end because you really need to configure this once and let the technology work itself.

On the side of the user, it is important to note that all modern web browsers support gzip compression so there is really nothing to be done on that end.

Enabling Gzip Compression for Your Apache Driven Website

Apache is a popular web server primarily used on Linux and Unix-based operating systems even though it is fully usable on Windows operating systems. To start you need to edit the .htaccess file on your root. Next, you need to check for the deflate module, and if it is there tell the server which types of files should be compressed and that is as much as there is to it.

You can check the deflate module using:

See also  How to Install Rust on Debian 11 Using Installer Script

<ifmodule mod_deflate.c>
 … add your directive here
</ifmodule>

The directive then looks something like this:

AddOutputFilterByType DEFLATE [file mime types seperated with spaces] like this text/css application/x-javascript application/javascript.

Believe it or not, that’s it. save the .htaccess file and you are done.

Here is a comprehensive list of mime types in a working .htaccess file that you can adopt for your website. You can add or remove any mime types you wish to or not compress. It was originally posted here on GitHub where you can go in a fork it.

# ----------------------------------------------------------------------
# | Compression                                                        |
# ----------------------------------------------------------------------

<IfModule mod_deflate.c>

    # Force compression for mangled `Accept-Encoding` request headers
    # https://developer.yahoo.com/blogs/ydn/pushing-beyond-gzipping-25601.html

    <IfModule mod_setenvif.c>
        <IfModule mod_headers.c>
            SetEnvIfNoCase ^(Accept-EncodXng|X-cept-Encoding|X{15}|~{15}|-{15})$ ^((gzip|deflate)\s*,?\s*)+|[X~-]{4,13}$ HAVE_Accept-Encoding
            RequestHeader append Accept-Encoding "gzip,deflate" env=HAVE_Accept-Encoding
        </IfModule>
    </IfModule>

    # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

    # Compress all output labeled with one of the following media types.
    #
    # (!) For Apache versions below version 2.3.7 you don't need to
    # enable `mod_filter` and can remove the `<IfModule mod_filter.c>`
    # and `</IfModule>` lines as `AddOutputFilterByType` is still in
    # the core directives.
    #
    # https://httpd.apache.org/docs/current/mod/mod_filter.html#addoutputfilterbytype

    <IfModule mod_filter.c>
        AddOutputFilterByType DEFLATE "application/atom+xml" \
                                      "application/javascript" \
                                      "application/json" \
                                      "application/ld+json" \
                                      "application/manifest+json" \
                                      "application/rdf+xml" \
                                      "application/rss+xml" \
                                      "application/schema+json" \
                                      "application/vnd.geo+json" \
                                      "application/vnd.ms-fontobject" \
                                      "application/x-font-ttf" \
                                      "application/x-javascript" \
                                      "application/x-web-app-manifest+json" \
                                      "application/xhtml+xml" \
                                      "application/xml" \
                                      "font/eot" \
                                      "font/opentype" \
                                      "image/bmp" \
                                      "image/svg+xml" \
                                      "image/vnd.microsoft.icon" \
                                      "image/x-icon" \
                                      "text/cache-manifest" \
                                      "text/css" \
                                      "text/html" \
                                      "text/javascript" \
                                      "text/plain" \
                                      "text/vcard" \
                                      "text/vnd.rim.location.xloc" \
                                      "text/vtt" \
                                      "text/x-component" \
                                      "text/x-cross-domain-policy" \
                                      "text/xml"

    </IfModule>

    # - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

    # Map the following filename extensions to the specified
    # encoding type in order to make Apache serve the file types
    # with the appropriate `Content-Encoding` response header
    # (do note that this will NOT make Apache compress them!).
    #
    # If these files types would be served without an appropriate
    # `Content-Enable` response header, client applications (e.g.:
    # browsers) wouldn't know that they first need to uncompress
    # the response, and thus, wouldn't be able to understand the
    # content.
    #
    # https://httpd.apache.org/docs/current/mod/mod_mime.html#addencoding

    <IfModule mod_mime.c>
        AddEncoding gzip              svgz
    </IfModule>

</IfModule>

Found this article interesting? Follow Brightwhiz on Facebook, Twitter, and YouTube to read and watch more content we post.

See also  How to Change Text Selection Color Using CSS

Share it!

Available under:
Articles, Guides