Panduan Menggunakan HTTP2 di Nginx Server

Panduan menggunakan http/2 di nginx server yang saya gunakan untuk mempercepat loading website dan meringankan beban server

Sebenarnya apakah ini benar-benar dibutuhkan?

Tentu saja jawabannya iya!

Terutama apabila kamu termasuk orang yang peduli dengan kecepatan akses website. Penggunaan http2 di server akan sangat membantu konten di website diakses dengan lebih cepat.

Hal ini akan memberikan pengalaman yang lebih baik kepada pengunjung website. Secara tidak langsung juga dapat membantu memperbaiki hasil tes core web vitals.

Pada kesempatan ini, saya mau berbagi hasil tes sederhana antara server yang menggunakan http/1 dan http/2. Studi kasusnya menggunakan blog panduaji.com ini.

Sehingga bisa dilihat sendiri seberapa banyak perubahannya, terutama pada performance website menggunakan pagespeed web. Sedangkan untuk faktor lain seperti accessibility, best-practices dan seo, kamu bisa coba baca tulisanku tentang panduan optimasi core web vitals.

Apa Itu HTTP2?

HTTP/2 merupakan versi terbaru HTTP/1 yang sudah mulai usang. Pada versi terbaru ini, protokol ini sudah dioptimasi untuk kebutuhan pengunjung modern salah satunya akan membuat website bisa diakses jauh lebih cepat dibandingkan sebelumnya.

Berikut beberapa keuntungan menggunakan HTTP2

• Meningkatkan kinerja situs dengan menggabungkan permintaan dalam satu koneksi TCP.
• Mengakses elemen statis secara paralel.
• Memprioritaskan permintaan berdasarkan pentingnya atau ketergantungannya.
• Mengompresi header HTTP untuk mengurangi informasi yang dipertukarkan antara browser dan server.
• Mengamankan koneksi dengan enkripsi TLS.
• Server Push – mengunduh file tambahan bersamaan dengan dokumen utama. Cache browser bisa dibersihkan atau diperbarui.
• Menyimpan semua sumber daya di dalam cache.
• Menggunakan perintah biner 1 dan 0 untuk menjalankan tugas yang sama.

Cek Status HTTP/2

Kamu bisa cek apakah websitemu sudah mendukung http/2. Saya menggunakan Tools dari KeyCDN untuk memeriksa apakah situ saya sudah mendukung HTTP/2. Berdasarkan hasil pemeriksaan pertama, situs ini belum mendukung http/2 dengan hasil screenshot di bawah ini

Kemudian saya coba cek menggunakan google page speed view, berapa loading page dari sebuah artikel sebelum saya mengaktifkan http/2. Hasilnya tampak seperti pada gambar di bawah ini

Menambahkan HTTP/2 di Server Nginx

Selanjutnya, saya akan menambahkan elemen untuk mengaktifkan http/2 pada server nginx. Buka server block untuk websitemu kemudian cari kode di bawah in

listen 443 ssl;

Setelah menemukan, tambahkan value http2 sehingga tampak seperti kode di bawah ini

listen 443 ssl http2;

Setelah selesai, langkah selanjutnya adalah menyimpan file configuration dan cek apakah ada error pada nginx menggunakan perintah

sudo nginx -t

Kalau nggak ada error, jangan lupa untuk reload / restart nginx dengan perintah

sudo service nginx reload

Setelah berhasil, langkah selanjutnya bisa coba cek ulang di keycdn apakah sudah berhasil melakukan perubahan. Apabila berhasil akan mendapatkan hasil seperti di bawah ini

Jangan lupa cek ulang menggunakan google page speed view, apakah ada perbaikan pada performance situs. Berikut hasil setelah saya cek ulang setelah mengaktifkan http/2 menggunakan google page speed view

Fokus pada performance saja ya teman-teman, karena http/2 hanya mempengaruhi hal tersebut. Sedangkan faktor lain seperti accessibility dan SEO merupakan optimasi core web vitals yang lupa belum saya lakukan pasca mengganti theme.

Oh iya, theme yang saya gunakan saat ini adalah GP Personale. Kalau kamu mau theme yang cepet, bisa coba aja beli

Punya pertanyaan seputar http/2? jangan ragu untuk menuliskannya di kolom komentar. Saya akan jawab satu persatu sesuai dengan apa yang saya pahami.