Metode yang efektif untuk mengurangi bandwidth (dan dengan demikian waktu pemuatan halaman)?

12

Apa metode yang paling efektif untuk mengurangi jumlah bandwidth yang dibutuhkan situs web untuk membuat halaman?

Caching agresif? Meminimalkan JS / CSS? Gzip? CMS? Sprite?

bandwidth compression Mark Henderson
sumber
Pertanyaan duplikat mendapat jawaban duplikat: webmasters.stackexchange.com/questions/569/…
Bryson
1
Pertanyaan ini pertama kali, jadi yang lain adalah duplikat
Mark Henderson

Jawaban:

10

Beberapa metode dasar yang mudah diterapkan oleh situs web apa pun:

  • Kompres HTML, CSS, dan Javascript Anda dengan deflateatau gzipjika browser yang membuat permintaan mendukungnya.
  • Perkecil javascript Anda dengan Google Closure Compiler
  • Minimalkan css Anda dengan Kompresor YUI

Sedikit lebih terlibat:

  • Jika sebuah halaman atau gambar tidak mungkin berubah, beri tahu browser untuk menyimpannya. Sebagian besar server web sudah melakukan ini untuk file statis, jadi yang harus Anda lakukan adalah menambahkannya ke skrip dinamis Anda jika memungkinkan.
  • Gabungkan file CSS dan JS Anda menjadi satu secara otomatis . Ini menguntungkan karena mengurangi permintaan HTTP (yang memiliki overhead dan yang browser bodoh tertentu - dan maksud saya Internet Explorer - membatasi secara default 2 permintaan pada waktu per domain).
  • Pindahkan file statis Anda (CSS, JS, gambar, dll) ke nama domain yang terpisah. Ini menyebabkan informasi cookie tidak dikirim dalam permintaan HTTP.

  • Gunakan sprite yang dihasilkan secara otomatis . Sprite adalah gambar tunggal yang mengandung banyak ikon atau gambar kecil lainnya; Anda kemudian memilih gambar mana yang akan ditampilkan dengan backgroundproperti CSS . Contoh .

    Keuntungannya adalah bahwa klien membuat lebih sedikit permintaan HTTP (yang memiliki overhead).

Saya berani "secara otomatis" karena jika Anda melakukan hal-hal ini secara manual maka itu pasti tidak sepadan, dan itu membuat pemeliharaan kode mimpi buruk. Biasanya melakukannya secara otomatis berarti menulis skrip khusus, itulah sebabnya "sedikit lebih terlibat",

Thomas Bonini
sumber
Saya akan menjawab, tapi saya pikir Anda sudah membahas semuanya :)
Echo mengatakan Reinstate Monica
overhead memang merupakan hal yang penting untuk dipertimbangkan, untuk file kecil, mereka dapat mewakili persentase yang baik dari data yang ditransfer.
HoLyVieR
Jangan gunakan deflate kecuali Anda juga memeriksa agen pengguna dengan cermat, karena ada bug di Internet Explorer deflate.
@ Kinopiko: ya, saran bagus. Lihat pertanyaan saya tentang stack overflow.
Thomas Bonini
5

Google telah menjabarkan dan menjelaskan rekomendasi mereka untuk meminimalkan Ukuran Payload terbaik . Mereka termasuk teknik-teknik berikut:

  1. Aktifkan kompresi
  2. Hapus CSS yang tidak digunakan
  3. Perkecil JavaScript
  4. Minimalkan CSS
  5. Minify HTML
  6. Tunda pemuatan JavaScript
  7. Optimalkan gambar
  8. Sajikan gambar berskala
  9. Sajikan sumber daya dari URL yang konsisten

Saran-saran ini adalah bagian dari proyek add-on Firefox / Firebug open-source mereka yang disebut Page Speed . Mirip dengan plugin YSlow milik Yahoo ! . Pengaya Kecepatan Halaman aktual akan memeriksa lebih banyak optimasi daripada yang dijelaskan secara rinci di dalam daftar itu. Instruksi untuk Menggunakan Kecepatan Halaman juga disajikan.

Praktik Terbaik Yahoo! Untuk Mempercepat Situs Web Anda mengidentifikasi serangkaian praktik terbaik serupa:

  1. Minimalkan Permintaan HTTP
  2. Gunakan Jaringan Pengiriman Konten
  3. Tambahkan Expire atau Header Cache-Control
  4. Komponen Gzip
  5. Letakkan Stylesheets di Atas
  6. Letakkan Script di Bawah
  7. Hindari Ekspresi CSS
  8. Jadikan JavaScript dan CSS Eksternal
  9. Kurangi Pencarian DNS
  10. ...

(Daftar Yahoo! Panjang ~ 35 item, tidak perlu mengutip secara keseluruhan.)

Baik YSlow (tautan gambar) dan Kecepatan Halaman (tautan gambar) akan memungkinkan Anda untuk menjalankan tes pada halaman Anda, menyarankan hal-hal yang dapat Anda lakukan dan menunjukkan kepada Anda apa, dari rekomendasi mereka, sudah diterapkan.

Bryson
sumber