Pagi ini, Sabtu, 15 Maret 2025, saya berencana melakukan optimasi website menggunakan plugin WP Rocket. Salah satu fitur yang menarik perhatian saya adalah opsi "Combine CSS".
Saya mengetahui bahwa fitur "Combine CSS" berfungsi untuk menggabungkan semua file CSS menjadi satu, dengan tujuan mengurangi jumlah permintaan HTTP (HTTP requests) dan meningkatkan kecepatan website.
Namun, saat membaca deskripsinya, saya melihat peringatan: "Not recommended if your site uses HTTP/2." Hal ini membuat saya penasaran dan memutuskan untuk melakukan pengecekan menggunakan alat uji HTTP/2 di situs KeyCDN HTTP/2 Test.
Hasilnya menunjukkan bahwa website saya sudah mendukung protokol HTTP/2 dan ekstensi ALPN.
Apa Itu HTTP/2?
HTTP/2 adalah pembaruan besar pertama pada protokol HTTP sejak HTTP/1.1 diterbitkan pada tahun 1997. Protokol ini dirancang untuk mengatasi pertumbuhan pesat web dan membawa berbagai peningkatan pada efisiensi, kecepatan, dan keamanan.
1. Bentuk Biner
HTTP/2 menggunakan format biner, bukan teks seperti HTTP/1.1. Hal ini membuat komunikasi antara server dan browser lebih efisien karena data dikodekan dalam format yang lebih ringkas dan cepat diproses.
2. Multiplexing
Dengan fitur multiplexing, HTTP/2 memungkinkan banyak permintaan dikirim secara paralel melalui satu koneksi TCP. Pada HTTP/1.1, setiap permintaan biasanya harus menunggu giliran untuk diproses, tetapi dengan HTTP/2, beberapa permintaan dapat dikirim dan diproses secara bersamaan, mengurangi waktu tunggu dan mempercepat pemuatan halaman.
3. Kompresi Header (HPACK)
HTTP/2 menggunakan teknologi HPACK untuk mengompresi header, yang merupakan bagian metadata dari setiap permintaan HTTP. Dengan mengurangi ukuran header, HTTP/2 mengurangi overhead dan mempercepat transfer data antara server dan browser.
4. Server Push
Server push memungkinkan server mengirimkan data ke browser sebelum diminta oleh pengguna. Misalnya, jika browser meminta halaman utama, server dapat secara proaktif mengirimkan file CSS atau JavaScript yang diperlukan tanpa harus menunggu permintaan tambahan dari browser. Hal ini mengurangi waktu loading halaman.
5. Ekstensi ALPN (Application Layer Protocol Negotiation)
ALPN adalah teknologi yang memungkinkan negosiasi protokol lebih cepat saat membuat koneksi terenkripsi (misalnya, HTTPS). Dengan ALPN, server dan browser dapat langsung menentukan bahwa mereka akan menggunakan HTTP/2 selama proses handshake TLS, mempercepat waktu koneksi.
6. Pengurangan Round Trip Time (RTT)
Dengan HTTP/2, jumlah perjalanan bolak-balik (RTT) antara server dan browser berkurang, sehingga website dapat dimuat lebih cepat. HTTP/1.1 memerlukan lebih banyak RTT untuk menangani beberapa permintaan sekaligus, sedangkan HTTP/2 mengoptimalkannya dengan fitur multiplexing.
Apa Itu HTTP/1.1?
Sebelum HTTP/2, protokol yang paling banyak digunakan adalah HTTP/1.1, yang diperkenalkan pada tahun 1997. Protokol ini memiliki beberapa keterbatasan, di antaranya:
- Koneksi Terpisah untuk Setiap Permintaan: Setiap file (gambar, CSS, JavaScript) memerlukan permintaan HTTP terpisah, yang memperlambat pemuatan halaman karena terlalu banyak permintaan ke server.
- Head-of-Line Blocking: Jika satu permintaan mengalami keterlambatan, permintaan lain yang berada dalam antrean akan ikut tertunda.
- Overhead Header yang Besar: Setiap permintaan HTTP memiliki header yang besar, menyebabkan peningkatan data yang dikirim bolak-balik antara server dan browser.
Perbedaan HTTP/1.1 dan HTTP/2
1. Bentuk Biner
HTTP/2 menggunakan format biner, bukan teks seperti HTTP/1.1. Hal ini membuat komunikasi antara server dan browser lebih efisien karena data dikodekan dalam format yang lebih ringkas dan cepat diproses.
2. Multiplexing
Dengan fitur multiplexing, HTTP/2 memungkinkan banyak permintaan dikirim secara paralel melalui satu koneksi TCP. Pada HTTP/1.1, setiap permintaan biasanya harus menunggu giliran untuk diproses, tetapi dengan HTTP/2, beberapa permintaan dapat dikirim dan diproses secara bersamaan, mengurangi waktu tunggu dan mempercepat pemuatan halaman.
3. Kompresi Header (HPACK)
HTTP/2 menggunakan teknologi HPACK untuk mengompresi header, yang merupakan bagian metadata dari setiap permintaan HTTP. Dengan mengurangi ukuran header, HTTP/2 mengurangi overhead dan mempercepat transfer data antara server dan browser.
4. Server Push
Server push memungkinkan server mengirimkan data ke browser sebelum diminta oleh pengguna. Misalnya, jika browser meminta halaman utama, server dapat secara proaktif mengirimkan file CSS atau JavaScript yang diperlukan tanpa harus menunggu permintaan tambahan dari browser. Hal ini mengurangi waktu loading halaman.
5. Ekstensi ALPN (Application Layer Protocol Negotiation)
ALPN adalah teknologi yang memungkinkan negosiasi protokol lebih cepat saat membuat koneksi terenkripsi (misalnya, HTTPS). Dengan ALPN, server dan browser dapat langsung menentukan bahwa mereka akan menggunakan HTTP/2 selama proses handshake TLS, mempercepat waktu koneksi.
6. Pengurangan Round Trip Time (RTT)
Dengan HTTP/2, jumlah perjalanan bolak-balik (RTT) antara server dan browser berkurang, sehingga website dapat dimuat lebih cepat. HTTP/1.1 memerlukan lebih banyak RTT untuk menangani beberapa permintaan sekaligus, sedangkan HTTP/2 mengoptimalkannya dengan fitur multiplexing.
Mengapa Fitur "Combine CSS" di WP Rocket Tidak Disarankan untuk HTTP/2?
Karena HTTP/2 mendukung multiplexing, penggabungan file CSS menjadi satu tidak lagi memberikan manfaat signifikan seperti pada HTTP/1.1. Justru, jika kamu menggabungkan semua file CSS, hal ini bisa memperlambat waktu pemuatan halaman karena browser harus menunggu file gabungan tersebut selesai dimuat sebelum merender halaman.
Apa yang Harus Kamu Lakukan?
1. Periksa Dukungan HTTP/2
Gunakan alat seperti KeyCDN HTTP/2 Test untuk memastikan apakah website kamu sudah mendukung HTTP/2.
Jika hasilnya hijau seperti pada gambar di atas, maka kamu tidak perlu mengaktifkan fitur "Combine CSS" pada plugin WP Rocket.
2. Evaluasi Pengaturan WP Rocket
Jika website kamu sudah menggunakan HTTP/2, sebaiknya kamu tidak mengaktifkan fitur "Combine CSS" karena bisa berlawanan dengan manfaat protokol HTTP/2.
3. Fokus pada Optimasi Lain
Sebagai gantinya, pertimbangkan fitur WP Rocket lainnya seperti Minify CSS, Remove Unused CSS, atau Lazy Load untuk hasil yang lebih optimal.
Menggabungkan atau Combine CSS perlu atau Tidak?
Saat menggunakan HTTP/1.1, penggabungan file (concatenation) menjadi praktik yang disarankan untuk mengurangi jumlah permintaan HTTP. Namun, pada HTTP/2, praktik ini tidak lagi diperlukan karena protokol ini dapat menangani banyak permintaan sekaligus dengan lebih efisien.
Meskipun ada perdebatan apakah menggabungkan file dalam kelompok kecil masih bermanfaat, sebaiknya kamu menguji waktu muat website dengan dan tanpa penggabungan file untuk melihat mana yang lebih optimal.
WP Rocket sendiri memberikan pengingat bahwa jika website kamu menggunakan HTTP/2, kamu tidak disarankan mengaktifkan fitur "Combine CSS" atau "Combine JavaScript".
Jika server kamu masih menggunakan HTTP/1.1, kamu bisa mencoba mengaktifkannya. Namun, perlu diperhatikan bahwa pengaturan ini tidak selalu kompatibel dengan semua tema atau plugin.
Mengapa PageSpeed Insights atau GTmetrix Masih Menyarankan Penggabungan File?
Beberapa alat pengujian kecepatan seperti PageSpeed Insights, Pingdom Tools, atau GTmetrix mungkin masih menyarankan penggabungan file CSS/JS. Hal ini terjadi karena alat-alat tersebut belum selalu menyesuaikan rekomendasi mereka berdasarkan deteksi HTTP/1 atau HTTP/2.
Jadi, jangan hanya fokus pada skor PageSpeed Insights, tetapi perhatikan waktu pemuatan aktual website untuk mendapatkan hasil terbaik.
Domain Sharding Tidak Lagi Dibutuhkan
Domain sharding adalah teknik membagi aset ke beberapa subdomain untuk mempercepat pemuatan halaman. Pada HTTP/2, praktik ini tidak lagi efektif karena HTTP/2 dapat menangani banyak permintaan melalui satu koneksi TCP.
Apakah Masih Perlu CDN?
Meskipun CDN sering kali menggunakan domain sharding, CDN tetap penting di era HTTP/2. CDN membantu mempercepat akses website dengan menyajikan aset dari lokasi server yang lebih dekat dengan pengguna. Namun, tidak perlu lagi membuat beberapa subdomain hanya untuk melayani aset statis karena hal tersebut justru dapat menambah waktu DNS lookup.
Pengalaman ini mengajarkan saya bahwa meskipun fitur "Combine CSS" terdengar menarik, memilih pengaturan yang tepat harus disesuaikan dengan kondisi teknis website, termasuk apakah website tersebut sudah menggunakan protokol HTTP/2. Dengan memahami bagaimana WP Rocket berinteraksi dengan HTTP/2, kamu bisa membuat keputusan yang lebih bijak untuk meningkatkan performa website kamu.
Tidak ada komentar:
Posting Komentar