Igor Simic
5 years ago

Speed up your site How to enable HTTP compression




How to enable Gzip compression in Apache server to speed up loading of your site


Reducing size of .js files and .css files can increase loading of your site for more the 60%. In this example we ill use .htaccess and Apache modules to make it happen.


no compression


1. Enable modules in Apache: open http.conf and enable these modules:
  • LoadModule deflate_module modules/mod_deflate.so
    ...
    LoadModule filter_module modules/mod_filter.so
    ...

2. Add this code to your .htacces file:
  • # ######################################################################
    # # WEB PERFORMANCE                                                    #
    # ######################################################################
    
    # ----------------------------------------------------------------------
    # | 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>
    
    # ----------------------------------------------------------------------
    # | Content transformation                                             |
    # ----------------------------------------------------------------------
    



And now we can check how much data we saved looking in same graph:

 

76% data saved

Here you can check is this feature implemented and test your page speed:

Gzip tester:
https://varvy.com/tools/gzip/

Google speed test:
https://developers.google.com/speed/pagespeed/insights/



There are other possibilities to achieve same thing, here you can find out more:

https://developers.google.com/speed/docs/insights/EnableCompression
https://varvy.com/pagespeed/enable-compression.html