Cara Mengaktifkan GZip Compression untuk Optimasi Kecepatan Website

Cara Mengaktifkan GZip Compression untuk Optimasi Kecepatan Website

Mengaktifkan GZip compression sering kita dengar sebagai salah satu saran optimasi untuk mempercepat loading website. Proses kompresi dalam optimasi ini akan membuat web server menyajikan ukuran file yang lebih kecil sehingga membuat website lebih cepat untuk pengguna.

Di artikel ini, Panda akan secara khusus mengulas tentang apa itu GZip Compression, keuntungan menggunakan kompresi GZip dan  dan cara mengaktifkannya.

Apa itu GZip Compression?

GZip Compression adalah sebuah teknologi yang bisa melakukan proses kompresi atau pengurangan ukuran file secara real time, sehingga bisa membuat transfer data melalui jaringan menjadi lebih cepat dan menghemat bandwidth hosting.

GZip ini sendiri merupakan format file yang terbentuk karena proses kompresi dari sebuah file agar ukurannya lebih kecil.

Dengan kompresi GZip ini, menurut Google Developer kompresi file HTML, javascript dan CSS bisa menghemat sekitar 70-90% ukuran file di halaman. Dengan ukuran yang lebih kecil, waktu yang dibutuhkan untuk meload halaman tentu saja lebih cepat. Sesederhana itu.

Kompresi GZip sendiri merupakan salah satu parameter dalam penilaian di Google PageSpeed Insight dan GTMetrix. Secara ringkas, keuntungan menggunakan kompresi GZip antara lain :

  • Memperkecil ukuran halaman website hingga 70-90%
  • Menghemat bandwidth hosting karena server memproses request yang lebih kecil
  • Meningkatkan kecepatan loading halaman website secara keseluruhan

Cara Kerja GZip Compression

Pada umumnya GZip mempunyai cara kerja yang sederhana. Gzip akan meletakkan string yang sama dalam file teks dan menganttikan string tersebut sementara agar ukuran file secara keseluruhan lebih kecil.

File CSS dan HTML sendiri kerap menggunakan banyak kode teks berulang dan banyak spasi. Dengan GZip yang bekerja mengkompresi string ini, ukuran file bisa lebih kecil 70-90%.

Saat browser mengunjungi web server, browser akan memeriksa apakah server sudah mengaktifkan kompresi GZip. Pengecekan ini dilakukan dengan cara mendeteksi apakah ada header “content-encoding: gzip” di website.

Saat header terdeteksi, file yang sudah dikompress tadi akan ditampilkan. Namun jika tidak menemukan header, maka browser akan menampilkan ukuran asli yang jauh lebih besar kepada pengunjung.

Kendati begitu, tidak semua file di website akan terkompres otomatis ya. File yang akan masuk ke dalam kompresi ini adalah HTML, CSS, JavaScript, JSON, dan XML. Font dan gambar tidak termasuk.

Gambar sendiri mempunyai teknik kompresi yang berbeda dengan file- file website lainnya. Untuk lebih lengkapnya, Anda bisa membaca artikel Panda sebelumnya : 10+ Cara Mengecilkan Ukuran Foto/ Gambar Tanpa Mengurangi Kualitasnya.

Cara Cek Apakah Website Sudah Menggunakan GZip Compression

Salah satu cara termudah untuk menemukan apakah kompresi GZip sudah aktif atau tidak adalah saat menemukan peringatan error di tool pengecek kecepatan website, seperti GtMetrix atau Google Page Speed.

Optimasi GZip Compression GtMetrix

Selain itu, Anda juga bisa menggunakan tool Gzip compression checker dari TechNumero untuk mengecek dengan mudah apakah GZip Compression sudah aktif. Cukup masuk ke website tersebut dan tambahkan URL website Anda, lalu klik Check.

GZip Compression Checker

Setelah itu, Anda akan bisa dengan mudah dan jelas melihat status kompresi GZip Anda. Anda juga bisa melihat berapa banyak file ukuran yang berhasil dikompresi.

Cara Mengaktifkan Enable GZip Compression di Website

Ada dua metode yang bisa kita gunakan untuk mengaktifkan GZip Compression di website. Yang pertama adalah melalui plugin caching WordPress yang sudah mendukung kompresi GZip dan yang kedua adalah dengan mengaktifkan module mod_deflate secara manual.

1. Memasang GZip Compression dengan Plugin WordPress

Mengaktifkan GZip Compression di WP Optimized

Cara termudah untuk mengaktifkan GZip Compression di website adalah melalui plugin cache yang sudah mendukung kompresi GZip. Salah satunya adalah W3 Total Cache dan WP Optimize.

Untuk mengaktifkan GZip dengan WP Optimize, silahkan masuk ke panel WP Optimized > Cache. Selanjutnya, pilih tab GZip dan pilih ENABLED.

Plugin lain kurang lebih caranya sama. Anda hanya perlu menemukan pengaturan aktivasi kompresi GZip di pengaturan plugin Anda. Anda mungkin bisa menemukannya di sub menu Cache atau Browser Cache.

2. Edit File via .htaccess

Ada dua cara yang bisa Anda gunakan untuk mengaktifkan GZip Compression via .htaccess, yaitu dengan modul mod_gzip dan mod_deflate. Cara yang paling direkomendasikan adalah mod_deflate. Jadi, kami sarankan untuk mencoba metode mod_deflate lebih dulu.

Untuk mengaktifkan GZip dengan mod_deflate, tambahkan kode berikut di .htaccess :

<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>


Atau tambahkan kode di bawah ini jika ingin mengaktifkan GZip Compression dengan 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>

3. Edit File di nginx.conf untuk Pengguna Server Nginx

Jika web server Anda menggunakan Nginx, Anda bisa enable GZip Compression dengan menambahkan kode di bawah ini di file nginx.conf Anda :

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;

Kesimpulan

GZip Compression adalah metode kompresi ukuran file yang bekerja efektif untuk membuat transfer data melalui jaringan menjadi lebih cepat. Dengan mengaktifkan GZip di website, ukuran file menjadi lebih kecil 70-90% dan tentunya loading website menjadi lebih cepat.

Cara enable GZip Compression ini sendiri terbilang cukup mudah. Anda bisa mengaktifkan kompresi GZip melalui plugin cache yang sudah terpasang di website. Atau bisa juga melakukan editing manual sesuai dengan server yang Anda gunakan.

Setelah mengaktifkannya, jangan lupa untuk mengeceknya dengan tool checker kompresi GZip. Pastikan tidak ada peringatan error dan sekaligus Anda bisa melihat berapa banyak file yang berhasil dikompresi.

Tapi jangan lupa juga, selain kompresi GZip, ada banyak cara lain yang bisa Anda terapkan untuk mempercepat loading website. Anda bisa membaca panduan lain tersebut di artikel Panda : 20+ Cara Ampuh Mempercepat Loading Website.

Selamat mencoba!

Apa itu Largest Contentful Paint (LCP) dan Cara Optimasi nya

Apa itu Largest Contentful Paint (LCP) dan Cara Optimasi nya

Largest Contentful Paint adalah istilah yang kerap muncul saat kita mengecek kecepatan website. LCP ini sendiri adalah metrik pengalaman pengguna Google yang mulai menjadi salah satu penentu faktor peringkat di tahun 2021.

Itulah mengapa LCP menjadi salah satu pembahasan menarik yang akan Panda u
las kali ini.

Apa itu Largest Contentful Paint?

Definisi dari Largest Contentful Paint atau LCP adalah ukuran berapa lama sebuah situs dalam mengunduh konten utama dan siap untuk berinteraksi. Dalam hal ini, apa yang diukur adalah gambar atau blok konteks terbesar dalam viewport pengguna. Apapun yang melampaui layar tidak akan masuk hitungan.

Tipe elemen yang diukur adalah gambar, gambar poster video, gambar latar belakang, dan elemen teks tingkat blok seperti tag paragraf.

Apa saja yang perlu kita ketahui dari Largest Contentful Paint?

Tentu ada alasan mengapa LCP terpilih sebagai metrik kunci untuk skor web vitals. Salah satunya, LCP bisa secara akurat mengukur seberapa cepat halaman website digunakan. Selain itu, metrik ini juga disebut akan relatif mudah dioptimalkan.

Selain hal ini, ada beberapa hal yang webmaster perlu ketahui terkait LCP ini :

Elemen Blok Tingkat (Block Level Element) untuk Menghitung Skor LCP

Elemen tingkat blok yang digunakan untuk mengukur skor LCP adalah <main> dan <section>, serta elemen heading, div, form. Pada dasarnya, elemen HTML tingkat blok apapun yang berisi elemen teks bisa menjadi tolak ukur, asalkan merupakan elemen besar dalam website.

Tapi y
ang menjadi catatan, kita tidak menggunakan semua elemen ini. Misalnya saja, elemen SVG dan video saat ini tidak menjadi bagian dalam menghitung LCP.

LCP adalah Metrik yang Mudah Dipahami

LCP disebut sebagai metrik yang mudah dipahami. Yang webmaster harus lakukan adalah melihat halaman website dan menentukan apa blok teks atau gambar terbesar itu, lalu mengoptimalkannya dengan membuatnya lebih kecil.

Bisa juga dengan menghapus apapun yang bisa mencegah atau memperlambat proses pengunduhan konten utama dengan cepat.

Karena Google kini memprioritaskan pengindeksan mobile, maka optimasi untuk viewport mobile harus k
ita utamakan, baru selanjutnya desktop.

Menunda Load Elemen Besar Mungkin Tak Berpengaruh

Mungkin saja Anda berpikir bahwa elemen besar itu terlalu penting untuk ukurannya kita kecilkan atau bahkan kita hilangkan. Sehingga memilih untuk menunda load mereka dengan plugin atau tool.

Sayangnya, hal ini tidak berdampak banyak. Misalnya saja, gambar berfitur besar mungkin membutuhkan waktu lebih lama untuk diunduh daripada elemen level blok teks terbesar.

Elemen Gambar Sangat Berpenaruh dalam LCP

Publisher biasanya mengunggah gambar dalam ukuran asli lalu menggunakan HTML atau CSS untuk mengubah ukuran gambar agar bisa tampil dalam ukuran yang lebih kecil.

G
oogle menyebut ukuran asli ini sebagai ukuran gambar “intrinsik”.

Misalnya saja, saat publisher mengunggah gambar berukuran 2048 x 1152. Maka ukuran ini disebut dengan ukuran intrinsik. Saat publisher mengubah ukuran gambar tersebut menjadi 640×360 maka ukuran yang tampil ini m
erupakan ukuran yang terlihat.

Untuk keperluan menghitung ukuran gambar, Google menggunakan ukuran yang lebih kecil antara gambar intrinsik dan ukuran yang terlihat. Jadi, trik ini bisa cukup membantu sebenarnya.

Namun untuk
best practice nya, disarankan untuk mengupload gambar yang sama seperti gambar dalam ukuran yang terlihat. Ini akan membuat gambar di-unduh dengan lebih cepat dan skor LCP menjadi lebih optimal.

LCP dalam Menangani Gambar yang Dilayani dari Domain Lain

Gambar yang disajikan dari domain lain, seperti halnya dari CDN, umumnya tidak dihitung dalam perhitungan largest contentful paint. Namun jika publisher ingin sumber daya itu menjadi bagian dari perhitungan, bisa mengaturnya di fitur Timing-Allow-Origin.

Untuk memastikannya, karena ada kemungkinan setiap
layanan CDN berbeda, Anda dapat membaca resource informasi dari CDN yang Anda gunakan. Jika masih belum menemukan informasi yang Anda butuhkan, cobalah untuk berkonsultasi langsung pada layanan CDN Anda.

Cara Menghitung Skor LCP

Semua elemen yang ada di viewport (layar pengguna) digunakan untuk menghitung LCP. Artinya, gambar yang tampil di luar layar dan kemudian masuk ke halaman setelah proses rendering, tidak terhitung sebagai bagian dari skor LCP.

Kebalikannya, elemen yang tampil dari awal viewport kemudian terdorong keluar dari layar bisa dihitung sebagai bagian dari perhitungan LCP.

Dan pertanyaan pentingnya adalah, bagaimana cara mendapatkan skor dalam LCP?

Dalam LCP ini sendiri terdapat dua jenis alat penilaian. Yang pertama a
dalah Field Tools, dan yang kedua adalah Lab Tools.

Field tools adalah pengukuran aktual sebuah website. Sedangkan Lab Tool memberikan skor virtual berdasarkan penjelajahan yang disimulasikan menggunakan algoritma dengan memperkirakan kondisi internet yang mungkin ditemui pengguna pada ponsel.

Cara Optimasi Masalah Largest Contentful Paint

Ini mungkin bagian paling penting yang perlu kita terapkan dalam optimasi website. Setidaknya ada tiga area utama (ditambah satu untuk Javascript Frameworks), yang perlu dioptimasi :

  • Server lambat
  • JavaScript dan CSS pemblokiran render
  • Waktu loading resource/ sumber daya yang lambat
Optimasi Largest Contentful Paint

Server Lambat

Server yang lambat akan membuat waktu render apapun di layar menjadi lebih lama. Sebaliknya, waktu server yang lebih cepat bisa meningkatkan setiap metrik pemuatan satu halaman, termasuk LCP.

Sebelum melakukan perbaikan, cobalah untuk memperbaiki bagaimana dan dimana server Anda menangani konten. Anda bisa menggunakan Time to First Byte (TTFB) untuk mengukur waktu respon server.

Untuk meningkatkan TTFB, berikut ini adalah sejumlah cara berbeda yang bisa Anda coba :

  • Optimalkan server Anda dengan menganalisa dan meningkatkan efisiensi kode dari sisi server
  • Merutekan pengguna ke titik CDN terdekat
  • Kelola aset cache
  • Sajikan halaman HTML dengan halaman cache lebih dulu
  • Buat koneksi pihak ketiga lebih awal

Buat Pemblokiran JavaScript dan CSS

Sebelum browser bisa merender konten apa pun, ia perlu mengurai kode HTML ke dalam DOM tree. Pengurai HTML ini akan berhenti saat bertemu dengan stylesheet eksternal (<link rel = “stylesheet”>) atau tag JavaScript yang sinkron  (<script src = “main.js”>).

Script dan stylesheet keduanya adalah sumber pemblokiran render yang menunda FCP dan berakibat LCP. Maka dari itu, menunda semua javascript dan CSS tidak penting bisa membantu pemuatan konten utama halaman website.

Berikut ini adalah beberapa cara yang bisa Anda lakukan untuk membuat pemblokiran javascript dan CSS :

  • Minify CSS
  • Tunda load CSS tidak penting (Defer non-critical CSS)
  • Sisipkan Inline critical CSS untuk konten bagian atas dengan memasukkannya langsung di bagian <head>
  • Kurangi waktu pencekalan javascript dengan cara unduh dan sajikan jumlah minimal JavaScript yang pengguna perlukan

Untuk problem yang berkaitan dengan CSS yang tidak penting untuk menyajikan apa yang pengguna lihat, tips dari Google adalah :

“Hapus semua CSS yang tidak digunakan seluruhnya atau pindahkan ke stylesheet lain jika digunakan pada halaman terpisah situs Anda.

Untuk CSS apa pun yang tidak p
erlu untuk rendering awal, gunakan loadCSS untuk memuat file secara tidak sinkron, yang memanfaatkan rel = “preload” dan “onload”.

<link rel=”preload” href=”stylesheet.css” as=”style” onload=”this.rel=’stylesheet’”>”

Waktu Loading Resource yang Lambat

Meskipun peningkatan waktu pemblokiran CSS atau Javascript bisa secara langsung berkontribusi pada skor LCP yang buruk, waktu yang diperlukan untuk memuat banyak resource juga mempengaruhi LCP.

Jenis resource ini antara lain :

  • <img> element
  • Elemen/ tag <image> di dalam elemen <svg>
  • Tag <video> (Gambar poster video digunakan untuk mengukur LCP)
  • Elemen dengan gambar latar belakang dimuat melalui fungsi url () (sebagai lawan dari CSS gradient)
  • Juga elemen tingkat blok yang mengandung simpul teks atau elemen teks inline lainnya

Untuk mengurangi loading resource ini, berikut adalah beberapa cara yang bisa kita praktekkan :

  • Optimasi dan kompresi gambar
  • Pre-loading konten tertentu
  • Kompres file teks (Misalnya dengan Gzip)

Tool untuk Mengukur Skor LCP

Tool untuk mengukur largest contentful paint terdiri dari dua jenis, seperti yang Panda ulas di atas tadi. Yaitu terdiri dari Lab Tools dan Field Tools.

Field Tools

Field tool rekomendasi Google untuk mengukur LCP adalah :

Lab Tools

Pengukuran secara lab ini adalah pengukuran yang disimulasikan. Berikut adalah tool rekomendasi dari Google :

Dua tool pertama disediakan oleh Google, dan tool terakhir disediakan oleh pihak ketiga.

Kesimpulan

Pembahasan Largest Contentful Paint mungkin terdengar sangat teknis untuk sebagian orang. Maka dari itu, memang perlu pemahaman dan tindakan teknis untuk melakukan optimasi LCP ini.

Berikut adalah resume dari artikel LCP yang Panda
sajikan :

Apa itu Largest Contentful Paint?

Largest Contentful Paint atau LCP adalah ukuran berapa lama sebuah situs dalam mengunduh konten utama dan siap untuk berinteraksi. 

Apakah Largest Contentful Paint atau LCP ini penting?

Di 2021, Google akan mulai menggunakan LCP sebagai salah satu penentu faktor peringkat. LCP akan menjadi sebuah metrik penting karena bisa secara akurat mengukur seberapa cepat halaman website yang pengguna akses. Selain itu, Google menganggap kalau praktek optimasi metrik ini relatif mudah.

Bagaimana cara menghitung skor LCP?

Ada dua jenis tool yang direkomendasikan Google untuk menghitung nilai LCP. Yang pertama adalah Field Tools dan yang kedua adalah Lab Tools. Rekomendasi tool dapat kamu temukan di bagian “Tool untuk Mengukur Skor LCP” di artikel ini.

Bagaimana cara optimasi Largest Contentful Paint atau LCP?

Setidaknya ada tiga area utama yang menjadi objek optimasi LCP. Anda dapat membacanya lebih lengkap di bagian Optimasi LCP di artikel ini.