Pengantar

Kecepatan website menjadi salah satu faktor penting dalam pengalaman pengguna. Semakin cepat browser mendapatkan resource seperti CSS, JavaScript, font, dan gambar, semakin cepat pula halaman dapat ditampilkan.

Dalam optimasi web, terdapat dua istilah yang sering dibandingkan, yaitu HTTP/2 Server Push dan Preload. Keduanya sama-sama bertujuan membuat resource penting tersedia lebih cepat, tetapi cara kerjanya berbeda.

HTTP/2 memperkenalkan Server Push agar server dapat mengirim resource yang diperkirakan akan dibutuhkan browser. Namun, teknologi ini ternyata cukup sulit digunakan secara efektif dan kini sudah tidak menjadi pilihan utama pada browser modern. MDN mencatat bahwa Server Push telah dihapus dari sebagian besar browser utama dan digantikan pendekatan seperti rel="preload" dan 103 Early Hints. (dikutip dari: MDN – HTTP/2)

Lalu, apa perbedaan HTTP/2 Server Push dan Preload? Dan mana yang sebaiknya digunakan untuk website modern?

Apa Itu HTTP/2 Server Push?

Konsep Dasar Server Push

HTTP/2 Server Push adalah mekanisme yang memungkinkan server mengirim resource kepada browser sebelum browser secara eksplisit meminta resource tersebut.

Misalnya, browser meminta:

index.html

Server mengetahui bahwa halaman tersebut membutuhkan:

style.css
app.js
font.woff2

Dengan Server Push, server dapat mengirim resource tersebut lebih awal.

Gambaran sederhananya:

Browser
|
| Request index.html
v
Server
|
+—-> index.html
|
+—-> style.css
|
+—-> app.js

Tujuannya adalah mengurangi waktu tunggu karena browser tidak harus menunggu HTML selesai diterima sebelum meminta resource tertentu.

HTTP/2 memang menyediakan mekanisme Server Push melalui frame PUSH_PROMISE. Namun, spesifikasi HTTP/2 juga menjelaskan bahwa mekanisme ini sulit digunakan secara efektif karena server harus memperkirakan resource yang benar-benar akan dibutuhkan client. Kesalahan prediksi dapat menyebabkan penggunaan bandwidth yang tidak perlu. (dikutip dari: RFC 9113 – HTTP/2).

baca juga : Centralized Identity Provider (IdP): Cara Kerja dan Perannya dalam Keamanan Akses Digital

Apa Itu Preload?

Konsep Dasar Preload

Preload adalah mekanisme yang memberi tahu browser bahwa resource tertentu memiliki prioritas dan kemungkinan besar akan segera digunakan.

Contohnya:

<link rel=“preload”
href=“/style.css”
as=“style”>

Dengan kode tersebut, browser diberi petunjuk untuk mengambil style.css lebih awal.

Preload tidak berarti server memaksa browser menerima resource. Browser tetap memiliki kontrol terhadap proses pengambilan resource.

MDN menjelaskan bahwa rel="preload" dapat digunakan untuk memberi tahu browser mengenai resource penting yang perlu diambil lebih awal. Mekanisme serupa juga dapat disampaikan melalui HTTP Link header. (dikutip dari: MDN – Link Header)

Perbedaan Cara Kerja Server Push dan Preload

Perbedaan utama terletak pada siapa yang menentukan resource untuk diambil.

Server Push

Pada Server Push, server mengambil inisiatif untuk mengirim resource.

Browser
|
| Request HTML
v
Server
|
| “Saya kira browser membutuhkan CSS”
v
CSS dikirim

Server mencoba memprediksi kebutuhan browser.

Preload

Pada Preload, browser mendapatkan petunjuk bahwa resource tertentu penting.

Browser
|
| Request HTML
v
HTML
|
| <link rel=”preload”>
v
Browser mengetahui resource penting

Browser kemudian menentukan bagaimana resource tersebut diambil berdasarkan kondisi dan prioritas internalnya.

HTTP/2 Server Push vs Preload

Aspek HTTP/2 Server Push Preload
Pengambil inisiatif Server Browser berdasarkan hint
Teknologi HTTP/2 HTML/HTTP
Kontrol browser Lebih terbatas Lebih besar
Risiko resource tidak terpakai Lebih tinggi Lebih mudah dikontrol
Dukungan browser modern Sangat terbatas Luas
Penggunaan saat ini Tidak direkomendasikan untuk browser umum Lebih relevan
Alternatif modern Preload / Early Hints Preload / Early Hints

Perlu diperhatikan bahwa HTTP/2 Server Push bukan lagi pilihan praktis untuk optimasi web modern. MDN menyebut Server Push telah dihapus dari sebagian besar browser utama.

Mengapa Server Push Kurang Efektif?

Server Sulit Mengetahui Kebutuhan Browser

Server tidak selalu mengetahui resource mana yang benar-benar dibutuhkan.

Misalnya:

Server:
“Browser pasti membutuhkan app.js”
Browser:
“Saya sudah punya app.js di cache.”

Jika server tetap mengirim resource tersebut, bandwidth dapat terbuang.

baca juga : Git Submodule Typosquatting: Ancaman Supply Chain yang Sering Terabaikan Developer

Masalah Cache

Cache browser menjadi salah satu tantangan utama Server Push.

Resource yang sudah dimiliki browser tidak perlu dikirim kembali. Namun, server tidak selalu mengetahui kondisi cache client.

Akibatnya, server dapat mengirim data yang sebenarnya tidak diperlukan.

Risiko Mengganggu Resource Penting

Bandwidth yang digunakan untuk resource yang tidak diperlukan dapat bersaing dengan resource lain yang lebih penting.

RFC 9113 menjelaskan bahwa kesalahan prediksi Server Push dapat menyebabkan performance degradation karena bandwidth yang tersedia digunakan untuk data yang mungkin tidak dibutuhkan.

Mengapa Preload Lebih Populer?

Preload memberikan kontrol yang lebih baik kepada browser.

Developer cukup menentukan resource yang dianggap penting

<link rel=“preload”
href=“/fonts/inter.woff2”
as=“font”
type=“font/woff2”
crossorigin>

Browser kemudian dapat mengambil resource tersebut lebih awal.

Pendekatan ini lebih fleksibel karena browser tetap mempertimbangkan cache, prioritas resource, kondisi jaringan, dan kebutuhan halaman.

Namun, preload juga tidak boleh digunakan secara berlebihan.

Jika terlalu banyak resource diberi preload, browser dapat kehilangan kemampuan menentukan resource mana yang paling penting.

Contoh Penggunaan Preload

Preload Font

Font merupakan salah satu resource yang sering membutuhkan perhatian khusus.

<link rel=“preload”
href=“/fonts/inter.woff2”
as=“font”
type=“font/woff2”
crossorigin>

Penggunaan crossorigin dapat diperlukan untuk resource font tertentu, terutama jika resource berasal dari origin yang berbeda.

Preload CSS

<link rel=“preload”
href=“/css/main.css”
as=“style”>

Namun, developer harus memastikan resource yang dipreload memang akan digunakan.

Preload Gambar Utama

Untuk gambar yang sangat penting bagi tampilan awal halaman, preload dapat digunakan.

<link rel=“preload”
href=“/images/hero.webp”
as=“image”>

Contohnya dapat diterapkan pada gambar utama yang muncul di area above the fold.

Jangan Menggunakan Preload Secara Berlebihan

Preload bukan berarti semakin banyak semakin cepat.

Contoh yang kurang baik:

Preload:
✓ style.css
✓ app.js
✓ analytics.js
✓ image-1.jpg
✓ image-2.jpg
✓ image-3.jpg
✓ font-1.woff2
✓ font-2.woff2

Jika terlalu banyak resource diprioritaskan, browser dapat menghadapi persaingan bandwidth.

Lebih baik fokus pada resource yang benar-benar penting untuk rendering awal.

Contohnya:

Preload:
✓ Critical CSS
✓ Font utama
✓ Hero image

Prinsipnya sederhana:

Preload hanya resource yang benar-benar penting dan akan segera digunakan.

Bagaimana dengan HTTP 103 Early Hints?

Selain Preload, terdapat pendekatan modern bernama 103 Early Hints.

Server dapat mengirim respons sementara sebelum respons utama selesai.

Contohnya:

HTTP/1.1 103 Early Hints
Link: </style.css>; rel=preload; as=style

Browser dapat mulai mengambil resource tersebut sebelum server menyelesaikan respons utama.

MDN menjelaskan bahwa 103 Early Hints memungkinkan browser melakukan preload atau preconnect ketika server masih mempersiapkan respons final.

Secara sederhana:

Browser
|
| Request
v
Server
|
| 103 Early Hints
|——————–>
| preload CSS
|
| Menyiapkan HTML
|
| 200 OK
|——————–>
| HTML

Pendekatan ini berbeda dari Server Push karena server memberikan hint, bukan langsung memaksa resource dikirim sebagai pushed response.

Mana yang Lebih Baik untuk Website Modern?

Untuk website modern, terutama website berbasis WordPress seperti Buletin Siber, pendekatan yang lebih relevan adalah:

Preload + caching + HTTP/2 atau HTTP/3 + optimasi resource.

Server Push sebaiknya tidak dijadikan fokus utama karena dukungan browser modern terhadap mekanisme tersebut sudah sangat terbatas.

Preload dapat digunakan untuk resource yang benar-benar penting, sedangkan resource lainnya sebaiknya dibiarkan mengikuti mekanisme loading normal browser.

Jika server dan CDN mendukungnya, 103 Early Hints juga dapat dipertimbangkan sebagai teknik optimasi tambahan.

Tips Preload untuk Website WordPress

Prioritaskan Resource Kritis

Identifikasi resource yang benar-benar memengaruhi tampilan awal.

Contohnya:

  • Font utama.
  • CSS kritis.
  • Hero image.
  • Resource yang diperlukan untuk rendering awal.

Hindari Preload Berlebihan

Jangan memberikan preload kepada semua file.

Terlalu banyak preload justru dapat mengurangi manfaat optimasi.

Perhatikan Format Resource

Pastikan atribut as sesuai dengan resource.

Contoh:

as=”style”
as=”script”
as=”font”
as=”image”

Informasi tersebut membantu browser memahami jenis resource yang akan diambil.

Uji dengan Performance Tools

Setelah melakukan optimasi, jangan hanya mengandalkan asumsi.

Gunakan tools seperti:

  • Lighthouse.
  • Chrome DevTools.
  • PageSpeed Insights.
  • WebPageTest.

Bandingkan hasil sebelum dan sesudah optimasi.

Hubungan dengan Core Web Vitals

Optimasi resource dapat berpengaruh terhadap pengalaman pengguna dan metrik Core Web Vitals.

Resource yang lebih cepat tersedia dapat membantu proses rendering halaman.

Namun, preload bukan solusi untuk semua masalah performa.

Jika website memiliki:

  • JavaScript terlalu banyak.
  • Gambar berukuran besar.
  • CSS tidak efisien.
  • Server lambat.
  • Plugin WordPress terlalu banyak.

Maka penggunaan preload saja tidak akan menyelesaikan masalah.

Optimasi performa harus dilakukan secara menyeluruh.

baca juga : Return-to-libc Attack: Teknik Eksploitasi yang Memanfaatkan Fungsi Library untuk Membajak Alur Program

Kesimpulan

HTTP/2 Server Push dan Preload memiliki tujuan yang sama, yaitu membantu resource penting tersedia lebih cepat, tetapi keduanya bekerja dengan pendekatan berbeda.

Server Push memungkinkan server mengirim resource sebelum browser memintanya. Namun, mekanisme ini sulit diprediksi dan dapat membuang bandwidth. Karena itu, Server Push sudah tidak menjadi pilihan utama pada browser modern.

Sementara itu, Preload memberikan hint kepada browser mengenai resource yang penting. Pendekatan ini lebih fleksibel dan masih relevan untuk optimasi website modern.

Untuk website seperti Buletin Siber, penggunaan preload sebaiknya difokuskan pada resource yang benar-benar penting, seperti font utama, CSS kritis, atau hero image.

Jika infrastruktur mendukungnya, 103 Early Hints juga dapat menjadi alternatif modern untuk membantu browser mulai mengambil resource lebih awal.

Jadi, jika harus memilih, Preload lebih direkomendasikan dibandingkan HTTP/2 Server Push untuk optimasi website modern.

Related Posts: