Mengapa situs besar menyimpan gambar / css mereka di domain eksternal?

43

Mengapa situs seperti Facebook, Twitter, dan Google meng-host gambar dan css mereka pada domain eksternal seperti:

  • Facebook: static.ak.fbcdn.net
  • Kericau: a0.twimg.com
  • Google: ssl.gstatic.com

Pertanyaan:

  • Apakah kinerja? atau Keamanan?
Rick Rhodes
sumber

Jawaban:

53

@toomanyairmiles sebagian benar - tujuan dari teknik ini adalah untuk memungkinkan koneksi paralel dari browser web ke server. Browser web harus memungkinkan minimal dua koneksi simultan ke satu host, tetapi banyak browser baru dapat mengelola hingga 60. Apapun, koneksi simultan bersamaan antara browser dan server web adalah hambatan kecepatan utama.

Dari sumber daya Google :

Spesifikasi HTTP 1.1 (bagian 8.1.4) menyatakan bahwa browser harus mengizinkan paling banyak dua koneksi bersamaan per hostname (walaupun browser yang lebih baru memungkinkan lebih dari itu: lihat Browserscope untuk daftar). Jika dokumen HTML berisi referensi ke lebih banyak sumber daya (mis. CSS, JavaScript, gambar, dll.) Dari jumlah maksimum yang diizinkan pada satu host, browser mengeluarkan permintaan untuk jumlah sumber daya tersebut, dan mengantre sisanya. Segera setelah beberapa permintaan selesai, browser mengeluarkan permintaan untuk sejumlah sumber daya berikutnya dalam antrian. Itu mengulangi proses itu sampai telah mengunduh semua sumber daya. Dengan kata lain, jika sebuah halaman merujuk lebih dari sumber daya eksternal X dari satu host, di mana X adalah koneksi maksimum yang diizinkan per host, browser harus mengunduhnya secara berurutan, X sekaligus, menghasilkan 1 RTT untuk setiap sumber daya X. Total waktu pulang-pergi adalah N / X, di mana N adalah jumlah sumber daya yang harus diambil dari host. Misalnya, jika browser memungkinkan 4 koneksi bersamaan per hostname, dan halaman mereferensikan 100 sumber daya pada domain yang sama, itu akan menimbulkan 1 RTT untuk setiap 4 sumber daya, dan total waktu pengunduhan 25 RTT.

Jadi cara untuk menyiasatinya adalah dengan "membuang" permintaan ke domain yang berbeda, atau host:

Sekali lagi, dari sumber daya Google yang sama:

Seimbangkan sumber daya yang dapat diparalelkan di seluruh nama host. Permintaan untuk sebagian besar sumber daya statis, termasuk gambar, CSS, dan objek biner lainnya, dapat diparalelkan. Saldo meminta semua objek ini sebanyak mungkin di seluruh nama host. Jika itu tidak mungkin, sebagai patokan, cobalah untuk memastikan bahwa tidak ada satu host yang melayani lebih dari 50% lebih dari rata-rata di semua host. Jadi, misalnya, jika Anda memiliki 40 sumber daya, dan 4 host, setiap host idealnya melayani 10 sumber; dalam kasus terburuk, tidak ada host yang harus melayani lebih dari 15. Jika Anda memiliki 100 sumber daya dan 4 host, setiap host harus melayani 25 sumber daya; tidak boleh ada satu host yang melayani lebih dari 38.

Tapi, ada satu lagi teka-teki. Setiap permintaan biasanya dilengkapi dengan overhead sendiri, biasanya dalam bentuk cookie. Elemen statis seperti gambar, CSS dan JavaScript tidak perlu mengirimkan data cookie, jadi melayani mereka dari domain (sub) kurang cookie dapat menghasilkan Round Trips yang lebih cepat:

Konten statis, seperti gambar, file JS dan CSS, tidak perlu disertai dengan cookie, karena tidak ada interaksi pengguna dengan sumber daya ini. Anda dapat mengurangi latensi permintaan dengan menyajikan sumber daya statis dari domain yang tidak melayani cookie. Teknik ini sangat berguna untuk halaman yang mereferensikan konten statis yang jarang di-cache dalam jumlah besar, seperti thumbnail gambar yang sering diubah, atau arsip gambar yang jarang diakses. Kami merekomendasikan teknik ini untuk halaman mana pun yang melayani lebih dari 5 sumber daya statis. (Untuk halaman yang menyajikan sumber daya lebih sedikit dari ini, tidak sepadan dengan biaya menyiapkan domain tambahan.)

Untuk memesan domain tanpa cooki untuk menyajikan konten statis, daftarkan nama domain baru dan konfigurasikan basis data DNS Anda dengan catatan CNAME yang mengarahkan domain baru ke catatan A domain yang ada. Konfigurasikan server web Anda untuk menyajikan sumber daya statis dari domain baru, dan jangan izinkan cookie apa pun disetel di mana pun di domain ini. Di halaman web Anda, referensi nama domain di URL untuk sumber daya statis.

Mike Hudson
sumber
13

Di masa lalu, browser Web hanya dapat mengunduh dua item sekaligus (sekarang 6 atau lebih), sehingga mengunduh sumber daya dari berbagai domain lebih cepat daripada satu domain tunggal. Ini berlaku untuk semua hal, mulai dari gambar hingga javascript.

Banyak perusahaan juga menggunakan CDN , alat yang memastikan pengguna akhir mendapatkan data mereka dari server yang secara geografis dekat dengan mereka, yang juga meningkatkan kinerja situs dengan mengurangi waktu bolak-balik untuk permintaan sumber daya.

toomanyairmiles
sumber
7

Situs besar memindahkan konten statis mereka (gambar, file JS & CSS) ke Jaringan Pengiriman Konten atau CDN karena menyebarkan konten Anda di beberapa server yang tersebar secara geografis akan membuat halaman Anda memuat lebih cepat dari perspektif pengguna.

Karena CDN memiliki nama domain yang berbeda, CDN juga memberikan manfaat domain sharding .

mvark
sumber
3

Pembatasan 2-item tidak lagi menjadi masalah. Meskipun ini merupakan rekomendasi dari spesifikasi HTTP, semua browser modern memungkinkan setidaknya 6 koneksi bersamaan .

seanhussey
sumber
-1

Ini masih diperlukan untuk cookie yang tidak diinginkan yang dikirim ke header saat menggunakan nama domain eksternal tidak memiliki cookie yang ditetapkan, jadi ini jauh lebih cepat untuk memuat konten.

Jadi ya, masih dibutuhkan untuk tujuan kecepatan.

Tonio
sumber
Jawaban yang diterima sudah mengatakan bahwa cookie tidak dikirim untuk domain eksternal. Jawaban ini tidak mengatakan apa pun yang belum dicakup oleh jawaban lain.
Stephen Ostermiller