Aktifkan Gzip Compression untuk Percepat Loading Website

Gzip Compression bahasa terkenalnya di dunia internet, untuk dasarnya adalah kompres dan berlawanan dengan extract. Untuk pengguna daripada Windows mungkin tau yang namanya WinRar, sebuah program untuk kompres file-file anda, kira-kira seperti itulah cara bekerja gzip compression ini.

Idealnya tehnik ini akan membuat ukuran file menjadi lebih kecil sampai 50-80 persen, dan itu akan mempercepat loading dan bandwith website jika diaktifkan untuk mengkompres file html dan css, untuk blog ini saja yang seharusnya berukuran 30kb dalam sebuah html bisa menjadi hanya 6kb saja setelah di kompres dengan Gzip.

Bagaimana aktifkan Gzip compression di website anda?

Kebanyakan hosting saat ini menggunakan Apache yang dimana kita hanya perlu mengisi settingan didalam file .htaccess, file tersebut banyak mengatur berbagai settingan didalam Server Apache termasuk Gzip, Browser Cache, dan lainnya. Berikut baris kode untuk aktifkan Gzip melalui file .htaccess :

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

<IfModule mod_deflate.c>

    # Force compression for mangled 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>

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

    # Map certain file types to the specified encoding type in order to
    # make Apache serve them with the appropriate `Content-Encoding` HTTP
    # response header (this will NOT make Apache compress them!).

    # If the following file types wouldn't be served without the appropriate
    # `Content-Enable` HTTP 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.

    # http://httpd.apache.org/docs/current/mod/mod_mime.html#addencoding

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

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

    # Compress all output labeled with one of the following media types.

    # IMPORTANT: For Apache versions below 2.3.7 you don't need to enable
    # `mod_filter` and can remove the `<IfModule mod_filter.c>` & `</IfModule>`
    # lines as `AddOutputFilterByType` is still in the core directives.

    <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-web-app-manifest+json" \
                                      "application/xhtml+xml" \
                                      "application/xml" \
                                      "font/opentype" \
                                      "image/svg+xml" \
                                      "image/x-icon" \
                                      "text/cache-manifest" \
                                      "text/css" \
                                      "text/html" \
                                      "text/javascript" \
                                      "text/plain" \
                                      "text/vtt" \
                                      "text/x-component" \
                                      "text/xml"
    </IfModule>

</IfModule>

Contoh kode tersebut saya ambil melalui .htaccess HTML5 Boilerplate, simpan kembali file tersebut dan load website anda, itu adalah contoh kompresi gzip di Apache melalui file .htaccess, bagaimana dengan Nginx server? berikut settingannya :

    gzip on;
    gzip_disable "msie6";

    gzip_vary on;
    gzip_proxied any;
    gzip_comp_level 6;
    gzip_buffers 16 8k;
    gzip_http_version 1.1;
    gzip_types text/plain text/css application/json application/x-javascript text/xml application/xml application/xml+rss text/javascript;

Nah begitulah cara aktifkan Gzip Compression pada website yang kita miliki, untuk menguji coba apakah gzip sudah berjalan dengan baik bisa lihat melalui halaman ini http://checkgzipcompression.com/, semoga saja bermanfaat.


Author: Mohamad Fahmi

Saya adalah seorang part-time blogger, co-founder DroidLime.com, saya besar dan tinggal di Jakarta. Menyukai hal-hal yang berkaitan dengan Web, Desain, Musik, Internet dan SEO.

Ikuti saya di Github.

Comments on “Aktifkan Gzip Compression untuk Percepat Loading Website”