Karena, dalam contoh Anda, server web akan selalu mengirim CSS dan gambar terlepas dari apakah klien sudah memilikinya, sehingga sangat membuang bandwidth (dan dengan demikian membuat koneksi lebih lambat , bukannya lebih cepat dengan mengurangi latensi, yang mungkin merupakan niat Anda). Perhatikan bahwa file CSS, JavaScript, dan gambar biasanya dikirim dengan waktu kedaluwarsa yang sangat lama karena alasan itu (seperti ketika Anda perlu mengubahnya, Anda cukup mengubah nama file untuk memaksa salinan baru yang lagi-lagi akan di-cache untuk waktu yang lama).
Sekarang, Anda dapat mencoba mengatasi pemborosan bandwidth dengan mengatakan " OK, tetapi klien dapat mengindikasikan bahwa ia sudah memiliki beberapa sumber daya, sehingga server tidak akan mengirimnya lagi ". Sesuatu seperti:
GET /index.html HTTP/1.1
Host: www.example.com
If-None-Match: "686897696a7c876b7e"
Connection: Keep-Alive
GET /style.css HTTP/1.1
Host: www.example.com
If-None-Match: "70b26618ce2c246c71"
GET /image.png HTTP/1.1
Host: www.example.com
If-None-Match: "16d5b7c2e50e571a46"
Dan kemudian dapatkan hanya file yang tidak berubah yang dikirim melalui satu koneksi TCP (menggunakan pipelining HTTP melalui koneksi persisten). Dan coba tebak? Ini adalah cara yang sudah bekerja (Anda juga bisa menggunakan Jika-Diubah-Sejak bukannya Jika-Tidak-Match ).
Tetapi jika Anda benar-benar ingin mengurangi latensi dengan membuang banyak bandwidth (seperti dalam permintaan awal Anda), Anda dapat melakukannya hari ini menggunakan standar HTTP / 1.1 ketika merancang situs web Anda. Alasan kebanyakan orang tidak melakukannya adalah karena mereka tidak berpikir itu sepadan.
Untuk melakukannya, Anda tidak perlu memiliki CSS atau JavaScript dalam file terpisah, Anda dapat memasukkannya ke dalam file HTML utama dengan menggunakan <style>
dan <script>
tag (Anda mungkin bahkan tidak perlu melakukannya secara manual, mesin template Anda mungkin dapat melakukannya secara otomatis) . Anda bahkan dapat memasukkan gambar dalam file HTML menggunakan data URI , seperti ini:
<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==" alt="Red dot" />
Tentu saja, pengkodean base64 sedikit meningkatkan penggunaan bandwidth, tetapi jika Anda tidak peduli dengan bandwidth yang terbuang, itu seharusnya tidak menjadi masalah.
Sekarang, jika Anda benar-benar peduli, Anda bahkan dapat membuat skrip web Anda cukup pintar untuk mendapatkan yang terbaik dari kedua dunia: berdasarkan permintaan pertama (pengguna tidak memiliki cookie), kirim semuanya (CSS, JavaScript, gambar) yang disematkan hanya dalam satu HTML tunggal file seperti dijelaskan di atas, tambahkan tautan tautan = "prefetch" untuk salinan eksternal file, dan tambahkan cookie. Jika pengguna sudah memiliki cookie (mis. Dia telah mengunjungi sebelumnya), maka kirimkan dia hanya HTML biasa dengan <img src="example.jpg">
, <link rel="stylesheet" type="text/css" href="style.css">
dll.
Jadi pada kunjungan pertama browser akan meminta hanya satu file HTML dan mendapatkan dan menampilkan semuanya. Maka akan (saat idle) memuat gambar CSS, JS, eksternal yang ditentukan. Kali berikutnya pengguna mengunjungi, browser akan meminta dan hanya mendapatkan sumber daya yang diubah (mungkin hanya HTML baru).
Data gambar CSS + JS + tambahan hanya akan dikirim dua kali, bahkan jika Anda mengklik ratusan kali di situs web. Jauh lebih baik daripada ratusan kali seperti yang disarankan solusi Anda. Dan itu tidak akan pernah (bukan pada pertama kali, atau pada kali berikutnya) menggunakan lebih dari satu perjalanan pulang-pergi latensi yang meningkat.
Sekarang, jika itu terdengar seperti terlalu banyak pekerjaan, dan Anda tidak ingin menggunakan protokol lain seperti SPDY , sudah ada modul seperti mod_pagespeed untuk Apache, yang secara otomatis dapat melakukan beberapa pekerjaan itu untuk Anda (menggabungkan beberapa file CSS / JS menjadi satu, masukkan CSS kecil secara otomatis dan minimalkan, buat gambar placeholder kecil bergaris sambil menunggu dokumen asli dimuat, malas memuat gambar dll.) tanpa mengharuskan Anda memodifikasi satu baris halaman web Anda.