Cara Enable Gzip Compressed Pada Website Untuk Optimized

0 109

Pada kali ini saya akan memberikan informasi tentang optimasi website serta kecepatan loading pada website. Mengurangi ukuran file yang dikirim dari server kamu untuk meningkatkan kecepatan transfer ke browser.

  • Kurangi ukuran halaman hingga 70%
  • Tingkatkan kecepatan halaman
  • Cost-benefit ratio: High
  • Diperlukan akses ke file .htaccess atau file administrasi server

Untuk mencapai waktu muat yang cepat pada situs, mengurangi ukuran laman website itu sangat penting. Ini bisa berarti perbedaan antara situs yang dimuat dalam waktu kurang dari 1 detik dan yang terasa seperti perayapannya.

Mengaktifkan kompresi GZIP dapat membantu mengurangi ukuran halaman web kamu, yang dapat secara signifikan mengurangi jumlah waktu untuk mengunduh sumber daya, mengurangi penggunaan data untuk klien, dan meningkatkan waktu untuk render pertama halaman kamu. Semua browser modern mendukungnya dan secara otomatis menegosiasikan kompresi GZIP untuk semua permintaan HTTP.

Apa itu GZIP Compression?

GZIP adalah format file dan aplikasi perangkat lunak yang digunakan untuk kompresi dan dekompresi file. Kompresi GZIP diaktifkan dari sisi-server, dan memungkinkan pengurangan lebih lanjut dalam ukuran file HTML, stylesheet, dan JavaScript pada website. Ini tidak akan berfungsi pada gambar karena ini sudah dikompresi dengan cara yang berbeda. Beberapa telah melihat pengurangan hingga 70% karena kompresi.

Compression is the process of encoding information using fewer bits. — Ilya Grigorik, Google
Kompresi adalah proses pengkodean informasi menggunakan bit lebih sedikit. – Ilya Grigorik, Google

Ketika browser web mengunjungi situs web, ia memeriksa untuk melihat apakah server web telah mengaktifkan GZIP dengan melihat apakah header tanggapan “content-encoding: gzip” ada atau accepted-encoding: gzip.

Jika header terdeteksi, file akan terkompresi dan lebih kecil. Bila tidak, menyajikan file yang tidak terkompresi. Jika kamu tidak mengaktifkan GZIP, kemungkinan besar kamu akan melihat peringatan dan kesalahan di alat penguji kecepatan seperti Google PageSpeed ​​Insights dan GTmetrix.

Bila kita menggunakan GTmetrix untuk menganalisa optimisasi website kita akan melihat hasil dari generate sistem GTmetrix seperti pada contoh gambar dibawah ini.

Aktifkan Peringatan Kompresi GZIP Di GTmetrix

Cara Memeriksa apakah Kompresi GZIP Diaktifkan

GZIP sangat umum saat ini, dan aktif pada server infokoding. Kamu tidak perlu khawatir tentang dukungan browser GZIP, karena banyak yang mendukungnya selama lebih dari 17 tahun. Berikut ini daftar browser yang dapat menangani header respons HTTP “content-encoding: gzip”:

  • Internet Explorer 5.5+ (Juli 2000)
  • Opera 5+ (Juni 2000)
  • Firefox 0.9.5+ (Oktober 2001)
  • Chrome (Tahun 2008)
  • Safari (Tahun 2003)

Jika kamu menjalankan host WordPress, kamu harus selalu memeriksa untuk memastikannya diaktifkan, karena admin server sering mengabaikan pengoptimalan ini. Ada beberapa cara cepat untuk memeriksa kompresi GZIP:

1. Periksa GZIP Compression Tool

Cara pertama dan tercepat untuk memeriksa apakah kompresi GZIP diaktifkan pada website adalah dengan hanya menuju ke alat kompresi Periksa GZIP gratis seperti Check Gzip Compression dan Varvy. Cukup masukkan situs web kamu dan klik pencarian. Ini akan mengembalikan jumlah yang disimpan dengan mengompresi halaman dengan GZIP. Atau itu akan mengembalikan kesalahan yang memberi tahu kamu bahwa GZIP tidak diaktifkan. Seperti yang kamu lihat dalam pengujian kami di bawah ini, kami menghemat 86%.

Tes Gzip Compression

Dan ingat bahwa GZIP juga berlaku untuk aset statis kamu juga. Yang berarti jika kamumelayani aset dari CDN, Anda harus memastikan bahwa mereka juga memiliki kompresi GZIP yang diaktifkan. Semua penyedia CDN modern mendukung kompresi GZIP, seperti Cloudflare, KeyCDN, dan CloudFront. Kamu juga dapat dengan mudah menguji ini dengan hanya menjalankan salah satu file CSS atau JavaScript kamu di CDN kamu melalui alat tersebut.

Tes Gzip Compression stylesheet.css

2. Header Respons HTTP encoding konten GZIP (GZIP content-encoding HTTP Response Header)

Cara kedua untuk memeriksa atau memverifikasi apakah header respons HTTP “content-encoding: gzip” aktif di situs kamu. Ini adalah apa yang dicari browser ketika mengirim permintaan ke server. Kamu dapat membuka Chrome Devtools dan melihat header respons pertama kamu di bawah bagian Networks.

Lalu klik opsi “View Large Request” dan itu akan menunjukkan kamu ukuran halaman asli dan terkompresi. Kamu bisa lihat gambar dibawah ini kolom size halaman landing page website infokoding adalah 1.2 KB dan versi kompresi GZIP adalah 876 B. Semua file yang berada pada public html server kamu akan terkompres secara otomatis dan mengurangi loadpage pada website.

Cara Mengaktifkan Kompresi GZIP

Jika kamu tidak mengaktifkan kompresi GZIP, ada beberapa cara yang dapat kamu lakukan untuk mengaktifkannya di server web kamu.

Aktifkan GZIP dengan Plugin WordPress

Yang pertama dan paling mudah adalah dengan menggunakan plugin cache yang mendukung pengaktifan GZIP. WP Rocket misalnya menambahkan aturan kompresi GZIP di file .htaccess kamu secara otomatis menggunakan modul mod_deflate. W3 Total Cache juga memiliki cara untuk mengaktifkan ini untuk kamu di bawah bagian kinerja. Meskipun ini adalah plugin, ini masih bergantung pada izin untuk mengubah file di server web kamu. Jika plugin tembolok kamu tidak memiliki izin, kamu harus menanyakan host Anda atau menggunakan cuplikan kode di bawah ini.

Aktifkan GZIP di Apache

Cara kedua untuk mengaktifkan kompresi Gzip adalah dengan mengedit file .htaccess kamu. Kebanyakan host yang dipakai bersama menggunakan Apache, di mana Anda dapat menambahkan kode di bawah ini ke file .htaccess Anda. Anda dapat menemukan file .htaccess Anda di root situs WordPress Anda melalui FTP.

<IfModule mod_deflate.c>  
# Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml

  # Remove browser bugs (only needed for really old browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
<IfModule>

Pastikan kamu menambahkannya di file .htaccess Website kamu.

Aktifkan GZIP di NGINX

Jika kamu menjalankan NGINX, cukup tambahkan yang berikut ini ke file nginx.conf kamu.

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;

Aktifkan GZIP di IIS

Jika kamu menjalankan pada IIS, ada dua jenis kompresi, statis dan dinamis. Kami sarankan untuk memeriksa panduan Microsoft tentang cara mengaktifkan kompresi.

Get real time updates directly on you device, subscribe now.

Leave A Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.