Optimasi Situs Hugo

Setelah situs Hugo selesai dibangun, langkah selanjutnya adalah mengoptimasi performa situs agar lebih cepat dan efisien. Hugo menyediakan fitur bawaan seperti Hugo Pipes untuk minifikasi dan fingerprinting, yang dapat digabungkan dengan kompresi aset di server (gzip atau Brotli) untuk hasil maksimal.

Minify CSS dan JavaScript Menggunakan Hugo Pipes

Hugo Pipes adalah fitur bawaan Hugo untuk memproses file CSS dan JavaScript, termasuk minifikasi (menghapus spasi, komentar, dan elemen tidak perlu lainnya) agar ukuran file lebih kecil dan waktu pemuatan lebih cepat.

Minify CSS
Untuk meminify file CSS, gunakan fungsi resources.Minify dalam template. Misalnya, tambahkan di file baseof.html:

{{ $style := resources.Get "css/style.css" | resources.Minify }}
<link rel="stylesheet" href="{{ $style.RelPermalink }}">

Minify JavaScript
Gunakan sintaks yang sama untuk meminify file JavaScript:

{{ $script := resources.Get "js/script.js" | resources.Minify }}
<script src="{{ $script.RelPermalink }}"></script>

Fingerprinting untuk Caching Optimal

Fingerprinting adalah teknik untuk menambahkan hash unik ke file, sehingga browser dapat mengidentifikasi perubahan file dengan mudah. Hal ini mencegah browser menyimpan file yang lama (cache lama) ketika file baru telah diperbarui.

Menambahkan Fingerprint ke CSS dan JavaScript
Gunakan fungsi resources.Fingerprint untuk menambahkan hash unik ke file CSS atau JS:

{{ $style := resources.Get "css/style.css" | resources.Minify | resources.Fingerprint }}
<link rel="stylesheet" href="{{ $style.RelPermalink }}">

{{ $script := resources.Get "js/script.js" | resources.Minify | resources.Fingerprint }}
<script src="{{ $script.RelPermalink }}"></script>

Mendukung Caching Browser
Tambahkan header caching di server web (contoh: Nginx atau Apache) untuk memanfaatkan fingerprinting secara optimal. File yang di-fingerprint hanya akan dimuat ulang ketika hash-nya berubah.

Menjalankan Kompresi Aset di Server

Kompresi aset seperti CSS, JavaScript, dan HTML dapat lebih mengurangi ukuran file yang dikirimkan ke browser, mempercepat waktu loading. Hugo tidak memiliki fitur kompresi bawaan, tetapi ini bisa diatur pada server web.

a. Kompresi Gzip
Untuk Nginx: Tambahkan pengaturan berikut di konfigurasi Nginx (nginx.conf):

gzip on;
gzip_types text/css application/javascript text/html;
gzip_min_length 256;
gzip_proxied any;
gzip_comp_level 6;

Untuk Apache: Tambahkan di file .htaccess:

<IfModule mod_deflate.c>
    AddOutputFilterByType DEFLATE text/css application/javascript text/html
</IfModule>

b. Kompresi Brotli

Brotli adalah alternatif kompresi yang lebih efisien daripada gzip.

Untuk Nginx dengan Brotli:
Tambahkan modul Brotli dan konfigurasi berikut:

brotli on;
brotli_types text/css application/javascript text/html;
brotli_comp_level 6;

Kesimpulan

Dengan menggunakan Hugo Pipes untuk minifikasi dan fingerprinting, serta mengaktifkan kompresi aset di server seperti gzip atau Brotli, kamu dapat mengoptimalkan situs Hugo agar lebih cepat dan efisien. Optimasi ini penting untuk meningkatkan pengalaman pengguna dan peringkat situs di mesin pencari. 🚀