Bant genişliğini azaltmada etkili yöntemler (ve dolayısıyla sayfa yükleme süreleri)?

Bir web sitesinin bir sayfayı oluşturmak için ihtiyaç duyduğu bant genişliği miktarını azaltma konusunda en etkili yöntemler nelerdir?

Agresif önbellekleme? JS / CSS küçültülüyor mu? Gzip? CMS? Spritelar?

Herhangi bir web sitesi tarafından kolayca uygulanabilen birkaç temel yöntem:

• HTML, CSS ve Javascript'inizi deflateveya gzipisteği yapan tarayıcı destekliyorsa sıkıştırın .
• Google Closure Derleyici ile javascript'inizi küçültün
• YUI Kompresör ile css'nizi küçültün

Biraz daha ilgili:

• Bir sayfanın veya görüntünün değişmesi olası değilse, tarayıcıya önbelleğe almasını söyleyin. Çoğu web sunucusu bunu statik dosyalar için zaten yapar, bu yüzden tek yapmanız gereken bunu mümkün olduğunda dinamik komut dosyalarınıza eklemektir.
• CSS ve JS dosyalarınızı otomatik olarak tek bir dosyada birleştirin . Bu, HTTP isteklerini (yükü olan ve hangi aptal tarayıcıların - yani Internet Explorer demek istediğim - etki alanı başına bir seferde varsayılan olarak 2 istek sınırlaması) azalttığı için avantajlıdır.
• Statik dosyalarınızı (CSS, JS, resimler vb.) Ayrı bir alan adına taşıyın. Bu, HTTP isteğinde çerez bilgilerinin gönderilmemesine neden olur.

• Otomatik olarak oluşturulan spriteları kullanın . Hareketli grafik, birden çok simge veya başka küçük resimler içeren tek bir resimdir; daha sonra CSS backgroundözelliğiyle hangi resmin gösterileceğini seçersiniz . Örnek .

  Avantajı, istemcinin (ek yüke sahip) daha az HTTP isteği yapmasıdır.

Ben "otomatik" cesur çünkü bu şeyler manuel olarak yapıyorsanız o zaman kesinlikle buna değer değil, ve kod bakım bir kabus yapar. Genellikle bunu otomatik olarak yapmak özel bir komut dosyası yazmak anlamına gelir, bu yüzden "biraz daha karmaşık",

Google, Yük Boyutunu En Aza İndirmek için önerilerini açıkladı ve açıkladı . Bunlar aşağıdaki teknikleri içerir:

1. Sıkıştırmayı etkinleştir
2. Kullanılmayan CSS'yi kaldırın
3. JavaScript'i küçültün
4. CSS'yi küçültün
5. HTML'yi küçültün
6. JavaScript yüklemesini erteleme
7. Görüntüleri optimize edin
8. Ölçekli görüntüler sunma
9. Tutarlı bir URL'den kaynak sunma

Bu öneriler, açık kaynaklı Firefox / Firebug eklenti projesinin Sayfa Hızı adlı bir parçasıdır . Yahoo! ' Nun YSlow eklentisine benzer. Gerçek Sayfa Hızı eklentisi, bu listenin ayrıntılı olarak açıkladığından daha fazla optimizasyonu kontrol edecektir. Sayfa Hızı Kullanma Talimatları da sunulmaktadır.

Yahoo! ' Nun Web Sitenizi Hızlandırmaya Yönelik En İyi Uygulamaları benzer benzer en iyi uygulamaları tanımlar:

1. HTTP İsteklerini En Aza İndirin
2. İçerik Dağıtım Ağı Kullanma
3. Süre Sonu veya Önbellek Denetimi Üstbilgisi Ekleme
4. Gzip Bileşenleri
5. Stil Sayfalarını En Üste Yerleştirin
6. Komut Dosyalarını Alta Koy
7. CSS İfadelerinden Kaçının
8. JavaScript ve CSS'yi Harici Yap
9. DNS Aramalarını Azaltın
10. ...

(Yahoo! 'Nun listesi ~ 35 ürün uzunluğunda, bütünüyle alıntı yapmaya gerek yok.)

Hem YSlow (görüntü bağlantısı) hem de Sayfa Hızı (görüntü bağlantısı), sayfalarınızda testler gerçekleştirmenize olanak tanıyarak , yapabileceğiniz şeyleri önerir ve size önerilerinin neler olduğunu zaten gösterir.