Mempercepat Loading Website Dengan Menggunakan GZIP Compression

Mempercepat Loading Website Dengan Menggunakan GZIP Compression

DailyBlog.id  - Hai semua!... Setelah saya memposting mengenai Cara Mengaktifkan HTTP/2 untuk meningkatkan performa termasuk mempercepat loading pada website, kali ini saya juga mempunyai tutorial mempercepat website lainnya dengan menggunakan GZIP Compression, sudah menggunakan HTTP/2 ditambah lagi menggunakan GZIP, makin cepat saat load websitenya!. Engga mungkinkan, kalian suka membuka halaman website yang lambat? pasti lebih mencari halaman website yang loadingnya cepat. Nah, salah satu solusinya ialah menggunakan GZIP Compression. Dan apakah kalian sudah mengetahui mengenai GZIP Compression? nah, jika belum tau.. saya akan membahas sekilas mengenai GZIP Compression itu apa sih? mari kita cari tau

Apa itu GZIP Compression?

GZIP Compression merupakan sebuah proses kompresi otomatis pada website secara real time. Dimana saat pengunjung mengunjungi suatu website, lalu browser akan melakukan pengecekan apakah GZIP Compression pada website tersebut sudah aktif atau belum.

Dimana pengecekan tersebut dilakukan dengan cara mendeteksi apakah header sudah content-encoding: gzip atau belum pada website tersebut. Jika sudah terdeteksi, maka file yang sudah dikompres itu akan dimuat atau ditampilkan. Tapi kalau headernya tidak terdeteksi, maka file yang berukuran asli tersebut akan dimuat atau ditampilkan kepada pengunjung yang mengunjungi website tersebut.

File yang biasanya dikompres itu adalah file text, contohnya: HTML, JavaScript, JSON, XML, dan CSS. Dan diharapkan untuk menghindari kompres pada file seperti: zip, rar, exe, image.. dikarenakan akan menambah beban pada server nantinya.

Gimana cara mengaktifkan GZIP Compression?

Jika kalian sudah mengerti sekilas mengenai GZIP Compression yang sudah dibahas tadi, maka kalian sudah siap untuk mengaktifkan GZIP Compression pada website kalian. Dan jika masih belum mengerti, kalian bisa searching di Google untuk mengerti lebih lengkap mengenai GZIP Compressionnya. Dan berikut ini cara mengaktifkannya:

Menggunakan .htaccess

Ada 2 cara untuk mengaktifkan GZIP Compressionnya pada file .htaccess:

  • Menggunakan mod_deflate.
  • Dan menggunakan mod_gzip.

Berikut ini cara mengaktifkan menggunakan mod_deflate, nah untuk mod_deflate ini disarankan untuk dicoba terlebih dahulu.. sebelum mencoba yang mod_gzip.

<IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/html
    AddOutputFilterByType DEFLATE text/css
    AddOutputFilterByType DEFLATE text/javascript
    AddOutputFilterByType DEFLATE text/xml
    AddOutputFilterByType DEFLATE text/plain
    AddOutputFilterByType DEFLATE image/x-icon
    AddOutputFilterByType DEFLATE image/svg+xml
    AddOutputFilterByType DEFLATE application/rss+xml
    AddOutputFilterByType DEFLATE application/javascript
    AddOutputFilterByType DEFLATE application/x-javascript
    AddOutputFilterByType DEFLATE application/xml
    AddOutputFilterByType DEFLATE application/xhtml+xml
    AddOutputFilterByType DEFLATE application/x-font
    AddOutputFilterByType DEFLATE application/x-font-truetype
    AddOutputFilterByType DEFLATE application/x-font-ttf
    AddOutputFilterByType DEFLATE application/x-font-otf
    AddOutputFilterByType DEFLATE application/x-font-opentype
    AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
    AddOutputFilterByType DEFLATE font/ttf
    AddOutputFilterByType DEFLATE font/otf
    AddOutputFilterByType DEFLATE font/opentype
    
    # For Older Browsers Which Can't Handle Compression
    BrowserMatch ^Mozilla/4 gzip-only-text/html
    BrowserMatch ^Mozilla/4\.0[678] no-gzip
    BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
</IfModule>


Berikut ini yang cara mengaktifkan menggunakan mod_gzip

<ifModule mod_gzip.c>
    mod_gzip_on Yes
    mod_gzip_dechunk Yes
    mod_gzip_item_include file \.(html?|txt|css|js|php|pl)$
    mod_gzip_item_include mime ^application/x-javascript.*
    mod_gzip_item_include mime ^text/.*
    mod_gzip_item_exclude rspheader ^Content-Encoding:.*gzip.*
    mod_gzip_item_exclude mime ^image/.*
    mod_gzip_item_include handler ^cgi-script$
</ifModule>

Menggunakan PHP

Jika kalian tidak dapat mengubah file .htaccess atau tidak ingin mengaktifkan GZIP Compression pada file .htaccess, Kalian bisa menggunakan PHP. Pastikan file yang digunakan, menggunakan ekstensi .php. Dan taruh script php dibawah ini, dibagian paling atas pada file PHP kalian.

<?php
if (substr_count($_SERVER['HTTP_ACCEPT_ENCODING'], 'gzip'))
    ob_start('ob_gzhandler'); 
else 
    ob_start();     
?>

Mengedit File Nginx.conf

Nah untuk cara yang satu ini digunakan website yang menggunakan web server yaitu NGINX. Untuk mengaktifkannya, hanya paste aja kode dibawah ini pada file nginx.conf kalian. Berikut ini kodenya:

gzip on;
gzip_disable "MSIE [1-6]\.(?!.*SV1)";
gzip_vary on;
gzip_types text/plain text/css text/javascript image/svg+xml image/x-icon application/javascript application/x-javascript;


Jika kalian sudah memasangnya, kalian bisa mencoba untuk mengeceknya.. apakah GZIP Compressionya sudah terpasang pada website kalian atau belum. Dan jika sudah terpasang, maka hasil nya akan seperti ini:


Mempercepat Loading Website Dengan Menggunakan GZIP Compression (Gambar 1)


Atau kalian juga bisa cek secara online, melalui link berikut ini:

https://www.giftofspeed.com/gzip-test/

Mempercepat Loading Website Dengan Menggunakan GZIP Compression (Gambar 2)

Nah, jika dilihat dari gambar screenshot yang pertama, bahwa response headers nya sudah content-encoding: gzip, dan dicoba untuk cek secara online pun, menandakan bahwa GZIP sudah aktif. Dan jika kalian lihat untuk original sizenya adalah 26.5KB dan setalah dipasang GZIP menjadi 7.3 KB, wah.. jauh banget perbandingannya. Dari situ, pengunjung saat meload website kalian, tidak merasakan halaman lambat pada website kalian.

Mungkin cukup sekian dari saya, dan saya mengucapkan semoga artikel ini dapat bermanfaat bagi yang sudah membaca ataupun yang mencobanya. Dan saya mohon maaf bila ada salah kata... Sekian dan terima kasih.


Previous Post Next Post